@arbor-education/design-system.components 0.1.2 → 0.1.3

package/.changeset/neat-experts-repair.md

@@ -0,0 +1,2 @@
+---
+---

package/.changeset/slick-places-grin.md

@@ -0,0 +1,5 @@
+---
+"@arbor-education/design-system.components": patch
+---
+
+MIS-66551 remove browser default margins from ds headings

package/.changeset/sunny-cars-sell.md

@@ -0,0 +1,2 @@
+---
+---

package/.changeset/tough-facts-check.md

@@ -0,0 +1,5 @@
+---
+"@arbor-education/design-system.components": patch
+---
+
+MIS-64743 Colour picker component and adding SelectDropdown as a FormField option

package/.changeset/true-rats-add.md

@@ -0,0 +1,5 @@
+---
+"@arbor-education/design-system.components": patch
+---
+
+MIS-67381 improvements to createComponent script

package/.github/workflows/chromatic.yml

@@ -28,7 +28,8 @@ jobs:
         with:
           node-version: 20
           cache: 'yarn'
-      - run: yarn
+      - name: Install dependencies
+        run: yarn install --prefer-offline --frozen-lockfile
       - name: Build
         run: yarn build
       #👇 Adds Chromatic as a step in the workflow

package/.github/workflows/release.yml

@@ -0,0 +1,124 @@
+# IMPORTANT: Keep this workflow filename unchanged for npm OIDC trusted publishing to work
+
+name: Design System Components Release
+
+permissions:
+  contents: write    # Required to push tags and create releases
+  pull-requests: read  # Required for changelog generation
+  id-token: write  # Required for OIDC authentication
+
+on:
+  schedule:
+    - cron: '0 7 * * 1-5'  # 7 AM UTC, Monday-Friday
+  workflow_dispatch:  # Allow manual trigger
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          registry-url: 'https://registry.npmjs.org'
+          cache: "yarn"
+
+      - name: Install yarn
+        run: npm install yarn -g
+      - name: Install dependencies
+        run: yarn install --prefer-offline --frozen-lockfile
+
+      - name: Upgrade npm for Trusted Publishing (OIDC)
+        run: npm install -g npm@latest
+
+      - name: Set up default git user
+        uses: fregante/setup-git-user@v1
+
+      - name: Version packages
+        id: version
+        env:
+          GITHUB_TOKEN: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
+        run: |
+          npx changeset version
+          if git diff --quiet package.json; then
+            echo "No version bump in package.json"
+            echo "changed=false" >> $GITHUB_OUTPUT
+          else
+            echo "Version bump detected, committing..."
+            echo "changed=true" >> $GITHUB_OUTPUT
+            git add .
+            git commit -m "chore: version packages"
+            git remote set-url origin https://x-access-token:${{ env.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY
+            git push
+          fi
+
+      - name: Publish to npm
+        if: steps.version.outputs.changed == 'true'
+        run: npm publish
+
+      - name: Get changelog for current release
+        if: steps.version.outputs.changed == 'true'
+        id: get-changelog
+        run: |
+          changelog=$(python "${GITHUB_WORKSPACE}/.github/workflows/scripts/python/changelog_utils.py")
+          echo "changelog<<EOF" >> $GITHUB_ENV
+          echo "$changelog" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+
+      - name: Get version
+        if: steps.version.outputs.changed == 'true'
+        id: get-version
+        run: |
+          version=$(node -p "require('./package.json').version")
+          echo "version=${version}" >> $GITHUB_OUTPUT
+
+      - name: Create tarball
+        if: steps.version.outputs.changed == 'true'
+        run: |
+          mkdir -p release
+          npm pack
+          mv *.tgz release/design-system.components.tgz
+
+      - name: Create GitHub Release
+        if: steps.version.outputs.changed == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          version="${{ steps.get-version.outputs.version }}"
+          git tag -a "${version}" -m "Release ${version}"
+          git push origin "${version}"
+
+          gh release create "${version}" \
+            --repo "arbor-education/design-system.components" \
+            --title "${version}" \
+            --notes "${{ env.changelog }}" \
+            "./release/design-system.components.tgz"
+
+      - name: Send Slack Success Message
+        if: steps.version.outputs.changed == 'true'
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_COLOR: good
+          SLACK_MESSAGE: "https://github.com/arbor-education/design-system.components/blob/main/CHANGELOG.md\n\nChangelog summary:\n\n${{ env.changelog }}"
+          SLACK_TITLE: "We have a new version of Design System Components: ${{ steps.get-version.outputs.version }}"
+          MSG_MINIMAL: true
+          SLACK_WEBHOOK: ${{ secrets.ARBOR_FRONTEND_RELEASE_SLACK_WEBHOOK }}
+
+      - name: Send Slack Failure Message
+        if: ${{ failure() }}
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_COLOR: bad
+          SLACK_MESSAGE: "Investigate why this failed @frontend-firefighter https://github.com/arbor-education/design-system.components/actions/runs/${{ github.run_id }}"
+          SLACK_TITLE: ":x: Error creating design system components release :sob:"
+          SLACK_LINK_NAMES: true
+          MSG_MINIMAL: true
+          SLACK_WEBHOOK: ${{ secrets.ARBOR_FRONTEND_RELEASE_SLACK_WEBHOOK }}

