@hyphen/hyphen-components 7.0.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^6.0.0",
+    "@hyphen/hyphen-design-tokens": "^6.1.0",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/components/Box/Box.stories.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import type { Meta } from '@storybook/react-vite';
 import { Box } from './Box';
+import {
+  BACKGROUND_COLOR_OPTIONS,
+  BORDER_COLOR_OPTIONS,
+  FONT_COLOR_OPTIONS,
+} from '../../lib/tokens';
 
 const meta: Meta<typeof Box> = {
   title: 'Components/Box',
@@ -72,60 +77,11 @@ export const Overview = () => (
 export const Background = () => {
   return (
     <Box gap="md">
-      <Box background="primary" padding="md">
-        primary
-      </Box>
-      <Box background="secondary" padding="md">
-        secondary
-      </Box>
-      <Box background="tertiary" padding="md">
-        tertiary
-      </Box>
-      <Box background="info" padding="md">
-        info
-      </Box>
-      <Box background="warning" padding="md">
-        warning
-      </Box>
-      <Box background="danger" padding="md">
-        danger
-      </Box>
-      <Box background="inverse" color="inverse" padding="md">
-        inverse
-      </Box>
-      <Box background="brand-yellow" padding="md">
-        brand-yellow
-      </Box>
-      <Box background="brand-orange" padding="md">
-        brand-orange
-      </Box>
-      <Box background="brand-magenta" padding="md">
-        brand-magenta
-      </Box>
-      <Box color="white" background="brand-dark-grey" padding="md">
-        brand-dark-grey
-      </Box>
-      <Box background="brand-cyan" padding="md">
-        brand-cyan
-      </Box>
-      <Box background="brand-pink" padding="md">
-        brand-pink
-      </Box>
-      <Box background="brand-light-purple" padding="md">
-        brand-light-purple
-      </Box>
-      <Box color="white" background="brand-medium-purple" padding="md">
-        brand-medium-purple
-      </Box>
-      <Box color="white" background="brand-dark-purple" padding="md">
-        brand-dark-purple
-      </Box>
-      <Box color="white" background="chart-1" padding="md">
-        chart-1
-      </Box>
-      <Box color="white" background="chart-2" padding="md">
-        chart-2
-      </Box>
+      {BACKGROUND_COLOR_OPTIONS.map((color) => (
+        <Box key={color} background={color} padding="md">
+          {color}
+        </Box>
+      ))}
     </Box>
   );
 };
@@ -133,54 +89,11 @@ export const Background = () => {
 export const Border = () => {
   return (
     <Box gap="md">
-      <Box borderColor="default" borderWidth="sm" padding="md">
-        default
-      </Box>
-      <Box borderColor="subtle" borderWidth="sm" padding="md">
-        subtle
-      </Box>
-      <Box borderColor="hover" borderWidth="sm" padding="md">
-        hover
-      </Box>
-      <Box borderColor="active" borderWidth="sm" padding="md">
-        active
-      </Box>
-      <Box borderColor="info" borderWidth="sm" padding="md">
-        info
-      </Box>
-      <Box borderColor="warning" borderWidth="sm" padding="md">
-        warning
-      </Box>
-      <Box borderColor="danger" borderWidth="sm" padding="md">
-        danger
-      </Box>
-      <Box borderColor="brand-yellow" borderWidth="sm" padding="md">
-        brand-yellow
-      </Box>
-      <Box borderColor="brand-orange" borderWidth="sm" padding="md">
-        brand-orange
-      </Box>
-      <Box borderColor="brand-magenta" borderWidth="sm" padding="md">
-        brand-magenta
-      </Box>
-      <Box borderColor="brand-dark-grey" borderWidth="sm" padding="md">
-        brand-dark-grey
-      </Box>
-      <Box borderColor="brand-cyan" borderWidth="sm" padding="md">
-        brand-cyan
-      </Box>
-      <Box borderColor="brand-pink" borderWidth="sm" padding="md">
-        brand-pink
-      </Box>
-      <Box borderColor="brand-light-purple" borderWidth="sm" padding="md">
-        brand-light-purple
-      </Box>
-      <Box borderColor="brand-medium-purple" borderWidth="sm" padding="md">
-        brand-medium-purple
-      </Box>
-      <Box borderColor="brand-dark-purple" borderWidth="sm" padding="md">
-        brand-dark-purple
-      </Box>
+      {BORDER_COLOR_OPTIONS.map((color) => (
+        <Box key={color} borderColor={color} borderWidth="sm" padding="md">
+          {color}
+        </Box>
+      ))}
     </Box>
   );
 };
@@ -703,23 +616,11 @@ export const FlexAlignContent = () => (
 
 export const FontColor = () => (
   <>
-    <Box color="base">base</Box>
-    <Box color="secondary">secondary</Box>
-    <Box color="tertiary">tertiary</Box>
-    <Box color="inverse">inverse</Box>
-    <Box color="disabled">disabled</Box>
-    <Box color="success">success</Box>
-    <Box color="warning">warn</Box>
-    <Box color="danger">danger</Box>
-    <Box color="brand-yellow">brand-yellow</Box>
-    <Box color="brand-orange">brand-orange</Box>
-    <Box color="brand-magenta">brand-magenta</Box>
-    <Box color="brand-dark-grey">brand-dark-grey</Box>
-    <Box color="brand-cyan">brand-cyan</Box>
-    <Box color="brand-pink">brand-pink</Box>
-    <Box color="brand-light-purple">brand-light-purple</Box>
-    <Box color="brand-medium-purple">brand-medium-purple</Box>
-    <Box color="brand-dark-purple">brand-dark-purple</Box>
+    {FONT_COLOR_OPTIONS.map((color) => (
+      <Box key={color} color={color}>
+        {color}
+      </Box>
+    ))}
   </>
 );
 

package/src/components/Box/Box.tsx

@@ -49,6 +49,13 @@ import { getDimensionCss } from '../../lib/getDimensionCss';
 import { getElementType } from '../../lib/getElementType';
 import styles from './Box.module.scss';
 
+const AUTO_FONT_COLOR_BACKGROUNDS: BackgroundColor[] = [
+  'success',
+  'warning',
+  'danger',
+  'info',
+];
+
 export type HoverableBoxProperties =
   | 'color'
   | 'borderColor'
@@ -355,6 +362,17 @@ export const Box: FC<BoxProps> = forwardRef(
     const minHeightCss = getDimensionCss('minh', minHeight);
     const minWidthCss = getDimensionCss('minw', minWidth);
 
+    // `inverse` background uses a matching `inverse` font color instead of the
+    // generic auto-mapped colors in AUTO_FONT_COLOR_BACKGROUNDS, so it is
+    // intentionally handled separately here.
+    const finalColor =
+      color ??
+      (background === 'inverse'
+        ? 'inverse'
+        : AUTO_FONT_COLOR_BACKGROUNDS.includes(background)
+        ? 'grey'
+        : undefined);
+
     const isFlexBox = typeof display === 'string' && display.includes('flex');
     const flexDirectionClasses = isFlexBox
       ? generateResponsiveClasses('flex-direction', direction)
@@ -451,7 +469,7 @@ export const Box: FC<BoxProps> = forwardRef(
         'flex-wrap': isFlexBox && wrap,
         'flex-nowrap': isFlexBox && wrap === false,
         [`background-color-${background}`]: background,
-        [`font-color-${color}`]: color,
+        [`font-color-${finalColor}`]: finalColor,
         [`border-color-${borderColor}`]: borderColor,
         [`cursor-${cursor}`]: cursor,
         [styles['box-transition']]: hover || focus,

package/src/components/Formik/Formik.stories.tsx

@@ -42,6 +42,7 @@ export const FormikForm = () =>
       { value: 'chocolate', label: 'Chocolate' },
       { value: 'strawberry', label: 'Strawberry' },
       { value: 'vanilla', label: 'Vanilla' },
+      { value: 'mint', label: 'Mint', disabled: true },
     ];
     const colorOptions = [
       { value: 'red', label: 'red' },

package/src/components/SelectInputNative/SelectInputNative.stories.tsx

@@ -18,6 +18,7 @@ const options = [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' },
   { value: 'vanilla', label: 'Vanilla' },
+  { value: 'mint', label: 'Mint', disabled: true },
 ];
 
 export const Default = () => {

package/src/components/SelectInputNative/SelectInputNative.test.tsx

@@ -5,9 +5,23 @@ import { SelectInputNative } from './SelectInputNative';
 
 const selectOptions = [
   { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'strawberry', label: 'Strawberry', disabled: true },
   { value: 'vanilla', label: 'Vanilla' },
 ];
+test('option with disabled property is rendered as disabled', () => {
+  const mockedHandleChange = jest.fn();
+  render(
+    <SelectInputNative
+      id="testId"
+      label="Disabled Option Test"
+      onChange={mockedHandleChange}
+      options={selectOptions}
+      value={null}
+    />
+  );
+  const option = screen.getByText('Strawberry');
+  expect(option).toBeDisabled();
+});
 
 function getByTextWithMarkup(text: string) {
   // eslint-disable-next-line

package/src/components/SelectInputNative/SelectInputNative.tsx

@@ -7,11 +7,17 @@ import { FormControl, FormControlProps } from '../FormControl/FormControl';
 import styles from './SelectInputNative.module.scss';
 
 export type SelectInputNativeSize = 'sm' | 'md' | 'lg';
+export interface SelectInputNativeOption {
+  value: string | number;
+  label: string | number;
+  disabled?: boolean;
+}
+
 export interface SelectInputNativeProps extends BoxProps, FormControlProps {
   /**
    * List of options for the select input.
    */
-  options: { value: string | number; label: string | number }[];
+  options: SelectInputNativeOption[];
   /**
    * onChange callback from select element.
    */
@@ -60,8 +66,15 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
   size = 'md',
   ...restProps
 }) => {
-  const placeholderOption = { value: '', label: placeholder };
-  const optionsWithPlaceholder = [{ ...placeholderOption }, ...options];
+  const placeholderOption: SelectInputNativeOption = {
+    value: '',
+    label: placeholder,
+    disabled: true,
+  };
+  const optionsWithPlaceholder: SelectInputNativeOption[] = [
+    placeholderOption,
+    ...options,
+  ];
 
   const responsiveClasses = generateResponsiveClasses('size', size);
 
@@ -107,7 +120,7 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
               as="option"
               key={option.value}
               value={option.value}
-              disabled={option.value === ''}
+              disabled={option.disabled ?? false}
               hidden={option.value === ''}
               color={option.value === '' ? 'disabled' : 'base'}
             >

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -156,22 +156,17 @@ const data = {
   ],
 };
 
-// type Story = StoryObj<typeof Sidebar>;
-
 export const SidebarExample = () => {
   const [activeTeam, setActiveTeam] = React.useState(data.teams[0]);
   const isMobile = useIsMobile();
 
   const STORAGE_KEY = 'sidebar_expanded_storybook';
 
-  const startOpen = localStorage.getItem(STORAGE_KEY) || 'true';
+  const startExpanded = localStorage.getItem(STORAGE_KEY) !== 'false';
 
   return (
     <ResponsiveProvider>
-      <SidebarProvider
-        storageKey={STORAGE_KEY}
-        defaultOpen={startOpen === 'true'}
-      >
+      <SidebarProvider storageKey={STORAGE_KEY} defaultOpen={startExpanded}>
         <Sidebar side="left" collapsible="icon">
           <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
           <SidebarContent>