chore: add example component

components/button/src/button/button.js

@@ -1,5 +1,6 @@
 import { CircularLoader } from '@dhis2-ui/loader'
 import { sharedPropTypes } from '@dhis2/ui-constants'
+import { NativeButton } from '../index.js'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useRef } from 'react'
@@ -55,7 +56,7 @@ export const Button = ({
     })
 
     return (
-        <button
+        <NativeButton
             ref={ref}
             name={name}
             className={buttonClassName}
@@ -80,7 +81,7 @@ export const Button = ({
             {icon && <span className="button-icon">{icon}</span>}
             {children}
             <style jsx>{styles}</style>
-        </button>
+        </NativeButton>
     )
 }
 

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

@@ -2,77 +2,6 @@ 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};
-    }
-
     .small {
         height: 28px;
         padding: 0 6px;

components/button/src/native-button/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};
+    }
+`

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,19 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import styles from './button.styles.js'
+
+export const NativeButton = forwardRef(function NativeButton(props, ref) {
+    const { children, ...rest } = props
+
+    return (
+        <button ref={ref} {...rest}>
+            {children}
+            <style jsx>{styles}</style>
+        </button>
+    )
+})
+
+NativeButton.propTypes = {
+    /** Component to render inside the button */
+    children: PropTypes.node,
+}