@digigov/ui 0.21.2 → 0.23.0

package/core/Button/Button.stories.js

@@ -79,6 +79,78 @@ Object.keys(_GroupingButtonsAndLinks).forEach(function (key) {
     }
   });
 });
+
+var _CallToActionButton = require("./__stories__/CallToActionButton");
+
+Object.keys(_CallToActionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CallToActionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CallToActionButton[key];
+    }
+  });
+});
+
+var _Disabled = require("./__stories__/Disabled");
+
+Object.keys(_Disabled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Disabled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Disabled[key];
+    }
+  });
+});
+
+var _ButtonLinkButton = require("./__stories__/ButtonLinkButton");
+
+Object.keys(_ButtonLinkButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ButtonLinkButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ButtonLinkButton[key];
+    }
+  });
+});
+
+var _Back = require("./__stories__/Back");
+
+Object.keys(_Back).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Back[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Back[key];
+    }
+  });
+});
+
+var _WithVariantLink = require("./__stories__/WithVariantLink");
+
+Object.keys(_WithVariantLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithVariantLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithVariantLink[key];
+    }
+  });
+});
+
+/* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/Core/Button',
   component: _Button["default"]

package/core/Button/__stories__/Back.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BackButton } from '@digigov/ui/core/Button';
+export declare const Back: () => JSX.Element;
+export default BackButton;

package/core/Button/__stories__/Back.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Back = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("@digigov/ui/core/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.BackButton, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Back = function Back() {
+  return _ref;
+};
+
+exports.Back = Back;
+var _default = _Button.BackButton;
+exports["default"] = _default;

package/core/Button/__stories__/ButtonLinkButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * My primary descrition is the best description that was described
+ */
+export declare const ButtonLinkButton: () => JSX.Element;
+export default ButtonLinkButton;

