@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

package/form/SelectContainer/SelectContainer.stories/index.js

@@ -1,4 +1,12 @@
-import SelectContainer from "@digigov/ui/form/SelectContainer";
+import React from "react";
+import {
+  SelectContainer,
+  SelectOption
+} from "@digigov/ui/form/SelectContainer";
+import { FieldContainer } from "@digigov/ui/form/FieldContainer";
+import { LabelContainer } from "@digigov/ui/form/LabelContainer";
+import { Hint } from "@digigov/ui/typography";
+import { ErrorMessage } from "@digigov/ui/form/ErrorMessage";
 var SelectContainer_stories_default = {
   title: "Digigov UI/form/SelectContainer",
   description: "The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.",
@@ -6,6 +14,76 @@ var SelectContainer_stories_default = {
   component: SelectContainer,
   displayName: "SelectContainer"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(FieldContainer, { error: args.error }, /* @__PURE__ */ React.createElement(LabelContainer, null, args.label, args.hint && /* @__PURE__ */ React.createElement(Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ React.createElement(ErrorMessage, { id: args.errorId }, args.errorMessage), /* @__PURE__ */ React.createElement(
+      SelectContainer,
+      {
+        dense: args.dense,
+        name: args.selectName,
+        "aria-label": args.ariaLabel
+      },
+      args.options.map((option) => /* @__PURE__ */ React.createElement(SelectOption, { key: option.value, value: option.value }, option.label))
+    )));
+  },
+  args: {
+    label: "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7",
+    selectName: "select-list",
+    ariaLabel: "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7",
+    hint: false,
+    hintMessage: "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03C1\u03CC\u03C0\u03BF \u03C0\u03BF\u03C5 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03BD\u03BF\u03BC\u03B7\u03B8\u03BF\u03CD\u03BD \u03C4\u03B1 \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1",
+    hintId: "hintId",
+    error: false,
+    errorMessage: "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE",
+    errorId: "errorId",
+    dense: false,
+    options: [
+      { label: "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE", value: "popular" },
+      { label: "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1", value: "recent" },
+      { label: "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2", value: "views" },
+      { label: "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1", value: "comments" }
+    ]
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" }
+    },
+    selectName: {
+      control: { type: "text" }
+    },
+    ariaLabel: {
+      control: { type: "text" }
+    },
+    hint: {
+      control: { type: "boolean" }
+    },
+    hintMessage: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: { type: "boolean" }
+    },
+    errorMessage: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    errorId: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    dense: {
+      control: { type: "boolean" }
+    },
+    options: {
+      control: { type: "object" }
+    }
+  }
+};
 import { Default } from "@digigov/ui/form/SelectContainer/__stories__/Default";
 import { DisabledInput } from "@digigov/ui/form/SelectContainer/__stories__/DisabledInput";
 import { WithHint } from "@digigov/ui/form/SelectContainer/__stories__/WithHint";
@@ -14,6 +92,7 @@ export {
   Default,
   Dense,
   DisabledInput,
+  WithControls,
   WithHint,
   SelectContainer_stories_default as default
 };

package/form/SelectContainer/SelectContainer.stories.d.ts

