@indico-data/design-system 1.0.1

package/.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-classic.cjs

package/README.md

@@ -0,0 +1,30 @@
+# Indico Design System - codename Permafrost
+
+## Module Organization
+
+- Components and Stories are now in `src/stories`
+- Global Styles `src/styles`
+- Design Tokens `src/tokens`
+
+## Storybook Dev Server Initialization
+
+Install dependencies with a simple `yarn` command.
+
+`yarn dev` runs the command `storybook dev -p 6006` which should boot the dev server and open the local host in a browser window.
+
+## Additional scripts
+
+Run the below like `yarn <my command>`
+
+```
+"build": "storybook build",
+"test-storybook": "test-storybook",
+"prepare": "husky install"
+```
+
+## Concerning TODOS
+
+Ideally, each component migrated from the Intake mono-repo (aka stratosphere) will have a corresponding JIRA ticket,
+including ACs for potential refactor, updated documentation, and unit tests. However, the first migration of
+core componenets has been fast-tracked to facilitate work on the Insights client MVP; therefore, these
+components have not benefitted from the above and have `TODOS` indicating this. Corresponding JIRA tickets will follow.

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@indico-data/design-system",
+  "version": "1.0.1",
+  "description": "",
+  "private": false,
+  "author": "",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
+    "test-storybook": "test-storybook",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@indico-data/utils": "^0.0.5",
+    "@react-aria/button": "^3.9.0",
+    "@react-aria/focus": "^3.15.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "babel-loader": "^9.1.3",
+    "babel-preset-react-app": "^10.0.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
+    "html-webpack-plugin": "^5.5.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6.18.0",
+    "react-select": "^5.8.0",
+    "simple-zustand-devtools": "^1.1.0",
+    "styled-components": "^6.1.1",
+    "svgo": "^3.0.3",
+    "typescript": "^5.2.2",
+    "webpack": "^5",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^2.0.2-next.4",
+    "@storybook/addon-styling-webpack": "^0.0.5",
+    "@storybook/addon-themes": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/test": "^7.6.0-alpha.4",
+    "@storybook/test-runner": "^0.15.1",
+    "@types/styled-components": "^5.1.30",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
+    "prettier": "3.1.0",
+    "storybook": "^7.5.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "volta": {
+    "node": "20.9.0"
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+import { Accordion } from './Accordion';
+
+const content = (
+  <div>
+    <h2 style={{ marginBottom: '10px' }}>Lorem</h2>
+    <p style={{ marginBottom: '10px' }}>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa
+      officiis dolores dolore iusto saepe harum maxime placeat ut culpa excepturi praesentium optio
+      minus velit odio voluptate veniam nulla.
+    </p>
+    <p style={{ marginBottom: '20px' }}>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa
+      officiis dolores dolore iusto saepe harum maxime placeat ut culpa excepturi praesentium optio
+      minus velit odio voluptate veniam nulla. Lorem ipsum dolor sit, amet consectetur adipisicing
+      elit. Recusandae, repudiandae ipsa officiis dolores dolore iusto saepe harum maxime placeat ut
+      culpa excepturi praesentium optio minus velit odio voluptate veniam nulla. Lorem ipsum dolor
+      sit, amet consectetur adipisicing elit. Recusandae, repudiandae ipsa officiis dolores dolore
+      iusto saepe harum maxime placeat ut culpa excepturi praesentium optio minus velit odio
+      voluptate veniam nulla.
+    </p>
+    <Button onClick={() => {}}>Button</Button>
+  </div>
+);
+
+const meta = {
+  component: Accordion,
+  title: 'Accordion',
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex' }}>
+        <Story content={content} />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Normal: Story = {};
+
+export const WithHeader: Story = { args: { header: 'Accordion Toggle' } };

package/src/components/Accordion/Accordion.styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const StyledAccordion = styled.details`
+  summary {
+    display: inherit;
+    padding: 0 12px;
+    cursor: pointer;
+  }
+
+  .header-container,
+  h2 {
+    display: flex;
+  }
+
+  .toggle-icon {
+    height: 24px;
+    margin: 6px 0;
+    border-radius: 50%;
+    transition: 0.3s transform ease-in-out;
+  }
+
+  h2 {
+    align-items: center;
+    margin: 0 0 0 8px;
+    font-size: 22px;
+  }
+
+  .content {
+    margin: 10px 0 10px 20px;
+  }
+
+  &[open] > summary .toggle-icon {
+    transform: rotate(180deg);
+  }
+`;

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,30 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { Icon } from '@/components';
+import { PermafrostComponent } from '@/types';
+
+import { StyledAccordion } from './Accordion.styles';
+
+type Props = PermafrostComponent & {
+  content: React.ReactNode;
+  header?: React.ReactNode | string;
+  open?: boolean;
+};
+
+export const Accordion = (props: Props) => {
+  const { className, content, header, id, open } = props;
+
+  return (
+    <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]} />
+          {header ? <h2>{header}</h2> : null}
+        </div>
+      </summary>
+      <div className="content">{content}</div>
+    </StyledAccordion>
+  );
+};

