@indico-data/design-system 1.0.47 → 1.0.48

package/lib/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/styles/globals/index.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const GlobalStyles: () => React.JSX.Element;
+export declare const GlobalStyles: () => import("react/jsx-runtime").JSX.Element;

package/lib/tokens/colors.d.ts

@@ -1,5 +1,6 @@
 export declare const allColors: {
     readonly akaroa: "#cbc98f";
+    readonly alizarin: "#E72326";
     readonly amber: "#f4c401";
     readonly amethyst: "#8e57b3";
     readonly aqua: "#10e4fe";
@@ -33,17 +34,20 @@ export declare const allColors: {
     readonly crimson: "#e53126";
     readonly curiousBlue: "#178ee0";
     readonly cyan: "#0cf";
+    readonly daisyBush: "#431B92";
     readonly darkFontColor: "#0d151d";
     readonly darkGray: "#333";
     readonly darkPurple: "#6f3eae";
     readonly darkRed: "#b30000";
     readonly defaultFontColor: "#bbbfc5";
     readonly dodgerBlue: "#1774ff";
+    readonly dusty: "#999999";
     readonly eagleGreen: "#005557";
     readonly ebony: "#101a26";
     readonly eggplant: "#7a0074";
     readonly electricGreen: "#00ff0a";
     readonly emerald: "#09c199";
+    readonly endeavor: "#0055B9";
     readonly espresso: "#5a3627";
     readonly fieldPromptError: "#fd9693";
     readonly fieldPromptInfo: "#00bfff";
@@ -55,6 +59,7 @@ export declare const allColors: {
     readonly green: "#4caf50";
     readonly harlequin: "#20cb00";
     readonly harvestGold: "#e6c079";
+    readonly hawkes: "#DCEAFD";
     readonly hemlock: "#626740";
     readonly imperial: "#4b0134";
     readonly iron: "#d9dee0";
@@ -100,12 +105,14 @@ export declare const allColors: {
     readonly seaGreen: "#0b8a51";
     readonly seance: "#7f1f82";
     readonly shiraz: "#c61021";
+    readonly silverChalice: "#aaaaaa";
     readonly sinopia: "#D14200";
     readonly slaaneshGrey: "#dbd5e6";
     readonly tangerine: "#ff9900";
     readonly teal: "#008285";
     readonly toast: "#997862";
     readonly trueBlue: "#066CC6";
+    readonly tundora: "#444444";
     readonly turquoise: "#00b5b6";
     readonly vermilion: "#b95555";
     readonly viking: "#59cfe0";

package/lib/tokens/typography.d.ts

@@ -21,6 +21,12 @@ export declare const spacing: {
     quarter: string;
     third: string;
 };
+export declare const weight: {
+    light: number;
+    regular: number;
+    semibold: number;
+    bold: number;
+};
 export declare const ellipsis: import("styled-components").RuleSet<object>;
 export declare const typography: {
     fontFamily: {
@@ -46,4 +52,10 @@ export declare const typography: {
         third: string;
     };
     ellipsis: import("styled-components").RuleSet<object>;
+    weight: {
+        light: number;
+        regular: number;
+        semibold: number;
+        bold: number;
+    };
 };

package/lib/types.d.ts

@@ -1,129 +1,148 @@
 /// <reference types="react" />
 declare const allIcons: {
-    readonly 'indico-o-white': import("react").JSX.Element;
-    readonly account: import("react").JSX.Element;
-    readonly address: import("react").JSX.Element;
-    readonly 'api-doc': import("react").JSX.Element;
-    readonly 'arrow-dots': import("react").JSX.Element;
-    readonly 'arrow-down': import("react").JSX.Element;
-    readonly 'arrow-up-circle': import("react").JSX.Element;
-    readonly 'arrows-cursor': import("react").JSX.Element;
-    readonly branch: import("react").JSX.Element;
-    readonly 'check-circle': import("react").JSX.Element;
-    readonly check: import("react").JSX.Element;
-    readonly checkbox: import("react").JSX.Element;
-    readonly 'chevron-down': import("react").JSX.Element;
-    readonly 'chevron-left': import("react").JSX.Element;
-    readonly 'chevron-right': import("react").JSX.Element;
-    readonly 'chevron-up': import("react").JSX.Element;
-    readonly 'classification-document': import("react").JSX.Element;
-    readonly 'classification-image': import("react").JSX.Element;
-    readonly 'classification-page': import("react").JSX.Element;
-    readonly 'classify-and-unbundle': import("react").JSX.Element;
-    readonly clipboard: import("react").JSX.Element;
-    readonly 'coffee-1': import("react").JSX.Element;
-    readonly 'coffee-2': import("react").JSX.Element;
-    readonly 'coffee-fail': import("react").JSX.Element;
-    readonly coffeecup: import("react").JSX.Element;
-    readonly coffeesteam: import("react").JSX.Element;
-    readonly 'company-name': import("react").JSX.Element;
-    readonly 'confidence-bar-1': import("react").JSX.Element;
-    readonly 'confidence-bar-2': import("react").JSX.Element;
-    readonly 'confidence-bar-3': import("react").JSX.Element;
-    readonly 'confidence-bar-4': import("react").JSX.Element;
-    readonly 'confidence-bars': import("react").JSX.Element;
-    readonly configure: import("react").JSX.Element;
-    readonly crowdlabel: import("react").JSX.Element;
-    readonly currency: import("react").JSX.Element;
-    readonly dashboard: import("react").JSX.Element;
-    readonly 'data-and-access': import("react").JSX.Element;
-    readonly database: import("react").JSX.Element;
-    readonly date: import("react").JSX.Element;
-    readonly draggable: import("react").JSX.Element;
-    readonly droplet: import("react").JSX.Element;
-    readonly edit: import("react").JSX.Element;
-    readonly education: import("react").JSX.Element;
-    readonly ellipsis: import("react").JSX.Element;
-    readonly 'elmos-fire': import("react").JSX.Element;
-    readonly email: import("react").JSX.Element;
-    readonly enterprise: import("react").JSX.Element;
-    readonly 'exclamation-circle-stroke': import("react").JSX.Element;
-    readonly extraction: import("react").JSX.Element;
-    readonly eye: import("react").JSX.Element;
-    readonly file: import("react").JSX.Element;
-    readonly fileHappy: import("react").JSX.Element;
-    readonly filter: import("react").JSX.Element;
-    readonly 'filter-outline': import("react").JSX.Element;
-    readonly folder: import("react").JSX.Element;
-    readonly form: import("react").JSX.Element;
-    readonly gallery: import("react").JSX.Element;
-    readonly graphiql: import("react").JSX.Element;
-    readonly happy: import("react").JSX.Element;
-    readonly 'help-solid': import("react").JSX.Element;
-    readonly help: import("react").JSX.Element;
-    readonly highlight: import("react").JSX.Element;
-    readonly 'highlight-outline': import("react").JSX.Element;
-    readonly 'indico-logo-white': import("react").JSX.Element;
-    readonly 'indico-o': import("react").JSX.Element;
-    readonly info: import("react").JSX.Element;
-    readonly kabob: import("react").JSX.Element;
-    readonly key: import("react").JSX.Element;
-    readonly label: import("react").JSX.Element;
-    readonly 'layout-complex': import("react").JSX.Element;
-    readonly 'layout-simple': import("react").JSX.Element;
-    readonly location: import("react").JSX.Element;
-    readonly lock: import("react").JSX.Element;
-    readonly menu: import("react").JSX.Element;
-    readonly 'model-import': import("react").JSX.Element;
-    readonly 'model-starter': import("react").JSX.Element;
-    readonly moon: import("react").JSX.Element;
-    readonly moonbow: import("react").JSX.Element;
-    readonly 'no-format': import("react").JSX.Element;
-    readonly 'object-detection': import("react").JSX.Element;
-    readonly organizations: import("react").JSX.Element;
-    readonly output: import("react").JSX.Element;
-    readonly 'page-thumbnail': import("react").JSX.Element;
-    readonly 'pay-as-you-go': import("react").JSX.Element;
-    readonly person: import("react").JSX.Element;
-    readonly phone: import("react").JSX.Element;
-    readonly pin: import("react").JSX.Element;
-    readonly plus: import("react").JSX.Element;
-    readonly pointer: import("react").JSX.Element;
-    readonly popup: import("react").JSX.Element;
-    readonly price: import("react").JSX.Element;
-    readonly 'radio-button': import("react").JSX.Element;
-    readonly recruiter: import("react").JSX.Element;
-    readonly regex: import("react").JSX.Element;
-    readonly reject: import("react").JSX.Element;
-    readonly repair: import("react").JSX.Element;
-    readonly research: import("react").JSX.Element;
-    readonly retrain: import("react").JSX.Element;
-    readonly sad: import("react").JSX.Element;
-    readonly search: import("react").JSX.Element;
-    readonly shrug: import("react").JSX.Element;
-    readonly signature: import("react").JSX.Element;
-    readonly 'sort-down': import("react").JSX.Element;
-    readonly split: import("react").JSX.Element;
-    readonly 'step-forward': import("react").JSX.Element;
-    readonly sun: import("react").JSX.Element;
-    readonly surround: import("react").JSX.Element;
-    readonly 'surround-outline': import("react").JSX.Element;
-    readonly text: import("react").JSX.Element;
-    readonly 'thumbs-down': import("react").JSX.Element;
-    readonly 'thumbs-up': import("react").JSX.Element;
-    readonly time: import("react").JSX.Element;
-    readonly trash: import("react").JSX.Element;
-    readonly unlock: import("react").JSX.Element;
-    readonly upload: import("react").JSX.Element;
-    readonly url: import("react").JSX.Element;
-    readonly user: import("react").JSX.Element;
-    readonly wand: import("react").JSX.Element;
-    readonly warning: import("react").JSX.Element;
-    readonly 'warning-stroke': import("react").JSX.Element;
-    readonly workflows: import("react").JSX.Element;
-    readonly 'x-close': import("react").JSX.Element;
-    readonly 'zoom-in': import("react").JSX.Element;
-    readonly 'zoom-out': import("react").JSX.Element;
+    readonly 'indico-o-white': import("react/jsx-runtime").JSX.Element;
+    readonly account: import("react/jsx-runtime").JSX.Element;
+    readonly address: import("react/jsx-runtime").JSX.Element;
+    readonly 'api-doc': import("react/jsx-runtime").JSX.Element;
+    readonly 'arrow-dots': import("react/jsx-runtime").JSX.Element;
+    readonly 'arrow-down': import("react/jsx-runtime").JSX.Element;
+    readonly 'arrow-up-circle': import("react/jsx-runtime").JSX.Element;
+    readonly 'arrows-cursor': import("react/jsx-runtime").JSX.Element;
+    readonly bookmark: import("react/jsx-runtime").JSX.Element;
+    readonly bookmarks: import("react/jsx-runtime").JSX.Element;
+    readonly 'bookmark-saved': import("react/jsx-runtime").JSX.Element;
+    readonly branch: import("react/jsx-runtime").JSX.Element;
+    readonly 'check-circle': import("react/jsx-runtime").JSX.Element;
+    readonly 'circle-help': import("react/jsx-runtime").JSX.Element;
+    readonly check: import("react/jsx-runtime").JSX.Element;
+    readonly checkbox: import("react/jsx-runtime").JSX.Element;
+    readonly 'chevron-down': import("react/jsx-runtime").JSX.Element;
+    readonly 'chevron-left': import("react/jsx-runtime").JSX.Element;
+    readonly 'chevron-right': import("react/jsx-runtime").JSX.Element;
+    readonly 'chevron-up': import("react/jsx-runtime").JSX.Element;
+    readonly 'classification-document': import("react/jsx-runtime").JSX.Element;
+    readonly 'classification-image': import("react/jsx-runtime").JSX.Element;
+    readonly 'classification-page': import("react/jsx-runtime").JSX.Element;
+    readonly 'classify-and-unbundle': import("react/jsx-runtime").JSX.Element;
+    readonly clipboard: import("react/jsx-runtime").JSX.Element;
+    readonly 'coffee-1': import("react/jsx-runtime").JSX.Element;
+    readonly 'coffee-2': import("react/jsx-runtime").JSX.Element;
+    readonly 'coffee-fail': import("react/jsx-runtime").JSX.Element;
+    readonly coffeecup: import("react/jsx-runtime").JSX.Element;
+    readonly coffeesteam: import("react/jsx-runtime").JSX.Element;
+    readonly cog: import("react/jsx-runtime").JSX.Element;
+    readonly collection: import("react/jsx-runtime").JSX.Element;
+    readonly compare: import("react/jsx-runtime").JSX.Element;
+    readonly 'company-name': import("react/jsx-runtime").JSX.Element;
+    readonly 'confidence-bar-1': import("react/jsx-runtime").JSX.Element;
+    readonly 'confidence-bar-2': import("react/jsx-runtime").JSX.Element;
+    readonly 'confidence-bar-3': import("react/jsx-runtime").JSX.Element;
+    readonly 'confidence-bar-4': import("react/jsx-runtime").JSX.Element;
+    readonly 'confidence-bars': import("react/jsx-runtime").JSX.Element;
+    readonly configure: import("react/jsx-runtime").JSX.Element;
+    readonly 'choose-library': import("react/jsx-runtime").JSX.Element;
+    readonly crowdlabel: import("react/jsx-runtime").JSX.Element;
+    readonly currency: import("react/jsx-runtime").JSX.Element;
+    readonly dashboard: import("react/jsx-runtime").JSX.Element;
+    readonly 'data-and-access': import("react/jsx-runtime").JSX.Element;
+    readonly database: import("react/jsx-runtime").JSX.Element;
+    readonly date: import("react/jsx-runtime").JSX.Element;
+    readonly draggable: import("react/jsx-runtime").JSX.Element;
+    readonly droplet: import("react/jsx-runtime").JSX.Element;
+    readonly edit: import("react/jsx-runtime").JSX.Element;
+    readonly education: import("react/jsx-runtime").JSX.Element;
+    readonly ellipsis: import("react/jsx-runtime").JSX.Element;
+    readonly 'elmos-fire': import("react/jsx-runtime").JSX.Element;
+    readonly email: import("react/jsx-runtime").JSX.Element;
+    readonly enterprise: import("react/jsx-runtime").JSX.Element;
+    readonly 'exclamation-circle-stroke': import("react/jsx-runtime").JSX.Element;
+    readonly extraction: import("react/jsx-runtime").JSX.Element;
+    readonly eye: import("react/jsx-runtime").JSX.Element;
+    readonly file: import("react/jsx-runtime").JSX.Element;
+    readonly fileHappy: import("react/jsx-runtime").JSX.Element;
+    readonly filter: import("react/jsx-runtime").JSX.Element;
+    readonly 'filter-outline': import("react/jsx-runtime").JSX.Element;
+    readonly folder: import("react/jsx-runtime").JSX.Element;
+    readonly form: import("react/jsx-runtime").JSX.Element;
+    readonly gallery: import("react/jsx-runtime").JSX.Element;
+    readonly 'find-documents': import("react/jsx-runtime").JSX.Element;
+    readonly graphiql: import("react/jsx-runtime").JSX.Element;
+    readonly 'grid-view': import("react/jsx-runtime").JSX.Element;
+    readonly happy: import("react/jsx-runtime").JSX.Element;
+    readonly 'help-solid': import("react/jsx-runtime").JSX.Element;
+    readonly help: import("react/jsx-runtime").JSX.Element;
+    readonly highlight: import("react/jsx-runtime").JSX.Element;
+    readonly 'highlight-outline': import("react/jsx-runtime").JSX.Element;
+    readonly 'indico-logo-white': import("react/jsx-runtime").JSX.Element;
+    readonly 'indico-o': import("react/jsx-runtime").JSX.Element;
+    readonly info: import("react/jsx-runtime").JSX.Element;
+    readonly kabob: import("react/jsx-runtime").JSX.Element;
+    readonly key: import("react/jsx-runtime").JSX.Element;
+    readonly label: import("react/jsx-runtime").JSX.Element;
+    readonly 'layout-complex': import("react/jsx-runtime").JSX.Element;
+    readonly 'layout-simple': import("react/jsx-runtime").JSX.Element;
+    readonly 'list-view': import("react/jsx-runtime").JSX.Element;
+    readonly libraries: import("react/jsx-runtime").JSX.Element;
+    readonly location: import("react/jsx-runtime").JSX.Element;
+    readonly logout: import("react/jsx-runtime").JSX.Element;
+    readonly lock: import("react/jsx-runtime").JSX.Element;
+    readonly menu: import("react/jsx-runtime").JSX.Element;
+    readonly 'model-import': import("react/jsx-runtime").JSX.Element;
+    readonly 'model-starter': import("react/jsx-runtime").JSX.Element;
+    readonly moon: import("react/jsx-runtime").JSX.Element;
+    readonly moonbow: import("react/jsx-runtime").JSX.Element;
+    readonly 'no-collections': import("react/jsx-runtime").JSX.Element;
+    readonly 'no-libraries': import("react/jsx-runtime").JSX.Element;
+    readonly no_results: import("react/jsx-runtime").JSX.Element;
+    readonly 'no-format': import("react/jsx-runtime").JSX.Element;
+    readonly 'object-detection': import("react/jsx-runtime").JSX.Element;
+    readonly organizations: import("react/jsx-runtime").JSX.Element;
+    readonly output: import("react/jsx-runtime").JSX.Element;
+    readonly 'page-thumbnail': import("react/jsx-runtime").JSX.Element;
+    readonly 'pay-as-you-go': import("react/jsx-runtime").JSX.Element;
+    readonly person: import("react/jsx-runtime").JSX.Element;
+    readonly phone: import("react/jsx-runtime").JSX.Element;
+    readonly pin: import("react/jsx-runtime").JSX.Element;
+    readonly plus: import("react/jsx-runtime").JSX.Element;
+    readonly pointer: import("react/jsx-runtime").JSX.Element;
+    readonly popup: import("react/jsx-runtime").JSX.Element;
+    readonly price: import("react/jsx-runtime").JSX.Element;
+    readonly 'preview-view': import("react/jsx-runtime").JSX.Element;
+    readonly 'radio-button': import("react/jsx-runtime").JSX.Element;
+    readonly recruiter: import("react/jsx-runtime").JSX.Element;
+    readonly regex: import("react/jsx-runtime").JSX.Element;
+    readonly reject: import("react/jsx-runtime").JSX.Element;
+    readonly repair: import("react/jsx-runtime").JSX.Element;
+    readonly research: import("react/jsx-runtime").JSX.Element;
+    readonly reset: import("react/jsx-runtime").JSX.Element;
+    readonly retrain: import("react/jsx-runtime").JSX.Element;
+    readonly sad: import("react/jsx-runtime").JSX.Element;
+    readonly search: import("react/jsx-runtime").JSX.Element;
+    readonly 'search-thin': import("react/jsx-runtime").JSX.Element;
+    readonly shrug: import("react/jsx-runtime").JSX.Element;
+    readonly signature: import("react/jsx-runtime").JSX.Element;
+    readonly 'sort-down': import("react/jsx-runtime").JSX.Element;
+    readonly split: import("react/jsx-runtime").JSX.Element;
+    readonly 'step-forward': import("react/jsx-runtime").JSX.Element;
+    readonly sun: import("react/jsx-runtime").JSX.Element;
+    readonly surround: import("react/jsx-runtime").JSX.Element;
+    readonly 'surround-outline': import("react/jsx-runtime").JSX.Element;
+    readonly text: import("react/jsx-runtime").JSX.Element;
+    readonly 'thumbs-down': import("react/jsx-runtime").JSX.Element;
+    readonly 'thumbs-up': import("react/jsx-runtime").JSX.Element;
+    readonly time: import("react/jsx-runtime").JSX.Element;
+    readonly trash: import("react/jsx-runtime").JSX.Element;
+    readonly unlock: import("react/jsx-runtime").JSX.Element;
+    readonly upload: import("react/jsx-runtime").JSX.Element;
+    readonly url: import("react/jsx-runtime").JSX.Element;
+    readonly user: import("react/jsx-runtime").JSX.Element;
+    readonly wand: import("react/jsx-runtime").JSX.Element;
+    readonly warning: import("react/jsx-runtime").JSX.Element;
+    readonly 'warning-stroke': import("react/jsx-runtime").JSX.Element;
+    readonly workflows: import("react/jsx-runtime").JSX.Element;
+    readonly 'x-close': import("react/jsx-runtime").JSX.Element;
+    readonly 'zoom-in': import("react/jsx-runtime").JSX.Element;
+    readonly 'zoom-out': import("react/jsx-runtime").JSX.Element;
     readonly 'fa-dot-circle': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     readonly 'fa-file': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     readonly 'fa-file-alt': import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -204,4 +223,7 @@ export type PermafrostComponent = {
     'data-cy'?: string;
     'data-testid'?: string;
 };
-export {};
+export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonSize = 'normal' | 'large';
+import { ListItem } from './components/Navigation/Drawer/types';
+export type { ListItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -11,7 +11,9 @@
     "lint": "yarn eslint src --ext ts,js,tsx,jsx",
     "build": "rollup -c",
     "build storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -21,9 +23,13 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@indico-data/utils": "^0.0.5",
+    "@react-types/button": "^3.9.1",
+    "@react-types/checkbox": "^3.6.0",
+    "@react-types/radio": "^3.7.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "html-webpack-plugin": "^5.5.3",
+    "react-modal": "^3.16.1",
     "simple-zustand-devtools": "^1.1.0",
     "svgo": "^3.0.3",
     "tslib": "^2.6.2",
@@ -58,9 +64,15 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
     "@storybook/test": "^7.6.0-alpha.4",
-    "@storybook/test-runner": "^0.15.1",
+    "@storybook/test-runner": "^0.16.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.11",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-modal": "^3",
     "@types/styled-components": "^5.1.30",
     "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
@@ -71,6 +83,8 @@
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.0",
     "postcss": "^8.4.31",
     "prettier": "3.1.0",
@@ -84,6 +98,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.5.3",
     "styled-components": "^6.1.1",
+    "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2"

package/src/components/Icon/Icon.tsx

@@ -56,6 +56,7 @@ export function Icon({ style = {}, ...props }: Props): React.ReactElement | null
       role="img"
       className={props.className}
       data-cy={props['data-cy']}
+      data-testid={props['data-testid']}
       fill={props.fill || 'currentColor'}
       id={props.id}
       style={style}