SegmentedControl

.changeset/famous-moles-bow.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add `SegmentedControl` component

docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import {SegmentedControlButtonTemplate} from './SegmentedControlButton.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/SegmentedControl',
+  parameters: {
+    layout: 'padded'
+  },
+  excludeStories: ['BasicTemplate', 'IconsAndLabelsTemplate', 'IconsOnlyTemplate'],
+  controls: { expanded: true },
+  argTypes: {
+    ariaLabel: {
+      type: 'string',
+      description: 'Aria label',
+    },
+    disabled: {
+      control: {type: 'boolean'},
+      description: 'disabled',
+    },
+    fullWidth: {
+      control: {type: 'boolean'},
+      description: 'full width',
+    },
+    iconOnlyWhenNarrow: {
+      control: {type: 'boolean'},
+      description: 'icon only when narrow',
+    },
+  }
+}
+
+function classNames(disabled, fullWidth, iconOnlyWhenNarrow) {
+  const classNames = ['SegmentedControl'];
+
+  if (disabled) {
+    classNames.push("SegmentedControl--disabled")
+  }
+  if (fullWidth) {
+    classNames.push("SegmentedControl--fullWidth")
+  }
+  if (iconOnlyWhenNarrow) {
+    classNames.push("SegmentedControl--iconOnly-whenNarrow")
+  }
+
+  return classNames.join(' ')
+}
+
+export const BasicTemplate = ({disabled, fullWidth, ariaLabel}) => (
+  <>
+    <segmented-control role="group" aria-label={ariaLabel} class={classNames(disabled, fullWidth)}>
+      <SegmentedControlButtonTemplate label="Outline" ariaPressed />
+      <SegmentedControlButtonTemplate label="Write" />
+      <SegmentedControlButtonTemplate label="Preview" />
+      <SegmentedControlButtonTemplate label="Publish" />
+    </segmented-control>
+  </>
+)
+
+export const Basic = BasicTemplate.bind({})
+Basic.args = {
+  ariaLabel: "Label",
+  disabled: false,
+  fullWidth: false,
+  iconOnlyWhenNarrow: false,
+}
+
+export const IconsAndLabelsTemplate = ({disabled, fullWidth, ariaLabel, iconOnlyWhenNarrow}) => (
+  <>
+    <segmented-control role="group" aria-label={ariaLabel} class={classNames(disabled, fullWidth, iconOnlyWhenNarrow)}>
+      <SegmentedControlButtonTemplate label="Outline" leadingIcon ariaPressed />
+      <SegmentedControlButtonTemplate label="Write" leadingIcon />
+      <SegmentedControlButtonTemplate label="Preview" leadingIcon />
+      <SegmentedControlButtonTemplate label="Publish" leadingIcon />
+    </segmented-control>
+  </>
+)
+
+export const IconsAndLabels = IconsAndLabelsTemplate.bind({})
+IconsAndLabels.args = {
+  ariaLabel: "Label",
+  disabled: false,
+  fullWidth: false,
+  iconOnlyWhenNarrow: false,
+}
+
+export const IconsOnlyTemplate = ({disabled, fullWidth, ariaLabel, iconOnlyWhenNarrow}) => (
+  <>
+    <segmented-control role="group" aria-label={ariaLabel} class={classNames(disabled, fullWidth, iconOnlyWhenNarrow)}>
+      <SegmentedControlButtonTemplate label="Outline" leadingIcon iconOnly ariaPressed />
+      <SegmentedControlButtonTemplate label="Write" leadingIcon iconOnly />
+      <SegmentedControlButtonTemplate label="Preview" leadingIcon iconOnly />
+      <SegmentedControlButtonTemplate label="Publish" leadingIcon iconOnly />
+    </segmented-control>
+  </>
+)
+
+export const IconsOnly = IconsOnlyTemplate.bind({})
+IconsOnly.args = {
+  ariaLabel: "Label",
+  disabled: false,
+  fullWidth: false,
+  iconOnlyWhenNarrow: false,
+}

docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/SegmentedControl/SegmentedControlButton',
+  excludeStories: ['SegmentedControlButtonTemplate'],
+  layout: 'padded',
+
+  argTypes: {
+    ariaPressed: {
+      control: {type: 'boolean'},
+      description: 'Currently selected item',
+    },
+    isLoading: {
+      control: {type: 'boolean'},
+      description: 'Pressed item is loading',
+    },
+    label: {
+      defaultValue: 'Item',
+      type: 'string',
+      name: 'label',
+      description: 'Button label',
+    },
+    leadingIcon: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: 'Has icon'
+    },
+    iconOnly: {
+      defaultValue: false,
+      control: {type: 'boolean'},
+      description: 'Show icon only',
+    },
+  }
+}
+
+// build every component case here in the template (private api)
+export const SegmentedControlButtonTemplate = ({ariaPressed, isLoading, label, leadingIcon, iconOnly }) => (
+  <>
+    <button className={clsx(
+        'SegmentedControl-button',
+        iconOnly && `SegmentedControl-button--iconOnly`,
+        isLoading && `SegmentedControl-button--isLoading`,
+      )}
+      aria-pressed={ariaPressed}
+      aria-label={iconOnly && label}
+    >
+      {leadingIcon && (
+        <svg class="SegmentedControl-leadingIcon octicon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
+      )}
+      {!iconOnly && (
+        <span class="SegmentedControl-label" data-content={label}>{label}</span>
+      )}
+      {isLoading && (
+        <svg style={{boxSizing: "content-box", color: "var(--color-icon-primary)"}} width="16" height="16" viewBox="0 0 16 16" fill="none" data-view-component="true" class="anim-rotate">  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke"></circle>  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"></path></svg>
+      )}
+    </button>
+  </>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = SegmentedControlButtonTemplate.bind({})
+Playground.args = {
+  label: 'Preview',
+  leadingIcon: true,
+  ariaPressed: true,
+  isLoading: false,
+}

package.json

@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.8.3"
+    "@primer/primitives": "0.0.0-20220531171341"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",

src/core/index.scss

@@ -22,6 +22,7 @@
 @import '../links/index.scss';
 @import '../navigation/index.scss';
 @import '../pagination/index.scss';
+@import '../segmented-control/index.scss';
 @import '../tooltips/index.scss';
 @import '../truncate/index.scss';
 @import '../overlay/index.scss';

src/segmented-control/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "segmented-control"
+generated: true
+---
+
+# Primer CSS: `segmented-control` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/segmented-control/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/segmented-control.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/segmented-control/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './segmented-control.scss';