@indico-data/design-system 2.1.3 → 2.3.0

package/src/components/tables/table/sampleData.ts

@@ -0,0 +1,162 @@
+export const sampleData = [
+  {
+    name: 'Thalion',
+    class: 'Ranger',
+    age: 120,
+    weapon: 'Longbow',
+    backstory: 'Raised by wolves in the deep forests.',
+    favoriteMeal: 'Venison stew',
+  },
+  {
+    name: 'Brom',
+    class: 'Fighter',
+    age: 35,
+    weapon: 'Greatsword',
+    backstory: 'A former soldier seeking redemption.',
+    favoriteMeal: 'Roasted boar',
+  },
+  {
+    name: 'Elysia',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Mace',
+    backstory: 'A devoted follower of the goddess of life.',
+    favoriteMeal: 'Vegetable soup',
+  },
+  {
+    name: 'Faelar',
+    class: 'Rogue',
+    age: 80,
+    weapon: 'Dagger',
+    backstory: 'Grew up on the streets of a bustling city.',
+    favoriteMeal: 'Bread and cheese',
+  },
+  {
+    name: 'Maelis',
+    class: 'Wizard',
+    age: 200,
+    weapon: 'Staff',
+    backstory: 'A scholar obsessed with ancient magic.',
+    favoriteMeal: 'Mushroom stew',
+  },
+  {
+    name: 'Grimm',
+    class: 'Barbarian',
+    age: 40,
+    weapon: 'Battleaxe',
+    backstory: 'Hails from a tribe in the frozen north.',
+    favoriteMeal: 'Grilled salmon',
+  },
+  {
+    name: 'Seraphina',
+    class: 'Bard',
+    age: 25,
+    weapon: 'Rapier',
+    backstory: 'A wandering minstrel with a mysterious past.',
+    favoriteMeal: 'Apple pie',
+  },
+  {
+    name: 'Kael',
+    class: 'Druid',
+    age: 75,
+    weapon: 'Scimitar',
+    backstory: 'A guardian of the natural world.',
+    favoriteMeal: 'Berry tart',
+  },
+  {
+    name: 'Aria',
+    class: 'Paladin',
+    age: 30,
+    weapon: 'Longsword',
+    backstory: 'A knight on a divine mission.',
+    favoriteMeal: 'Roasted chicken',
+  },
+  {
+    name: 'Xan',
+    class: 'Warlock',
+    age: 45,
+    weapon: 'Pact Blade',
+    backstory: 'Made a pact with a powerful entity for magic.',
+    favoriteMeal: 'Stuffed peppers',
+  },
+  {
+    name: 'Lyra',
+    class: 'Sorcerer',
+    age: 28,
+    weapon: 'Dagger',
+    backstory: 'Born with innate magical abilities.',
+    favoriteMeal: 'Pancakes with syrup',
+  },
+  {
+    name: 'Thorn',
+    class: 'Monk',
+    age: 50,
+    weapon: 'Quarterstaff',
+    backstory: 'A hermit who seeks enlightenment.',
+    favoriteMeal: 'Rice and vegetables',
+  },
+  {
+    name: 'Cassia',
+    class: 'Ranger',
+    age: 32,
+    weapon: 'Shortbow',
+    backstory: 'A hunter with a keen eye.',
+    favoriteMeal: 'Roasted pheasant',
+  },
+  {
+    name: 'Darius',
+    class: 'Fighter',
+    age: 36,
+    weapon: 'Longsword',
+    backstory: 'A mercenary with a heart of gold.',
+    favoriteMeal: 'Beef stew',
+  },
+  {
+    name: 'Iris',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Warhammer',
+    backstory: 'A healer devoted to the god of light.',
+    favoriteMeal: 'Fresh bread and soup',
+  },
+  {
+    name: 'Fenrir',
+    class: 'Barbarian',
+    age: 42,
+    weapon: 'Greataxe',
+    backstory: 'A warrior from a distant land.',
+    favoriteMeal: 'Grilled steak',
+  },
+  {
+    name: 'Luna',
+    class: 'Druid',
+    age: 70,
+    weapon: 'Sickle',
+    backstory: 'A protector of the natural world.',
+    favoriteMeal: 'Fruit salad',
+  },
+  {
+    name: 'Orion',
+    class: 'Paladin',
+    age: 33,
+    weapon: 'Halberd',
+    backstory: 'A knight on a holy quest.',
+    favoriteMeal: 'Roasted lamb',
+  },
+  {
+    name: 'Astra',
+    class: 'Bard',
+    age: 26,
+    weapon: 'Lute',
+    backstory: 'A musician with a magical voice.',
+    favoriteMeal: 'Honey cake',
+  },
+  {
+    name: 'Zephyr',
+    class: 'Rogue',
+    age: 29,
+    weapon: 'Shortsword',
+    backstory: 'A thief with a quick hand.',
+    favoriteMeal: 'Fish and chips',
+  },
+];

