@digigov/ui 0.21.3 → 0.22.0

package/core/PhaseBanner/index.mdx

@@ -0,0 +1,24 @@
+---
+id: phase-banner
+title: PhaseBanner
+---
+
+# PhaseBanner
+
+Use the phase banner component to show users your service is still being worked on.
+ 
+
+
+```bash
+import PhaseBanner from '@digigov/ui/core/PhaseBanner';
+``` 
+
+## How to use
+
+Your banner must be directly under the blue GOV.GR header and colour bar.
+
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Default.tsx" />
+
+### Underlined
+
+<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Underlined.tsx" />

package/core/Radios/__stories__/Default.js

@@ -15,13 +15,11 @@ var _Radios = _interopRequireWildcard(require("@digigov/ui/core/Radios"));
 
 var _Field = _interopRequireWildcard(require("@digigov/ui/core/Field"));
 
-var _Hint = _interopRequireDefault(require("@digigov/ui/typography/Hint"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {

package/core/Radios/__stories__/MultipleQuestions.js

@@ -22,7 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, {
-  size: "m"
+  size: "s"
 }, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/_react["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "country",
   value: "greece"

package/core/Radios/index.mdx

@@ -0,0 +1,56 @@
+---
+id: radios
+title: Radios
+---
+
+
+# Radios
+
+ 
+
+
+```bash
+import Radios from '@digigov/ui/core/Radios';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Radios" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/Radios" story="MultipleQuestions.tsx" />
+
+### Inline radios
+
+<Story packageName="@digigov/ui" component="core/Radios" story="Inline.tsx" />
+
+### Checkbox items with hints
+
+You can add hints to checkbox items to provide additional information about the options.
+
+<Story packageName="@digigov/ui" component="core/Radios" story="WithHints.tsx" />
+
+### Radio items with a text divider
+
+If one or more of your radio options is different from the others, it can help users if you separate them using a text divider. 
+The text is usually the word ‘or’.
+
+<Story packageName="@digigov/ui" component="core/Radios" story="NoneAnswer.tsx" />
+
+## Conditionally revealing a related question
+
+You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
+
+This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
+
+<Story packageName="@digigov/ui" component="core/Radios" story="ConditionalReveal.tsx" />
+
+### Error messages
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Radios" story="WithErrorMessage.tsx" />
+
+
+

package/core/Select/Select.stories.d.ts

@@ -5,4 +5,5 @@ declare namespace _default {
 export default _default;
 export * from "./__stories__/Default";
 export * from "./__stories__/DisabledInput";
+export * from "./__stories__/WithHint";
 import Select from "@digigov/ui/core/Select";

package/core/Select/Select.stories.js

@@ -37,6 +37,20 @@ Object.keys(_DisabledInput).forEach(function (key) {
     }
   });
 });
+
+var _WithHint = require("./__stories__/WithHint");
+
+Object.keys(_WithHint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithHint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithHint[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/core/Select',
   component: _Select["default"]

package/core/Select/__stories__/WithHint.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Default: () => JSX.Element;
+export default Default;

package/core/Select/__stories__/WithHint.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Select = _interopRequireWildcard(require("@digigov/ui/core/Select"));
+
+var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
+
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+var _typography = require("@digigov/ui/typography");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/_react["default"].createElement(_typography.Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+  name: "select-list"
+}, /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
+  value: "dim"
+}, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
+  value: "kat"
+}, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
+  value: "kat"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
+
+// import LabelTitle from '@digigov/react-core/LabelTitle';
+var Default = function Default() {
+  return _ref;
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/core/Select/index.mdx

@@ -0,0 +1,36 @@
+---
+id: select
+title: Select
+---
+
+
+# Select
+
+ 
+
+
+```bash
+import Select from '@digigov/ui/core/Select';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Select" story="Default.tsx" />
+
+
+### Select with hints
+
+You can add hints to select items to provide additional information about the options.
+
+<Story packageName="@digigov/ui" component="core/Select" story="WithHint.tsx" />
+
+
+
+### Disabled input
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/Select" story="DisabledInput.tsx" />
+
+
+

package/core/SummaryList/SummaryList.stories.d.ts

@@ -4,5 +4,5 @@ declare namespace _default {
 }
 export default _default;
 export * from "./__stories__/Default";
-export * from "./__stories__/SummaryListWithActions";
-export * from "./__stories__/SummaryListWithoutBorders";
+export * from "./__stories__/WithActions";
+export * from "./__stories__/WithoutBorders";

package/core/SummaryList/SummaryList.stories.js

@@ -24,30 +24,30 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _SummaryListWithActions = require("./__stories__/SummaryListWithActions");
+var _WithActions = require("./__stories__/WithActions");
 
-Object.keys(_SummaryListWithActions).forEach(function (key) {
+Object.keys(_WithActions).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SummaryListWithActions[key]) return;
+  if (key in exports && exports[key] === _WithActions[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SummaryListWithActions[key];
+      return _WithActions[key];
     }
   });
 });
 
-var _SummaryListWithoutBorders = require("./__stories__/SummaryListWithoutBorders");
+var _WithoutBorders = require("./__stories__/WithoutBorders");
 
-Object.keys(_SummaryListWithoutBorders).forEach(function (key) {
+Object.keys(_WithoutBorders).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SummaryListWithoutBorders[key]) return;
+  if (key in exports && exports[key] === _WithoutBorders[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SummaryListWithoutBorders[key];
+      return _WithoutBorders[key];
     }
   });
 });

