@indico-data/design-system 1.0.57 → 2.0.0

package/src/components/button/Button.tsx

@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Icon } from '../../legacy/components/Icon/Icon';
+
+import { ButtonProps } from './types';
+
+export const Button = (props: ButtonProps) => {
+  const {
+    ariaLabel,
+    children,
+    isLoading,
+    isDisabled,
+    variant = 'solid',
+    color = 'primary',
+    iconPosition = 'left',
+    iconName,
+    onClick,
+    type = 'button',
+    size = 'md',
+    onMouseEnter,
+    onMouseExit,
+    onKeyDown,
+    className,
+    href,
+    ...rest
+  } = props;
+
+  const buttonClasses = classNames(
+    'btn',
+    {
+      [`btn--${color}`]: color,
+      [`btn--${variant}`]: variant,
+      [`btn--${size}`]: size,
+      'btn--loading': isLoading,
+    },
+    className,
+  );
+
+  const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!isLoading && props.onClick) {
+      props.onClick(event);
+    }
+  };
+
+  return (
+    <button
+      disabled={isLoading || isDisabled}
+      className={buttonClasses}
+      role="button"
+      onClick={handleOnClick}
+      aria-label={ariaLabel || 'button'}
+      aria-disabled={isLoading || isDisabled}
+      aria-busy={isLoading}
+      type={type}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseExit}
+      onKeyDown={onKeyDown}
+      {...rest}
+    >
+      {/* TODO -- Redo Icon component */}
+      {isLoading && (
+        <Icon
+          name="fa-circle-notch"
+          style={{
+            animation: 'spin 1s linear infinite',
+          }}
+          className="mr-2"
+          ariaLabel={'Loading...'}
+        />
+      )}
+      {iconPosition === 'left' && iconName && (
+        <Icon name={iconName} className="mr-2" ariaLabel={`${iconName} Icon`} />
+      )}
+      {children}
+      {iconPosition === 'right' && iconName && (
+        <Icon name={iconName} className="ml-2" ariaLabel={`${iconName} Icon`} />
+      )}
+    </button>
+  );
+};

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

