@arbor-education/design-system.components 0.0.1

package/.checkov.yml

@@ -0,0 +1,10 @@
+download-external-modules: false
+evaluate-variables: true
+external-modules-download-path: .external_modules
+framework:
+- all
+quiet: true
+skip-check:
+  - CKV_AWS_144 #Do not enforce cross-region S3 buckets
+  - CKV_TF_1 #Do not enforce module commit hashes - we use tags
+  - CKV_TF_2 #Do not enforce tag versioning - checkov does not understand our s3 module tagging approach

package/.github/CODEOWNERS

@@ -0,0 +1,7 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+# Order is important. The last matching pattern has the most precedence.
+# The team needs to exist and have write access to the repository
+
+.github/** @arbor-education/DevOps_Reviewers
+terraform/** @arbor-education/DevOps_Reviewers

package/.github/workflows/chromatic.yml

@@ -0,0 +1,52 @@
+# Workflow name
+name: 'Chromatic Publish'
+
+# Event for the workflow
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - opened
+      - edited
+      - ready_for_review
+      - synchronize
+      - reopened
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - run: yarn
+      - name: Build
+        run: yarn build
+      #👇 Adds Chromatic as a step in the workflow
+      - name: Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken,
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
+      - name: Create comment
+        uses: mshick/add-pr-comment@v2
+        if: github.event_name == 'pull_request'
+        env:
+          GITHUB_TOKEN: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          message: |
+            ## 👀 Beep Boop! 🤖
+            Your PR has been deployed to Chromatic. You can view the storybook [here](${{steps.chromatic.outputs.storybookUrl}}) and the Chromatic build [here](${{steps.chromatic.outputs.buildUrl}}).

package/.github/workflows/pr-checks.yml

@@ -0,0 +1,18 @@
+name: PR Checks
+on:
+  pull_request:
+    types:
+      - labeled
+      - unlabeled
+      - opened
+      - edited
+      - ready_for_review
+      - synchronize
+      - reopened
+  workflow_dispatch:
+
+jobs:
+  jira-title-and-link:
+    uses: arbor-education/gha.workflows/.github/workflows/pr-jira-check-template.yaml@pr-checks-v1
+    secrets:
+      jira_token: ${{ secrets.JIRA_TOKEN }}

package/.github/workflows/pr-housekeeping.yaml

@@ -0,0 +1,16 @@
+name: 'PR Housekeeping'
+on:
+  workflow_dispatch: {}
+  schedule:
+    - cron: '30 1 * * *'
+
+permissions:
+  contents: write # only for delete-branch option
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    uses: arbor-education/gha.workflows/.github/workflows/pr-housekeeping-template.yaml@v0.0.156
+    with:
+      dry_run: false

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+nvm install && nvm use
+yarn lint-staged

package/.nvmrc

@@ -0,0 +1 @@
+v20.19.3

package/.pre-commit-config.yaml

@@ -0,0 +1,28 @@
+repos:
+- repo: https://github.com/astral-sh/ruff-pre-commit
+  rev: v0.9.6
+  hooks:
+    - id: ruff
+      args: [ --fix ]
+    - id: ruff-format
+
+- repo: https://github.com/antonbabenko/pre-commit-terraform
+  rev: v1.71.0
+  hooks:
+    - id: terragrunt_fmt
+      always_run: true
+    - id: terraform_fmt
+    - id: terraform_docs
+    - id: terraform_tflint
+      args:
+        - --args=--config=__GIT_WORKING_DIR__/.tflint.hcl
+
+- repo: https://github.com/pre-commit/pre-commit-hooks
+  rev: v4.2.0
+  hooks:
+    - id: check-merge-conflict
+    - id: trailing-whitespace
+    - id: end-of-file-fixer
+    - id: check-json
+    - id: check-added-large-files
+    - id: check-yaml

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/**/*.story.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@chromatic-com/storybook',
+    '@storybook/addon-docs',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from '@storybook/react-vite';
+
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/.tflint.hcl

@@ -0,0 +1,13 @@
+plugin "terraform" {
+  # Plugin common attributes
+  enabled = true
+  preset  = "recommended"
+}
+
+rule "terraform_unused_declarations" {
+  enabled = true
+}
+
+rule "terraform_required_version" {
+  enabled = false
+}

