@dhis2-ui/segmented-control 10.16.2 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/segmented-control",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Segmented Control",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/index.js

@@ -0,0 +1 @@
+export { SegmentedControl } from './segmented-control.js'

package/src/segmented-control.js

@@ -0,0 +1,124 @@
+import { colors, elevations, spacers, theme } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import { PropTypes } from 'prop-types'
+import React from 'react'
+
+/**
+A segmented control is used to select between options that relate to another
+area of content. All of the options in a segmented control should be closely related.
+
+Do not use a segmented control as a standalone selection, it should always be
+used as a selector for other content. For example, do not use a segmented
+control in place of radio buttons when making a single, standalone choice.
+
+See specification: [Design System](https://github.com/dhis2/design-system/blob/master/molecules/segmented-control.md)
+
+```js
+import { SegmentedControl } from '@dhis2/ui'
+```
+*/
+
+export const SegmentedControl = ({
+    options,
+    selected,
+    onChange,
+    ariaLabel,
+}) => {
+    if (!options.map(({ value }) => value).includes(selected)) {
+        const message =
+            `There is no option with the value: "${selected}". ` +
+            'Make sure that the value passed to the selected ' +
+            'prop matches the value of an existing option.'
+        throw new Error(message)
+    }
+
+    return (
+        <ul className="segmented-control" aria-label={ariaLabel}>
+            {options.map(({ label, value, disabled }) => (
+                <li key={`option-${value}`}>
+                    <button
+                        type="button"
+                        className={cx('segment', {
+                            selected: value === selected,
+                            disabled,
+                        })}
+                        onClick={(e) => onChange({ value }, e)}
+                        disabled={disabled}
+                    >
+                        {label}
+                    </button>
+                </li>
+            ))}
+
+            <style jsx>{`
+                .segmented-control {
+                    all: unset;
+                    list-style: none;
+                    display: inline-flex;
+                    align-items: stretch;
+                    background: ${colors.grey300};
+                    border-radius: 5px;
+                    padding: 2px;
+                }
+
+                .segment {
+                    all: unset;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    font-size: 14px;
+                    text-align: center;
+                    border-radius: 5px;
+                    background: transparent;
+                    color: ${colors.grey700};
+                    min-width: 72px;
+                    max-width: 320px;
+                    height: 100%;
+                    padding: 6px ${spacers.dp12};
+                }
+
+                .segment:focus {
+                    outline: 3px solid ${theme.focus};
+                    outline-offset: -3px;
+                }
+                /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
+                .segment:focus:not(:focus-visible) {
+                    outline: none;
+                }
+
+                .segment:not(.selected):not(.disabled):hover {
+                    background: ${colors.grey400};
+                    color: ${colors.grey900};
+                }
+
+                .segment.selected {
+                    cursor: default;
+                    box-shadow: ${elevations.e100};
+                    background: ${colors.white};
+                    color: ${colors.grey900};
+                }
+
+                .segment.disabled {
+                    cursor: not-allowed;
+                    opacity: 0.5;
+                }
+            `}</style>
+        </ul>
+    )
+}
+
+SegmentedControl.propTypes = {
+    /** Options to populate the segmented control */
+    options: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.string.isRequired,
+            disabled: PropTypes.bool,
+        })
+    ).isRequired,
+    /** An option to select; should match the `value` property of the option to be selected */
+    selected: PropTypes.string.isRequired,
+    /** Called with the signature `({ value: string }, event)` */
+    onChange: PropTypes.func.isRequired,
+    /** Used to provide an accessible label to a segmented control without a visible label */
+    ariaLabel: PropTypes.string,
+}

package/src/segmented-control.prod.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { SegmentedControl } from './segmented-control.js'
+
+const logger = ({ value }) => console.log(`Selected value: ${value}`)
+
+export default {
+    title: 'Segmented Control',
+    component: SegmentedControl,
+    parameters: {
+        componentSubtitle: 'Allows selection between related options',
+    },
+    args: {
+        options: [
+            { label: 'Dog', value: 'DOG' },
+            { label: 'Cat', value: 'CAT' },
+            { label: 'Giraffe', value: 'GIRAFFE' },
+        ],
+        selected: 'DOG',
+        onChange: logger,
+        ariaLabel: 'Segmented control label',
+    },
+}
+
+const Template = (args) => <SegmentedControl {...args} />
+
+export const Default = Template.bind({})
+
+export const DisabledOption = Template.bind({})
+DisabledOption.args = {
+    options: [
+        { label: 'One', value: 'ONE' },
+        { label: 'Two', value: 'TWO', disabled: true },
+        { label: 'Three', value: 'THREE' },
+    ],
+    selected: 'THREE',
+}
+
+export const LongLabels = Template.bind({})
+LongLabels.args = {
+    options: [
+        {
+            label: 'Program configuration, security, and distribution',
+            value: 'PROGRAM',
+        },
+        { label: 'Two', value: 'TWO' },
+        { label: 'Three', value: 'THREE' },
+    ],
+    selected: 'PROGRAM',
+}