package/CHANGELOG.md

@@ -1,4 +1,3 @@
-## 0.0.5
 
 ## 0.1.2
 

package/bin/createComponent.sh

@@ -26,8 +26,14 @@ uncapitalize() {
   echo "$1" | awk '{print tolower(substr($0,1,1)) substr($0,2)}'
 }
 
+# Convert to kebab-case
+kebabcase() {
+  echo "$1" | sed 's/\([A-Z]\)/-\1/g' | sed 's/^-//' | tr '[:upper:]' '[:lower:]'
+}
+
 CAPITALIZED_NAME=$(capitalize "$COMPONENT_NAME")   # → "Button"
 LOWERCASED_NAME=$(uncapitalize "$COMPONENT_NAME")  # → "button"
+KEBAB_CASED_NAME=$(kebabcase "$COMPONENT_NAME")    # → "button" or "multi-word"
 
 COMPONENT_DIR="$SCRIPT_DIR/../src/components/$LOWERCASED_NAME"
 INDEX_FILE_PATH="$SCRIPT_DIR/../src/index.ts"
@@ -39,14 +45,33 @@ 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>;
+import classNames from 'classnames';
+
+type ${CAPITALIZED_NAME}Props = {
+  className?: string;
+};
+
+export const ${CAPITALIZED_NAME} = (props: ${CAPITALIZED_NAME}Props) => {
+  const {
+    className,
+  } = props;
+
+  return (
+    <div
+      className={classNames(
+        'ds-${KEBAB_CASED_NAME}',
+        className,
+      )}
+    >
+      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 { expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ${CAPITALIZED_NAME} } from './${CAPITALIZED_NAME}';
 import '@testing-library/jest-dom/vitest';
@@ -78,19 +103,24 @@ EOF
 
 # Create SCSS file
 cat <<EOF > "$COMPONENT_DIR/$LOWERCASED_NAME.scss"
-.${LOWERCASED_NAME} {
+.ds-${KEBAB_CASED_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}\";"
+EXPORT_LINE="export { ${CAPITALIZED_NAME} } from 'Components/${LOWERCASED_NAME}/${CAPITALIZED_NAME}';"
 
 echo "$EXPORT_LINE" >> "$INDEX_FILE_PATH"
 
-# Append SCSS import line to index.scss
+# Insert SCSS import line before the last line in 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"
+SCSS_IMPORT_LINE="@use \"components/${LOWERCASED_NAME}/${LOWERCASED_NAME}.scss\";"
+
+# Read all lines except the last, append new import, then append the last line
+TOTAL_LINES=$(wc -l < "$STYLES_INDEX_PATH" | tr -d ' ')
+head -n $((TOTAL_LINES - 1)) "$STYLES_INDEX_PATH" > "$STYLES_INDEX_PATH.tmp"
+echo "$SCSS_IMPORT_LINE" >> "$STYLES_INDEX_PATH.tmp"
+tail -n 1 "$STYLES_INDEX_PATH" >> "$STYLES_INDEX_PATH.tmp"
+mv "$STYLES_INDEX_PATH.tmp" "$STYLES_INDEX_PATH"

package/dist/components/dropdown/Dropdown.d.ts

@@ -8,6 +8,7 @@ export declare const Dropdown: {
         children: React.ReactNode;
         portalProps?: DropdownMenu.DropdownMenuPortalProps;
         contentProps?: DropdownMenu.DropdownMenuContentProps;
+        className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
     Item: (props: DropdownMenu.DropdownMenuItemProps) => import("react/jsx-runtime").JSX.Element;
     SelectItem: (props: import("./items/DropdownSelectItem").DropdowSelectItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAMxC,eAAO,MAAM,QAAQ;YAAW,YAAY,CAAC,iBAAiB;;;;;;;;;;;CAO7D,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAMxC,eAAO,MAAM,QAAQ;YAAW,YAAY,CAAC,iBAAiB;;;;;;;;;;;;CAO7D,CAAC"}

package/dist/components/dropdown/DropdownContent.d.ts

@@ -3,6 +3,7 @@ type DropdownContentProps = {
     children: React.ReactNode;
     portalProps?: DropdownMenu.DropdownMenuPortalProps;
     contentProps?: DropdownMenu.DropdownMenuContentProps;
+    className?: string;
 };
 export declare const DropdownContent: (props: DropdownContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dropdown/DropdownContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContent.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAW1D,CAAC"}
+{"version":3,"file":"DropdownContent.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAW1D,CAAC"}

package/dist/components/dropdown/DropdownContent.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { DropdownMenu } from 'radix-ui';
 import { useContext } from 'react';
 import { PopupParentContext } from '../../utils/PopupParentContext';
 export const DropdownContent = (props) => {
-    const { children, portalProps, contentProps } = props;
+    const { children, portalProps, contentProps, className = '' } = props;
     const popupParentRef = useContext(PopupParentContext);
-    return (_jsx(DropdownMenu.Portal, { ...portalProps, container: popupParentRef.current, children: _jsx(DropdownMenu.Content, { align: "start", ...contentProps, className: "ds-dropdown__content", children: children }) }));
+    return (_jsx(DropdownMenu.Portal, { ...portalProps, container: popupParentRef.current, children: _jsx(DropdownMenu.Content, { align: "start", ...contentProps, className: classNames('ds-dropdown__content', className), children: children }) }));
 };
 //# sourceMappingURL=DropdownContent.js.map

package/dist/components/dropdown/DropdownContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContent.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAQ9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,YAAY,CAAC,MAAM,OAAK,WAAW,EAAE,SAAS,EAAE,cAAc,CAAC,OAAO,YACrE,KAAC,YAAY,CAAC,OAAO,IAAC,KAAK,EAAC,OAAO,KAAK,YAAY,EAAE,SAAS,EAAC,sBAAsB,YACnF,QAAQ,GACY,GACH,CACvB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"DropdownContent.js","sourceRoot":"","sources":["../../../src/components/dropdown/DropdownContent.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAS9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,YAAY,CAAC,MAAM,OAAK,WAAW,EAAE,SAAS,EAAE,cAAc,CAAC,OAAO,YACrE,KAAC,YAAY,CAAC,OAAO,IAAC,KAAK,EAAC,OAAO,KAAK,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,YAC3G,QAAQ,GACY,GACH,CACvB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/FormField.d.ts

@@ -1,6 +1,8 @@
 import { type TextInputProps } from './inputs/text/TextInput';
 import { type TextAreaProps } from './inputs/textArea/TextArea';
 import { type NumberInputProps } from './inputs/number/NumberInput';
+import { type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown';
+import { type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown';
 type FormFieldProps = {
     className?: string;
     label?: string;
@@ -18,6 +20,12 @@ type FormFieldProps = {
 } | {
     inputType?: 'number';
     inputProps?: NumberInputProps;
+} | {
+    inputType?: 'colourPicker';
+    inputProps?: ColourPickerDropdownProps;
+} | {
+    inputType?: 'selectDropdown';
+    inputProps?: SelectDropdownInputProps;
 });
 export declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/formField/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEjF,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAAE,CAC1D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAwD9C,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC1H,OAAO,EAAkB,KAAK,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvG,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,CACA;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,GACnD;IAAE,SAAS,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,aAAa,CAAA;CAAE,GACtD;IAAE,SAAS,CAAC,EAAE,QAAQ,CAAC;IAAC,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAAE,GACvD;IAAE,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,UAAU,CAAC,EAAE,yBAAyB,CAAA;CAAE,GACtE;IAAE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAAC,UAAU,CAAC,EAAE,wBAAwB,CAAA;CAAE,CAC1E,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CA8D9C,CAAC"}

package/dist/components/formField/FormField.js

@@ -5,6 +5,8 @@ import { Icon } from '../icon/Icon';
 import { TextInput } from './inputs/text/TextInput';
 import { TextArea } from './inputs/textArea/TextArea';
 import { NumberInput } from './inputs/number/NumberInput';
+import { ColourPickerDropdown } from './inputs/colourPickerDropdown/ColourPickerDropdown';
+import { SelectDropdown } from './inputs/selectDropdown/SelectDropdown';
 export const FormField = (props) => {
     const { className, label, id, inputType = 'text', helperLinkText, helperLinkUrl, errorText, inputProps, fieldDescription } = props;
     const classes = classNames('ds-form-field', className);
@@ -21,6 +23,6 @@ export const FormField = (props) => {
         'hasError': !!errorText,
         'aria-invalid': !!errorText,
     };
-    return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
+    return (_jsxs("div", { className: classes, children: [label && (_jsx(Label, { htmlFor: id, children: label })), fieldDescription && (_jsx("span", { id: `${id}-description`, className: "ds-form-field__description", children: fieldDescription })), inputType === 'text' && (_jsx(TextInput, { ...sharedProps, ...inputProps })), inputType === 'textarea' && (_jsx(TextArea, { ...sharedProps, ...inputProps })), inputType === 'number' && (_jsx(NumberInput, { ...sharedProps, ...inputProps })), inputType === 'colourPicker' && (_jsx(ColourPickerDropdown, { ...sharedProps, ...inputProps })), inputType === 'selectDropdown' && (_jsx(SelectDropdown, { ...sharedProps, ...inputProps })), ((helperLinkText && helperLinkUrl) || errorText) && (_jsxs("div", { className: "ds-form-field__message", children: [errorText && (_jsxs("span", { className: "ds-form-field__message--error", id: `${id}-error`, children: [_jsx(Icon, { size: 12, name: "triangle-alert" }), errorText] })), helperLinkText && helperLinkUrl && (_jsxs("a", { href: helperLinkUrl, "aria-label": `${label} helper link`, className: "ds-form-field__message--helper", children: [helperLinkText, ' ', _jsx(Icon, { size: 12, name: "arrow-up-right" })] }))] }))] }));
 };
 //# sourceMappingURL=FormField.js.map

package/dist/components/formField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAuB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAsB,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AAgBjF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnI,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,gBAAgB,EAAE,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QACd,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,MAAM,WAAW,GAAG;QAClB,EAAE;QACF,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,SAAS;QACvB,cAAc,EAAE,CAAC,CAAC,SAAS;KAC5B,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YACf,KAAK,GACA,CACT,EACA,gBAAgB,IAAI,CACnB,eAAM,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,4BAA4B,YAAE,gBAAgB,GAAQ,CAChG,EACA,SAAS,KAAK,MAAM,IAAI,CACvB,KAAC,SAAS,OAAK,WAAW,KAAO,UAA6B,GAAI,CACnE,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,QAAQ,OAAK,WAAW,KAAO,UAA4B,GAAI,CACjE,EACA,SAAS,KAAK,QAAQ,IAAI,CACzB,KAAC,WAAW,OAAK,WAAW,KAAO,UAA+B,GAAI,CACvE,EACA,CAAC,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,SAAS,CAAC,IAAI,CACnD,eAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,gBAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,EACvC,SAAS,IACL,CACR,EACA,cAAc,IAAI,aAAa,IAAI,CAClC,aAAG,IAAI,EAAE,aAAa,gBAAc,GAAG,KAAK,cAAc,EAAE,SAAS,EAAC,gCAAgC,aACnG,cAAc,EACd,GAAG,EACJ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,IACtC,CACL,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAuB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAsB,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAkC,MAAM,oDAAoD,CAAC;AAC1H,OAAO,EAAE,cAAc,EAAiC,MAAM,wCAAwC,CAAC;AAkBvG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnI,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,EAAE,CAAC;IAC1B,IAAI,gBAAgB,EAAE,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QACd,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,MAAM,WAAW,GAAG;QAClB,EAAE;QACF,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,SAAS;QACvB,cAAc,EAAE,CAAC,CAAC,SAAS;KAC5B,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YACf,KAAK,GACA,CACT,EACA,gBAAgB,IAAI,CACnB,eAAM,EAAE,EAAE,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,4BAA4B,YAAE,gBAAgB,GAAQ,CAChG,EACA,SAAS,KAAK,MAAM,IAAI,CACvB,KAAC,SAAS,OAAK,WAAW,KAAO,UAA6B,GAAI,CACnE,EACA,SAAS,KAAK,UAAU,IAAI,CAC3B,KAAC,QAAQ,OAAK,WAAW,KAAO,UAA4B,GAAI,CACjE,EACA,SAAS,KAAK,QAAQ,IAAI,CACzB,KAAC,WAAW,OAAK,WAAW,KAAO,UAA+B,GAAI,CACvE,EACA,SAAS,KAAK,cAAc,IAAI,CAC/B,KAAC,oBAAoB,OAAK,WAAW,KAAO,UAAwC,GAAI,CACzF,EACA,SAAS,KAAK,gBAAgB,IAAI,CACjC,KAAC,cAAc,OAAK,WAAW,KAAO,UAAuC,GAAI,CAClF,EACA,CAAC,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,SAAS,CAAC,IAAI,CACnD,eAAK,SAAS,EAAC,wBAAwB,aACpC,SAAS,IAAI,CACZ,gBAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,EACvC,SAAS,IACL,CACR,EACA,cAAc,IAAI,aAAa,IAAI,CAClC,aAAG,IAAI,EAAE,aAAa,gBAAc,GAAG,KAAK,cAAc,EAAE,SAAS,EAAC,gCAAgC,aACnG,cAAc,EACd,GAAG,EACJ,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,gBAAgB,GAAG,IACtC,CACL,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/FormField.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,WAAW,EAAE,KAoDzB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"FormField.stories.d.ts","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/formField/FormField.stories.js

@@ -71,6 +71,11 @@ export const FormExample = {
                     placeholder: 'Enter a lovely message',
                 } }), _jsx(FormField, { id: "age", label: "Age", inputType: "number", inputProps: {
                     placeholder: 'Enter your age',
+                } }), _jsx(FormField, { id: "colour-dropdown", label: "Colour", inputType: "colourPicker", inputProps: {
+                    onChange: fn(),
+                } }), _jsx(FormField, { id: "select-dropdown", label: "Select", inputType: "selectDropdown", inputProps: {
+                    options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }],
+                    onSelectionChange: fn(),
                 } })] })),
 };
 export default meta;