@@ -6,8 +6,142 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let label: string;
+        let selectName: string;
+        let ariaLabel: string;
+        let hint: boolean;
+        let hintMessage: string;
+        let hintId: string;
+        let error: boolean;
+        let errorMessage: string;
+        let errorId: string;
+        let dense: boolean;
+        let options: {
+            label: string;
+            value: string;
+        }[];
+    }
+    namespace argTypes {
+        export namespace label_1 {
+            namespace control {
+                let type: string;
+            }
+        }
+        export { label_1 as label };
+        export namespace selectName_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { selectName_1 as selectName };
+        export namespace ariaLabel_1 {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { ariaLabel_1 as ariaLabel };
+        export namespace hint_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export { hint_1 as hint };
+        export namespace hintMessage_1 {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            export namespace _if {
+                let arg: string;
+                let eq: boolean;
+            }
+            export { _if as if };
+        }
+        export { hintMessage_1 as hintMessage };
+        export namespace hintId_1 {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+            export namespace _if_1 {
+                let arg_1: string;
+                export { arg_1 as arg };
+                let eq_1: boolean;
+                export { eq_1 as eq };
+            }
+            export { _if_1 as if };
+        }
+        export { hintId_1 as hintId };
+        export namespace error_1 {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        export { error_1 as error };
+        export namespace errorMessage_1 {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            export namespace _if_2 {
+                let arg_2: string;
+                export { arg_2 as arg };
+                let eq_2: boolean;
+                export { eq_2 as eq };
+            }
+            export { _if_2 as if };
+        }
+        export { errorMessage_1 as errorMessage };
+        export namespace errorId_1 {
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+            export namespace _if_3 {
+                let arg_3: string;
+                export { arg_3 as arg };
+                let eq_3: boolean;
+                export { eq_3 as eq };
+            }
+            export { _if_3 as if };
+        }
+        export { errorId_1 as errorId };
+        export namespace dense_1 {
+            export namespace control_9 {
+                let type_9: string;
+                export { type_9 as type };
+            }
+            export { control_9 as control };
+        }
+        export { dense_1 as dense };
+        export namespace options_1 {
+            export namespace control_10 {
+                let type_10: string;
+                export { type_10 as type };
+            }
+            export { control_10 as control };
+        }
+        export { options_1 as options };
+    }
+}
 export { Default } from "@digigov/ui/form/SelectContainer/__stories__/Default";
 export { DisabledInput } from "@digigov/ui/form/SelectContainer/__stories__/DisabledInput";
 export { WithHint } from "@digigov/ui/form/SelectContainer/__stories__/WithHint";
 export { Dense } from "@digigov/ui/form/SelectContainer/__stories__/Dense";
-import SelectContainer from '@digigov/ui/form/SelectContainer';
+import { SelectContainer } from '@digigov/ui/form/SelectContainer';
+import React from 'react';

package/form/SelectContainer/SelectContainer.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/form/SelectContainer/SelectContainer.stories.js"],
-  "sourcesContent": ["import SelectContainer from '@digigov/ui/form/SelectContainer';\nexport default {\n  title: 'Digigov UI/form/SelectContainer',\n  description:\n    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',\n  link: 'https://guide.services.gov.gr/docs/components/select',\n  component: SelectContainer,\n  displayName: 'SelectContainer',\n};\nexport { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';\nexport { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';\nexport { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';\nexport { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';\n"],
-  "mappings": "AAAA,OAAO,qBAAqB;AAC5B,IAAO,kCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,aAAa;",
+  "sources": ["../../../src/form/SelectContainer/SelectContainer.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  SelectContainer,\n  SelectOption,\n} from '@digigov/ui/form/SelectContainer';\nimport { FieldContainer } from '@digigov/ui/form/FieldContainer';\nimport { LabelContainer } from '@digigov/ui/form/LabelContainer';\nimport { Hint } from '@digigov/ui/typography';\nimport { ErrorMessage } from '@digigov/ui/form/ErrorMessage';\n\nexport default {\n  title: 'Digigov UI/form/SelectContainer',\n  description:\n    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',\n  link: 'https://guide.services.gov.gr/docs/components/select',\n  component: SelectContainer,\n  displayName: 'SelectContainer',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <FieldContainer error={args.error}>\n        <LabelContainer>\n          {args.label}\n          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}\n          {args.error && (\n            <ErrorMessage id={args.errorId}>{args.errorMessage}</ErrorMessage>\n          )}\n          <SelectContainer\n            dense={args.dense}\n            name={args.selectName}\n            aria-label={args.ariaLabel}\n          >\n            {args.options.map((option) => (\n              <SelectOption key={option.value} value={option.value}>\n                {option.label}\n              </SelectOption>\n            ))}\n          </SelectContainer>\n        </LabelContainer>\n      </FieldContainer>\n    );\n  },\n  args: {\n    label: '\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7',\n    selectName: 'select-list',\n    ariaLabel: '\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7',\n    hint: false,\n    hintMessage: '\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03BF\u03BD \u03C4\u03C1\u03CC\u03C0\u03BF \u03C0\u03BF\u03C5 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03BD\u03BF\u03BC\u03B7\u03B8\u03BF\u03CD\u03BD \u03C4\u03B1 \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1',\n    hintId: 'hintId',\n    error: false,\n    errorMessage: '\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE',\n    errorId: 'errorId',\n    dense: false,\n    options: [\n      { label: '\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE', value: 'popular' },\n      { label: '\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1', value: 'recent' },\n      { label: '\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2', value: 'views' },\n      { label: '\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1', value: 'comments' },\n    ],\n  },\n  argTypes: {\n    label: {\n      control: { type: 'text' },\n    },\n    selectName: {\n      control: { type: 'text' },\n    },\n    ariaLabel: {\n      control: { type: 'text' },\n    },\n    hint: {\n      control: { type: 'boolean' },\n    },\n    hintMessage: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    hintId: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    error: {\n      control: { type: 'boolean' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    errorId: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    dense: {\n      control: { type: 'boolean' },\n    },\n    options: {\n      control: { type: 'object' },\n    },\n  },\n};\n\nexport { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';\nexport { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';\nexport { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';\nexport { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,IAAO,kCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,QAAQ,CAAC,SAAS;AAChB,WACE,oCAAC,kBAAe,OAAO,KAAK,SAC1B,oCAAC,sBACE,KAAK,OACL,KAAK,QAAQ,oCAAC,QAAK,IAAI,KAAK,UAAS,KAAK,WAAY,GACtD,KAAK,SACJ,oCAAC,gBAAa,IAAI,KAAK,WAAU,KAAK,YAAa,GAErD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,KAAK;AAAA,QACZ,MAAM,KAAK;AAAA,QACX,cAAY,KAAK;AAAA;AAAA,MAEhB,KAAK,QAAQ,IAAI,CAAC,WACjB,oCAAC,gBAAa,KAAK,OAAO,OAAO,OAAO,OAAO,SAC5C,OAAO,KACV,CACD;AAAA,IACH,CACF,CACF;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,MAAM;AAAA,IACN,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,EAAE,OAAO,oDAAY,OAAO,UAAU;AAAA,MACtC,EAAE,OAAO,oDAAY,OAAO,SAAS;AAAA,MACrC,EAAE,OAAO,6HAAyB,OAAO,QAAQ;AAAA,MACjD,EAAE,OAAO,2GAAsB,OAAO,WAAW;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,YAAY;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,aAAa;AAAA,MACX,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,SAAS,IAAI,KAAK;AAAA,IAC/B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,SAAS,IAAI,KAAK;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,aAAa;",
   "names": []
 }

package/form/SingleCharacterInputs/SingleCharacterInput.stories/index.js

@@ -1,4 +1,16 @@
-import SingleCharacterInputs from "@digigov/ui/form/SingleCharacterInputs";
+import React from "react";
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend
+} from "@digigov/ui/form/FieldContainer";
+import {
+  SingleCharacterInputs,
+  SingleCharacterInput
+} from "@digigov/ui/form/SingleCharacterInputs";
+import { Hint } from "@digigov/ui/typography/Hint";
+import { ErrorMessage } from "@digigov/ui/form/ErrorMessage";
+import { VisuallyHidden } from "@digigov/ui/utils/VisuallyHidden";
 var SingleCharacterInput_stories_default = {
   title: "Digigov UI/form/SingleCharacterInputs",
   description: "Use the One-time password input component to help users enter a memorable digital character for One-time password.",
@@ -6,12 +18,97 @@ var SingleCharacterInput_stories_default = {
   component: SingleCharacterInputs,
   displayName: "SingleCharacterInputs"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(FieldContainer, { error: args.error }, /* @__PURE__ */ React.createElement(Fieldset, { "aria-describedby": [`${args.hintId} ${args.errorId}`] }, /* @__PURE__ */ React.createElement(FieldsetLegend, { heading: args.singleQuestionInPage }, args.legend), args.hint && /* @__PURE__ */ React.createElement(Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ React.createElement(ErrorMessage, { id: args.errorId }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), args.errorMessage), /* @__PURE__ */ React.createElement(SingleCharacterInputs, null, args.items.map((item) => /* @__PURE__ */ React.createElement(
+      SingleCharacterInput,
+      {
+        key: item.value,
+        name: item.value,
+        defaultValue: item.defaultValue,
+        error: item.error
+      }
+    )))));
+  },
+  args: {
+    singleQuestionInPage: false,
+    legend: "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2",
+    hint: true,
+    hintMessage: "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF.",
+    hintId: "code-hint",
+    error: false,
+    errorMessage: "\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03C0\u03BF\u03C5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B1\u03C4\u03B5 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BB\u03B1\u03BD\u03B8\u03B1\u03C3\u03BC\u03AD\u03BD\u03BF\u03C2",
+    errorId: "code-error",
+    items: [
+      {
+        defaultValue: "",
+        name: "digit-1",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-2",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-3",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-4",
+        error: false
+      },
+      {
+        defaultValue: "",
+        name: "digit-5",
+        error: false
+      }
+    ]
+  },
+  argTypes: {
+    singleQuestionInPage: {
+      control: { type: "boolean" }
+    },
+    legend: {
+      control: { type: "text" }
+    },
+    hint: {
+      control: { type: "boolean" }
+    },
+    hintMessage: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: { type: "text" },
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: { type: "boolean" }
+    },
+    errorMessage: {
+      control: { type: "text" },
+      if: { arg: "error", eq: true }
+    },
+    items: {
+      control: { type: "object" }
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ["ref"]
+    }
+  }
+};
 import { Default } from "@digigov/ui/form/SingleCharacterInputs/__stories__/Default";
 import { WithDefaultError } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError";
 import { WithErrorMessageInvalidCode } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode";
 import { WithErrorMessageLessDigit } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit";
 export {
   Default,
+  WithControls,
   WithDefaultError,
   WithErrorMessageInvalidCode,
   WithErrorMessageLessDigit,

package/form/SingleCharacterInputs/SingleCharacterInput.stories.d.ts

@@ -6,8 +6,115 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let singleQuestionInPage: boolean;
+        let legend: string;
+        let hint: boolean;
+        let hintMessage: string;
+        let hintId: string;
+        let error: boolean;
+        let errorMessage: string;
+        let errorId: string;
+        let items: {
+            defaultValue: string;
+            name: string;
+            error: boolean;
+        }[];
+    }
+    namespace argTypes {
+        export namespace singleQuestionInPage_1 {
+            namespace control {
+                let type: string;
+            }
+        }
+        export { singleQuestionInPage_1 as singleQuestionInPage };
+        export namespace legend_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { legend_1 as legend };
+        export namespace hint_1 {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { hint_1 as hint };
+        export namespace hintMessage_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            export namespace _if {
+                let arg: string;
+                let eq: boolean;
+            }
+            export { _if as if };
+        }
+        export { hintMessage_1 as hintMessage };
+        export namespace hintId_1 {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            export namespace _if_1 {
+                let arg_1: string;
+                export { arg_1 as arg };
+                let eq_1: boolean;
+                export { eq_1 as eq };
+            }
+            export { _if_1 as if };
+        }
+        export { hintId_1 as hintId };
+        export namespace error_1 {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        export { error_1 as error };
+        export namespace errorMessage_1 {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+            export namespace _if_2 {
+                let arg_2: string;
+                export { arg_2 as arg };
+                let eq_2: boolean;
+                export { eq_2 as eq };
+            }
+            export { _if_2 as if };
+        }
+        export { errorMessage_1 as errorMessage };
+        export namespace items_1 {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+        }
+        export { items_1 as items };
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
 export { Default } from "@digigov/ui/form/SingleCharacterInputs/__stories__/Default";
 export { WithDefaultError } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError";
 export { WithErrorMessageInvalidCode } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode";
 export { WithErrorMessageLessDigit } from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit";
-import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+import { SingleCharacterInputs } from '@digigov/ui/form/SingleCharacterInputs';
+import React from 'react';

package/form/SingleCharacterInputs/SingleCharacterInput.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/form/SingleCharacterInputs/SingleCharacterInput.stories.js"],
-  "sourcesContent": ["import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';\nexport default {\n  title: 'Digigov UI/form/SingleCharacterInputs',\n  description:\n    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',\n  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',\n  component: SingleCharacterInputs,\n  displayName: 'SingleCharacterInputs',\n};\nexport { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';\nexport { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';\nexport { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';\nexport { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';\n"],
-  "mappings": "AAAA,OAAO,2BAA2B;AAClC,IAAO,uCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;",
+  "sources": ["../../../src/form/SingleCharacterInputs/SingleCharacterInput.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\nimport {\n  SingleCharacterInputs,\n  SingleCharacterInput,\n} from '@digigov/ui/form/SingleCharacterInputs';\nimport { Hint } from '@digigov/ui/typography/Hint';\nimport { ErrorMessage } from '@digigov/ui/form/ErrorMessage';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nexport default {\n  title: 'Digigov UI/form/SingleCharacterInputs',\n  description:\n    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',\n  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',\n  component: SingleCharacterInputs,\n  displayName: 'SingleCharacterInputs',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <FieldContainer error={args.error}>\n        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>\n          <FieldsetLegend heading={args.singleQuestionInPage}>\n            {args.legend}\n          </FieldsetLegend>\n          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}\n          {args.error && (\n            <ErrorMessage id={args.errorId}>\n              <VisuallyHidden>\u039B\u03AC\u03B8\u03BF\u03C2:</VisuallyHidden>\n              {args.errorMessage}\n            </ErrorMessage>\n          )}\n          <SingleCharacterInputs>\n            {args.items.map((item) => (\n              <SingleCharacterInput\n                key={item.value}\n                name={item.value}\n                defaultValue={item.defaultValue}\n                error={item.error}\n              />\n            ))}\n          </SingleCharacterInputs>\n        </Fieldset>\n      </FieldContainer>\n    );\n  },\n  args: {\n    singleQuestionInPage: false,\n    legend: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2',\n    hint: true,\n    hintMessage:\n      '\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF.',\n    hintId: 'code-hint',\n    error: false,\n    errorMessage: '\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03C0\u03BF\u03C5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B1\u03C4\u03B5 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BB\u03B1\u03BD\u03B8\u03B1\u03C3\u03BC\u03AD\u03BD\u03BF\u03C2',\n    errorId: 'code-error',\n    items: [\n      {\n        defaultValue: '',\n        name: 'digit-1',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-2',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-3',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-4',\n        error: false,\n      },\n      {\n        defaultValue: '',\n        name: 'digit-5',\n        error: false,\n      },\n    ],\n  },\n  argTypes: {\n    singleQuestionInPage: {\n      control: { type: 'boolean' },\n    },\n    legend: {\n      control: { type: 'text' },\n    },\n    hint: {\n      control: { type: 'boolean' },\n    },\n    hintMessage: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    hintId: {\n      control: { type: 'text' },\n      if: { arg: 'hint', eq: true },\n    },\n    error: {\n      control: { type: 'boolean' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n      if: { arg: 'error', eq: true },\n    },\n    items: {\n      control: { type: 'object' },\n    },\n  },\n  parameters: {\n    controls: {\n      exclude: ['ref'],\n    },\n  },\n};\n\nexport { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';\nexport { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';\nexport { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';\nexport { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAE/B,IAAO,uCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,QAAQ,CAAC,SAAS;AAChB,WACE,oCAAC,kBAAe,OAAO,KAAK,SAC1B,oCAAC,YAAS,oBAAkB,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,OAAO,EAAE,KAC3D,oCAAC,kBAAe,SAAS,KAAK,wBAC3B,KAAK,MACR,GACC,KAAK,QAAQ,oCAAC,QAAK,IAAI,KAAK,UAAS,KAAK,WAAY,GACtD,KAAK,SACJ,oCAAC,gBAAa,IAAI,KAAK,WACrB,oCAAC,sBAAe,iCAAM,GACrB,KAAK,YACR,GAEF,oCAAC,6BACE,KAAK,MAAM,IAAI,CAAC,SACf;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAM,KAAK;AAAA,QACX,cAAc,KAAK;AAAA,QACnB,OAAO,KAAK;AAAA;AAAA,IACd,CACD,CACH,CACF,CACF;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,aACE;AAAA,IACF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,MACL;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,sBAAsB;AAAA,MACpB,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,aAAa;AAAA,MACX,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,QAAQ,IAAI,KAAK;AAAA,IAC9B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,EAAE,MAAM,OAAO;AAAA,MACxB,IAAI,EAAE,KAAK,SAAS,IAAI,KAAK;AAAA,IAC/B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,MACR,SAAS,CAAC,KAAK;AAAA,IACjB;AAAA,EACF;AACF;AAEA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;",
   "names": []
 }

package/form/TextArea/TextArea.stories/index.js

@@ -1,4 +1,10 @@
-import TextArea from "@digigov/ui/form/TextArea";
+import React from "react";
+import { FieldContainer } from "@digigov/ui/form/FieldContainer";
+import { LabelContainer, LabelTitle } from "@digigov/ui/form/LabelContainer";
+import { TextArea } from "@digigov/ui/form/TextArea";
+import { Hint } from "@digigov/ui/typography/Hint";
+import { ErrorMessage } from "@digigov/ui/form/ErrorMessage";
+import { VisuallyHidden } from "@digigov/ui/utils/VisuallyHidden";
 var TextArea_stories_default = {
   title: "Digigov UI/form/TextArea",
   description: "Use the textarea component when you need to let users enter an amount of text that\u2019s longer than a single line.",
@@ -6,6 +12,84 @@ var TextArea_stories_default = {
   component: TextArea,
   displayName: "TextArea"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(FieldContainer, { error: args.error }, /* @__PURE__ */ React.createElement(LabelContainer, null, /* @__PURE__ */ React.createElement(LabelTitle, { size: "md" }, args.label), args.hint && /* @__PURE__ */ React.createElement(Hint, { id: args.hintId }, args.hintMessage), args.error && /* @__PURE__ */ React.createElement(ErrorMessage, { id: args.errorId }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), args.errorMessage), /* @__PURE__ */ React.createElement(
+      TextArea,
+      {
+        dense: args.dense,
+        name: args.name,
+        disabled: args.disabled,
+        "aria-describedby": args.hintId
+      }
+    ), args.bottomHint && /* @__PURE__ */ React.createElement(Hint, { id: args.bottomHintId }, args.bottomHintMessage)));
+  },
+  args: {
+    label: "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2;",
+    name: "textarea",
+    hint: true,
+    hintMessage: "\u03A0\u03C1\u03BF\u03B1\u03B9\u03C1\u03B5\u03C4\u03B9\u03BA\u03CC",
+    hintId: "hintId",
+    error: false,
+    errorMessage: "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF.",
+    errorId: "errorId",
+    bottomHint: true,
+    bottomHintMessage: "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03BB\u03B7\u03BA\u03C4\u03C1\u03BF\u03BB\u03BF\u03B3\u03AE\u03C3\u03B5\u03C4\u03B5 \u03BC\u03AD\u03C7\u03C1\u03B9 500 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03B5\u03C2.",
+    bottomHintId: "bottomHintId",
+    dense: false,
+    disabled: false
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    hint: {
+      control: "boolean"
+    },
+    hintMessage: {
+      control: "text",
+      if: { arg: "hint", eq: true }
+    },
+    hintId: {
+      control: "text",
+      if: { arg: "hint", eq: true }
+    },
+    error: {
+      control: "boolean"
+    },
+    errorMessage: {
+      control: "text",
+      if: { arg: "error", eq: true }
+    },
+    errorId: {
+      control: "text",
+      if: { arg: "error", eq: true }
+    },
+    bottomHint: {
+      control: "boolean"
+    },
+    bottomHintMessage: {
+      control: "text"
+    },
+    bottomHintId: {
+      control: "text"
+    },
+    dense: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ["ref", "type"]
+    }
+  }
+};
 import { Default } from "@digigov/ui/form/TextArea/__stories__/Default";
 import { WithHint } from "@digigov/ui/form/TextArea/__stories__/WithHint";
 import { WithDeclaredRows } from "@digigov/ui/form/TextArea/__stories__/WithDeclaredRows";
@@ -20,6 +104,7 @@ export {
   DisabledInput,
   LimitedCharacters,
   MultipleQuestions,
+  WithControls,
   WithDeclaredRows,
   WithErrorMessage,
   WithHint,