@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

package/form/DateInputContainer/DateInputContainer.stories.d.ts

@@ -6,9 +6,149 @@ 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 day: string;
+        let month: string;
+        let year: string;
+        let error: boolean;
+        let errorMessage: string;
+        let errorId: string;
+        let dense: 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 day_1 {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        export { day_1 as day };
+        export namespace month_1 {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
+        export { month_1 as month };
+        export namespace year_1 {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+        }
+        export { year_1 as year };
+        export namespace dense_1 {
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+        }
+        export { dense_1 as dense };
+        export namespace error_1 {
+            export namespace control_9 {
+                let type_9: string;
+                export { type_9 as type };
+            }
+            export { control_9 as control };
+        }
+        export { error_1 as error };
+        export namespace errorMessage_1 {
+            export namespace control_10 {
+                let type_10: string;
+                export { type_10 as type };
+            }
+            export { control_10 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_11 {
+                let type_11: string;
+                export { type_11 as type };
+            }
+            export { control_11 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 { Default } from "@digigov/ui/form/DateInputContainer/__stories__/Default";
 export { MultipleQuestions } from "@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions";
 export { WithErrorMessage } from "@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage";
 export { WithErrorMessageForSingleField } from "@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField";
 export { Dense } from "@digigov/ui/form/DateInputContainer/__stories__/Dense";
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
+import { DateInputContainer } from '@digigov/ui/form/DateInputContainer';
+import React from 'react';

package/form/DateInputContainer/DateInputContainer.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/form/DateInputContainer/DateInputContainer.stories.js"],
-  "sourcesContent": ["import DateInputContainer from '@digigov/ui/form/DateInputContainer';\nexport default {\n  title: 'Digigov UI/form/DateInputContainer',\n  description:\n    'Use the date input component to help users enter a memorable date or one they can easily look up.',\n  link: 'https://guide.services.gov.gr/docs/components/date-input',\n  component: DateInputContainer,\n  displayName: 'DateInputContainer',\n};\nexport { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';\nexport { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';\nexport { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';\nexport { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';\nexport { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';\n"],
-  "mappings": "AAAA,OAAO,wBAAwB;AAC/B,IAAO,qCAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,sCAAsC;AAC/C,SAAS,aAAa;",
+  "sources": ["../../../src/form/DateInputContainer/DateInputContainer.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\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/DateInputContainer',\n  description:\n    'Use the date input component to help users enter a memorable date or one they can easily look up.',\n  link: 'https://guide.services.gov.gr/docs/components/date-input',\n  component: DateInputContainer,\n  displayName: 'DateInputContainer',\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\n            heading={args.singleQuestionInPage}\n            size={args.singleQuestionInPage ? 'sm' : 'lg'}\n          >\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          <DateInputContainer aria-describedby={args.id} dense={args.dense}>\n            <DateInputItem name=\"day\">{args.day}</DateInputItem>\n            <DateInputItem name=\"month\">{args.month}</DateInputItem>\n            <DateInputItem width={4} name=\"year\" error={args.error}>\n              {args.year}\n            </DateInputItem>\n          </DateInputContainer>\n        </Fieldset>\n      </FieldContainer>\n    );\n  },\n  args: {\n    singleQuestionInPage: true,\n    legend: '\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;',\n    hint: true,\n    hintMessage: '\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020',\n    hintId: 'passport-hint',\n    day: '\u0397\u03BC\u03AD\u03C1\u03B1',\n    month: '\u039C\u03AE\u03BD\u03B1\u03C2',\n    year: '\u0388\u03C4\u03BF\u03C2',\n    error: false,\n    errorMessage: '\u03A0\u03B1\u03C1\u03B1\u03BA\u03B1\u03BB\u03CE \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03AD\u03B3\u03BA\u03C5\u03C1\u03B7 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n    errorId: 'passport-error',\n    dense: false,\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    day: {\n      control: { type: 'text' },\n    },\n    month: {\n      control: { type: 'text' },\n    },\n    year: {\n      control: { type: 'text' },\n    },\n    dense: {\n      control: { type: 'boolean' },\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  },\n};\n\nexport { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';\nexport { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';\nexport { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';\nexport { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';\nexport { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAE/B,IAAO,qCAAQ;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;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,KAAK;AAAA,QACd,MAAM,KAAK,uBAAuB,OAAO;AAAA;AAAA,MAExC,KAAK;AAAA,IACR,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,sBAAmB,oBAAkB,KAAK,IAAI,OAAO,KAAK,SACzD,oCAAC,iBAAc,MAAK,SAAO,KAAK,GAAI,GACpC,oCAAC,iBAAc,MAAK,WAAS,KAAK,KAAM,GACxC,oCAAC,iBAAc,OAAO,GAAG,MAAK,QAAO,OAAO,KAAK,SAC9C,KAAK,IACR,CACF,CACF,CACF;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,EACT;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,KAAK;AAAA,MACH,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;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,EACF;AACF;AAEA,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,sCAAsC;AAC/C,SAAS,aAAa;",
   "names": []
 }

package/form/DateInputContainer/__stories__/MultipleQuestions/index.js

@@ -9,7 +9,7 @@ import {
   FieldsetLegend
 } from "@digigov/ui/form/FieldContainer";
 import { Hint } from "@digigov/ui/typography/Hint";
-const MultipleQuestions = () => /* @__PURE__ */ React.createElement(FieldContainer, { "aria-describedby": "passport-hint" }, /* @__PURE__ */ React.createElement(Fieldset, null, /* @__PURE__ */ React.createElement(FieldsetLegend, { size: "md" }, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /* @__PURE__ */ React.createElement(Hint, { id: "passport-hint" }, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /* @__PURE__ */ React.createElement(DateInputContainer, null, /* @__PURE__ */ React.createElement(DateInputItem, { name: "day" }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /* @__PURE__ */ React.createElement(DateInputItem, { name: "month" }, "\u039C\u03AE\u03BD\u03B1\u03C2"), /* @__PURE__ */ React.createElement(DateInputItem, { width: 4, name: "year" }, "\u0388\u03C4\u03BF\u03C2"))));
+const MultipleQuestions = () => /* @__PURE__ */ React.createElement(FieldContainer, { "aria-describedby": "passport-hint" }, /* @__PURE__ */ React.createElement(Fieldset, null, /* @__PURE__ */ React.createElement(FieldsetLegend, { size: "sm" }, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /* @__PURE__ */ React.createElement(Hint, { id: "passport-hint" }, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /* @__PURE__ */ React.createElement(DateInputContainer, null, /* @__PURE__ */ React.createElement(DateInputItem, { name: "day" }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /* @__PURE__ */ React.createElement(DateInputItem, { name: "month" }, "\u039C\u03AE\u03BD\u03B1\u03C2"), /* @__PURE__ */ React.createElement(DateInputItem, { width: 4, name: "year" }, "\u0388\u03C4\u03BF\u03C2"))));
 var MultipleQuestions_default = MultipleQuestions;
 export {
   MultipleQuestions,

package/form/DateInputContainer/__stories__/MultipleQuestions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/form/DateInputContainer/__stories__/MultipleQuestions.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\n\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\n\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport const MultipleQuestions = () => (\n  <FieldContainer aria-describedby=\"passport-hint\">\n    <Fieldset>\n      <FieldsetLegend size=\"md\">\n        \u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;\n      </FieldsetLegend>\n      <Hint id=\"passport-hint\">\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020</Hint>\n      <DateInputContainer>\n        <DateInputItem name=\"day\">\u0397\u03BC\u03AD\u03C1\u03B1</DateInputItem>\n        <DateInputItem name=\"month\">\u039C\u03AE\u03BD\u03B1\u03C2</DateInputItem>\n        <DateInputItem width={4} name=\"year\">\n          \u0388\u03C4\u03BF\u03C2\n        </DateInputItem>\n      </DateInputContainer>\n    </Fieldset>\n  </FieldContainer>\n);\n\nexport default MultipleQuestions;\n"],
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  DateInputContainer,\n  DateInputItem,\n} from '@digigov/ui/form/DateInputContainer';\n\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\n\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport const MultipleQuestions = () => (\n  <FieldContainer aria-describedby=\"passport-hint\">\n    <Fieldset>\n      <FieldsetLegend size=\"sm\">\n        \u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;\n      </FieldsetLegend>\n      <Hint id=\"passport-hint\">\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020</Hint>\n      <DateInputContainer>\n        <DateInputItem name=\"day\">\u0397\u03BC\u03AD\u03C1\u03B1</DateInputItem>\n        <DateInputItem name=\"month\">\u039C\u03AE\u03BD\u03B1\u03C2</DateInputItem>\n        <DateInputItem width={4} name=\"year\">\n          \u0388\u03C4\u03BF\u03C2\n        </DateInputItem>\n      </DateInputContainer>\n    </Fieldset>\n  </FieldContainer>\n);\n\nexport default MultipleQuestions;\n"],
   "mappings": "AAAA,OAAO,WAAW;AAElB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AAEd,MAAM,oBAAoB,MAC/B,oCAAC,kBAAe,oBAAiB,mBAC/B,oCAAC,gBACC,oCAAC,kBAAe,MAAK,QAAK,yKAE1B,GACA,oCAAC,QAAK,IAAG,mBAAgB,6FAA0B,GACnD,oCAAC,0BACC,oCAAC,iBAAc,MAAK,SAAM,gCAAK,GAC/B,oCAAC,iBAAc,MAAK,WAAQ,gCAAK,GACjC,oCAAC,iBAAc,OAAO,GAAG,MAAK,UAAO,0BAErC,CACF,CACF,CACF;AAGF,IAAO,4BAAQ;",
   "names": []
 }

package/form/ErrorMessage/ErrorMessage.stories/index.js

@@ -1,4 +1,6 @@
+import React from "react";
 import ErrorMessage from "@digigov/ui/form/ErrorMessage";
+import { VisuallyHidden } from "@digigov/ui/utils/VisuallyHidden";
 var ErrorMessage_stories_default = {
   title: "Digigov UI/form/ErrorMessage",
   description: "Show an error message next to the field and in the error summary when there is a validation error.",
@@ -6,6 +8,27 @@ var ErrorMessage_stories_default = {
   component: ErrorMessage,
   displayName: "ErrorMessage"
 };
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(ErrorMessage, { id: args.id }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, args.visuallyHiddenMessage), args.errorMessage);
+  },
+  args: {
+    id: "date-of-birth-error",
+    errorMessage: "H \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.",
+    visuallyHiddenMessage: "\u039B\u03AC\u03B8\u03BF\u03C2:"
+  },
+  argTypes: {
+    id: {
+      control: { type: "text" }
+    },
+    errorMessage: {
+      control: { type: "text" }
+    },
+    visuallyHiddenMessage: {
+      control: { type: "text" }
+    }
+  }
+};
 import { Default } from "@digigov/ui/form/ErrorMessage/__stories__/Default";
 import { DateInputError } from "@digigov/ui/form/ErrorMessage/__stories__/DateInputError";
 import { ErrorMessageOnly } from "@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly";
@@ -13,6 +36,7 @@ export {
   DateInputError,
   Default,
   ErrorMessageOnly,
+  WithControls,
   ErrorMessage_stories_default as default
 };
 //# sourceMappingURL=ErrorMessage.stories.js.map

package/form/ErrorMessage/ErrorMessage.stories.d.ts

@@ -6,7 +6,40 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let id: string;
+        let errorMessage: string;
+        let visuallyHiddenMessage: string;
+    }
+    namespace argTypes {
+        export namespace id_1 {
+            namespace control {
+                let type: string;
+            }
+        }
+        export { id_1 as id };
+        export namespace errorMessage_1 {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { errorMessage_1 as errorMessage };
+        export namespace visuallyHiddenMessage_1 {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { visuallyHiddenMessage_1 as visuallyHiddenMessage };
+    }
+}
 export { Default } from "@digigov/ui/form/ErrorMessage/__stories__/Default";
 export { DateInputError } from "@digigov/ui/form/ErrorMessage/__stories__/DateInputError";
 export { ErrorMessageOnly } from "@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly";
 import ErrorMessage from '@digigov/ui/form/ErrorMessage';
+import React from 'react';

package/form/ErrorMessage/ErrorMessage.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/form/ErrorMessage/ErrorMessage.stories.js"],
-  "sourcesContent": ["import ErrorMessage from '@digigov/ui/form/ErrorMessage';\nexport default {\n  title: 'Digigov UI/form/ErrorMessage',\n  description:\n    'Show an error message next to the field and in the error summary when there is a validation error.',\n  link: 'https://guide.services.gov.gr/docs/components/error-message',\n  component: ErrorMessage,\n  displayName: 'ErrorMessage',\n};\nexport { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';\nexport { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';\nexport { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';\n"],
-  "mappings": "AAAA,OAAO,kBAAkB;AACzB,IAAO,+BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;",
+  "sources": ["../../../src/form/ErrorMessage/ErrorMessage.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport ErrorMessage from '@digigov/ui/form/ErrorMessage';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nexport default {\n  title: 'Digigov UI/form/ErrorMessage',\n  description:\n    'Show an error message next to the field and in the error summary when there is a validation error.',\n  link: 'https://guide.services.gov.gr/docs/components/error-message',\n  component: ErrorMessage,\n  displayName: 'ErrorMessage',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <ErrorMessage id={args.id}>\n        <VisuallyHidden>{args.visuallyHiddenMessage}</VisuallyHidden>\n        {args.errorMessage}\n      </ErrorMessage>\n    );\n  },\n  args: {\n    id: 'date-of-birth-error',\n    errorMessage: 'H \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.',\n    visuallyHiddenMessage: '\u039B\u03AC\u03B8\u03BF\u03C2:',\n  },\n  argTypes: {\n    id: {\n      control: { type: 'text' },\n    },\n    errorMessage: {\n      control: { type: 'text' },\n    },\n    visuallyHiddenMessage: {\n      control: { type: 'text' },\n    },\n  },\n};\nexport { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';\nexport { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';\nexport { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,kBAAkB;AACzB,SAAS,sBAAsB;AAE/B,IAAO,+BAAQ;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,gBAAa,IAAI,KAAK,MACrB,oCAAC,sBAAgB,KAAK,qBAAsB,GAC3C,KAAK,YACR;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,cAAc;AAAA,IACd,uBAAuB;AAAA,EACzB;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,MACF,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,uBAAuB;AAAA,MACrB,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,EACF;AACF;AACA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;",
   "names": []
 }

package/form/FileUpload/FileUpload.stories/index.js

@@ -7,9 +7,11 @@ var FileUpload_stories_default = {
 };
 import { Default } from "@digigov/ui/form/FileUpload/__stories__/Default";
 import { WithErrorMessage } from "@digigov/ui/form/FileUpload/__stories__/WithErrorMessage";
+import { WithVariantLink } from "@digigov/ui/form/FileUpload/__stories__/WithVariantLink";
 export {
   Default,
   WithErrorMessage,
+  WithVariantLink,
   FileUpload_stories_default as default
 };
 //# sourceMappingURL=FileUpload.stories.js.map

package/form/FileUpload/FileUpload.stories.d.ts

@@ -7,4 +7,5 @@ declare namespace _default {
 export default _default;
 export { Default } from "@digigov/ui/form/FileUpload/__stories__/Default";
 export { WithErrorMessage } from "@digigov/ui/form/FileUpload/__stories__/WithErrorMessage";
+export { WithVariantLink } from "@digigov/ui/form/FileUpload/__stories__/WithVariantLink";
 import FileUpload from '@digigov/ui/form/FileUpload';

package/form/FileUpload/FileUpload.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/form/FileUpload/FileUpload.stories.js"],
-  "sourcesContent": ["import FileUpload from '@digigov/ui/form/FileUpload';\nexport default {\n  title: 'Digigov UI/form/FileUpload',\n  link: 'https://guide.services.gov.gr/docs/components/file-upload',\n  component: FileUpload,\n  displayName: 'FileUpload',\n};\nexport { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';\nexport { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';\n"],
-  "mappings": "AAAA,OAAO,gBAAgB;AACvB,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,wBAAwB;",
+  "sourcesContent": ["import FileUpload from '@digigov/ui/form/FileUpload';\nexport default {\n  title: 'Digigov UI/form/FileUpload',\n  link: 'https://guide.services.gov.gr/docs/components/file-upload',\n  component: FileUpload,\n  displayName: 'FileUpload',\n};\nexport { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';\nexport { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';\nexport { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';\n"],
+  "mappings": "AAAA,OAAO,gBAAgB;AACvB,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;",
   "names": []
 }

package/form/FileUpload/__stories__/WithVariantLink/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend
+} from "@digigov/ui/form/FieldContainer";
+import { FileUpload } from "@digigov/ui/form/FileUpload";
+import { Hint } from "@digigov/ui/typography/Hint";
+const WithVariantLink = () => /* @__PURE__ */ React.createElement(FieldContainer, null, /* @__PURE__ */ React.createElement(Fieldset, null, /* @__PURE__ */ React.createElement(FieldsetLegend, { size: "md" }, "\u039B\u03BF\u03B3\u03CC\u03C4\u03C5\u03C0\u03BF \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2"), /* @__PURE__ */ React.createElement(Hint, { id: "file-hint" }, "\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 png \u03AE jpeg."), /* @__PURE__ */ React.createElement(FileUpload, { "aria-describedby": "file-hint", variant: "link" }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5")));
+var WithVariantLink_default = WithVariantLink;
+export {
+  WithVariantLink,
+  WithVariantLink_default as default
+};
+//# sourceMappingURL=WithVariantLink.js.map

package/form/FileUpload/__stories__/WithVariantLink/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../../cjs/form/FileUpload/__stories__/WithVariantLink/index.js"
+}

package/form/FileUpload/__stories__/WithVariantLink.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const WithVariantLink: () => React.JSX.Element;
+export default WithVariantLink;

package/form/FileUpload/__stories__/WithVariantLink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form/FileUpload/__stories__/WithVariantLink.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  FieldContainer,\n  Fieldset,\n  FieldsetLegend,\n} from '@digigov/ui/form/FieldContainer';\n\nimport { FileUpload } from '@digigov/ui/form/FileUpload';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport const WithVariantLink = () => (\n  <FieldContainer>\n    <Fieldset>\n      <FieldsetLegend size=\"md\">\u039B\u03BF\u03B3\u03CC\u03C4\u03C5\u03C0\u03BF \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2</FieldsetLegend>\n      <Hint id=\"file-hint\">\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 png \u03AE jpeg.</Hint>\n      <FileUpload aria-describedby=\"file-hint\" variant=\"link\">\n        \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5\n      </FileUpload>\n    </Fieldset>\n  </FieldContainer>\n);\n\nexport default WithVariantLink;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAEd,MAAM,kBAAkB,MAC7B,oCAAC,sBACC,oCAAC,gBACC,oCAAC,kBAAe,MAAK,QAAK,qHAAoB,GAC9C,oCAAC,QAAK,IAAG,eAAY,qJAAqC,GAC1D,oCAAC,cAAW,oBAAiB,aAAY,SAAQ,UAAO,uFAExD,CACF,CACF;AAGF,IAAO,0BAAQ;",
+  "names": []
+}

package/form/RadioContainer/RadioContainer.stories/index.js

@@ -1,4 +1,13 @@
-import RadioContainer from "@digigov/ui/form/RadioContainer";
+import React from "react";
+import { RadioContainer, RadioItem } from "@digigov/ui/form/RadioContainer";
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend
+} from "@digigov/ui/form/FieldContainer";
+import { Hint } from "@digigov/ui/typography/Hint";
+import { ErrorMessage } from "@digigov/ui/form/ErrorMessage";
+import { VisuallyHidden } from "@digigov/ui/utils/VisuallyHidden";
 var RadioContainer_stories_default = {
   title: "Digigov UI/form/RadioContainer",
   description: "Use the radios component when users can only select one option from a list.",
@@ -6,6 +15,112 @@ var RadioContainer_stories_default = {
   component: RadioContainer,
   displayName: "RadioContainer"
 };
+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,
+      {
+        size: args.legendSize,
+        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(RadioContainer, { dense: args.dense, layout: args.layout }, args.items && args.items.map((item) => /* @__PURE__ */ React.createElement(
+      RadioItem,
+      {
+        key: item.value,
+        name: args.fieldsetName,
+        value: item,
+        dividerText: item.dividerText,
+        "aria-describedby": item.hintId
+      },
+      item.label,
+      item.hint && /* @__PURE__ */ React.createElement(Hint, { id: item.hintId }, item.hintMessage)
+    )))));
+  },
+  args: {
+    legend: "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;",
+    legendSize: "lg",
+    singleQuestionInPage: true,
+    fieldsetName: "login-method",
+    hint: true,
+    hintMessage: "\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03C5\u03C4\u03CC\u03C4\u03B7\u03C4\u03AC \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5.",
+    hintId: "hint-id",
+    error: false,
+    errorMessage: "\u03A0\u03B1\u03C1\u03B1\u03BA\u03B1\u03BB\u03CE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03C4\u03B9\u03C2 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2.",
+    errorId: "error-id",
+    layout: "vertical",
+    dense: false,
+    items: [
+      {
+        value: "taxis",
+        label: "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet",
+        hint: true,
+        hintMessage: "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5.",
+        hintId: "hint-id-1",
+        dividerText: ""
+      },
+      {
+        value: "banking",
+        label: "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking",
+        hint: true,
+        hintMessage: "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5.",
+        hintId: "hint-id-2"
+      },
+      {
+        value: "none",
+        label: "\u03A7\u03C9\u03C1\u03AF\u03C2 \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7",
+        dividerText: "\u03AE"
+      }
+    ]
+  },
+  argTypes: {
+    legend: {
+      control: { type: "text" }
+    },
+    legendSize: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"]
+    },
+    singleQuestionInPage: {
+      control: { type: "boolean" }
+    },
+    fieldsetName: {
+      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 }
+    },
+    layout: {
+      control: { type: "inline-radio" },
+      options: ["vertical", "horizontal"]
+    },
+    dense: {
+      control: { type: "boolean" }
+    },
+    items: {
+      control: { type: "object" }
+    }
+  }
+};
 import { Default } from "@digigov/ui/form/RadioContainer/__stories__/Default";
 import { WithMediumLegend } from "@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend";
 import { MultipleQuestions } from "@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions";
@@ -24,6 +139,7 @@ export {
   InlineWithDivider,
   MultipleQuestions,
   NoneAnswer,
+  WithControls,
   WithErrorMessage,
   WithHints,
   WithMediumLegend,