@indico-data/design-system 1.0.57 → 2.0.0

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-dark-theme-class'),
+    require('autoprefixer'),
+  ],
+};

package/rollup.config.mjs

@@ -35,7 +35,12 @@ export default [
       commonjs(),
       typescript(),
       postcss({
-        extensions: ['.css'],
+        extensions: ['.css', '.scss'],
+        modules: false,
+        namedExports: true,
+        use: ['sass'],
+        extract: true,
+        minimize: false,
       }),
     ],
   },
@@ -43,6 +48,6 @@ export default [
     input: 'lib/index.d.ts',
     output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
-    external: [/\.css$/],
+    external: [/\.css$/, /\.scss$/],
   },
-];
+];

package/src/components/button/Button.mdx

@@ -0,0 +1,98 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+import { Col, Row } from '../grid/';
+
+<Meta title="Components/Button" name="Button Docs" of={ButtonStories} />
+
+# Button
+
+The Button component is one of the most versitile components we can use in our Design System. This component has a lot of different variations and can be used in many different ways. Toggle through the various options below in order achieve the optimal button state for your use case.
+
+<Canvas of={ButtonStories.Primary} />
+
+### The following props are available for the Button component:
+
+<Controls of={ButtonStories.Primary} />
+
+## Sizes
+
+The Sizes available are `small`, `medium`, and `large`. The default size is `medium`.
+
+<Row>
+  <Col xs={2}>
+    <Story of={ButtonStories.Small} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.Medium} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.Large} />
+  </Col>
+</Row>
+
+## Variants
+
+The variants available are `solid`, `outline`, and `text`. The default variant is `solid`.'
+
+<Row>
+  <Col xs={2}>
+    <Story of={ButtonStories.Primary} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.PrimaryOutline} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.Text} />
+  </Col>
+</Row>
+
+## Colors
+
+The colors available are `primary`, `secondary`, `info`, `error`, `warning`, and `success`. The default color is `primary`.
+
+<Row>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Primary} />
+  </Col>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Secondary} />
+  </Col>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Info} />
+  </Col>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Error} />
+  </Col>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Warning} />
+  </Col>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Success} />
+  </Col>
+</Row>
+
+## States
+
+The states available are enabled, `disabled`, and `loading`. The button is enabled by default
+
+<Row>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.Loading} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.Disabled} />
+  </Col>
+</Row>
+
+## 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`.
+
+<Row>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.IconLeft} />
+  </Col>
+  <Col xs={2}>
+    <Story of={ButtonStories.IconRight} />
+  </Col>
+</Row>

package/src/components/button/Button.scss