package/dist/components/formField/FormField.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormField.stories.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/formField/FormField.test.js

@@ -3,7 +3,7 @@ import { expect, test, describe } from 'vitest';
 import { FormField } from './FormField';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-describe('Input component', () => {
+describe('FormField component', () => {
     test('renders a form field', () => {
         render(_jsx(FormField, { inputType: "text", label: "Email", id: "niceid" }));
         expect(screen.getByLabelText('Email')).toBeInTheDocument();
@@ -38,5 +38,15 @@ describe('Input component', () => {
         const input = screen.getByPlaceholderText('Enter a number');
         expect(input).toHaveClass('ds-number-input');
     });
+    test('renders a colour picker dropdown when inputType is colourPicker', () => {
+        render(_jsx(FormField, { id: "niceid", inputType: "colourPicker" }));
+        const input = screen.getByRole('button');
+        expect(input.textContent).toContain('Toggle colour picker.');
+    });
+    test('renders a select dropdown when inputType is selectDropdown', () => {
+        render(_jsx(FormField, { id: "niceid", inputType: "selectDropdown", inputProps: { options: [{ label: 'Option 1', value: 'option1' }] } }));
+        const input = screen.getByRole('button');
+        expect(input.textContent).toContain('Select');
+    });
 });
 //# sourceMappingURL=FormField.test.js.map

package/dist/components/formField/FormField.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormField.test.js","sourceRoot":"","sources":["../../../src/components/formField/FormField.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.d.ts

@@ -0,0 +1,12 @@
+import type { ColorResult } from '@uiw/color-convert';
+export type ColourPickerDropdownProps = {
+    'value'?: string;
+    'onChange'?: (value: ColorResult) => void;
+    'hasError'?: boolean;
+    'disabled'?: boolean;
+    'id'?: string;
+    'aria-describedBy'?: string;
+    'aria-invalid'?: boolean;
+};
+export declare const ColourPickerDropdown: ({ value, onChange, hasError, disabled, id, "aria-describedBy": ariaDescribedBy, "aria-invalid": ariaInvalid }: ColourPickerDropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColourPickerDropdown.d.ts.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,+GAA2H,yBAAyB,4CAoCxL,CAAC"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from '../../../dropdown/Dropdown';
+import { Button } from '../../../button/Button';
+import { Sketch } from '@uiw/react-color';
+import { useEffect, useState } from 'react';
+export const ColourPickerDropdown = ({ value = '#3cad51', onChange, hasError, disabled, id, 'aria-describedBy': ariaDescribedBy, 'aria-invalid': ariaInvalid }) => {
+    const [selectedColour, setSelectedColour] = useState(value);
+    useEffect(() => {
+        setSelectedColour(value);
+    }, [value]);
+    const handleOnChange = (value) => {
+        setSelectedColour(value.hex);
+        onChange?.(value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: id, value: selectedColour }), _jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { disabled: disabled, className: "ds-colour-picker-dropdown__trigger", children: _jsxs(Button, { variant: "dropdown", iconRightName: "chevron-down", error: hasError, id: id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, children: [_jsx("span", { className: "sr-only", children: "Toggle colour picker." }), _jsx("div", { style: { backgroundColor: selectedColour }, className: "ds-colour-picker-dropdown__preview", children: _jsxs("span", { className: "sr-only", children: ["current colour:", ' ', selectedColour] }) })] }) }), _jsx(Dropdown.Content, { className: "ds-colour-picker-dropdown__content", children: _jsx(Sketch, { style: { boxShadow: 'none', border: 0 }, disableAlpha: true, color: selectedColour, onChange: handleOnChange }) })] })] }));
+};
+//# sourceMappingURL=ColourPickerDropdown.js.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourPickerDropdown.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAY5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAA6B,EAAE,EAAE;IAC3L,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,cAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;QAC5C,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC7B,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,gBAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,GAAI,EACxD,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,oCAAoC,YAClF,MAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,aAAa,EAAC,cAAc,EAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,sBAAoB,eAAe,kBAAgB,WAAW,aAC3I,eAAM,SAAS,EAAC,SAAS,sCAElB,EACP,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,SAAS,EAAC,oCAAoC,YAC7F,gBAAM,SAAS,EAAC,SAAS,gCAEtB,GAAG,EACH,cAAc,IACV,GACH,IACC,GACQ,EACnB,KAAC,QAAQ,CAAC,OAAO,IAAC,SAAS,EAAC,oCAAoC,YAC9D,KAAC,MAAM,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,YAAY,QAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,GAAI,GAChG,IACV,IACV,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ value, onChange, hasError, disabled, id, "aria-describedBy": ariaDescribedBy, "aria-invalid": ariaInvalid }: import("./ColourPickerDropdown").ColourPickerDropdownProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=ColourPickerDropdown.stories.d.ts.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourPickerDropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;;CAImC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js

@@ -0,0 +1,24 @@
+import { ColourPickerDropdown } from './ColourPickerDropdown';
+const meta = {
+    title: 'Components/FormField/Inputs/ColourPickerDropdown',
+    component: ColourPickerDropdown,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        value: '#3cad51',
+        onChange: (value) => { console.log(value); },
+    },
+    argTypes: {
+        value: {
+            control: 'color',
+            description: 'The colour to display in the preview',
+        },
+        onChange: {
+            action: 'changed',
+            description: 'The function to call when the colour is changed',
+        },
+    },
+};
+//# sourceMappingURL=ColourPickerDropdown.stories.js.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourPickerDropdown.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;CACyB,CAAC;AAE9C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,CAAC,KAAkB,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC1D;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,sCAAsC;SACpD;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,iDAAiD;SAC/D;KACF;CACF,CAAC"}

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=ColourPickerDropdown.test.d.ts.map

package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourPickerDropdown.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}