@indico-data/design-system 3.0.10 → 3.2.0

package/src/components/pill/Pill.stories.tsx

@@ -1,6 +1,22 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Pill } from './Pill';
 import { Container, Row, Col } from 'react-grid-system';
+import { ChromaticColor } from '@/types';
+import { PillShade } from './types';
+
+const CHROMATIC_COLORS: ChromaticColor[] = [
+  'blue',
+  'purple',
+  'red',
+  'yellow',
+  'gray',
+  'green',
+  'pink',
+  'orange',
+  'teal',
+];
+
+const SHADES: PillShade[] = [1, 2, 3, 4, 5];
 
 const meta: Meta = {
   title: 'Components/Pill',
@@ -17,7 +33,6 @@ const meta: Meta = {
     },
     children: {
       control: 'text',
-      description: 'The content displayed inside the pill',
       table: {
         category: 'Props',
         type: {
@@ -38,7 +53,6 @@ const meta: Meta = {
         'pending',
         'orange',
       ],
-      description: 'Applies a CSS class to change the style of the pill',
       table: {
         category: 'Props',
         type: {
@@ -52,7 +66,6 @@ const meta: Meta = {
         type: 'select',
         options: ['sm', 'md', 'lg'],
       },
-      description: 'Applies a CSS class to change the size of the pill',
       table: {
         category: 'Props',
         type: {
@@ -69,8 +82,8 @@ type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {
   args: {
-    children: 'Success',
-    color: 'success',
+    children: 'Green',
+    color: 'green',
   },
   render: (args) => {
     return (
@@ -87,19 +100,13 @@ export const AllSizes: Story = {
       <Container>
         <Row>
           <Col>
-            <Pill color="neutral" size="lg">
-              Large (lg)
-            </Pill>
+            <Pill size="lg">Large (lg)</Pill>
           </Col>
           <Col>
-            <Pill color="neutral" size="md">
-              Medium (md)
-            </Pill>
+            <Pill size="md">Medium (md)</Pill>
           </Col>
           <Col>
-            <Pill color="neutral" size="sm">
-              Small (sm)
-            </Pill>
+            <Pill size="sm">Small (sm)</Pill>
           </Col>
         </Row>
       </Container>
@@ -107,58 +114,40 @@ export const AllSizes: Story = {
   },
 };
 
-export const AllStatuses: Story = {
+export const AllDefaultColors: Story = {
   render: () => {
     return (
       <Container>
-        <Row>
-          <Col>
-            <Pill color="success" size="md">
-              Success
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="warning" size="md">
-              Warning
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="error" size="md">
-              Error
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="purple" size="md">
-              Purple
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="info" size="md">
-              Info
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="teal" size="md">
-              Teal
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="neutral" size="md">
-              Neutral
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="pending" size="md">
-              Pending
-            </Pill>
-          </Col>
-          <Col>
-            <Pill color="orange" size="md">
-              Orange
-            </Pill>
-          </Col>
+        <Row justify="start">
+          {CHROMATIC_COLORS.map((color: ChromaticColor) => (
+            <Col xs="content" className="mb-2">
+              <Pill color={color} size="md">
+                {color}
+              </Pill>
+            </Col>
+          ))}
         </Row>
       </Container>
     );
   },
 };
+
+export const AllShades: Story = {
+  render: () => {
+    return (
+      <Container>
+        {CHROMATIC_COLORS.map((color: ChromaticColor) => (
+          <Row key={color}>
+            {SHADES.map((shade: PillShade) => (
+              <Col width={100} className="mb-2">
+                <Pill shade={shade} color={color} size="md">
+                  {color}-{shade}
+                </Pill>
+              </Col>
+            ))}
+          </Row>
+        ))}
+      </Container>
+    );
+  },
+};

package/src/components/pill/Pill.tsx

@@ -4,12 +4,14 @@ import { PillProps } from './types';
 export const Pill = ({
   children,
   className,
-  color = 'neutral',
+  color = 'gray',
   size = 'sm',
+  shade,
   ...rest
 }: PillProps) => {
   const pillClasses = classNames('pill', className, {
-    [`pill--${color}`]: color,
+    [`pill--${color}`]: color && !shade,
+    [`pill--${color}-${shade}`]: color && shade,
     [`pill--${size}`]: size,
   });
 

package/src/components/pill/__tests__/Pill.test.tsx

@@ -1,28 +1,32 @@
 import { render, screen } from '@testing-library/react';
 import { Pill } from '@/components/pill/Pill';
-import { PillColor, PillSize } from '../types';
+import { PillColor, PillShade, PillSize } from '../types';
 
 const sizes = ['sm', 'md', 'lg'] as PillSize[];
 const colors = [
-  'success',
-  'warning',
-  'error',
-  'info',
-  'neutral',
-  'primary',
-  'secondary',
+  'blue',
+  'purple',
+  'red',
+  'yellow',
+  'gray',
+  'green',
+  'pink',
+  'orange',
+  'teal',
 ] as PillColor[];
 
+const shades = [1, 2, 3, 4, 5] as PillShade[];
+
 describe('Pill', () => {
   sizes.forEach((size) => {
     it(`checks that the proper size class is applied when size is ${size}`, () => {
       render(
-        <Pill color="success" size={size} data-testid={`pill-${size}`}>
+        <Pill color="blue" size={size} data-testid={`pill-${size}`}>
           Success
         </Pill>,
       );
       const pill = screen.getByTestId(`pill-${size}`);
-      expect(pill).toHaveClass(`pill pill--success pill--${size}`);
+      expect(pill).toHaveClass(`pill pill--blue pill--${size}`);
     });
   });
 
@@ -37,4 +41,18 @@ describe('Pill', () => {
       expect(pill).toHaveClass(`pill pill--${color} pill--md`);
     });
   });
+
+  colors.forEach((color) => {
+    shades.forEach((shade) => {
+      it(`checks that the proper style class has been applied when color is ${color} and shade is ${shade}`, () => {
+        render(
+          <Pill color={color} size="md" shade={shade} data-testid={`pill-${color}-${shade}`}>
+            Status
+          </Pill>,
+        );
+        const pill = screen.getByTestId(`pill-${color}-${shade}`);
+        expect(pill).toHaveClass(`pill pill--${color}-${shade} pill--md`);
+      });
+    });
+  });
 });

package/src/components/pill/styles/Pill.scss

@@ -1,82 +1,3 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-pill-info-background-color: var(--pf-info-color-dark);
-  --pf-pill-info-font-color: var(--pf-gray-color-50);
-  --pf-pill-info-border-color: var(--pf-info-color-dark);
-
-  --pf-pill-error-background-color: var(--pf-error-color-dark);
-  --pf-pill-error-font-color: var(--pf-gray-color-50);
-  --pf-pill-error-border-color: var(--pf-error-color-dark);
-
-  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
-  --pf-pill-warning-font-color: var(--pf-gray-color-50);
-  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
-
-  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
-  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
-  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
-
-  --pf-pill-success-background-color: var(--pf-success-color-dark);
-  --pf-pill-success-font-color: var(--pf-gray-color-50);
-  --pf-pill-success-border-color: var(--pf-success-color-dark);
-
-  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
-  --pf-pill-purple-font-color: var(--pf-gray-color-50);
-  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
-
-  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
-  --pf-pill-pending-font-color: var(--pf-gray-color-50);
-  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
-
-  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
-  --pf-pill-orange-font-color: var(--pf-gray-color-50);
-  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
-
-  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
-  --pf-pill-teal-font-color: var(--pf-gray-color-50);
-  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-pill-info-background-color: var(--pf-info-color-dark);
-  --pf-pill-info-font-color: var(--pf-gray-color-50);
-  --pf-pill-info-border-color: var(--pf-info-color-dark);
-
-  --pf-pill-error-background-color: var(--pf-error-color-dark);
-  --pf-pill-error-font-color: var(--pf-gray-color-50);
-  --pf-pill-error-border-color: var(--pf-error-color-dark);
-
-  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
-  --pf-pill-warning-font-color: var(--pf-gray-color-50);
-  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
-
-  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
-  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
-  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
-
-  --pf-pill-success-background-color: var(--pf-success-color-dark);
-  --pf-pill-success-font-color: var(--pf-gray-color-50);
-  --pf-pill-success-border-color: var(--pf-success-color-dark);
-
-  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
-  --pf-pill-purple-font-color: var(--pf-gray-color-50);
-  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
-
-  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
-  --pf-pill-pending-font-color: var(--pf-gray-color-50);
-  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
-
-  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
-  --pf-pill-orange-font-color: var(--pf-gray-color-50);
-  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
-
-  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
-  --pf-pill-teal-font-color: var(--pf-gray-color-50);
-  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
-}
-
 .pill {
   display: inline-block;
   border-radius: var(--pf-rounded);
@@ -86,6 +7,7 @@
   white-space: nowrap;
   line-height: 1;
   border: solid 1px;
+  color: var(--pf-font-color-light);
 
   &--sm {
     padding: var(--pf-padding-1) var(--pf-padding-2);
@@ -102,56 +24,17 @@
     font-size: var(--pf-font-size-h2);
   }
 
-  &--error {
-    background-color: var(--pf-pill-error-background-color);
-    color: var(--pf-pill-error-font-color);
-    border-color: var(--pf-pill-error-border-color);
-  }
-  &--warning {
-    background-color: var(--pf-pill-warning-background-color);
-    color: var(--pf-pill-warning-font-color);
-    border-color: var(--pf-pill-warning-border-color);
-  }
-  &--info {
-    background-color: var(--pf-pill-info-background-color);
-    color: var(--pf-pill-info-font-color);
-    border-color: var(--pf-pill-info-border-color);
-  }
-  &--success {
-    background-color: var(--pf-pill-success-background-color);
-    color: var(--pf-pill-success-font-color);
-    border-color: var(--pf-pill-success-border-color);
-  }
-  &--neutral {
-    background-color: var(--pf-pill-neutral-background-color);
-    color: var(--pf-pill-neutral-font-color);
-    border-color: var(--pf-pill-neutral-border-color);
-  }
-  &--info {
-    background-color: var(--pf-pill-info-background-color);
-    color: var(--pf-pill-info-font-color);
-    border-color: var(--pf-pill-info-border-color);
-  }
-  &--pending {
-    background-color: var(--pf-pill-pending-background-color);
-    color: var(--pf-pill-pending-font-color);
-    border-color: var(--pf-pill-pending-border-color);
-  }
+  @each $color in $chromatic-color-names {
+    &--#{$color} {
+      background-color: var(--pf-item-#{$color}-color);
+      border-color: var(--pf-item-#{$color}-color);
+    }
 
-  &--purple {
-    background-color: var(--pf-pill-purple-background-color);
-    color: var(--pf-pill-purple-font-color);
-    border-color: var(--pf-pill-purple-border-color);
-  }
-
-  &--orange {
-    background-color: var(--pf-pill-orange-background-color);
-    color: var(--pf-pill-orange-font-color);
-    border-color: var(--pf-pill-orange-border-color);
-  }
-  &--teal {
-    background-color: var(--pf-pill-teal-background-color);
-    color: var(--pf-pill-teal-font-color);
-    border-color: var(--pf-pill-teal-border-color);
+    @each $shade, $color-number in $item-shades-to-color-number {
+      &--#{$color}-#{$shade} {
+        background-color: var(--pf-item-#{$color}-#{$shade}-color);
+        border-color: var(--pf-item-#{$color}-#{$shade}-color);
+      }
+    }
   }
 }

package/src/components/pill/types.ts

@@ -1,12 +1,18 @@
-import { SemanticColor } from '../../types';
+import { ChromaticColor } from '../../types';
 import React from 'react';
 
 export type PillSize = 'sm' | 'md' | 'lg';
-export type PillColor = SemanticColor | 'neutral';
+export type PillColor = ChromaticColor;
+export type PillShade = 1 | 2 | 3 | 4 | 5;
 
 export interface PillProps {
+  /** The content displayed inside the pill */
   children: React.ReactNode | React.ReactNode[];
+  /** Applies a CSS class to change the style of the pill */
   color?: PillColor;
+  /** Applies a CSS class to change the size of the pill */
   size?: PillSize;
+  /** Applies a CSS class to change the shade of the pill */
+  shade?: PillShade;
   className?: string;
 }

package/src/components/skeleton/Skeleton.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta = {
   argTypes: {
     className: {
       control: 'text',
-      description: 'Additional classes for the skeleton component',
       table: {
         category: 'Props',
         type: {
@@ -18,8 +17,6 @@ const meta: Meta = {
     },
     height: {
       control: 'number',
-      description:
-        'The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
@@ -29,8 +26,6 @@ const meta: Meta = {
     },
     width: {
       control: 'number',
-      description:
-        'The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
@@ -40,7 +35,6 @@ const meta: Meta = {
     },
     isCircle: {
       control: 'boolean',
-      description: 'Sets the skeleton component to be a circle',
       table: {
         category: 'Props',
         type: {
@@ -51,7 +45,6 @@ const meta: Meta = {
     },
     isFullHeight: {
       control: 'boolean',
-      description: 'Sets the skeleton component to be full height',
       table: {
         category: 'Props',
         type: {

package/src/components/skeleton/Skeleton.tsx

@@ -1,8 +1,13 @@
 type Props = {
+  /** Additional classes for the skeleton component */
   className?: string;
+  /** The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
   height?: number | string;
+  /** The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
   width?: number | string;
+  /** Sets the skeleton component to be a circle */
   isCircle?: boolean;
+  /** Sets the skeleton component to be full height */
   isFullHeight?: boolean;
 };
 

package/src/components/stepper/Stepper.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta = {
   argTypes: {
     legendHeader: {
       control: false,
-      description: 'The header content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -27,7 +26,6 @@ const meta: Meta = {
     },
     legendFooter: {
       control: false,
-      description: 'The footer content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -37,7 +35,6 @@ const meta: Meta = {
     },
     steps: {
       control: false,
-      description: 'An array of step objects that define the stepper navigation.',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
       },
     },
     label: {
-      description: 'Display text for the step in the sidebar/legend',
       table: {
         category: 'Step Properties',
         type: {
@@ -56,8 +52,6 @@ const meta: Meta = {
       control: false,
     },
     isCompleted: {
-      description:
-        'Indicates whether this step has been completed. Used to track progress and determine whether to enable subsequent steps.',
       table: {
         category: 'Step Properties',
         type: {
@@ -68,8 +62,6 @@ const meta: Meta = {
       control: false,
     },
     isNextDisabled: {
-      description:
-        'When true, the Next button will be disabled for this step. Set to true for steps that require completion before proceeding.',
       table: {
         category: 'Step Properties',
         type: {
@@ -80,8 +72,6 @@ const meta: Meta = {
       control: false,
     },
     isOptional: {
-      description:
-        'When true, the step can be skipped (the Next button remains enabled). Used for optional information or steps that are not required to complete the flow.',
       table: {
         category: 'Step Properties',
         type: {
@@ -92,8 +82,6 @@ const meta: Meta = {
       control: false,
     },
     isSidebarEnabled: {
-      description:
-        'When true, the step is clickable in the sidebar. Used for restricting navigation until previous steps are completed.',
       table: {
         category: 'Step Properties',
         type: {
@@ -105,8 +93,6 @@ const meta: Meta = {
     },
     currentStep: {
       control: false,
-      description:
-        'The current step of the stepper. This value should be an index of the steps array.',
       table: {
         category: 'Props',
         type: {
@@ -117,7 +103,6 @@ const meta: Meta = {
     },
     onBackClick: {
       control: false,
-      description: 'The function to call when the back button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -127,7 +112,6 @@ const meta: Meta = {
     },
     onFinishClick: {
       control: false,
-      description: 'The function to call when the finish button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -137,7 +121,6 @@ const meta: Meta = {
     },
     onStepClick: {
       control: false,
-      description: 'The function to call when a step is clicked ont he legend.',
       table: {
         category: 'Callbacks',
         type: {
@@ -147,7 +130,6 @@ const meta: Meta = {
     },
     onNextClick: {
       control: false,
-      description: 'The function to call when the next button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -157,7 +139,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'Any item passed to this component as a child will be rendered as a step.',
       table: {
         category: 'Props',
         type: {

package/src/components/stepper/types.ts

@@ -1,14 +1,22 @@
 import { ReactNode } from 'react';
 
 export interface StepperProps {
+  /** An array of step objects that define the stepper navigation. */
   steps: Step[];
   currentStep?: number;
+  /** The header content for the legend. */
   legendHeader?: ReactNode;
+  /** The footer content for the legend. */
   legendFooter?: ReactNode;
+  /** The function to call when the back button is clicked. */
   onBackClick: () => void;
+  /** The function to call when the next button is clicked. */
   onNextClick: () => void;
+  /** The function to call when the finish button is clicked. */
   onFinishClick: () => void;
+  /** Any item passed to this component as a child will be rendered as a step. */
   children: React.ReactNode;
+  /** The function to call when a step is clicked ont he legend. */
   onStepClick: (step: number) => void;
 }
 
@@ -19,6 +27,7 @@ export interface StepperLegendProps {
 }
 
 export interface Step {
+  /** Display text for the step in the sidebar/legend */
   label: string;
   isCompleted?: boolean;
   isNextDisabled?: boolean;