@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '@/components/button';
+
+const onClick = jest.fn();
+const onMouseEnter = jest.fn();
+const onMouseExit = jest.fn();
+const onKeyDown = jest.fn();
+
+describe('Button', () => {
+  describe('button styles', () => {
+    it('loads the corresponding color class from the props', () => {
+      render(
+        <Button color="warning" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('btn--warning');
+    });
+
+    it('loads the corresponding variant class from the props', () => {
+      render(
+        <Button variant="outline" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('btn--outline');
+    });
+
+    it('loads the corresponding size class from the props', () => {
+      render(
+        <Button size="lg" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('btn--lg');
+    });
+
+    it('loads the corresponding loading class from the props', () => {
+      render(
+        <Button isLoading={true} onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('btn--loading');
+      expect(button).toBeDisabled();
+    });
+
+    it('does not apply the loading class when not loading', () => {
+      render(
+        <Button isLoading={false} onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).not.toHaveClass('btn--loading');
+      expect(button).toBeEnabled();
+    });
+    it('disables the button when disabled prop is true', () => {
+      render(
+        <Button isDisabled={true} onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+  });
+  describe('button interactions', () => {
+    beforeEach(() => {
+      onClick.mockClear();
+      onMouseEnter.mockClear();
+      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'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call the onClick function when the button is loading', async () => {
+      render(<Button onClick={onClick} isLoading={true} ariaLabel="btn" />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(0);
+    });
+
+    it('calls the onMouseEnter function when the mouse enters the button', async () => {
+      render(<Button onMouseEnter={onMouseEnter} ariaLabel="btn" onClick={onClick} />);
+      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);
+    });
+  });
+});

package/src/components/button/enums.ts

@@ -0,0 +1,9 @@
+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';

package/src/components/button/index.ts

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

package/src/components/button/types.ts

@@ -0,0 +1,29 @@
+import { IconName } 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';
+
+export interface ButtonProps {
+  className?: string;
+  ariaLabel: string;
+  children?: React.ReactNode | React.ReactNode[];
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  isLoading?: boolean;
+  onClick?: (...args: any[]) => void;
+  variant?: ButtonVariants;
+  iconPosition?: ButtonIconPositions;
+  color?: ButtonColors;
+  size?: ButtonSizes;
+  iconName?: IconName;
+  type?: ButtonTypes;
+  href?: string;
+  isDisabled?: boolean;
+}

package/src/components/grid/Grid.scss

@@ -0,0 +1,31 @@
+@mixin sample-cell-style($bg-color, $text-color) {
+  background: var(--#{$bg-color});
+  color: var(--#{$text-color});
+  padding: 1rem;
+  margin: 2px 0;
+}
+
+.sb__sample-cell {
+  @include sample-cell-style(pf-primary-color-400, pf-gray-color);
+
+  &-secondary {
+    @include sample-cell-style(pf-secondary-color-400, pf-gray-color);
+  }
+
+  &-green {
+    @include sample-cell-style(pf-green-color-400, pf-secondary-color-900);
+  }
+
+  &-orange {
+    @include sample-cell-style(pf-orange-color-400, pf-secondary-color-900);
+  }
+
+  &-red {
+    @include sample-cell-style(pf-red-color-400, pf-gray-color);
+  }
+}
+
+.sb__sample-row {
+  min-height: 110px;
+  margin: 1em 0;
+}

package/src/components/grid/GridSystem.mdx

@@ -0,0 +1,138 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as ContainerStories from './container/Container.stories';
+import '@/components/grid/Grid.scss';
+
+<Meta title="Layout/Grid" name="Grid System" />
+
+# Grid Layout System
+
+This section provides documentation for the Grid System, a convenient wrapper around the well-established [react-grid-system](https://www.npmjs.com/package/react-grid-system) library. It supports a range of layout designs, from simple to complex, providing horizontal and vertical alignment with fine-grained control over spacing, alignment, and responsive behavior.
+
+### Default Grid Configuration
+
+Here you can see a Grid in its default, fixed-width configuration. The default configuration respects the responsive breakpoints set by the library.
+
+<Canvas
+  of={ContainerStories.Default}
+  source={{
+    code: `<Container>
+    <Row>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+    </Row>
+</Container>
+    `,
+  }}
+/>
+
+### Fluid Grid
+
+This configuration uses a fluid container, setting `fluid` to `true`. In the context of a container, it means the width of the container will be `100%`.
+
+<Canvas
+  of={ContainerStories.Fluid}
+  source={{
+    code: `<Container fluid>
+    <Row>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+    </Row>
+</Container>
+    `,
+  }}
+/>
+
+### Responsive Grid
+
+This example demonstrates the responsive capabilities of the grid, adjusting column sizes at different breakpoints.
+
+<Canvas
+  of={ContainerStories.Responsive}
+  source={{
+    code: `<Container>
+      <Row>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+      </Row>
+</Container>
+    `,
+  }}
+/>
+
+### Nested Grids
+
+Nested grids demonstrate the flexibility and scalability of the grid system. This example shows how grids can be layered within each other to build complex hierarchical layouts.
+
+<Canvas
+  of={ContainerStories.NestedGrids}
+  source={{
+    code: `<Container>
+  <Row>
+    <Col sm={6}>
+      <div className="sb__sample-cell-orange" />
+      <Row>
+        <Col sm={6}>
+          <div className="sb__sample-cell-green" />
+        </Col>
+        <Col sm={6}>
+          <div className="sb__sample-cell-green" />
+        </Col>
+      </Row>
+    </Col>
+    <Col sm={6}>
+      <div className="sb__sample-cell-secondary" />
+    </Col>
+  </Row>
+</Container>
+    `,
+  }}
+/>
+
+### Offsetting Columns
+
+This example explains how to offset columns within the grid to create gaps or spacing as needed.
+
+<Canvas of={ContainerStories.Offset} />
+
+## Breakpoints and Responsiveness
+
+Breakpoints are crucial for leveraging the Grid's responsive capabilities. These predefined screen widths determine how the grid's layout adjusts to optimize readability and usability:
+
+- Extra small (xs): for devices with screen width less than `576px`.
+- Small (sm): for devices with screen width between `576px` and `767px` (mobile devices).
+- Medium (md): for devices with screen width between `768px` and `991px` (tablets).
+- Large (lg): for devices with screen width between `992px` and `1199px` (small desktops).
+- Extra Large (xl): for devices with screen width between `1200px` and `1599px` (desktops).
+- Double Extra Large (xxl): for devices with screen width between `1600px` and `1919px`.
+- Triple Extra Large (xxxl): for devices with screen width greater than `1920px`.
+
+Refer to the react-grid-system documentation to understand how these breakpoints integrate with grid properties like grid-template-columns, ensuring your application looks great on any device.
+
+## Additional Information
+
+For more detailed information and advanced usage examples, visit the official documentation for [react-grid-system](https://sealninja.github.io/react-grid-system/#section-introduction). This documentation is highly relevant as our Grid component utilizes the same principles and properties, making it a robust tool for building adaptable user interfaces in conjunction with other UI components from our library../container/Grid.stories
+./container/Container.stories

package/src/components/grid/col/Col.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as ColStories from './Col.stories';
+
+<Meta title="Layout/Grid" name="Col" />
+
+# Column
+
+This section provides documentation for the Col component, a flexible wrapper around the `react-grid-system` library's `Col` component. It facilitates the creation of responsive, adjustable columns within grid layouts, suitable for versatile layout designs.
+
+## Default Column Configuration
+
+The Col component in its default configuration is used to create flexible column spaces within a row, ensuring they adjust properly across different screen sizes.
+
+<Canvas
+  of={ColStories.Default}
+  source={{
+    code: `
+ <Container fluid>
+  <Row>
+    <Col>
+      <div className="sb__sample-cell" />
+    </Col>
+  </Row>
+</Container>`,
+  }}
+/>
+
+<Controls of={ColStories.Default} />
+
+## Comprehensive Properties List
+
+The `Col` component accepts the following properties to control its behavior and styling:
+
+- **`children`** (node): Content of the column.
+- **`xs`**, **`sm`**, **`md`**, **`lg`**, **`xl`**, **`xxl`** (number | string): Responsive column size specifications. Accepts numbers or percentage strings to define the width of the column relative to the row. **_EXAMPLE_** `<Col md="6">`
+- **`offset`** (object): Defines the offset of the column for each breakpoint, such as `{ xs: 1, sm: 2, md: 1 }`.
+- **`order`** (object): Defines the order of the column within the row across different breakpoints.
+- **`alignSelf`** (enum): Aligns the column vertically within the row. Options: 'auto', 'start', 'center', 'end', 'stretch'.
+- **`pull`**, **`push`** (object): Adjust the positioning of the column using 'pull' to move it to the left or 'push' to move it to the right at various breakpoints.
+- **`width`** (number): A fixed width of the column for all screenclasses.
+- **`noGutter`** (bool): If true, removes the gutters (padding) between columns.
+- **`style`** (object): Inline styles that can be passed to the column for additional styling.
+
+Each property allows for detailed control of the column's appearance and behavior, making the `Col` component highly adaptable for various design requirements. For more detailed information, refer to the [react-grid-system documentation](https://sealninja.github.io/react-grid-system/#col).

package/src/components/grid/col/Col.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Col } from '../col/Col';
+import { Container, Row } from 'react-grid-system';
+import '@/components/grid/Grid.scss';
+
+const meta: Meta = {
+  title: 'remove/grid/col',
+  component: Col,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Col>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Container fluid>
+      <Row>
+        <Col {...args}>
+          <div className="sb__sample-cell" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};

package/src/components/grid/col/Col.tsx

@@ -0,0 +1,5 @@
+import { Col as RgsCol, ColProps } from 'react-grid-system';
+
+export const Col = ({ ref: _ref, ...rest }: ColProps) => {
+  return <RgsCol {...rest} />;
+};

package/src/components/grid/container/Container.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as ContainerStories from './Container.stories';
+import '@/components/grid/Grid.scss';
+
+<Meta title="Layout/Grid" name="Container" />
+
+# Container
+
+This section provides documentation for the Container component, a convenient wrapper around the well-established [react-grid-system](https://www.npmjs.com/package/react-grid-system) library. It supports a range of layout designs, from simple to complex, providing horizontal and vertical alignment with fine-grained control over spacing, alignment, and responsive behavior.
+
+## Default Container Configuration
+
+Here you can see the Container component in its default configuration.
+
+<Canvas
+  of={ContainerStories.Default}
+  source={{
+    code: `
+<Container>
+    <Row>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+            <div className="sb__sample-cell" />
+        </Col>
+    </Row>
+</Container>`,
+  }}
+/>
+
+## Comprehensive Properties List
+
+The `Container` component accepts the following properties to control its behavior and styling:
+
+- **`children`** (node): Content of the component.
+- **`component`** (elementType): Use your own component.
+- **`fluid`** (bool): True makes the container full-width, false fixed-width.
+- **`xs`**, **`sm`**, **`md`**, **`lg`**, **`xl`**, **`xxl`**, **`xxxl`** (number | string): True makes container fluid only in specificed breakpoint, not present means fluid everywhere.
+- **`style`** (object): Optional styling.

package/src/components/grid/container/Container.stories.tsx

@@ -0,0 +1,117 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+import { Row } from '../row/Row';
+import { Col } from '../col/Col';
+
+const meta: Meta = {
+  title: 'remove/grid/container',
+  component: Container,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Container>;
+
+export const Default: Story = {
+  args: {
+    fluid: false,
+  },
+  render: (args) => (
+    <Container {...args}>
+      <Row>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};
+
+export const Fluid: Story = {
+  args: {
+    fluid: true,
+  },
+  render: (args) => (
+    <Container {...args}>
+      <Row>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col sm={4}>
+          <div className="sb__sample-cell" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};
+
+export const Responsive: Story = {
+  render: (args) => (
+    <Container {...args}>
+      <Row>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <div className="sb__sample-cell" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};
+
+export const NestedGrids: Story = {
+  args: {
+    fluid: true,
+  },
+  render: (args) => (
+    <Container {...args}>
+      <Row>
+        <Col sm={6}>
+          <div className="sb__sample-cell-orange" />
+          <Row>
+            <Col sm={6}>
+              <div className="sb__sample-cell-green" />
+            </Col>
+            <Col sm={6}>
+              <div className="sb__sample-cell-green" />
+            </Col>
+          </Row>
+        </Col>
+        <Col sm={6}>
+          <div className="sb__sample-cell-secondary" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};
+
+export const Offset: Story = {
+  args: {
+    fluid: true,
+  },
+  render: (args) => (
+    <Container {...args}>
+      <Row>
+        <Col sm={3} offset={{ sm: 3 }}>
+          <div className="sb__sample-cell">Offset 3</div>
+        </Col>
+      </Row>
+    </Container>
+  ),
+};

package/src/components/grid/container/Container.tsx

@@ -0,0 +1,5 @@
+import { Container as RgsContainer, ContainerProps } from 'react-grid-system';
+
+export const Container = ({ ref: _ref, ...rest }: ContainerProps) => {
+  return <RgsContainer {...rest} />;
+};

package/src/components/grid/index.tsx

@@ -0,0 +1,3 @@
+export { Container } from './container/Container';
+export { Row } from './row/Row';
+export { Col } from './col/Col';