@indico-data/design-system 2.17.2 → 2.19.0

package/lib/src/components/button/Button.stories.d.ts

@@ -14,6 +14,7 @@ export declare const InfoOutline: Story;
 export declare const Text: Story;
 export declare const IconLeft: Story;
 export declare const IconRight: Story;
+export declare const IconOnly: Story;
 export declare const Error: Story;
 export declare const Success: Story;
 export declare const Warning: Story;

package/lib/src/components/forms/input/Input.d.ts

@@ -1,19 +1,17 @@
 import React from 'react';
 import { IconName } from '@/types';
-export interface InputProps {
-    label: string;
-    name: string;
+import { WithLabelProps } from '../subcomponents/Label';
+export interface InputProps extends WithLabelProps {
     value?: string | undefined;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     iconName?: IconName;
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledInput as Input };

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-export interface PasswordInputProps {
+import { WithLabelProps } from '../subcomponents/Label';
+export interface PasswordInputProps extends WithLabelProps {
     ref?: React.LegacyRef<HTMLInputElement>;
-    label: string;
     value?: string | undefined;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledPasswordInput as PasswordInput };

package/lib/src/components/forms/subcomponents/Label.d.ts

@@ -1,8 +1,11 @@
-interface LabelProps {
+import React from 'react';
+export interface LabelProps {
     label: string;
     name: string;
     isRequired?: boolean;
+}
+export interface WithLabelProps extends LabelProps {
     hasHiddenLabel?: boolean;
 }
-export declare const Label: ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Label: ({ label, name, isRequired }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelProps> & React.RefAttributes<any>>;

package/lib/src/components/forms/textarea/Textarea.d.ts

@@ -1,16 +1,13 @@
 import React from 'react';
-export interface TextareaProps {
+import { WithLabelProps } from '../subcomponents/Label';
+export interface TextareaProps extends WithLabelProps {
     ref?: React.LegacyRef<HTMLTextAreaElement>;
-    label: string;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     value?: string | undefined;
     onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     rows?: number;
     cols?: number;
     readonly?: boolean;
@@ -20,4 +17,5 @@ export interface TextareaProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledTextarea as Textarea };

package/lib/src/legacy/components/modals/ModalBase/ModalBase.d.ts

@@ -4,7 +4,6 @@ export type ModalBaseProps = PermafrostComponent & {
     children: React.ReactNode | React.ReactNode[];
     clickToDismiss?(): void;
     describedBy?: string;
-    /** a selector representing the desired parent; defaults to `#root` */
     node?: string;
     open: boolean;
     preventEscDismiss?: boolean;

package/lib/src/storybook/labelArgTypes.d.ts

@@ -0,0 +1,3 @@
+import { ArgTypes } from '@storybook/react';
+declare const labelArgTypes: ArgTypes;
+export default labelArgTypes;

package/package.json

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

package/src/components/button/Button.mdx

@@ -86,13 +86,16 @@ The states available are enabled, `disabled`, and `loading`. The button is enabl
 
 ## Icons
 
-The Icon property requires you to pass two arguments, `iconName` and `iconPosition`. The `iconName` is the name of the icon you want to use and the `iconPosition` is the position of the icon in relation to the text. The default value for `iconPosition` is `left`. The Options for `iconPosition` are `left` and `right`.
+To include an Icon pass an `iconName` prop with a valid icon name. The `iconName` is the name of the icon you want to use. You can optionally pass an `iconPosition` argument to set the position of the icon in relation to the text. The default value for `iconPosition` is `left`. If no children are passed, the button will render as an icon-only button.
 
 <Row>
   <Col xs={6} sm={4} md={3} lg={2}>
     <Story of={ButtonStories.IconLeft} />
   </Col>
-  <Col xs={2}>
+  <Col xs={6} sm={4} md={3} lg={2}>
     <Story of={ButtonStories.IconRight} />
   </Col>
-</Row>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.IconOnly} />
+  </Col>
+</Row>

package/src/components/button/Button.stories.tsx

@@ -254,6 +254,14 @@ export const IconRight: Story = {
   render: (args) => <Button {...args}>Icon Right</Button>,
 };
 
+export const IconOnly: Story = {
+  args: {
+    color: 'primary',
+    iconName: 'fa-check',
+  },
+  render: (args) => <Button {...args} />,
+};
+
 export const Error: Story = {
   args: {
     color: 'error',

package/src/components/button/Button.tsx

@@ -57,21 +57,29 @@ export const Button = (props: ButtonProps) => {
       onKeyDown={onKeyDown}
       {...rest}
     >
+      {/* Loading Icon */}
       {isLoading && (
         <Icon
           name="fa-circle-notch"
-          style={{
-            animation: 'spin 1s linear infinite',
-          }}
+          style={{ animation: 'spin 1s linear infinite' }}
           className="mr-2"
-          ariaLabel={'Loading...'}
+          ariaLabel="Loading..."
         />
       )}
-      {iconPosition === 'left' && iconName && (
+
+      {/* Icon without children */}
+      {!children && iconName && <Icon name={iconName} ariaLabel={`${iconName} Icon`} />}
+
+      {/* Left Icon with children */}
+      {children && iconPosition === 'left' && iconName && (
         <Icon name={iconName} className="mr-2" ariaLabel={`${iconName} Icon`} />
       )}
+
+      {/* Button children */}
       {children}
-      {iconPosition === 'right' && iconName && (
+
+      {/* Right Icon with children */}
+      {children && iconPosition === 'right' && iconName && (
         <Icon name={iconName} className="ml-2" ariaLabel={`${iconName} Icon`} />
       )}
     </button>

package/src/components/button/__tests__/Button.test.tsx

@@ -70,6 +70,7 @@ describe('Button', () => {
       expect(button).toBeDisabled();
     });
   });
+
   describe('button interactions', () => {
     beforeEach(() => {
       onClick.mockClear();
@@ -77,11 +78,13 @@ describe('Button', () => {
       onMouseExit.mockClear();
       onKeyDown.mockClear();
     });
+
     it('calls the onKeyDown function when a key is pressed', async () => {
       render(<Button onKeyDown={onKeyDown} onClick={onClick} ariaLabel="btn" />);
       await userEvent.type(screen.getByRole('button'), '{enter}');
       expect(onKeyDown).toHaveBeenCalledTimes(1);
     });
+
     it('calls the onClick function when the button is clicked', async () => {
       render(<Button onClick={onClick} ariaLabel="btn" />);
       await userEvent.click(screen.getByRole('button'));
@@ -99,10 +102,45 @@ describe('Button', () => {
       await userEvent.hover(screen.getByRole('button'));
       expect(onMouseEnter).toHaveBeenCalledTimes(1);
     });
+
     it('calls the onMouseExit function when the mouse leaves the button', async () => {
       render(<Button onMouseExit={onMouseExit} onClick={onClick} ariaLabel="btn" />);
       await userEvent.unhover(screen.getByRole('button'));
       expect(onMouseExit).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('button with icons', () => {
+    it('renders an icon when iconName is provided and no children', () => {
+      render(<Button iconName="fa-wind" ariaLabel="icon button" />);
+      const icon = screen.getByLabelText('fa-wind Icon');
+      expect(icon).toBeInTheDocument();
+      expect(icon).not.toHaveClass('mr-2');
+      expect(icon).not.toHaveClass('ml-2');
+    });
+
+    it('renders an icon to the left when iconPosition is left and children are present', () => {
+      render(
+        <Button iconName="fa-wind" iconPosition="left" ariaLabel="icon button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('fa-wind Icon');
+      const button = screen.getByRole('button');
+      expect(button).toContainElement(icon);
+      expect(icon).toHaveClass('mr-2');
+    });
+
+    it('renders an icon to the right when iconPosition is right and children are present', () => {
+      render(
+        <Button iconName="fa-wind" iconPosition="right" ariaLabel="icon button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('fa-wind Icon');
+      const button = screen.getByRole('button');
+      expect(button).toContainElement(icon);
+      expect(icon).toHaveClass('ml-2');
+    });
+  });
 });

package/src/components/button/styles/Button.scss

@@ -47,38 +47,30 @@
     background: var(--pf-button-hover-#{$color-name}-color);
   }
 
-  &:focus {
-    border-color: var(--pf-button-focus-#{$color-name}-color);
-    background: var(--pf-button-focus-#{$color-name}-color);
-  }
-
   &:disabled {
-    background: var(--pf-button-disabled-#{$color-name}-color);
-    border-color: var(--pf-button-disabled-#{$color-name}-color);
+    background: var(--pf-button-disabled-#{$color-name}-background-color);
+    color: var(--pf-button-disabled-#{$color-name}-text-color);
+    border-color: var(--pf-button-disabled-#{$color-name}-border-color);
   }
 
   &.btn--outline {
-    color: var(--pf-button-#{$color-name}-color);
-    background-color: var(--pf-button-outline-background-color);
+    color: var(--pf-button-outline-#{$color-name}-text-color);
+    background-color: var(--pf-button-outline-#{$color-name}-background-color);
+    border-color: var(--pf-button-#{$color-name}-outline-border-color);
 
     &:hover {
-      background-color: var(--pf-button-outline-hover-#{$color-name}-color);
-      border-color: var(--pf-button-hover-#{$color-name}-color);
-    }
-
-    &:focus {
-      border-color: var(--pf-button-focus-#{$color-name}-color);
-      background-color: var(--pf-button-outline-hover-#{$color-name}-color);
-      color: var(--pf-button-focus-#{$color-name}-color);
+      color: var(--pf-button-outline-#{$color-name}-hover-text-color);
+      background-color: var(--pf-button-outline-hover-#{$color-name}-background-color);
+      border-color: var(--pf-button-hover-#{$color-name}-outline-border-color);
     }
 
     &:disabled {
-      border-color: var(--pf-button-disabled-#{$color-name}-color);
-      color: var(--pf-button-disabled-#{$color-name}-color);
+      border-color: var(--pf-button-disabled-#{$color-name}-outline-border-color);
+      color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
+      background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
       &:hover {
-        border-color: var(--pf-button-disabled-#{$color-name}-color);
-        color: var(--pf-button-disabled-#{$color-name}-color);
-        background-color: var(--pf-button-outline-background-color);
+        color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
+        background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
       }
     }
   }

package/src/components/button/styles/_variables.scss

@@ -11,7 +11,6 @@
   --pf-button-disabled-primary-color: var(--pf-primary-color-300);
   --pf-button-focus-primary-color: var(--pf-primary-color-900);
   --pf-button-hover-primary-color: var(--pf-primary-color-400);
-  --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
   --pf-button-primary-color: var(--pf-primary-color);
   --pf-button-primary-text-color: var(--pf-white-color);
 
@@ -61,8 +60,6 @@
 
   // Outline Buttons
   --pf-button-outline-background-color: var(--pf-white-color);
-
-  // Button Radius
   --pf-button-rounded: var(--pf-rounded);
 }
 
@@ -75,6 +72,47 @@
   --pf-button-background-info-color: var(--pf-info-color);
   --pf-button-hover-info-color: var(--pf-gray-color-400);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+
+  --pf-button-outline-primary-background-color: var(--pf-white-color);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color);
+  --pf-button-outline-primary-border-color: var(--pf-primary-color);
+
+  --pf-button-outline-secondary-background-color: var(--pf-white-color);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color);
+  --pf-button-outline-secondary-border-color: var(--pf-secondary-color);
+
+  // outline
+  --pf-button-primary-outline-border-color: var(--pf-primary-color);
+
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color);
+
+  // hover
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-400);
+  --pf-button-outline-hover-primary-color: var(--pf-primary-color-300);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-100);
+
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-300);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-secondary-color-100);
+
+  // disabled
+  //general
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-300);
+
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-300);
+
+  // outline
+  --pf-button-disabled-primary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-300);
+
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-secondary-color-300);
 }
 
 // Dark Theme Specific Variables
@@ -82,8 +120,43 @@
   --pf-button-disabled-success-color: var(--pf-green-color-400);
   --pf-button-disabled-warning-color: var(--pf-orange-color-400);
   --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
-
   --pf-button-background-info-color: var(--pf-gray-color-800);
   --pf-button-hover-info-color: var(--pf-gray-color-600);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
+
+  // outline
+  --pf-button-outline-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color-100);
+  --pf-button-primary-outline-border-color: var(--pf-primary-color-100);
+
+  --pf-button-outline-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color-700);
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color-700);
+
+  //hover
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-200);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-primary-border-color: var(--pf-primary-color-200);
+
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-secondary-border-color: var(--pf-secondary-color-400);
+
+  //disabled
+  // general
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-900);
+
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-900);
+  --pf-button-disabled-secondary-text-color: var(--pf-secondary-color-400);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-900);
+  // outline
+  --pf-button-disabled-primary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-400);
+
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-primary-color-400);
 }

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -4,15 +4,15 @@
 :root [data-theme='dark'] {
   --pf-checkbox-background-color: var(--pf-white-color);
   --pf-checkbox-check-color: var(--pf-primary-color);
-  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-400);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-checkbox-background-color: var(--pf-primary-color-200);
+  --pf-checkbox-background-color: var(--pf-primary-color-500);
   --pf-checkbox-check-color: var(--pf-white-color);
-  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
 }
 

package/src/components/forms/input/Input.mdx

@@ -5,13 +5,26 @@ import * as Input from './Input.stories';
 
 # Input
 
-The input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+The input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (**_Our components are compatible with but do not provide the plugin_**)
 
 <Canvas
   of={Input.Default}
   source={{
     code: `
-    <Input name="first_name" required={true} isRequired helpText="This Is Help Text" isClearable label="Label Name" iconName="user" />
+<Input 
+  label="Label Name"
+  name="first_name"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  hasHiddenLabel={false}
+  isClearable
+  iconName="user"
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}
+/>
     `,
   }}
 />

package/src/components/forms/input/Input.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Input, InputProps } from './Input';
 import { SetStateAction, useEffect, useState } from 'react';
 import { iconNames } from 'build/generated/iconTypes';
+import labelArgTypes from '@/storybook/labelArgTypes';
 
 const meta: Meta = {
   title: 'Forms/Input',
@@ -16,28 +17,9 @@ const meta: Meta = {
           summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
         },
       },
+      type: { name: 'function', required: true },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the input field',
@@ -47,6 +29,7 @@ const meta: Meta = {
           summary: 'string',
         },
       },
+      type: { name: 'string', required: false },
     },
     value: {
       control: 'text',
@@ -57,17 +40,7 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-    },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required asterisk on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
+      type: { name: 'string', required: false },
     },
     isDisabled: {
       control: 'boolean',
@@ -81,7 +54,7 @@ const meta: Meta = {
       defaultValue: { summary: 'false' },
     },
     errorMessage: {
-      control: false,
+      control: 'text',
       description: 'Error message',
       table: {
         category: 'Props',
@@ -101,17 +74,6 @@ const meta: Meta = {
         },
       },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     iconName: {
       control: 'select',
       options: iconNames,
@@ -140,6 +102,7 @@ const meta: Meta = {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 
@@ -147,11 +110,12 @@ export default meta;
 
 type Story = StoryObj<typeof Input>;
 
-const defaultArgs = {
+const defaultArgs: InputProps = {
   label: 'Enter your name',
   name: 'first_name',
   placeholder: 'Please enter a value',
-} as InputProps;
+  onChange: () => {},
+};
 
 export const Default: Story = {
   args: {
@@ -177,6 +141,7 @@ export const Default: Story = {
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
       setValue(e.target.value);
     };
+
     return <Input {...args} value={value} onChange={handleChange} />;
   },
 };