package/CODEOWNERS

@@ -0,0 +1,5 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+# Order is important. The last matching pattern has the most precedence.
+
+* @arbor-education/Frontend_Reviewers

package/README.md

@@ -0,0 +1,21 @@
+# <<Repo Name>>
+
+<<A short description of what the repo is for>>
+
+In order to use the createComponent script, run the following command:
+
+    chmod +x bin/createComponent.sh
+
+Then you can create a new component by running
+
+    npm run createComponent <ComponentName>
+
+## Local Development with Yalc
+
+To publish new changes locally with hot loading, run:
+
+    yarn build
+
+On the consumer project run:
+
+    yalc add design-system.components

package/bin/createComponent.sh

@@ -0,0 +1,96 @@
+#!/bin/bash
+
+COMPONENT_NAME=$1
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# Check if input is empty
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "❌ Please provide a component name."
+  exit 1
+fi
+
+# Validate input: must start with a letter and contain only letters and numbers
+if [[ ! "$COMPONENT_NAME" =~ ^[a-zA-Z][a-zA-Z0-9]*$ ]]; then
+  echo "❌ Invalid component name."
+  echo "✅ Use only letters and numbers. The name must start with a letter and contain no spaces or special characters."
+  exit 1
+fi
+
+# Capitalize the first letter
+capitalize() {
+  echo "$1" | awk '{print toupper(substr($0,1,1)) substr($0,2)}'
+}
+
+# Uncapitalize the first letter
+uncapitalize() {
+  echo "$1" | awk '{print tolower(substr($0,1,1)) substr($0,2)}'
+}
+
+CAPITALIZED_NAME=$(capitalize "$COMPONENT_NAME")   # → "Button"
+LOWERCASED_NAME=$(uncapitalize "$COMPONENT_NAME")  # → "button"
+
+COMPONENT_DIR="$SCRIPT_DIR/../src/components/$LOWERCASED_NAME"
+INDEX_FILE_PATH="$SCRIPT_DIR/../src/index.ts"
+STYLES_INDEX_PATH="$SCRIPT_DIR/../src/index.scss"
+
+
+# Create directory
+mkdir -p "$COMPONENT_DIR"
+
+# Create component file
+cat <<EOF > "$COMPONENT_DIR/$CAPITALIZED_NAME.tsx"
+export const ${CAPITALIZED_NAME} = () => {
+  return <div className="${LOWERCASED_NAME}">Hello I'm a ${CAPITALIZED_NAME}!</div>;
+};
+EOF
+
+# Create test file
+cat <<EOF > "$COMPONENT_DIR/$CAPITALIZED_NAME.test.tsx"
+import { expect, test } from "vitest";
+import { render, screen } from '@testing-library/react';
+import { ${CAPITALIZED_NAME} } from './${CAPITALIZED_NAME}';
+import '@testing-library/jest-dom/vitest';
+
+test('${CAPITALIZED_NAME} says hello', () => {
+  render(<${CAPITALIZED_NAME} />);
+  expect(screen.getByText("Hello I'm a ${CAPITALIZED_NAME}!")).toBeInTheDocument();
+});
+EOF
+
+# Create Storybook file
+cat <<EOF > "$COMPONENT_DIR/$CAPITALIZED_NAME.stories.tsx"
+import type { Meta } from '@storybook/react-vite';
+import { ${CAPITALIZED_NAME} } from './${CAPITALIZED_NAME}';
+
+const meta: Meta<typeof ${CAPITALIZED_NAME}> = {
+  title: 'Components/${CAPITALIZED_NAME}',
+  component: ${CAPITALIZED_NAME},
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+  },
+};
+
+export default meta;
+EOF
+
+# Create SCSS file
+cat <<EOF > "$COMPONENT_DIR/$LOWERCASED_NAME.scss"
+.${LOWERCASED_NAME} {
+  /* styles go here */
+}
+EOF
+
+# Append component export line to index.ts
+INDEX_FILE_PATH="${SCRIPT_DIR}/../src/index.ts"
+EXPORT_LINE="export { ${CAPITALIZED_NAME} } from \"./components/${LOWERCASED_NAME}/${CAPITALIZED_NAME}\";"
+
+echo "$EXPORT_LINE" >> "$INDEX_FILE_PATH"
+
+# Append SCSS import line to index.scss
+STYLES_INDEX_PATH="${SCRIPT_DIR}/../src/index.scss"
+SCSS_IMPORT_LINE="@use \"./components/${LOWERCASED_NAME}/${LOWERCASED_NAME}.scss\";"
+
+echo "$SCSS_IMPORT_LINE" >> "$STYLES_INDEX_PATH"