package/src/index.ts

@@ -1,8 +1,6 @@
 import './styles/index.scss';
 
 export { GlobalStyles } from './legacy/styles/globals/index';
-export { faIcons } from './legacy/components/Icon/faIcons';
-export { indicons } from './legacy/components/Icon/indicons';
 
 export {
   ANIMATION,
@@ -26,10 +24,8 @@ export {
   CirclePulse,
   CircleSpinner,
   ConfirmModal,
-  Drawer,
   DatePicker,
   EditableInput,
-  Icon,
   IconButton,
   ListTable,
   LoadingAwareContainer,
@@ -63,3 +59,4 @@ export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 // New Components
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
+export { Icon } from './components/icons';

package/src/legacy/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';
@@ -20,7 +20,7 @@ export const Accordion = (props: Props) => {
     <StyledAccordion className={className} id={id} open={open} data-cy={props['data-cy']}>
       <summary>
         <div className="header-container">
-          <Icon className="toggle-icon" name="chevron-up" size={[14]} />
+          <Icon className="toggle-icon" name="chevron-up" />
           {header ? <h2>{header}</h2> : null}
         </div>
       </summary>

package/src/legacy/components/ListTable/Header/Header.tsx

@@ -6,7 +6,7 @@ import { numberUtils } from '@/legacy/utils';
 
 import { BorderSelect } from '@/legacy/components/dropdowns';
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 
 import { StyledHeader } from './Header.styles';
 
@@ -57,7 +57,6 @@ export const Header = (props: Props) => {
               <Icon
                 name="fa-arrow-down"
                 ariaLabel="descending"
-                size={[16]}
                 style={{ transform: sortBy.descending ? '' : 'rotate(180deg)' }}
               />
             </Button>

package/src/legacy/components/ListTable/ListTable.stories.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, Icon } from '@/legacy/components';
+import { Button } from '@/legacy/components';
 
 import { ListTable } from './ListTable';
 import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
+import { Icon } from '@/components/icons';
 
 const meta = {
   component: ListTable,

package/src/legacy/components/Toggle/Toggle.styles.ts

@@ -68,7 +68,7 @@ export const StyledToggle = styled.label`
   }
 
   .checked-icon {
-    fill: #fff;
+    color: #fff;
     display: none;
     left: 3px;
   }

package/src/legacy/components/Toggle/Toggle.tsx

@@ -3,16 +3,17 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/legacy/components';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent, IconName } from '@/types';
 import { StyledToggle } from './Toggle.styles';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = {
   disabled: boolean;
   onChange: any;
   value: boolean;
   ['aria-label']?: string;
-  iconSize?: number | string;
+  iconSize?: IconSizes;
   checkedIconName?: IconName;
   notCheckedIconName?: IconName;
 } & PermafrostComponent;
@@ -29,6 +30,8 @@ export const Toggle = (props: Props) => {
     iconSize,
   } = props;
 
+  const defaultIconStyle = { width: '5px', height: '5px' };
+
   return (
     <StyledToggle
       className={classNames(className, {
@@ -47,10 +50,20 @@ export const Toggle = (props: Props) => {
       <span className="slider round" />
 
       {checkedIconName && (
-        <Icon name={checkedIconName} size={[iconSize || 5]} className="checked-icon" />
+        <Icon
+          size={iconSize}
+          name={checkedIconName}
+          className="checked-icon"
+          style={iconSize ? undefined : defaultIconStyle}
+        />
       )}
       {notCheckedIconName && (
-        <Icon name={notCheckedIconName} size={[iconSize || 5]} className="not-checked-icon" />
+        <Icon
+          size={iconSize}
+          name={notCheckedIconName}
+          className="not-checked-icon"
+          style={iconSize ? undefined : defaultIconStyle}
+        />
       )}
     </StyledToggle>
   );

package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { IconName } from '@/types';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { BorderSelect } from '@/legacy/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';

package/src/legacy/components/buttons/Button/Button.tsx

@@ -66,7 +66,7 @@ export function Button(props: ButtonProps): React.ReactElement {
       type={type || 'button'}
       {...rest}
     >
-      {busy && <CircleSpinner size="0.9em" style={{ marginRight: '0.5em' }} />}
+      {busy && <CircleSpinner className="mr-2" />}
 
       {children}
     </StyledButton>

package/src/legacy/components/buttons/IconButton/IconButton.tsx

@@ -8,7 +8,8 @@ import { AriaButtonProps } from '@react-types/button';
 
 import { SPACING } from '@/legacy/tokens';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon, CircleSpinner } from '@/legacy/components';
+import { Icon } from '@/components/icons';
+import { CircleSpinner } from '@/legacy/components';
 import { ButtonSize, IconButtonVariant } from '../types';
 
 import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';
@@ -81,7 +82,6 @@ export function IconButton(props: Props) {
 
   const iconElement = busy ? (
     <CircleSpinner
-      size="1em"
       style={{
         marginTop: `${adjustAlignment}px`,
         marginBottom: `${Math.abs(adjustAlignment)}px`,

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect, StyledValidationError } from './BorderSelect.styles';

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx

@@ -3,10 +3,10 @@
 import React, { useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Icon, IconButton } from '@/legacy/components';
 import { ComboboxOption } from '../types';
 import { MultiCombobox } from './MultiCombobox';
 import { useCombobox } from '../useCombobox';
+import { Button, Icon } from '@/index';
 
 const options = [
   { value: 'angie', label: 'angie - Labeler' },
@@ -35,13 +35,14 @@ function StoryRender(props: any) {
   return (
     <>
       <MultiCombobox ref={selectEl} {...props} />
-      <IconButton
-        adjustAlignment={0}
+      <Button
         iconName="trash"
-        onPress={() => clearValue()}
-        label="clear selections"
-        style={{ marginTop: '1em' }}
-      />
+        onClick={() => clearValue()}
+        ariaLabel="clear selections"
+        className="mt-4"
+      >
+        clear selections
+      </Button>
     </>
   );
 }

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.styles.ts

@@ -68,7 +68,9 @@ export const StyledMultiCombobox = styled(ReactSelect)`
     }
 
     &__remove {
-      padding-right: ${spacingCommon};
+      margin-right: ${spacingCommon};
+      margin-left: 4px;
+      padding: 0;
 
       :hover {
         cursor: pointer;

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { components } from 'react-select';
 
 import { PermafrostComponent } from '@/types';
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { addCustomProps } from '../utils';
 import type { ComboboxProps, ComboboxOption } from '../types';
 
@@ -62,7 +62,7 @@ export const MultiCombobox = React.forwardRef((props: Props, ref: any) => {
   const MultiValueRemove = (props: any) => {
     return (
       <components.MultiValueRemove {...props}>
-        <Icon name="x-close" ariaLabel="remove" size={[10]} />
+        <Icon name="x-close" ariaLabel="remove" size="xs" />
       </components.MultiValueRemove>
     );
   };

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect } from './Select.styles';
@@ -61,8 +61,8 @@ export const Select = (props: Props) => {
             );
           })}
         </select>
-
-        <Icon className="chevron" name="chevron-down" size={size === 'small' ? [10] : [12]} />
+        {/* TODO: Fix this size mismatch when bringing Select into DS */}
+        <Icon className="chevron" name="chevron-down" size={size === 'small' ? 'xs' : 'sm'} />
       </div>
     </StyledSelect>
   );

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { components } from 'react-select';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 import { addCustomProps } from '../utils';
 
@@ -53,7 +53,7 @@ export const SingleCombobox = React.forwardRef((props: Props, ref: any) => {
   const DropdownIndicator = (props: any) => {
     return (
       <components.DropdownIndicator {...props}>
-        <Icon name="fa-caret-down" ariaLabel="open dropdown" size={[14]} />
+        <Icon name="fa-caret-down" ariaLabel="open dropdown" />
       </components.DropdownIndicator>
     );
   };

package/src/legacy/components/index.ts

@@ -2,7 +2,7 @@ export { Accordion } from './Accordion';
 export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
 export { Button, IconButton } from './buttons';
 export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-export { Icon, faIcons, indicons } from './Icon';
+
 export {
   EditableInput,
   NumberInput,
@@ -29,7 +29,6 @@ export { Pagination } from './Pagination';
 export { Shrug } from './user-feedback';
 export { ConfirmModal, ModalBase } from './modals';
 export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { Drawer } from './Navigation/Drawer';
 export { TextTruncate } from './text-truncate';
 export { Toggle } from './Toggle';
 export { Tooltip } from './Tooltip';

package/src/legacy/components/inputs/EditableInput/EditableInput.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import { stringUtils } from '@/legacy/utils';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledEditableInput } from './EditableInput.styles';

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.tsx

@@ -27,7 +27,7 @@ export const Single: Story = {
     label: 'Pick a date:',
     value: today,
     triggerIcon: 'calendar',
-    triggerIconSize: [20],
+    triggerIconSize: 'lg',
     clearOnClose: true,
     onChange: (date: Date | DateRange | undefined) => {
       // eslint-disable-next-line no-console
@@ -43,7 +43,7 @@ export const Range: Story = {
     value: today,
     isRangePicker: true,
     triggerIcon: 'calendar',
-    triggerIconSize: [20],
+    triggerIconSize: 'lg',
     onChange: (date: Date | DateRange | undefined) => {
       // eslint-disable-next-line no-console
       console.log(date);

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -12,9 +12,10 @@ import {
 } from 'react-day-picker';
 import { usePopper } from 'react-popper';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/index';
+import { Icon } from '@/components/icons';
 
 import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;
@@ -28,7 +29,7 @@ type Props = PermafrostComponent & {
   selectedRange?: DateRange | undefined;
   value: Date | undefined;
   triggerIcon: IconName;
-  triggerIconSize: [string | number];
+  triggerIconSize: IconSizes;
   isRangePicker?: boolean;
   isOpen?: boolean;
   clearOnClose?: boolean;
@@ -49,7 +50,7 @@ function CustomCaption(props: CaptionProps) {
           }
         }}
       >
-        <Icon size={[10]} ariaLabel="Previous Month" name="chevron-left" />
+        <Icon size="sm" ariaLabel="Previous Month" name="chevron-left" />
       </button>
       <h2 className="custom__caption__text">{format(props.displayMonth, 'MMM yyyy')}</h2>
       <button
@@ -62,7 +63,7 @@ function CustomCaption(props: CaptionProps) {
           }
         }}
       >
-        <Icon size={[10]} ariaLabel="Next Month" name="chevron-right" />
+        <Icon size="sm" ariaLabel="Next Month" name="chevron-right" />
       </button>
     </div>
   );

package/src/legacy/components/inputs/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledNumberField } from './NumberInput.styles';

package/src/legacy/components/inputs/SearchInput/SearchInput.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSearchField } from './SearchInput.styles';

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx

@@ -2,23 +2,24 @@
 
 import React from 'react';
 
-import { Icon } from '../../Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
+import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;
-  size?: string;
-  style?: { [key: string]: string };
+  size?: IconSizes;
+  style?: React.CSSProperties;
   fill?: string;
 };
 
 export function CircleSpinner(props: Props): React.ReactElement {
-  const { className, fill, id, size, style, ariaLabel = 'Loading...' } = props;
+  const { className, fill, id, size = 'sm', style, ariaLabel = 'Loading...' } = props;
 
-  const loaderSize = size || '12px';
-  const loaderStyle = {
+  const loaderStyle: React.CSSProperties = {
     position: 'relative',
     top: '1px',
+    color: fill || 'currentColor',
     ...style,
   };
 
@@ -28,9 +29,8 @@ export function CircleSpinner(props: Props): React.ReactElement {
       className={`spin ${className || ''}`}
       data-cy={props['data-cy']}
       id={id}
-      size={[loaderSize]}
+      size={size}
       style={loaderStyle}
-      fill={fill || 'currentColor'}
       ariaLabel={ariaLabel}
     />
   );

package/src/legacy/components/user-feedback/Shrug/Shrug.styles.ts

@@ -19,5 +19,7 @@ export const StyledShrug = styled.div`
   svg {
     fill: ${COLORS.iron};
     opacity: 0.5;
+    width: 260px;
+    height: 84px;
   }
 `;

package/src/legacy/components/user-feedback/Shrug/Shrug.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/legacy/components/Icon';
+import { Icon } from '@/components/icons';
 import { PermafrostComponent } from '@/types';
 
 import { StyledShrug } from './Shrug.styles';
@@ -22,7 +22,7 @@ export function Shrug(props: Props): React.ReactElement {
   const { actionLink, actionText, buttonAction, buttonText, className, id, message } = props;
   return (
     <StyledShrug className={className} data-cy={props['data-cy']} id={id}>
-      <Icon name="shrug" size={['260px', '84px']} />
+      <Icon name="shrug" />
       {typeof message === 'string' ? (
         <p className="t-subhead-large" {...props?.messageProps}>
           {message}
@@ -31,12 +31,12 @@ export function Shrug(props: Props): React.ReactElement {
         message
       )}
       {actionLink && actionText && (
-        <Link to={actionLink} className="button blue cta" style={{ marginTop: '20px' }}>
+        <Link to={actionLink} className="button blue cta mt-5">
           {actionText}
         </Link>
       )}
       {buttonAction && buttonText && (
-        <Button onClick={buttonAction} style={{ marginTop: '20px' }} variant="cta">
+        <Button onClick={buttonAction} className="mt-5" variant="cta">
           {buttonText}
         </Button>
       )}

package/src/styles/index.scss

@@ -2,10 +2,10 @@
 @import 'variables/index.scss';
 
 // Components
-@import '../legacy/components/Navigation/Drawer/Drawer.scss';
 @import '../components/button/styles/Button.scss';
+@import '../components/icons/styles/Icon.scss';
+@import '../components/tables/table/Table.scss';
 
-// Helper Classes
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/styles/variables/_icons.scss

@@ -0,0 +1,7 @@
+:root {
+  --pf-icon-size-xs: 0.6rem; // eww, probably want this to be 0.5 eventually but we use 0.6 (10px) commonly in the codebase
+  --pf-icon-size-sm: 0.75rem;
+  --pf-icon-size-md: 1rem;
+  --pf-icon-size-lg: 1.5rem;
+  --pf-icon-size-xl: 2rem;
+}