package/core/SummaryList/__stories__/Default.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null)), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "699876543")));
+var _ref = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null)), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567")));
 
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref);

package/core/SummaryList/__stories__/WithActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WithActions: () => JSX.Element;
+export default WithActions;

package/core/SummaryList/__stories__/{SummaryListWithActions.js → WithActions.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SummaryListWithActions = void 0;
+exports["default"] = exports.WithActions = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,28 +17,26 @@ var _VisuallyHidden = _interopRequireDefault(require("@digigov/ui/core/VisuallyH
 
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
-var _reactCore = require("@digigov/react-core");
-
 var _core = require("@digigov/ui/core");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, " \u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "#"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u039F\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B72"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_core.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-  href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-  href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2"))))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "699876543"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u0394\u03BF\u03BA\u03B9\u03BC\u03AE ", /*#__PURE__*/_react["default"].createElement(_reactCore.ArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "699876543"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_core.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/_react["default"].createElement(_core.Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE2")))));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_core.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  variant: "link"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5")), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  variant: "link"
+}, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"))))));
 
-var SummaryListWithActions = function SummaryListWithActions() {
+var WithActions = function WithActions() {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref);
 };
 
-exports.SummaryListWithActions = SummaryListWithActions;
-var _default = SummaryListWithActions;
+exports.WithActions = WithActions;
+var _default = WithActions;
 exports["default"] = _default;

package/core/SummaryList/__stories__/WithoutBorders.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WithoutBorders: () => JSX.Element;
+export default WithoutBorders;

package/core/SummaryList/__stories__/{SummaryListWithoutBorders.js → WithoutBorders.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SummaryListWithoutBorders = void 0;
+exports["default"] = exports.WithoutBorders = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,12 +19,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], {
   border: false
-}, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u039A\u03B1\u03C4\u03B5\u03C1\u03AF\u03BD\u03B1")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null)), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "699876543")));
+}, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u03A4\u03AC\u03B4\u03B5 20, \u03A0\u03B1\u03C4\u03AE\u03C3\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null)), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567")));
 
-var SummaryListWithoutBorders = function SummaryListWithoutBorders() {
+var WithoutBorders = function WithoutBorders() {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref);
 };
 
-exports.SummaryListWithoutBorders = SummaryListWithoutBorders;
-var _default = SummaryListWithoutBorders;
+exports.WithoutBorders = WithoutBorders;
+var _default = WithoutBorders;
 exports["default"] = _default;

package/core/SummaryList/index.mdx

@@ -1,80 +1,32 @@
 ---
-title: Summary List
-parent: docs/ui/components
+id: summary-list
+title: SummaryList
 ---
 
