@hyphen/hyphen-components 4.12.0 → 5.0.0

package/src/components/ToggleGroup/ToggleGroup.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { ToggleGroup } from './ToggleGroup';
+import * as Stories from './ToggleGroup.stories';
+
+<Meta of={Stories} />
+
+# ToggleGroup
+
+A set of two-state buttons that can be toggled on or off.
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/toggle-group).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference)
+
+<Canvas of={Stories.Uncontrolled} />
+
+## Multiple
+
+By default, one value is allowed, but you can allow for multiple selections by setting the `type` to `multiple`.
+
+<Canvas of={Stories.Multiple} />
+
+## Controlled
+
+The `onChange` prop can be used to handle changes to the selected value.
+
+<Canvas of={Stories.Controlled} />
+
+## Variants
+
+An outlined alternative variant is available.
+
+<Canvas of={Stories.Outlined} />
+
+## Disabled
+
+The `disabled` prop can be used to disable the ToggleGroup component, preventing user interaction. Individual item may also be disabled.
+
+<Canvas of={Stories.Disabled} />

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -0,0 +1,46 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--size-spacing-sm);
+  line-height: 1;
+  border-radius: var(--size-border-radius-sm);
+  padding: var(--size-spacing-sm);
+  color: var(--color-font-secondary);
+  font-size: var(--size-font-size-sm);
+  background-color: var(--color-background-transparent);
+  border-width: 0;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-background-toggle-group-item-hover);
+  }
+  &[data-state='on'] {
+    background-color: var(--color-background-toggle-group-item-active);
+    color: var(--color-font-base);
+  }
+  &:focus-visible {
+    position: relative;
+    box-shadow: 0 0 0 2px black;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.outline {
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--size-box-shadow-xs);
+
+  &:disabled,
+  &[data-state='on'] {
+    box-shadow: none;
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+
+import { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Components/ToggleGroup',
+  component: ToggleGroup,
+};
+
+export default meta;
+
+export const Uncontrolled = () => (
+  <ToggleGroup type="single" defaultValue="option2">
+    <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+    <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+    <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+    <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Multiple = () => (
+  <ToggleGroup type="multiple">
+    <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+    <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+    <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+    <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState('option1');
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  return (
+    <ToggleGroup type="single" value={value} onValueChange={handleValueChange}>
+      <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+      <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+      <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+      <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+export const Outlined = () => (
+  <ToggleGroup type="single" variant="outline" defaultValue="option1">
+    <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+    <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+    <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+    <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const Disabled = () => (
+  <ToggleGroup type="single" disabled>
+    <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+    <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+    <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+    <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+  </ToggleGroup>
+);
+
+export const BackgroundTest = () => (
+  <>
+    <Box background="primary" padding="2xl">
+      <ToggleGroup type="single" defaultValue="option2">
+        <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+        <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+        <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+        <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+        <ToggleGroupItem value="disabled" disabled>
+          disabled
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </Box>
+    <Box background="secondary" padding="2xl">
+      <ToggleGroup type="single" defaultValue="option2">
+        <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+        <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+        <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+        <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+        <ToggleGroupItem value="disabled" disabled>
+          disabled
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </Box>
+    <Box background="tertiary" padding="2xl">
+      <ToggleGroup type="single" defaultValue="option2">
+        <ToggleGroupItem value="option1">99%</ToggleGroupItem>
+        <ToggleGroupItem value="option2">99.9%</ToggleGroupItem>
+        <ToggleGroupItem value="option3">99.99%</ToggleGroupItem>
+        <ToggleGroupItem value="option4">99.999%</ToggleGroupItem>
+        <ToggleGroupItem value="disabled" disabled>
+          disabled
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </Box>
+  </>
+);

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useContext, forwardRef, ReactNode } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import styles from './ToggleGroup.module.scss';
+
+import classNames from 'classnames';
+import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
+import { BaseSpacing, ResponsiveProp } from '../../types';
+import { cssShorthandToClasses } from '../../lib';
+
+type ToggleVariant = 'default' | 'outline';
+
+const ToggleGroupContext = createContext<{ variant: ToggleVariant }>({
+  variant: 'default',
+});
+
+type ToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> & {
+  variant?: ToggleVariant;
+  name?: string;
+  gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
+  /**
+   * Mark the toggle group as invalid and display a validation message.
+   * Pass a string or node to render a validation message below the input.
+   */
+  error?: ReactNode;
+};
+
+const ToggleGroup = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  ToggleGroupProps
+>(
+  (
+    { className, variant = 'default', children, gap = 'xs', error, ...props },
+    ref
+  ) => (
+    <div>
+      <ToggleGroupPrimitive.Root
+        ref={ref}
+        className={classNames(
+          'display-flex align-items-center justify-content-start',
+          className,
+          cssShorthandToClasses('g', gap)
+        )}
+        {...props}
+      >
+        <ToggleGroupContext.Provider value={{ variant }}>
+          {children}
+        </ToggleGroupContext.Provider>
+      </ToggleGroupPrimitive.Root>
+
+      {error && <InputValidationMessage>{error}</InputValidationMessage>}
+    </div>
+  )
+);
+
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> & {
+  variant?: ToggleVariant;
+};
+
+const ToggleGroupItem = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(({ className, children, value, variant, ...props }, ref) => {
+  const { variant: contextVariant } = useContext(ToggleGroupContext);
+  const appliedVariant = variant || contextVariant;
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={classNames(
+        styles.item,
+        appliedVariant === 'outline' && styles.outline,
+        className
+      )}
+      value={value}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/src/docs/Brands.mdx

@@ -10,6 +10,9 @@ import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/image
 import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
 import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
 import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
+import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
+import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
+
 
 import { Box } from '../components/Box/Box';
 
@@ -150,4 +153,31 @@ import { Box } from '../components/Box/Box';
   </Box>
 </Box>
 
-{/* <img src={ToggleLogo} /> */}
+
+
+## Deploy
+
+<Box direction="row">
+  <Box
+    background="secondary"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <DeployLogoHorizontalPositive width="160px" />
+  </Box>
+  <Box
+    background="dark-purple"
+    padding="4xl"
+    width="50"
+    height="7xl"
+    alignItems="center"
+    justifyContent="center"
+    gap="xl"
+  >
+    <DeployLogoHorizontalNegative width="160px" />
+  </Box>
+</Box>

package/src/docs/DesignTokens.mdx

@@ -154,7 +154,7 @@ Dimension tokens are intended for use with `width` and `height` properties. They
           <td>
             {name === 'base'
               ? '16'
-              : ['inherit', 'auto'].includes(name)
+              : ['inherit', 'auto', 'fit', 'min', 'max'].includes(name)
               ? ''
               : entry.original.value * 16}
           </td>

package/src/index.ts

@@ -24,7 +24,8 @@ export * from './components/Formik/FormikTextInput/FormikTextInput';
 export * from './components/Formik/FormikTextareaInput/FormikTextareaInput';
 export * from './components/Formik/FormikTimePicker/FormikTimePicker';
 export * from './components/Formik/FormikTimePickerNative/FormikTimePickerNative';
-export * from './components/Formik/FormikToggle/FormikToggle';
+export * from './components/Formik/FormikSwitch/FormikSwitch';
+export * from './components/Formik/FormikToggleGroup/FormikToggleGroup';
 export * from './components/FormLabel/FormLabel';
 export * from './components/Heading/Heading';
 export * from './components/Icon/Icon';
@@ -39,6 +40,7 @@ export * from './components/SelectInputInset/SelectInputInset';
 export * from './components/SelectInputNative/SelectInputNative';
 export * from './components/Sidebar/Sidebar';
 export * from './components/Spinner/Spinner';
+export * from './components/Switch/Switch';
 export * from './components/Table/Table';
 export * from './components/TextareaInput/TextareaInput';
 export * from './components/TextareaInputInset/TextareaInputInset';
@@ -49,5 +51,6 @@ export * from './components/TimePicker/TimePicker';
 export * from './components/TimePickerNative/TimePickerNative';
 export * from './components/Toast';
 export * from './components/Toggle/Toggle';
+export * from './components/ToggleGroup/ToggleGroup';
 export * from './components/Tooltip/Tooltip';
 export * from './hooks';