package/src/components/Accordion/index.ts

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { faIcons } from './faIcons';
+import { indicons } from './indicons';
+import { Icon, IconName } from './Icon';
+import { IconContainer, SpecifiedSizeContainer } from './storyHelpers';
+
+const indiconsOptions: IconName[] = Object.keys(indicons) as IconName[];
+const faIconsOptions: IconName[] = Object.keys(faIcons) as IconName[];
+
+const meta = {
+  component: Icon,
+  title: 'Icon',
+  argTypes: {
+    ariaLabel: { control: { disable: true } },
+    size: { description: '[value] or [height, width]' },
+    name: { control: { type: 'select', options: indiconsOptions } },
+  },
+  decorators: [
+    (Story) => (
+      <IconContainer>
+        <Story />
+      </IconContainer>
+    ),
+  ],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const General: Story = {
+  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
+  args: {
+    name: indiconsOptions[0],
+  },
+};
+
+export const Indicon: Story = {
+  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
+  args: { name: indiconsOptions[0] },
+};
+
+export const FontAwesome: Story = {
+  argTypes: { name: { control: { type: 'select', options: faIconsOptions } } },
+  args: { name: faIconsOptions[27] },
+};
+export const SizeSpecified: Story = {
+  argTypes: { name: { control: { type: 'select', options: indiconsOptions } } },
+  args: { name: indiconsOptions[0] },
+  render: (args) => (
+    <SpecifiedSizeContainer>
+      <Icon {...args} size={[150]} />
+      <code>{'size = {[150]}'}</code>
+
+      <Icon {...args} size={[100, 100]} />
+      <code>{'size = {[100, 100]}'}</code>
+    </SpecifiedSizeContainer>
+  ),
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,75 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { PermafrostComponent } from '@/types';
+
+import { faIcons } from './faIcons';
+import { indicons } from './indicons';
+
+const allIcons = {
+  ...faIcons,
+  ...indicons,
+} as const;
+
+export type IconName = keyof typeof allIcons;
+
+type Props = PermafrostComponent & {
+  ariaLabel?: string;
+  fill?: string;
+  name: IconName;
+  /* `[value]` or `[width, height]` */
+  size?: [string | number] | [string | number, string | number];
+  style?: any;
+  onClick?(): void;
+};
+
+type IconComponentProps = {
+  children: React.ReactNode;
+  fill: string;
+  viewBox: string;
+};
+
+/**
+ * Generic icon component, hidden from Assistive Technology by default.
+ * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
+ */
+export function Icon({ style = {}, ...props }: Props): React.ReactElement | null {
+  const ariaLabel = props.ariaLabel
+    ? { 'aria-label': props.ariaLabel }
+    : { 'aria-hidden': true, focusable: false };
+  const iconComponentProps: IconComponentProps = allIcons[props.name]?.props || null;
+  const dimensions =
+    props.size && props.size.length > 0
+      ? returnDimensions(props.size)
+      : { width: '1em', height: '1em' };
+
+  if (!iconComponentProps) {
+    console.error(`${props.name} is not a valid icon name.`);
+
+    return null;
+  }
+
+  return (
+    <svg
+      {...iconComponentProps}
+      {...ariaLabel}
+      {...dimensions}
+      role="img"
+      className={props.className}
+      data-cy={props['data-cy']}
+      fill={props.fill || 'currentColor'}
+      id={props.id}
+      style={style}
+      onClick={props.onClick}
+    />
+  );
+}
+
+function returnDimensions(sizeProp: [string | number] | [string | number, string | number]) {
+  if (sizeProp.length > 1) {
+    return { width: sizeProp[0], height: sizeProp[1] };
+  }
+
+  return { width: sizeProp[0], height: sizeProp[0] };
+}

package/src/components/Icon/faIcons.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCheckSquare,
+  faDotCircle,
+  faFile,
+  faFileAlt,
+  faFilePdf,
+  faFileWord,
+  faSquare,
+} from '@fortawesome/free-regular-svg-icons';
+
+import {
+  faAngleDoubleLeft,
+  faArrowCircleRight,
+  faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faArrowUp,
+  faBan,
+  faCaretDown,
+  faCaretUp,
+  faChartBar,
+  faCheck,
+  faCheckCircle,
+  faCircleNotch,
+  faClipboard,
+  faClock,
+  faClone,
+  faCloud,
+  faCog,
+  faCogs,
+  faCoins,
+  faCube,
+  faCut,
+  faDownload,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faExternalLinkAlt,
+  faEyeDropper,
+  faFileDownload,
+  faFileExport,
+  faFileUpload,
+  faFilter,
+  faGhost,
+  faHatWizard,
+  faInfoCircle,
+  faKey,
+  faKeyboard,
+  faLayerGroup,
+  faPencilAlt,
+  faPlus,
+  faPlusSquare,
+  faQuestionCircle,
+  faRobot,
+  faSearch,
+  faSignOutAlt,
+  faSlidersH,
+  faSyncAlt,
+  faTag,
+  faTimes,
+  faTimesCircle,
+  faTint,
+  faToggleOff,
+  faToggleOn,
+  faTrash,
+  faTrashAlt,
+  faUndo,
+  faUser,
+  faUsers,
+  faMousePointer,
+  faStepForward,
+  faSearchMinus,
+  faSearchPlus,
+  faTable,
+  faImage,
+  faLink,
+  faList,
+} from '@fortawesome/free-solid-svg-icons';
+
+const faIcons = {
+  'fa-dot-circle': generateSvg(faDotCircle),
+  'fa-file': generateSvg(faFile),
+  'fa-file-alt': generateSvg(faFileAlt),
+  'fa-file-pdf': generateSvg(faFilePdf),
+  'fa-file-word': generateSvg(faFileWord),
+  'fa-check-square': generateSvg(faCheckSquare),
+  'fa-square': generateSvg(faSquare),
+
+  'fa-angle-double-left': generateSvg(faAngleDoubleLeft),
+  'fa-arrow-circle-right': generateSvg(faArrowCircleRight),
+  'fa-arrow-down': generateSvg(faArrowDown),
+  'fa-arrow-left': generateSvg(faArrowLeft),
+  'fa-arrow-right': generateSvg(faArrowRight),
+  'fa-arrow-up': generateSvg(faArrowUp),
+  'fa-ban': generateSvg(faBan),
+  'fa-caret-down': generateSvg(faCaretDown),
+  'fa-caret-up': generateSvg(faCaretUp),
+  'fa-chart-bar': generateSvg(faChartBar),
+  'fa-check': generateSvg(faCheck),
+  'fa-check-circle': generateSvg(faCheckCircle),
+  'fa-circle-notch': generateSvg(faCircleNotch),
+  'fa-clipboard': generateSvg(faClipboard),
+  'fa-clock': generateSvg(faClock),
+  'fa-clone': generateSvg(faClone),
+  'fa-cloud': generateSvg(faCloud),
+  'fa-cog': generateSvg(faCog),
+  'fa-cogs': generateSvg(faCogs),
+  'fa-coins': generateSvg(faCoins),
+  'fa-cube': generateSvg(faCube),
+  'fa-cut': generateSvg(faCut),
+  'fa-download': generateSvg(faDownload),
+  'fa-exclamation-circle': generateSvg(faExclamationCircle),
+  'fa-exclamation-triangle': generateSvg(faExclamationTriangle),
+  'fa-external-link-alt': generateSvg(faExternalLinkAlt),
+  'fa-eye-dropper': generateSvg(faEyeDropper),
+  'fa-file-download': generateSvg(faFileDownload),
+  'fa-file-export': generateSvg(faFileExport),
+  'fa-file-upload': generateSvg(faFileUpload),
+  'fa-filter': generateSvg(faFilter),
+  'fa-ghost': generateSvg(faGhost),
+  'fa-hat-wizard': generateSvg(faHatWizard),
+  'fa-info-circle': generateSvg(faInfoCircle),
+  'fa-key': generateSvg(faKey),
+  'fa-keyboard': generateSvg(faKeyboard),
+  'fa-layer-group': generateSvg(faLayerGroup),
+  'fa-pencil-alt': generateSvg(faPencilAlt),
+  'fa-plus': generateSvg(faPlus),
+  'fa-plus-square': generateSvg(faPlusSquare),
+  'fa-question-circle': generateSvg(faQuestionCircle),
+  'fa-robot': generateSvg(faRobot),
+  'fa-search': generateSvg(faSearch),
+  'fa-sign-out-alt': generateSvg(faSignOutAlt),
+  'fa-sliders-h': generateSvg(faSlidersH),
+  'fa-sync-alt': generateSvg(faSyncAlt),
+  'fa-tag': generateSvg(faTag),
+  'fa-times': generateSvg(faTimes),
+  'fa-times-circle': generateSvg(faTimesCircle),
+  'fa-tint': generateSvg(faTint),
+  'fa-toggle-off': generateSvg(faToggleOff),
+  'fa-toggle-on': generateSvg(faToggleOn),
+  'fa-trash': generateSvg(faTrash),
+  'fa-trash-alt': generateSvg(faTrashAlt),
+  'fa-undo': generateSvg(faUndo),
+  'fa-user': generateSvg(faUser),
+  'fa-users': generateSvg(faUsers),
+  'fa-mouse-pointer': generateSvg(faMousePointer),
+  'fa-step-forward': generateSvg(faStepForward),
+  'fa-search-minus': generateSvg(faSearchMinus),
+  'fa-search-plus': generateSvg(faSearchPlus),
+  'fa-table': generateSvg(faTable),
+  'fa-image': generateSvg(faImage),
+  'fa-link': generateSvg(faLink),
+  'fa-list': generateSvg(faList),
+};
+
+function generateSvg(iconDefinition: IconDefinition): React.ReactElement {
+  const { icon } = iconDefinition;
+
+  return (
+    <svg fill="currentColor" viewBox={`0 0 ${icon[0]} ${icon[1]}`}>
+      <path d={`${icon[4]}`} />
+    </svg>
+  );
+}
+
+export { faIcons };

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export { IconName } from './Icon';