@@ -0,0 +1,275 @@
+// Variables
+:root [data-theme='light'],
+:root {
+  // Typography
+  --pf-button-font-weight-bold: var(--pf-font-weight-bold);
+  --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
+  --pf-button-background-primary-color: var(--pf-primary-color);
+  --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);
+
+  // Secondary Button Colors
+  --pf-button-background-secondary-color: var(--pf-secondary-color);
+  --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
+  --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
+  --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
+  --pf-button-secondary-color: var(--pf-secondary-color);
+  --pf-button-secondary-text-color: var(--pf-white-color);
+
+  // Error Button Colors
+  --pf-button-background-error-color: var(--pf-error-color);
+  --pf-button-disabled-error-color: var(--pf-red-color-300);
+  --pf-button-focus-error-color: var(--pf-red-color-900);
+  --pf-button-hover-error-color: var(--pf-red-color-400);
+  --pf-button-error-color: var(--pf-error-color);
+  --pf-button-error-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-error-color: var(--pf-red-color-100);
+
+  // Success Button Colors
+  --pf-button-background-success-color: var(--pf-success-color);
+  --pf-button-disabled-success-color: var(--pf-green-color-300);
+  --pf-button-focus-success-color: var(--pf-green-color-900);
+  --pf-button-hover-success-color: var(--pf-green-color-400);
+  --pf-button-success-color: var(--pf-success-color);
+  --pf-button-success-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-success-color: var(--pf-green-color-100);
+
+  // Warning Button Colors
+  --pf-button-background-warning-color: var(--pf-warning-color);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
+  --pf-button-focus-warning-color: var(--pf-orange-color-900);
+  --pf-button-hover-warning-color: var(--pf-orange-color-400);
+  --pf-button-warning-color: var(--pf-warning-color);
+  --pf-button-warning-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
+
+  // Info Button Colors
+  --pf-button-background-info-color: var(--pf-info-color);
+  --pf-button-disabled-info-color: var(--pf-gray-color-300);
+  --pf-button-focus-info-color: var(--pf-gray-color-900);
+  --pf-button-hover-info-color: var(--pf-gray-color-400);
+  --pf-button-info-color: var(--pf-info-color);
+  --pf-button-info-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+
+  // Gray Button Color
+  --pf-button-gray-color: var(--pf-gray-color);
+  --pf-button-gray-disabled-color: var(--pf-gray-color-400);
+
+  // Outline Buttons
+  --pf-button-outline-background-color: var(--pf-white-color);
+
+  // Button Radius
+  --pf-button-rounded: var(--pf-rounded);
+}
+
+.btn {
+  display: inline-flex;
+  padding: var(--pf-padding-0) var(--pf-padding-3);
+  font-family: var(--pf-font-family-base);
+  align-items: center;
+  border-radius: var(--pf-button-rounded);
+  border-width: 1px;
+  border-style: solid;
+  font-weight: var(--pf-button-font-weight-bold);
+  cursor: pointer;
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Button Sizes
+.btn--sm {
+  height: 28px;
+  padding-left: var(--pf-padding-2);
+  padding-right: var(--pf-padding-2);
+  font-size: var(--pf-font-size-body2);
+}
+
+.btn--md {
+  height: 36px;
+  padding-left: var(--pf-padding-3);
+  padding-right: var(--pf-padding-3);
+  font-size: var(--pf-font-size-body);
+}
+
+.btn--lg {
+  height: 40px;
+  padding-left: var(--pf-padding-4);
+  padding-right: var(--pf-padding-4);
+  font-size: var(--pf-font-size-h2);
+}
+
+@mixin button-variant($color-name) {
+  background: var(--pf-button-#{$color-name}-color);
+  color: var(--pf-button-#{$color-name}-text-color);
+  border-color: var(--pf-button-#{$color-name}-color);
+
+  &:hover {
+    border-color: var(--pf-button-hover-#{$color-name}-color);
+    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);
+  }
+
+  &.btn--outline {
+    color: var(--pf-button-#{$color-name}-color);
+    background-color: var(--pf-button-outline-background-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);
+    }
+
+    &:disabled {
+      border-color: var(--pf-button-disabled-#{$color-name}-color);
+      color: var(--pf-button-disabled-#{$color-name}-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);
+      }
+    }
+  }
+}
+
+.btn--primary {
+  @include button-variant('primary');
+}
+
+.btn--secondary {
+  @include button-variant('secondary');
+}
+
+.btn--info {
+  @include button-variant('info');
+}
+
+.btn--error {
+  @include button-variant('error');
+}
+
+.btn--success {
+  @include button-variant('success');
+}
+
+.btn--warning {
+  @include button-variant('warning');
+}
+
+.btn--text {
+  background-color: transparent;
+  border: solid 1px transparent;
+  color: var(--pf-link-color);
+  font-weight: var(--pf-button-font-weight-regular);
+  &:hover {
+    background-color: transparent;
+    border: solid 1px transparent;
+    text-decoration: underline;
+  }
+  &:focus {
+    background-color: transparent;
+    border: solid 1px transparent;
+    color: var(--pf-link-hover-color);
+  }
+  &:disabled {
+    color: var(--pf-button-gray-disabled-color);
+    &:hover {
+      color: var(--pf-button-gray-disabled-color);
+    }
+  }
+}
+
+// Button Varians
+.btn--solid {
+  color: var(--pf-white-color);
+}
+
+// Button Colors
+.btn--primary,
+.btn--secondary,
+.btn--info,
+.btn--error,
+.btn--success,
+.btn--warning {
+  &.btn--text {
+    border: solid 1px transparent;
+    font-weight: var(--pf-button-font-weight-regular);
+
+    &:hover:disabled {
+      background-color: transparent;
+    }
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--pf-button-gray-disabled-color);
+    }
+  }
+}
+
+.btn--primary.btn--text {
+  color: var(--pf-button-primary-color);
+  background: transparent;
+  &:hover {
+    background: transparent;
+    color: var(--pf-button-primary-color);
+  }
+  &:disabled {
+    color: var(--pf-button-gray-disabled-color);
+    &:hover {
+      color: var(--pf-button-gray-disabled-color);
+    }
+  }
+}
+
+.btn--secondary.btn--text {
+  background: transparent;
+  color: var(--pf-button-secondary-color);
+  &:hover {
+    background: transparent;
+    color: var(--pf-button-secondary-color);
+  }
+  &:disabled {
+    color: var(--pf-button-gray-disabled-color);
+    &:hover {
+      color: var(--pf-button-gray-disabled-color);
+    }
+  }
+}
+
+.btn--info.btn--text {
+  background: transparent;
+  color: var(--pf-button-info-color);
+  &:hover {
+    background: transparent;
+    color: var(--pf-button-info-color);
+  }
+  &:disabled {
+    color: var(--pf-button-gray-disabled-color);
+    &:hover {
+      color: var(--pf-button-gray-disabled-color);
+    }
+  }
+}
+.btn--outline {
+  background-color: var(--pf-button-outline-background-color);
+}

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

@@ -0,0 +1,281 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+const exampleIcons = ['fa-check', 'fa-times']; // TODO -- get ALL icons
+
+const meta: Meta = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'outline', 'text'],
+      description: 'It sets the variant style for the button',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: ['solid', 'outline', 'text'],
+        },
+        defaultValue: { summary: 'solid' },
+      },
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'warning', 'error', 'success', 'info'],
+      description: 'It sets the color for the button',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: ['primary', 'secondary', 'warning', 'error', 'success', 'info'],
+        },
+        defaultValue: { summary: 'primary' }, // replace 'default' with your actual default color
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'It sets the size for the button',
+      defaultValue: { summary: 'md' },
+      table: {
+        category: 'Styling',
+        type: {
+          summary: ['sm', 'md', 'lg'],
+        },
+      },
+    },
+    type: {
+      table: {
+        category: 'accessibility',
+        type: {
+          summary: ['button', 'submit', 'reset'],
+        },
+      },
+      description: 'It sets the type for the button.',
+      defaultValue: { summary: 'button' },
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+    iconPosition: {
+      description:
+        'Sets an icon to the left or right of the child element inside the button. It requires an icon to be set.',
+      table: {
+        category: 'Styling',
+        defaultValue: { summary: 'left' },
+        type: {
+          summary: ['left', 'right'],
+        },
+      },
+      control: 'select',
+      options: ['left', 'right'],
+    },
+    iconName: {
+      table: {
+        category: 'Styling',
+        type: {
+          summary: Object.values(exampleIcons).join(' | '),
+        },
+      },
+      description:
+        'Sets the icon for the button. The icons are pulled from the design system icon library. Only a couple examples are shown here.',
+      control: 'select',
+      options: Object.values(exampleIcons),
+    },
+    ariaLabel: {
+      description: 'Sets the aria-label attribute for the button.',
+      table: {
+        category: 'accessibility',
+        type: {
+          summary: 'string',
+        },
+      },
+      control: 'text',
+    },
+    onClick: {
+      description: 'Triggers a callback on button click',
+      table: { category: 'callbacks' },
+      action: 'clicked',
+    },
+    onMouseEnter: {
+      description: 'Triggers a callback on mouse enter.',
+      table: { category: 'callbacks' },
+      action: 'mouse entered',
+    },
+    onMouseExit: {
+      description: 'Triggers a callback on mouse exit.',
+      table: { category: 'callbacks' },
+      action: 'mouse exited',
+    },
+    onKeyDown: {
+      description: 'Triggers a callback on key press.',
+      table: { category: 'callbacks' },
+      action: 'key pressed',
+    },
+    isLoading: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'true | false', name: 'boolean', required: false },
+        category: 'Styling',
+      },
+      defaultValue: { summary: false },
+      description:
+        'It disables the button and shows a load spinner on the left hand side of the button children',
+    },
+    isDisabled: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'true | false', name: 'boolean', required: false },
+        category: 'Styling',
+      },
+      defaultValue: { summary: false },
+      description: 'It disables the button',
+    },
+  },
+};
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    type: 'submit',
+    variant: 'solid',
+    color: 'primary',
+    isDisabled: false,
+    isLoading: false,
+    ariaLabel: 'Primary Button',
+    onClick: () => {
+      console.log('Primary button clicked');
+    },
+  },
+  render: (args) => <Button {...args}>Primary</Button>,
+};
+export const Small: Story = {
+  args: {
+    variant: 'solid',
+    color: 'primary',
+    size: 'sm',
+  },
+  render: (args) => <Button {...args}>Small</Button>,
+};
+export const Medium: Story = {
+  args: {
+    variant: 'solid',
+    color: 'primary',
+    size: 'md',
+  },
+  render: (args) => <Button {...args}>Medium</Button>,
+};
+export const Large: Story = {
+  args: {
+    variant: 'solid',
+    color: 'primary',
+    size: 'lg',
+  },
+  render: (args) => <Button {...args}>Large</Button>,
+};
+export const Secondary: Story = {
+  args: {
+    variant: 'solid',
+    color: 'secondary',
+  },
+  render: (args) => <Button {...args}>Secondary</Button>,
+};
+
+export const PrimaryOutline: Story = {
+  args: {
+    variant: 'outline',
+    color: 'primary',
+  },
+  render: (args) => <Button {...args}>Outline</Button>,
+};
+
+export const SecondaryOutline: Story = {
+  args: {
+    variant: 'outline',
+    color: 'secondary',
+  },
+  render: (args) => <Button {...args}>Secondary Outline</Button>,
+};
+export const Info: Story = {
+  args: {
+    color: 'info',
+  },
+  render: (args) => <Button {...args}>Info</Button>,
+};
+export const InfoOutline: Story = {
+  args: {
+    variant: 'outline',
+    color: 'info',
+  },
+  render: (args) => <Button {...args}>Info Outline</Button>,
+};
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    color: 'secondary',
+  },
+  render: (args) => <Button {...args}>Text</Button>,
+};
+
+export const IconLeft: Story = {
+  args: {
+    color: 'primary',
+    iconPosition: 'left',
+    iconName: 'fa-check',
+  },
+  render: (args) => <Button {...args}>Icon Left</Button>,
+};
+
+export const IconRight: Story = {
+  args: {
+    color: 'primary',
+    iconName: 'fa-check',
+    iconPosition: 'right',
+  },
+  render: (args) => <Button {...args}>Icon Right</Button>,
+};
+
+export const Error: Story = {
+  args: {
+    color: 'error',
+  },
+  render: (args) => <Button {...args}>Error</Button>,
+};
+
+export const Success: Story = {
+  args: {
+    color: 'success',
+  },
+  render: (args) => <Button {...args}>Success</Button>,
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'solid',
+    color: 'warning',
+  },
+  render: (args) => <Button {...args}>Warning</Button>,
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    variant: 'solid',
+    color: 'warning',
+  },
+  render: (args) => <Button {...args}>Disabled</Button>,
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    variant: 'text',
+    color: 'warning',
+  },
+  render: (args) => <Button {...args}>Loading</Button>,
+};
+
+export default meta;