@hyphen/hyphen-components 4.13.0 → 5.1.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,42 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+.item {
+  line-height: 1;
+  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,195 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+
+import { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+import { Box } from '../Box/Box';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../Tooltip/Tooltip';
+
+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 CustomLabel = () => (
+  <TooltipProvider delayDuration={0}>
+    <ToggleGroup
+      type="single"
+      gap="lg"
+      defaultValue="option2"
+      variant="outline"
+    >
+      <ToggleGroupItem value="option1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Box textAlign="left" alignItems="flex-start" gap="xs">
+              <Box fontSize="xl" fontWeight="semibold">
+                99%
+              </Box>
+              <Box color="tertiary" fontSize="xs">
+                Standard
+              </Box>
+            </Box>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={10}>
+            Up to 3.65 days/year downtime
+          </TooltipContent>
+        </Tooltip>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="option2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Box textAlign="left" alignItems="flex-start" gap="xs">
+              <Box fontSize="xl" fontWeight="semibold">
+                99.9%
+              </Box>
+              <Box
+                color="tertiary"
+                fontSize="xs"
+                direction="row"
+                alignItems="center"
+                gap="sm"
+              >
+                High
+              </Box>
+            </Box>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={10}>
+            Up to 8.76 hours/year downtime
+          </TooltipContent>
+        </Tooltip>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="option3">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Box textAlign="left" alignItems="flex-start" gap="xs">
+              <Box fontSize="xl" fontWeight="semibold">
+                99.99%
+              </Box>
+              <Box color="tertiary" fontSize="xs">
+                Very High
+              </Box>
+            </Box>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={10}>
+            Up to 52.56 minutes/year downtime
+          </TooltipContent>
+        </Tooltip>
+      </ToggleGroupItem>
+      <ToggleGroupItem value="option4">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Box textAlign="left" alignItems="flex-start" gap="xs">
+              <Box fontSize="xl" fontWeight="semibold">
+                99.999%
+              </Box>
+              <Box color="tertiary" fontSize="xs">
+                Mission Critical
+              </Box>
+            </Box>
+          </TooltipTrigger>
+          <TooltipContent sideOffset={10}>
+            Up to 5.26 minutes/year downtime
+          </TooltipContent>
+        </Tooltip>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  </TooltipProvider>
+);
+
+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,89 @@
+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(
+        'br-sm display-flex g-sm p-sm',
+        styles.item,
+        appliedVariant === 'outline' && styles.outline,
+        className
+      )}
+      value={value}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

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';