chore: add example component

dhis2 · Jan 24, 2024 · 94123d2 · 94123d2
1 parent a2d2fc6
commit 94123d2
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 79 deletions.
diff --git a/collections/forms/i18n/en.pot b/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"

diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
@@ -3,7 +3,8 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 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,
@@ -43,7 +44,7 @@ export const Button = ({
         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 @@ export const Button = ({
     })
 
     return (
-        <button
+        <NativeButton
             ref={ref}
             name={name}
             className={buttonClassName}
@@ -79,8 +80,8 @@ export const Button = ({
             )}
             {icon && <span className="button-icon">{icon}</span>}
             {children}
-            <style jsx>{styles}</style>
-        </button>
+            {styles}
+        </NativeButton>
     )
 }
 

diff --git a/components/button/src/button/button.styles.js b/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;

diff --git a/components/button/src/index.js b/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'
diff --git a/components/button/src/native-button/index.js b/components/button/src/native-button/index.js
@@ -0,0 +1 @@
+export { NativeButton } from './native-button.js'
diff --git a/components/button/src/native-button/native-button.js b/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,
+}
diff --git a/components/button/src/native-button/native-button.styles.js b/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};
+    }
+`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { NativeButton } from './native-button.js'