package/dist/components/button/Button.d.ts

@@ -0,0 +1,10 @@
+import React, { type ButtonHTMLAttributes } from 'react';
+export type ButtonProps = {
+    type?: 'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'text-link';
+    size?: 'M' | 'S';
+    children?: React.ReactNode;
+    className?: string;
+    [key: string]: unknown;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,WAAW,CAAC;IAC5G,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAE1D,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAyBxC,CAAC"}

package/dist/components/button/Button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React, {} from 'react';
+export const Button = (props) => {
+    const { type = 'primary', size = 'M', children, onClick, disabled = false, className = '', ...rest } = props;
+    return (_jsx("button", { className: classNames('ds-button', `ds-button--${type}`, `ds-button--${size}`, className), onClick: onClick, disabled: disabled, ...rest, children: children }));
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAUzD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBACE,SAAS,EAAE,UAAU,CAAC,WAAW,EAC/B,cAAc,IAAI,EAAE,EACpB,cAAc,IAAI,EAAE,EACpB,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,KACd,IAAI,YAEP,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/card/Card.d.ts

@@ -0,0 +1,18 @@
+import { allowedIcons } from '../icon/allowedIcons';
+import { type PillColor } from '../pill/Pill';
+type CardProps = {
+    title?: string;
+    paragraph?: string;
+    icon?: keyof typeof allowedIcons;
+    iconColor?: string;
+    disabled?: boolean;
+    pillText?: string;
+    pillColor?: PillColor;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    arrowType?: 'chevron' | 'arrow';
+    iconScreenReaderText?: string;
+};
+export declare const Card: ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, pillText, pillColor, arrowType, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,4HAYlB,SAAS,4CA+DX,CAAC"}

package/dist/components/card/Card.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Icon } from '../icon/Icon';
+import { allowedIcons } from '../icon/allowedIcons';
+import { Pill } from '../pill/Pill';
+export const Card = ({ title, paragraph, icon, iconColor, iconScreenReaderText, onClick, onKeyDown, disabled, pillText, pillColor, arrowType = 'chevron', }) => {
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    };
+    const isCardClickable = onClick && !disabled;
+    return (_jsx("article", { className: classNames('ds-card__container', {
+            'ds-card__container--clickable': isCardClickable,
+            'ds-card__container--disabled': disabled,
+        }), onClick: (e) => {
+            if (isCardClickable) {
+                handleClick(e);
+            }
+        }, onKeyDown: (e) => {
+            if (isCardClickable) {
+                handleKeyDown(e);
+            }
+        }, "aria-label": "Card", tabIndex: isCardClickable ? 0 : -1, children: _jsxs("div", { className: "ds-card__content", children: [icon && (_jsx(Icon, { name: icon, className: "ds-card__icon-left", screenReaderText: iconScreenReaderText, color: iconColor, size: 24 })), _jsxs("div", { className: "ds-card__text", children: [title && (_jsx("span", { className: "ds-card__title-container", children: title && _jsx("h4", { className: "ds-card__title", children: title }) })), paragraph && _jsx("p", { className: "ds-card__paragraph", children: paragraph }), pillText && _jsx(Pill, { text: pillText, color: pillColor })] }), isCardClickable && (_jsx(Icon, { name: `${arrowType}-right`, className: "ds-card__icon-click", size: 24 }))] }) }));
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAgBpD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,SAAS,EACT,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,SAAS,GACX,EAAE,EAAE;IACd,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC5D,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,QAAQ,CAAC;IAE7C,OAAO,CACL,kBACE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;YAC1C,+BAA+B,EAAE,eAAe;YAChD,8BAA8B,EAAE,QAAQ;SACzC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,eAAe,EAAE,CAAC;gBACpB,aAAa,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,gBACU,MAAM,EACjB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAElC,eAAK,SAAS,EAAC,kBAAkB,aAC9B,IAAI,IAAI,CACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,oBAAoB,EAC9B,gBAAgB,EAAE,oBAAoB,EACtC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,GACR,CACH,EACD,eAAK,SAAS,EAAC,eAAe,aAC3B,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,0BAA0B,YACvC,KAAK,IAAI,aAAI,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAM,GAChD,CACR,EACA,SAAS,IAAI,YAAG,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAK,EAC9D,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAI,IACnD,EACL,eAAe,IAAI,CAClB,KAAC,IAAI,IACH,IAAI,EAAE,GAAG,SAAS,QAAQ,EAC1B,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,EAAE,GACR,CACH,IACG,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/card/Card.stories.d.ts

@@ -0,0 +1,86 @@
+import type { Meta } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export declare const CardWithTitleAndParagraph: {
+    args: {
+        title: string;
+        paragraph: string;
+        disabled: boolean;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const CardWithTitleParagraphAndIcon: {
+    args: {
+        title: string;
+        paragraph: string;
+        icon: string;
+        disabled: boolean;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const TheEverythingCard: {
+    args: {
+        title: string;
+        paragraph: string;
+        icon: string;
+        disabled: boolean;
+        pillText: string;
+        pillColor: string;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const CardWithTitleParagraphAndPill: {
+    args: {
+        title: string;
+        paragraph: string;
+        disabled: boolean;
+        pillText: string;
+        pillColor: string;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const CardWithTitleAndIcon: {
+    args: {
+        title: string;
+        icon: string;
+        disabled: boolean;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const CardWithParagraph: {
+    args: {
+        paragraph: string;
+        disabled: boolean;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const ClickableDisabledCard: {
+    args: {
+        title: string;
+        paragraph: string;
+        icon: string;
+        disabled: boolean;
+        pillText: string;
+        pillColor: string;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const UnclickableCard: {
+    args: {
+        title: string;
+        paragraph: string;
+        icon: string;
+        disabled: boolean;
+        pillText: string;
+        pillColor: string;
+    };
+};
+export default meta;
+//# sourceMappingURL=Card.stories.d.ts.map

package/dist/components/card/Card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;CAQrC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;;;;CASzC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;CAW7B,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;;;;;CAUzC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;CAQhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;CAO7B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAWjC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;CAS3B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/card/Card.stories.js

@@ -0,0 +1,89 @@
+import { Card } from './Card';
+import { fn } from 'storybook/test';
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+};
+export const CardWithTitleAndParagraph = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        disabled: false,
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const CardWithTitleParagraphAndIcon = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        icon: 'eye',
+        disabled: false,
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const TheEverythingCard = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        icon: 'eye',
+        disabled: false,
+        pillText: 'argle bargle',
+        pillColor: 'orange',
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const CardWithTitleParagraphAndPill = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        disabled: false,
+        pillText: 'argle bargle',
+        pillColor: 'orange',
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const CardWithTitleAndIcon = {
+    args: {
+        title: 'Title of Card',
+        icon: 'eye',
+        disabled: false,
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const CardWithParagraph = {
+    args: {
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        disabled: false,
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const ClickableDisabledCard = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        icon: 'eye',
+        disabled: true,
+        pillText: 'argle bargle',
+        pillColor: 'orange',
+        onClick: fn(),
+        onKeyDown: fn(),
+    },
+};
+export const UnclickableCard = {
+    args: {
+        title: 'Title of Card',
+        paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+        icon: 'eye',
+        disabled: true,
+        pillText: 'argle bargle',
+        pillColor: 'orange',
+    },
+};
+export default meta;
+//# sourceMappingURL=Card.stories.js.map

package/dist/components/card/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,cAAc;QACxB,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,cAAc;QACxB,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,SAAS,EAAE,yDAAyD;QACpE,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,cAAc;QACxB,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,EAAE,EAAE;QACb,SAAS,EAAE,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,yDAAyD;QACpE,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,cAAc;QACxB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}