@indico-data/design-system 2.23.0 → 2.24.1

package/lib/src/components/button/types.d.ts

@@ -1,6 +1,5 @@
-import { IconName } from '@/types';
+import { IconName, SemanticColor } from '@/types';
 export type ButtonVariants = 'solid' | 'outline' | 'text';
-export type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 export type ButtonIconPositions = 'left' | 'right';
 export type ButtonSizes = 'sm' | 'md' | 'lg';
 export type ButtonTypes = 'button' | 'submit' | 'reset';
@@ -15,7 +14,7 @@ export interface ButtonProps {
     onClick?: (...args: any[]) => void;
     variant?: ButtonVariants;
     iconPosition?: ButtonIconPositions;
-    color?: ButtonColors;
+    color?: SemanticColor;
     size?: ButtonSizes;
     iconName?: IconName;
     type?: ButtonTypes;

package/lib/src/components/pill/Pill.d.ts

@@ -1,7 +1,2 @@
-type Props = {
-    children: React.ReactNode | React.ReactNode[];
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
-    size?: 'sm' | 'md' | 'lg';
-};
-export declare const Pill: ({ children, status, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { PillProps } from './types';
+export declare const Pill: ({ children, className, color, size, ...rest }: PillProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/pill/types.d.ts

@@ -0,0 +1,10 @@
+import { SemanticColor } from '@/types';
+import React from 'react';
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillColor = SemanticColor | 'neutral';
+export interface PillProps {
+    children: React.ReactNode | React.ReactNode[];
+    color?: PillColor;
+    size?: PillSize;
+    className?: string;
+}

package/lib/src/types.d.ts

@@ -14,3 +14,6 @@ import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
 export type { TableProps, TableColumn, Direction, Alignment };
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+import { PillColor, PillSize } from './components/pill/types';
+export type { PillColor, PillSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.23.0",
+  "version": "2.24.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/types.ts

@@ -1,9 +1,7 @@
-import { IconName } from '@/types';
+import { IconName, SemanticColor } from '@/types';
 
 export type ButtonVariants = 'solid' | 'outline' | 'text';
 
-export type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
-
 export type ButtonIconPositions = 'left' | 'right';
 
 export type ButtonSizes = 'sm' | 'md' | 'lg';
@@ -21,7 +19,7 @@ export interface ButtonProps {
   onClick?: (...args: any[]) => void;
   variant?: ButtonVariants;
   iconPosition?: ButtonIconPositions;
-  color?: ButtonColors;
+  color?: SemanticColor;
   size?: ButtonSizes;
   iconName?: IconName;
   type?: ButtonTypes;

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

@@ -52,11 +52,11 @@ type Story = StoryObj<typeof Pill>;
 export const Default: Story = {
   args: {
     children: 'Success',
-    status: 'success',
+    color: 'success',
   },
   render: (args) => {
     return (
-      <Pill status={args.status} size={args.size}>
+      <Pill color={args.color} size={args.size}>
         {args.children}
       </Pill>
     );
@@ -69,17 +69,17 @@ export const AllSizes: Story = {
       <Container>
         <Row>
           <Col>
-            <Pill status="info" size="lg">
+            <Pill color="info" size="lg">
               Large (lg)
             </Pill>
           </Col>
           <Col>
-            <Pill status="info" size="md">
+            <Pill color="info" size="md">
               Medium (md)
             </Pill>
           </Col>
           <Col>
-            <Pill status="info" size="sm">
+            <Pill color="info" size="sm">
               Small (sm)
             </Pill>
           </Col>
@@ -95,37 +95,37 @@ export const AllStatuses: Story = {
       <Container>
         <Row>
           <Col>
-            <Pill status="success" size="md">
+            <Pill color="success" size="md">
               Success
             </Pill>
           </Col>
           <Col>
-            <Pill status="warning" size="md">
+            <Pill color="warning" size="md">
               Warning
             </Pill>
           </Col>
           <Col>
-            <Pill status="error" size="md">
+            <Pill color="error" size="md">
               Error
             </Pill>
           </Col>
           <Col>
-            <Pill status="primary" size="md">
+            <Pill color="primary" size="md">
               Primary
             </Pill>
           </Col>
           <Col>
-            <Pill status="secondary" size="md">
+            <Pill color="secondary" size="md">
               Secondary
             </Pill>
           </Col>
           <Col>
-            <Pill status="info" size="md">
+            <Pill color="info" size="md">
               Info
             </Pill>
           </Col>
           <Col>
-            <Pill status="neutral" size="md">
+            <Pill color="neutral" size="md">
               Neutral
             </Pill>
           </Col>

package/src/components/pill/Pill.tsx

@@ -1,19 +1,14 @@
 import classNames from 'classnames';
+import { PillProps } from './types';
 
-type Props = {
-  children: React.ReactNode | React.ReactNode[];
-  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
-  size?: 'sm' | 'md' | 'lg';
-};
-
-export const Pill = ({ children, status = 'info', size = 'sm', ...rest }: Props) => {
-  const className = classNames('pill', {
-    [`pill--${status}`]: status,
+export const Pill = ({ children, className, color = 'info', size = 'sm', ...rest }: PillProps) => {
+  const pillClasses = classNames('pill', className, {
+    [`pill--${color}`]: color,
     [`pill--${size}`]: size,
   });
 
   return (
-    <div className={className} {...rest}>
+    <div className={pillClasses} {...rest}>
       {children}
     </div>
   );

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

@@ -1,11 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import { Pill } from '@/components/pill/Pill';
+import { PillColor, PillSize } from '../types';
 
-type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
-type Size = 'sm' | 'md' | 'lg';
-
-const sizes = ['sm', 'md', 'lg'] as Size[];
-const statuses = [
+const sizes = ['sm', 'md', 'lg'] as PillSize[];
+const colors = [
   'success',
   'warning',
   'error',
@@ -13,13 +11,13 @@ const statuses = [
   'neutral',
   'primary',
   'secondary',
-] as Status[];
+] as PillColor[];
 
 describe('Pill', () => {
   sizes.forEach((size) => {
     it(`checks that the proper size class is applied when size is ${size}`, () => {
       render(
-        <Pill status="success" size={size} data-testid={`pill-${size}`}>
+        <Pill color="success" size={size} data-testid={`pill-${size}`}>
           Success
         </Pill>,
       );
@@ -28,15 +26,15 @@ describe('Pill', () => {
     });
   });
 
-  statuses.forEach((status) => {
-    it(`checks that the proper style class has been applied when status is ${status}`, () => {
+  colors.forEach((color) => {
+    it(`checks that the proper style class has been applied when color is ${color}`, () => {
       render(
-        <Pill status={status} size="md" data-testid={`pill-${status}`}>
+        <Pill color={color} size="md" data-testid={`pill-${color}`}>
           Status
         </Pill>,
       );
-      const pill = screen.getByTestId(`pill-${status}`);
-      expect(pill).toHaveClass(`pill pill--${status} pill--md`);
+      const pill = screen.getByTestId(`pill-${color}`);
+      expect(pill).toHaveClass(`pill pill--${color} pill--md`);
     });
   });
 });

package/src/components/pill/types.ts

@@ -0,0 +1,12 @@
+import { SemanticColor } from '@/types';
+import React from 'react';
+
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillColor = SemanticColor | 'neutral';
+
+export interface PillProps {
+  children: React.ReactNode | React.ReactNode[];
+  color?: PillColor;
+  size?: PillSize;
+  className?: string;
+}

package/src/styles/variables/_size.scss

@@ -0,0 +1,19 @@
+:root {
+  --pf-size-0: 0;
+  --pf-size-1: 4px;
+  --pf-size-2: 8px;
+  --pf-size-3: 12px;
+  --pf-size-4: 16px;
+  --pf-size-5: 20px;
+  --pf-size-6: 24px;
+  --pf-size-7: 28px;
+  --pf-size-8: 32px;
+  --pf-size-9: 36px;
+  --pf-size-10: 40px;
+  --pf-size-11: 44px;
+  --pf-size-12: 48px;
+  --pf-size-13: 52px;
+  --pf-size-14: 56px;
+  --pf-size-15: 60px;
+  --pf-size-16: 64px;
+}

package/src/styles/variables/index.scss

@@ -4,4 +4,5 @@
 @import 'borders';
 @import 'padding';
 @import 'margin';
+@import 'size';
 @import 'dropshadows';

package/src/types.ts

@@ -5,6 +5,7 @@ export type PermafrostComponent = {
   'data-testid'?: string;
 };
 
+// TODO: Deprecrate, these are legacy types
 export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
 
@@ -19,3 +20,8 @@ export type { SelectOption };
 
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
 export type { TableProps, TableColumn, Direction, Alignment };
+
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+
+import { PillColor, PillSize } from './components/pill/types';
+export type { PillColor, PillSize };