@indico-data/design-system 2.45.6 → 2.47.0

package/lib/legacy/components/index.d.ts

@@ -1,3 +1,2 @@
 export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
-export { ConfirmModal, ModalBase } from './modals';
 export { Tooltip } from './Tooltip';

package/package.json

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

package/src/components/badge/Badge.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Badge from './Badge.stories';
+import { Container, Row, Col } from '../grid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+
+
+<Meta title="Components/Badge" name="Badge" of={Badge} />
+
+# Badge
+The Badge component is designed to display concise information about an item. It is versatile and can be used in various contexts, such as within dropdowns or other interactive elements.
+
+<Canvas of={Badge.String} />
+
+### The following props are available for the Badge component:
+
+<Controls of={Badge.String} />
+
+<Container>
+  <Row>
+    <Col xs={12}>
+      <h2 >Usage</h2>
+    </Col>
+    <Col sm={6}>
+      <h3>String</h3>
+      <p>The string prop is used to display a string inside the badge.</p>
+      <Canvas of={Badge.String} />
+    </Col>
+    <Col sm={6}>
+      <h3>With Dropdown</h3>
+      <p>The dropdown prop is used to display a dropdown inside the badge as a child element.</p>
+      <Canvas of={Badge.WithDropdown} />
+    </Col>
+  </Row>
+</Container>