-import {
-  SummaryList,
-  SummaryListItem,
-  SummaryListItemKey,
-  SummaryListItemValue,
-  SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
+# SummaryList
 
-## Example
+Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+ 
 
-```jsx live path=core/SummaryList/index.tsx
-<SummaryList>
-  <SummaryListItem>
-    <SummaryListItemKey>Όνομα</SummaryListItemKey>
-    <SummaryListItemValue> Μάριος</SummaryListItemValue>
-    <SummaryListItemAction> Αλλαγή</SummaryListItemAction>
-  </SummaryListItem>
-  <SummaryListItem>
-    <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
-    <SummaryListItemValue>Μενεξές</SummaryListItemValue>
-  </SummaryListItem>
-</SummaryList>
-```
 
-<br />
+```bash
+import SummaryList from '@digigov/ui/core/SummaryList';
+``` 
 
-## When to use this component
+## How to use
 
-Use the SummaryList component to present pairs of related information, known
-as key-value pairs, in a list.
-
-> The key is a description or label of a piece of
-> information, like `Name`, and the value is the piece of information itself,
-> like `John Smith`.
-
-## When not to use this component
-
-Only use it to present information that has a key and at least one value.
-
-Do not use it for tabular data or a simple list of information or tasks, like
-a task list.
-
-## How it works
+<Story packageName="@digigov/ui" component="core/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
-You can add actions to a summary list, like a ‘Change’ link to let users go
-back and edit their answer.
-
-For sighted users, the actions get their context from the other content in the
-row they appear in.
-
-Assistive technology users, like those who use a screen reader, may hear the
-links out of context and not know what they do. To give more context, add
-visually hidden text to the links. This means a screen reader user will hear
-a meaningful action, like `Change name` or `Change date of birth`.
-
-## API
+Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. 
+To give more context, add visually hidden text to the links. 
+This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-### Properties
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithActions.tsx" />
 
-<PropsDoc data={SummaryList.__doc__} />
-<PropsDoc data={SummaryListItem.__doc__} />
-<PropsDoc data={SummaryListItemKey.__doc__} />
-<PropsDoc data={SummaryListItemValue.__doc__} />
-<PropsDoc data={SummaryListItemAction.__doc__} />
-<br />
+### Summary list without borders
 
-### Styles
+If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<StylesDoc data={SummaryList.__doc__} />
-<StylesDoc data={SummaryListItem.__doc__} />
-<StylesDoc data={SummaryListItemKey.__doc__} />
-<StylesDoc data={SummaryListItemValue.__doc__} />
-<StylesDoc data={SummaryListItemAction.__doc__} />
+<Story packageName="@digigov/ui" component="core/SummaryList" story="WithoutBorders.tsx" />

package/core/Table/Table.stories.d.ts

@@ -4,6 +4,7 @@ declare namespace _default {
 }
 export default _default;
 export * from "./__stories__/Default";
+export * from "./__stories__/TableCaptions";
 export * from "./__stories__/NoData";
 export * from "./__stories__/VerticalHeaders";
 export * from "./__stories__/ZebraProp";

package/core/Table/Table.stories.js

@@ -24,6 +24,20 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _TableCaptions = require("./__stories__/TableCaptions");
+
+Object.keys(_TableCaptions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TableCaptions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TableCaptions[key];
+    }
+  });
+});
+
 var _NoData = require("./__stories__/NoData");
 
 Object.keys(_NoData).forEach(function (key) {

package/core/Table/__stories__/DarkVariant.js

@@ -13,7 +13,7 @@ var _reactCore = require("@digigov/react-core");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, {
   variant: "dark"
-}, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "Table with dark variant"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")))));
+}, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC3.282,20")))));
 
 var DarkVariant = function DarkVariant() {
   return _ref;

package/core/Table/__stories__/Default.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactCore = require("@digigov/react-core");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "Table no props"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "First 6 weeks"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC69.80"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC109.80")))));
+var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2 \u03BA\u03B1\u03B9 \u03C0\u03BF\u03C3\u03AC"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u03A0\u03B5\u03C1\u03AF\u03BF\u03B4\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u039C\u03B5\u03B9\u03C9\u03BC\u03AD\u03BD\u03BF \u03C0\u03BF\u03C3\u03CC"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u03A0\u03C1\u03CE\u03C4\u03B5\u03C2 6 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC109.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC69.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B5\u03C2 33 \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC99.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC64.80 / \u03B5\u03B2\u03B4\u03BF\u03BC\u03AC\u03B4\u03B1")), /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u03A3\u03C5\u03BD\u03BF\u03BB\u03B9\u03BA\u03CC \u03C0\u03BF\u03C3\u03CC "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, "\u20AC4.282,20 "), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, " \u20AC3.282,20")))));
 
 var Default = function Default() {
   return _ref;

package/core/Table/__stories__/TableCaptions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TableCaptions: () => JSX.Element;
+export default TableCaptions;

package/core/Table/__stories__/TableCaptions.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TableCaptions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@digigov/react-core");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, {
+  size: "xl"
+}, "Table Caption Extra Large"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, {
+  size: "l"
+}, "Table Caption Large"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, {
+  size: "m"
+}, "Table Caption Medium"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, {
+  size: "s"
+}, "Table Caption Small")));
+
+var TableCaptions = function TableCaptions() {
+  return _ref;
+};
+
+exports.TableCaptions = TableCaptions;
+var _default = TableCaptions;
+exports["default"] = _default;