chore: add example component

collections/forms/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-05-05T12:46:11.864Z\n"
-"PO-Revision-Date: 2023-05-05T12:46:11.864Z\n"
+"POT-Creation-Date: 2024-01-24T11:34:21.463Z\n"
+"PO-Revision-Date: 2024-01-24T11:34:21.469Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

components/button/src/button/__tests__/Button.test.js

@@ -8,7 +8,7 @@ describe('<Button>', () => {
         const dataTest = 'dhis2-uicore-button'
         const wrapper = mount(<Button dataTest={dataTest} />)
 
-        const actual = wrapper.find({ 'data-test': dataTest })
+        const actual = wrapper.find('button').find({ 'data-test': dataTest })
 
         expect(actual.length).toBe(1)
     })
@@ -17,7 +17,7 @@ describe('<Button>', () => {
         const dataTest = 'button-data-test'
         const wrapper = mount(<Button dataTest={dataTest} />)
 
-        const actual = wrapper.find({ 'data-test': dataTest })
+        const actual = wrapper.find('button').find({ 'data-test': dataTest })
 
         expect(actual.length).toBe(1)
     })

components/button/src/button/button.js

@@ -3,7 +3,8 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useRef } from 'react'
-import styles from './button.styles.js'
+import { NativeButton } from '../index.js'
+import { className as styledClassName, styles } from './button.styles.js'
 
 export const Button = ({
     children,
@@ -34,7 +35,7 @@
         if (initialFocus && ref.current) {
             ref.current.focus()
         }
     }, [initialFocus, ref.current])
 
     const handleClick = (event) => onClick && onClick({ value, name }, event)
     const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
@@ -43,7 +44,7 @@
         onKeyDown && onKeyDown({ value, name }, event)
 
     const iconOnly = icon && !children
-    const buttonClassName = cx(className, {
+    const buttonClassName = cx(className, styledClassName, {
         primary,
         secondary,
         destructive,
@@ -55,7 +56,7 @@
     })
 
     return (
-        <button
+        <NativeButton
             ref={ref}
             name={name}
             className={buttonClassName}
@@ -79,8 +80,8 @@
             )}
             {icon && <span className="button-icon">{icon}</span>}
             {children}
-            <style jsx>{styles}</style>
-        </button>
+            {styles}
+        </NativeButton>
     )
 }
 

components/button/src/button/button.styles.js

@@ -1,78 +1,7 @@
 import { colors, theme, spacers } from '@dhis2/ui-constants'
 import css from 'styled-jsx/css'
 
-export default css`
-    button {
-        display: inline-flex;
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        font-weight: 400;
-        letter-spacing: 0.5px;
-        text-decoration: none;
-        cursor: pointer;
-        user-select: none;
-        color: ${colors.grey900};
-
-        /*medium*/
-        height: 36px;
-        padding: 0 ${spacers.dp12};
-        font-size: 14px;
-        line-height: 16px;
-
-        /*basic*/
-        border: 1px solid ${colors.grey500};
-        background-color: #f9fafb;
-    }
-
-    button:disabled {
-        cursor: not-allowed;
-    }
-
-    button:focus {
-        outline: 3px solid ${theme.focus};
-        outline-offset: -3px;
-        text-decoration: underline;
-    }
-
-    /* Prevent focus styles when mouse clicking */
-    button:focus:not(:focus-visible) {
-        outline: none;
-        text-decoration: none;
-    }
-
-    /* Prevent focus styles on active and disabled buttons */
-    button:active:focus,
-    button:disabled:focus {
-        outline: none;
-        text-decoration: none;
-    }
-
-    button:hover {
-        border-color: ${colors.grey500};
-        background-color: ${colors.grey200};
-    }
-
-    button:active,
-    button:active:focus {
-        border-color: ${colors.grey500};
-        background-color: ${colors.grey200};
-        box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.1) inset;
-    }
-
-    button:focus {
-        background-color: #f9fafb;
-    }
-
-    button:disabled {
-        border-color: ${colors.grey400};
-        background-color: #f9fafb;
-        box-shadow: none;
-        color: ${theme.disabled};
-        fill: ${theme.disabled};
-    }
-
+export const { className, styles } = css.resolve`
     .small {
         height: 28px;
         padding: 0 6px;

components/button/src/index.js

@@ -1,4 +1,5 @@
 export { Button } from './button/index.js'
+export { NativeButton } from './native-button/index.js'
 export { ButtonStrip } from './button-strip/index.js'
 export { SplitButton } from './split-button/index.js'
 export { DropdownButton } from './dropdown-button/index.js'

components/button/src/native-button/index.js

@@ -0,0 +1 @@
+export { NativeButton } from './native-button.js'

components/button/src/native-button/native-button.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import styles from './native-button.styles.js'
+
+export const NativeButton = forwardRef(function NativeButton(props, ref) {
+    const { children, className, ...rest } = props
+
+    return (
+        <button className={className} ref={ref} {...rest}>
+            {children}
+            <style jsx>{styles}</style>
+        </button>
+    )
+})
+
+NativeButton.propTypes = {
+    /** Component to render inside the button */
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

components/button/src/native-button/native-button.stories.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { NativeButton } from './native-button.js'
+
+export default {
+    title: 'Native Button',
+    component: NativeButton,
+}
+
+const Template = (args) => <NativeButton {...args} />
+
+export const Basic = Template.bind({})
+Basic.args = {
+    name: 'Basic button',
+    children: 'Label me!',
+}

components/button/src/native-button/native-button.styles.js

@@ -0,0 +1,71 @@
+import { colors, theme, spacers } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    button {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        text-decoration: none;
+        cursor: pointer;
+        user-select: none;
+        color: ${colors.grey900};
+        height: 36px;
+        padding: 0 ${spacers.dp12};
+        font-size: 14px;
+        line-height: 16px;
+        border: 1px solid ${colors.grey500};
+        background-color: #f9fafb;
+    }
+
+    button:disabled {
+        cursor: not-allowed;
+    }
+
+    button:focus {
+        outline: 3px solid ${theme.focus};
+        outline-offset: -3px;
+        text-decoration: underline;
+    }
+
+    /* Prevent focus styles when mouse clicking */
+    button:focus:not(:focus-visible) {
+        outline: none;
+        text-decoration: none;
+    }
+
+    /* Prevent focus styles on active and disabled buttons */
+    button:active:focus,
+    button:disabled:focus {
+        outline: none;
+        text-decoration: none;
+    }
+
+    button:hover {
+        border-color: ${colors.grey500};
+        background-color: ${colors.grey200};
+    }
+
+    button:active,
+    button:active:focus {
+        border-color: ${colors.grey500};
+        background-color: ${colors.grey200};
+        box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.1) inset;
+    }
+
+    button:focus {
+        background-color: #f9fafb;
+    }
+
+    button:disabled {
+        border-color: ${colors.grey400};
+        background-color: #f9fafb;
+        box-shadow: none;
+        color: ${theme.disabled};
+        fill: ${theme.disabled};
+    }
+`