package/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,109 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+import { Col, Container, Row } from '../grid';
+import { FloatUI } from '../floatUI';
+import { Menu } from '../menu';
+import { Icon } from '../icons';
+
+const meta: Meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'The size of the badge',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes for the badge component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the badge (superseded by the string prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    string: {
+      control: 'text',
+      description: 'The string to display in the badge. (supersedes children prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const String: Story = {
+  args: {
+    className: '',
+    string: 'Badge',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Badge {...args} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const WithDropdown: Story = {
+  args: {
+    className: '',
+    size: 'sm',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4} style={{ height: '130px' }}>
+            <Badge {...args}>
+              <FloatUI ariaLabel="Badge">
+                <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                  <p className="text-overline">Badge</p>
+                  <Icon size="xs" className="ml-3" name="chevron-down" />
+                </div>
+                <Menu className="pa-2">
+                  <li>Item 1</li>
+                  <li>Item 2</li>
+                  <li>Item 3</li>
+                  <li>Item 4</li>
+                </Menu>
+              </FloatUI>
+            </Badge>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/badge/Badge.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { BadgeProps } from './types';
+
+export const Badge = ({ className = '', children, size = 'md', string, ...rest }: BadgeProps) => {
+  const badgeClasses = classNames(
+    'badge',
+    {
+      [`badge--${size}`]: size,
+    },
+    className,
+  );
+
+  return (
+    <div className={badgeClasses} {...rest}>
+      {string ? <p>{string}</p> : children}
+    </div>
+  );
+};

package/src/components/badge/__tests__/Badge.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from '@/components/badge/Badge';
+
+describe('Badge', () => {
+  it.each(['xs', 'sm', 'md', 'lg', 'xl'] as const)('renders the badge with size %s', (size) => {
+    render(<Badge size={size}>Badge</Badge>);
+    expect(screen.getByText('Badge')).toHaveClass(`badge--${size}`);
+  });
+  it('renders the badge with content inside', () => {
+    render(<Badge>Badge</Badge>);
+    expect(screen.getByText('Badge')).toBeInTheDocument();
+  });
+  it('renders the badge with string', () => {
+    render(<Badge string="Badge" />);
+    expect(screen.getByText('Badge')).toBeInTheDocument();
+  });
+});

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge';

package/src/components/badge/styles/Badge.scss

@@ -0,0 +1,61 @@
+// Common Variables
+:root {
+  --pf-badge-rounded: var(--pf-rounded);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-badge-background-color: var(--pf-primary-color-600);
+  --pf-badge-border-color: var(--pf-border-color);
+}
+
+.badge {
+  border-radius: var(--pf-rounded-lg);
+  padding: var(--pf-padding-3);
+  background: var(--pf-badge-background-color);
+  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
+  box-sizing: border-box;
+  width: fit-content;
+
+  &--xs {
+    padding: var(--pf-padding-1);
+    p {
+      font-size: var(--pf-font-size-overline);
+    }
+  }
+
+  &--sm {
+    padding: var(--pf-padding-2);
+    p {
+      font-size: var(--pf-font-size-body2);
+    }
+  }
+
+  &--md {
+    padding: var(--pf-padding-3);
+    p {
+      font-size: var(--pf-font-size-body);
+    }
+  }
+
+  &--lg {
+    padding: var(--pf-padding-4);
+    p {
+      font-size: var(--pf-font-size-h2);
+    }
+  }
+
+  &--xl {
+    padding: var(--pf-padding-5);
+    p {
+      font-size: var(--pf-font-size-h1);
+    }
+  }
+}

package/src/components/badge/types.ts

@@ -0,0 +1,8 @@
+export type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface BadgeProps {
+  className?: string;
+  children?: React.ReactNode;
+  string?: string;
+  size?: BadgeSizes;
+}

package/src/components/card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames'; // Assuming you have this utility
+import classNames from 'classnames';
 
 type Props = {
   className?: string;

package/src/components/index.ts

@@ -18,3 +18,5 @@ export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
+export { Modal } from './modal';
+export { Badge } from './badge';

package/src/components/menu/Menu.tsx

@@ -3,11 +3,12 @@ import classNames from 'classnames';
 
 export type MenuProps = {
   children: React.ReactNode;
+  className?: string;
 };
 
-export function Menu({ children }: MenuProps) {
+export function Menu({ children, className, ...rest }: MenuProps) {
   return (
-    <div className="menu">
+    <div className={classNames('menu', className)} {...rest}>
       {React.Children.map(children, (child) =>
         React.isValidElement(child)
           ? React.cloneElement(child as ReactElement, {

package/src/components/modal/Modal.mdx

@@ -0,0 +1,111 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Modal from './Modal.stories';
+
+<Meta title="Components/Modal" name="Modal" of={Modal} />
+
+# Modal
+The Modal component provides us with a way to display content in a modal window. It can be used as a confirmation modal or as a content modal. It extends the react-modal library. For more information on props not listed here, please visit the [react-modal documentation](https://github.com/reactjs/react-modal).
+<Canvas of={Modal.Default} />
+
+### The following props are available for the Modal component:
+
+<Controls of={Modal.Default} />
+
+## Usage
+We have designed this modal with the intention for it to be used as a wrapper for content as you will see below. The recommended way to best use this component is to create your own wrapper in your application for specific modal needs. For example, you may create a wrapper component that displays a confirmation modal. You may also wish to create one for a stepper modal. The idea is that you wrap this modal in a component and build the body of your modal in that wrapped component so that you can reuse the modal component for different modal needs.
+
+### Opening The Modal
+To open the modal, you can use the following as an example. You create a state variable to control the modal's open/close state and then pass that state variable to the modal component.
+
+```tsx
+const [isOpen, setIsOpen] = useState<boolean>(false);
+
+const handleOpen = () => {
+  setIsOpen(true);
+};
+
+const handleClose = () => {
+  setIsOpen(false);
+};
+
+<Button onClick={handleOpen}>Open Modal</Button>
+
+// Modal Component
+<Modal isOpen={isOpen} onRequestClose={handleClose}>
+  <h2>The Legend of Zelda</h2>
+</Modal>
+```
+
+### Content Modal
+The content inside of the Modal tag will be displayed when you open the modal. Anything you pass to the modal should be visible. There is also no set width for the modal, it will take up the width you provide the body elements.
+
+```tsx
+<Modal
+  isOpen={isOpen}
+  onRequestClose={() => {}}
+  shouldCloseOnEsc
+  shouldCloseOnOverlayClick
+>
+  <h2>
+    The Legend of Zelda
+  </h2>
+  <p>
+    In the mystical realm of Hyrule, where ancient magic flows through verdant fields and towering mountains, a timeless tale unfolds across countless generations. The legendary hero Link, eternally reborn when darkness threatens the land, stands as the chosen wielder of the Master Sword and bearer of the Triforce of Courage. Through the ages, he has faced the malevolent forces of Ganon, whose insatiable desire for power has brought destruction and chaos to this peaceful kingdom.
+  </p>
+  <p>
+    Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures. Together with Link, she maintains the delicate balance between light and shadow, protecting the realm from those who would seek to corrupt its divine power. From the windswept peaks of Death Mountain to the depths of Lake Hylia, their epic saga continues to inspire hope and courage in all who call Hyrule home, as they battle against the forces of evil that would plunge their world into darkness.
+  </p>
+  <div className="actions text-align--right">
+    <hr />
+    <Button
+      ariaLabel="Close"
+      onClick={() => {}}
+      variant="outline"
+    >
+      Close
+    </Button>
+  </div>
+</Modal>
+```
+
+### Confirmation Modal
+If you are looking for a confirmation modal, you can use the following as an example.
+
+```tsx
+<Modal isOpen={isOpen} onRequestClose={handleClose}>
+  <h2>Would you like to continue?</h2>
+  <p>
+    If you would like to proceed, please click the confirm button. Otherwise, click the
+    cancel button.
+  </p>
+  <hr />
+  <Row nogutter justify="end" align="center">
+    <Col xs="content">
+      <Button
+        onClick={() => {
+          console.log('cancelled');
+          handleClose();
+        }}
+        className="mr-2"
+        variant="outline"
+        ariaLabel="Cancel"
+      >
+        Cancel
+      </Button>
+      <Button
+        onClick={() => {
+          console.log('confirmed');
+          handleClose();
+        }}
+        ariaLabel="Confirm"
+      >
+        Confirm
+      </Button>
+    </Col>
+  </Row>
+</Modal>
+```
+
+### Title vs Content
+The title prop is optional for the modal. If you do not provide a title, the modal will only display the content. If you do provide a title, the modal will display the title and content.
+  

package/src/components/modal/Modal.stories.tsx

@@ -0,0 +1,275 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+import { Col, Container, Row } from '../grid';
+import { useState } from 'react';
+import { Button } from '../button';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
+
+const meta: Meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes for the badge component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the badge (superseded by the string prop)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Whether the modal is open',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    onRequestClose: {
+      control: false,
+      description: 'Callback function to be called when the modal is closed',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'function',
+        },
+      },
+    },
+    portalClassName: {
+      control: false,
+      description: 'Additional classes for the portal element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    overlayClassName: {
+      control: false,
+      description: 'Additional classes for the overlay element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    appElement: {
+      control: false,
+      description: 'The element to use as the app element',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'HTMLElement',
+        },
+      },
+    },
+    shouldCloseOnOverlayClick: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the overlay is clicked',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    shouldCloseOnEsc: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the escape key is pressed',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    contentElement: {
+      control: false,
+      description: 'Custom content element for the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    overlayElement: {
+      control: false,
+      description: 'Custom overlay element for the modal',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    position: {
+      control: 'select',
+      options: ['top', 'center'],
+      description: 'The position of the modal opens on the page',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    className: '',
+    onRequestClose: () => {
+      console.log('closed');
+    },
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
+              <h2>The Legend of Zelda</h2>
+              <p>
+                In the mystical realm of Hyrule, where ancient magic flows through verdant fields
+                and towering mountains, a timeless tale unfolds across countless generations. The
+                legendary hero Link, eternally reborn when darkness threatens the land, stands as
+                the chosen wielder of the Master Sword and bearer of the Triforce of Courage.
+                Through the ages, he has faced the malevolent forces of Ganon, whose insatiable
+                desire for power has brought destruction and chaos to this peaceful kingdom.
+              </p>
+              <p>
+                Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal
+                bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures.
+                Together with Link, she maintains the delicate balance between light and shadow,
+                protecting the realm from those who would seek to corrupt its divine power. From the
+                windswept peaks of Death Mountain to the depths of Lake Hylia, their epic saga
+                continues to inspire hope and courage in all who call Hyrule home, as they battle
+                against the forces of evil that would plunge their world into darkness.
+              </p>
+              <div className="actions text-align--right">
+                <hr />
+                <Button onClick={handleClose} ariaLabel="Close" variant="outline">
+                  Close
+                </Button>
+              </div>
+            </Modal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const ConfirmationModal: Story = {
+  args: {
+    className: '',
+    onRequestClose: () => {
+      console.log('closed');
+    },
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
+  },
+
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
+              <h2>Would you like to continue?</h2>
+              <p>
+                If you would like to proceed, please click the confirm button. Otherwise, click the
+                cancel button.
+              </p>
+              <hr />
+              <Row nogutter justify="end" align="center">
+                <Col xs="content">
+                  <Button
+                    onClick={() => {
+                      console.log('cancelled');
+                      handleClose();
+                    }}
+                    className="mr-2"
+                    variant="outline"
+                    ariaLabel="Cancel"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      console.log('confirmed');
+                      handleClose();
+                    }}
+                    ariaLabel="Confirm"
+                  >
+                    Confirm
+                  </Button>
+                </Col>
+              </Row>
+            </Modal>
+            <Button ariaLabel="open modal" onClick={handleOpen}>
+              Open modal
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};