package/core/Button/__stories__/ButtonLinkButton.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ButtonLinkButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("@digigov/ui/core/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.ButtonLink, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1",
+  tabIndex: 0
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+/**
+ * My primary descrition is the best description that was described
+ */
+var ButtonLinkButton = function ButtonLinkButton() {
+  return _ref;
+};
+
+exports.ButtonLinkButton = ButtonLinkButton;
+var _default = ButtonLinkButton;
+exports["default"] = _default;

package/core/Button/__stories__/CallToActionButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * My primary descrition is the best description that was described
+ */
+export declare const CallToActionButton: () => JSX.Element;
+export default CallToActionButton;

package/core/Button/__stories__/CallToActionButton.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CallToActionButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("@digigov/ui/core/Button");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.CallToAction, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1",
+  tabIndex: 0
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+/**
+ * My primary descrition is the best description that was described
+ */
+var CallToActionButton = function CallToActionButton() {
+  return _ref;
+};
+
+exports.CallToActionButton = CallToActionButton;
+var _default = CallToActionButton;
+exports["default"] = _default;

package/core/Button/__stories__/Disabled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * My primary descrition is the best description that was described
+ */
+export declare const Disabled: () => JSX.Element;
+export default Disabled;

package/core/Button/__stories__/Disabled.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Disabled = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  disabled: true
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+/**
+ * My primary descrition is the best description that was described
+ */
+var Disabled = function Disabled() {
+  return _ref;
+};
+
+exports.Disabled = Disabled;
+var _default = Disabled;
+exports["default"] = _default;

package/core/Button/__stories__/GroupingButtonsAndLinks.js

@@ -19,7 +19,9 @@ 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(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
 
 /**
  * My deescrition is the best description that was described

package/core/Button/__stories__/Primary.js

@@ -11,7 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 /**
  * My primary descrition is the best description that was described

package/core/Button/__stories__/Secondary.js

@@ -12,11 +12,12 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-  color: "secondary"
+  color: "secondary",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 /**
- * My primary descrition is the best description that was described 
+ * My primary descrition is the best description that was described
  */
 var Secondary = function Secondary() {
   return _ref;

package/core/Button/__stories__/Warning.js

@@ -12,7 +12,8 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-  color: "warning"
+  color: "warning",
+  "aria-label": "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
 
 var Warning = function Warning() {

package/core/Button/__stories__/WithVariantLink.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * My primary descrition is the best description that was described
+ */
+export declare const WithVariantLink: () => JSX.Element;
+export default WithVariantLink;

package/core/Button/__stories__/WithVariantLink.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithVariantLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+/**
+ * My primary descrition is the best description that was described
+ */
+var WithVariantLink = function WithVariantLink() {
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      console.log('clicked');
+    },
+    variant: "link",
+    "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+  }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+};
+
+exports.WithVariantLink = WithVariantLink;
+var _default = WithVariantLink;
+exports["default"] = _default;

package/core/Button/index.mdx

@@ -0,0 +1,97 @@
+---
+id: button
+title: Button
+---
+
+# Button
+
+Use the button component to help users carry out an action like starting an
+application or saving their information.
+
+ 
+
+
+```bash
+import Button from '@digigov/ui/core/Button';
+``` 
+
+## How to use
+
+### Default buttons
+
+Use a default button for the main call to action on a page.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Primary.tsx" />
+
+
+### Start buttons
+Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
+
+<Story packageName="@digigov/ui" component="core/Button" story="CallToActionButton.tsx" />
+
+### Secondary buttons
+Use secondary buttons for secondary calls to action on a page.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Secondary.tsx" />
+
+### Warning buttons
+Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Warning.tsx" />
+
+### Disable buttons
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+<Story packageName="@digigov/ui" component="core/Button" story="Disabled.tsx" />
+
+
+### Grouping buttons
+Use a button group when two or more buttons are placed together.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtons.tsx" />
+
+Any links within a button group will automatically align with the buttons.
+
+<Story packageName="@digigov/ui" component="core/Button" story="GroupingButtonsAndLinks.tsx" />
+
+
+
+Write button text in sentence case, describing the action it performs. For
+example:'
+
+- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
+- `Sign in` to an account a user has already created
+- `Continue` when the service does not save a user's information
+- `Save and continue` when the service does save a user's information
+- `Save and come back later` when a user can save their information and come back later
+- `Add another` to add another item to a list or group
+- `Pay` to make a payment
+- `Confirm and send` on a check answers page that does not have any legal
+  content a user must agree to
+- `Accept and send` on a check answers page that has legal content a user
+  must agree to
+- `Sign out` when a user is signed in to an account
+
+You may need to include more or different words to better describe the action.
+For example, `Add another address` and `Accept and claim a tax refund`.
+
+Align the primary action button to the left edge of your form.
+
+## Default buttons
+
+Use a default button for the main call to action on a page.
+
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+## API Docs
+
+Read more about [how to use the React types](/docs/api/Button)
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Select
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.

package/core/Card/Card.stories.d.ts

@@ -11,4 +11,5 @@ export * from "@digigov/ui/core/Card/__stories__/WithDarkTopBorder";
 export * from "@digigov/ui/core/Card/__stories__/WithDivider";
 export * from "@digigov/ui/core/Card/__stories__/WithClickableContent";
 export * from "@digigov/ui/core/Card/__stories__/WithClickableLink";
+export * from "@digigov/ui/core/Card/__stories__/WithGroupButton";
 import Card from "@digigov/ui/core/Card";

package/core/Card/Card.stories.js

@@ -121,6 +121,20 @@ Object.keys(_WithClickableLink).forEach(function (key) {
     }
   });
 });
+
+var _WithGroupButton = require("@digigov/ui/core/Card/__stories__/WithGroupButton");
+
+Object.keys(_WithGroupButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithGroupButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithGroupButton[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/core/Card',
   component: _Card["default"]

package/core/Card/__stories__/WithClickableLink.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Card = _interopRequireWildcard(require("@digigov/ui/core/Card"));
 
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
-
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 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); }
@@ -23,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_Card.CardHeading, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "#"
-}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/_react["default"].createElement(_Card.CardAction, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1")));
+}, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1")), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."));
 
 var WithClickableLink = function WithClickableLink() {
   return _ref;

package/core/Card/__stories__/WithGroupButton.d.ts

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

package/core/Card/__stories__/WithGroupButton.js

@@ -0,0 +1,32 @@
+"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.WithGroupButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireWildcard(require("@digigov/ui/core/Card"));
+
+var _Button = _interopRequireWildcard(require("@digigov/ui/core/Button"));
+
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+
+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(_Card["default"], null, /*#__PURE__*/_react["default"].createElement(_Card.CardHeading, null, "\u0393\u03B5\u03C9\u03C1\u03B3\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Card.CardText, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2, \u03B5\u03C0\u03B9\u03B4\u03BF\u03C4\u03AE\u03C3\u03B5\u03B9\u03C2 \u03BA\u03B1\u03B9 \u03B1\u03C0\u03BF\u03B6\u03B7\u03BC\u03B9\u03CE\u03C3\u03B5\u03B9\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03B3\u03B5\u03C9\u03C1\u03B3\u03B9\u03BA\u03AE, \u03BA\u03C4\u03B7\u03BD\u03BF\u03C4\u03C1\u03BF\u03C6\u03B9\u03BA\u03AE \u03AE \u03B1\u03BB\u03B9\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C3\u03B1\u03C2 \u03B4\u03C1\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1."), /*#__PURE__*/_react["default"].createElement(_Card.CardAction, null, /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"))));
+
+var WithGroupButton = function WithGroupButton() {
+  return _ref;
+};
+
+exports.WithGroupButton = WithGroupButton;
+var _default = WithGroupButton;
+exports["default"] = _default;

package/core/Card/card.mdx

@@ -0,0 +1,78 @@
+---
+id: card
+title: Card
+---
+
+
+# Card
+
+Cards can be used to divide and organise interface content for better understandability and readability. 
+When used correctly, Cards can help users to scan through vast amounts of information quicker.
+
+ 
+
+
+```bash
+import Card from '@digigov/ui/core/Card';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+
+### Card with border
+
+You can set the color of the Card's border. You can choose between `dark` and `grey` color respectively.
+
+#### Card with gray border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayBorder.tsx" />
+
+#### Card with dark border color
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkBorder.tsx" />
+
+
+### Card with top border
+
+You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey
+
+#### Card with grey top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGrayTopBorder.tsx" />
+
+#### Card with dark top border
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDarkTopBorder.tsx" />
+
+
+### Card with divider
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithDivider.tsx" />
+
+
+### Card with actions
+
+#### Card with title link
+
+Cards can be used without an action button, but with a clickable title.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableLink.tsx" />
+
+#### Card with clickable content
+
+You can expand the clickable area of the link to fill Card's content.
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithClickableContent.tsx" />
+
+
+Cards also provides styles for actionable elements such as Buttons or Links.
+
+#### Card with button or link
+
+<Story packageName="@digigov/ui" component="core/Card" story="Default.tsx" />
+
+#### Card with a group of actions
+
+<Story packageName="@digigov/ui" component="core/Card" story="WithGroupButton.tsx" />

package/core/Checkboxes/Checkbox.stories.d.ts

@@ -7,6 +7,7 @@ export * from "@digigov/ui/core/Checkboxes/__stories__/Default";
 export * from "@digigov/ui/core/Checkboxes/__stories__/MultipleQuestions";
 export * from "@digigov/ui/core/Checkboxes/__stories__/WithHint";
 export * from "@digigov/ui/core/Checkboxes/__stories__/NoneAnswer";
+export * from "@digigov/ui/core/Checkboxes/__stories__/NoneAnswerWithError";
 export * from "@digigov/ui/core/Checkboxes/__stories__/WithErrorMessage";
 export * from "@digigov/ui/core/Checkboxes/__stories__/ConditionalReveal";
 import Checkboxes from "@digigov/ui/core/Checkboxes";

package/core/Checkboxes/Checkbox.stories.js

@@ -66,6 +66,20 @@ Object.keys(_NoneAnswer).forEach(function (key) {
   });
 });
 
+var _NoneAnswerWithError = require("@digigov/ui/core/Checkboxes/__stories__/NoneAnswerWithError");
+
+Object.keys(_NoneAnswerWithError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NoneAnswerWithError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NoneAnswerWithError[key];
+    }
+  });
+});
+
 var _WithErrorMessage = require("@digigov/ui/core/Checkboxes/__stories__/WithErrorMessage");
 
 Object.keys(_WithErrorMessage).forEach(function (key) {

package/core/Checkboxes/__stories__/ConditionalReveal.js

@@ -23,7 +23,11 @@ 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, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
   checked: true,
   name: "email",
   value: "email"

package/core/Checkboxes/__stories__/Default.js

@@ -21,7 +21,11 @@ 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, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__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(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  id: "feeling-hint"
+}, "\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(_Checkboxes["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkboxes.CheckboxItem, {