@arbor-education/design-system.components 0.25.1 → 0.25.3

package/src/components/toggleGroup/ToggleGroup.tsx

@@ -0,0 +1,74 @@
+import { useState, type KeyboardEventHandler } from 'react';
+import classNames from 'classnames';
+import { ToggleGroup as RadixToggleGroup, type ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
+import { ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupItemColor } from './ToggleGroupItem.js';
+
+type ControlledProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  defaultValue?: never;
+};
+
+type UncontrolledProps = {
+  defaultValue?: string;
+  value?: never;
+  onValueChange?: never;
+};
+
+type BaseProps = Omit<ToggleGroupSingleProps, 'type' | 'value' | 'onValueChange' | 'defaultValue'> & {
+  options: ToggleGroupItemProps[];
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+};
+
+export type ToggleGroupProps = BaseProps & (ControlledProps | UncontrolledProps);
+
+const isControlled = (props: ToggleGroupProps): props is ControlledProps & ToggleGroupProps =>
+  props.value !== undefined;
+
+export const ToggleGroup = (props: ToggleGroupProps) => {
+  const { options, className, value, defaultValue, onValueChange, onKeyDown, ...radixToggleGroupProps } = props;
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    isControlled(props) ? undefined : defaultValue,
+  );
+  const selectedValue = isControlled(props) ? value : internalValue;
+
+  const handleValueChange = (newValue: string) => {
+    if (!newValue) {
+      return;
+    }
+    if (isControlled(props)) {
+      onValueChange?.(newValue);
+    }
+    else {
+      setInternalValue(newValue);
+    }
+  };
+
+  return (
+    <RadixToggleGroup
+      {...radixToggleGroupProps}
+      type="single"
+      rovingFocus={false}
+      className={classNames('ds-toggle-group', className)}
+      value={selectedValue}
+      onValueChange={handleValueChange}
+      onKeyDown={onKeyDown}
+    >
+      {options.map(({ ...itemProps }) => (
+        <ToggleGroupItem
+          {...itemProps}
+          key={itemProps.value}
+          isActive={itemProps.value === selectedValue}
+        />
+      ))}
+    </RadixToggleGroup>
+  );
+};
+
+ToggleGroup.Item = ToggleGroupItem;
+
+export namespace ToggleGroup {
+  export type Props = ToggleGroupProps;
+  export type ItemProps = ToggleGroupItemProps;
+  export type ItemColor = ToggleGroupItemColor;
+}

package/src/components/toggleGroup/ToggleGroupItem.tsx

@@ -0,0 +1,24 @@
+import { Item, type ToggleGroupItemProps as RadixToggleGroupItemProps } from '@radix-ui/react-toggle-group';
+import { Button } from 'Components/button/Button';
+
+export type ToggleGroupItemColor = 'red' | 'yellow' | 'green';
+
+export type ToggleGroupItemProps = {
+  text: string;
+  color?: ToggleGroupItemColor;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+} & RadixToggleGroupItemProps;
+
+export const ToggleGroupItem = ({ text, color, icon, isActive = false, ...radixProps }: ToggleGroupItemProps) => (
+  <Item {...radixProps} asChild>
+    <Button
+      className={isActive && color ? `ds-toggle-group__item--${color}` : undefined}
+      borderless
+      variant={isActive ? 'primary' : 'secondary'}
+    >
+      {icon}
+      {text}
+    </Button>
+  </Item>
+);

package/src/components/toggleGroup/toggleGroup.scss

@@ -0,0 +1,43 @@
+.ds-toggle-group {
+  display: inline-flex;
+  border-radius: var(--border-radius-round);
+  border: var(--toggle-weight-border) solid var(--color-grey-100);
+  padding: var(--border-radius-small);
+  gap: 8px;
+  align-items: center;
+
+  .ds-toggle-group__item {
+    &--red {
+      background-color: var(--color-semantic-destructive-100);
+      color: var(--color-semantic-destructive-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-destructive-100);
+        color: var(--color-semantic-destructive-700);
+      }
+    }
+
+    &--yellow {
+      background-color: var(--color-semantic-caution-100);
+      color: var(--color-semantic-caution-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-caution-100);
+        color: var(--color-semantic-caution-700);
+      }
+    }
+
+    &--green {
+      background-color: var(--color-semantic-success-100);
+      color: var(--color-semantic-success-700);
+
+      &:focus,
+      &:hover {
+        background-color: var(--color-semantic-success-100);
+        color: var(--color-semantic-success-700);
+      }
+    }
+  }
+}

package/src/index.scss

@@ -53,6 +53,7 @@
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";
+@use "components/toggleGroup/toggleGroup.scss";
 @use "components/dataViewCard/dataViewCard.scss";
 @use "components/treeRow/treeRow.scss";
 @use "components/sidebarNav/sidebarNav.scss";

package/src/index.ts

@@ -74,6 +74,7 @@ export { TagList } from 'Components/tagList/TagList';
 export type { TagListItem, TagListOverflowRenderArgs, TagListOverflowTarget, TagListProps } from 'Components/tagList/TagList';
 export { Toast } from 'Components/toast/Toast';
 export { Toggle } from 'Components/toggle/Toggle';
+export { ToggleGroup } from 'Components/toggleGroup/ToggleGroup';
 export { Tooltip } from 'Components/tooltip/Tooltip';
 export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
 export { GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';