@digigov/ui 1.0.0-002c630d → 1.0.0-079f34f3d

package/form/AutoComplete/index.js

@@ -74,12 +74,12 @@ var _AutoCompleteResultListItem = _interopRequireDefault(require("@digigov/react
 
 var _AutoCompleteWrapper = _interopRequireDefault(require("@digigov/react-core/AutoCompleteWrapper"));
 
-var _DropdownArrowDown = _interopRequireDefault(require("@digigov/react-core/DropdownArrowDown"));
-
 var _Status = _interopRequireDefault(require("@digigov/ui/form/AutoComplete/Status"));
 
 var _utils = require("@digigov/ui/form/AutoComplete/utils");
 
+var _CaretIcon = require("@digigov/react-icons/CaretIcon");
+
 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; }
@@ -542,7 +542,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       var _this$props4 = this.props,
           id = _this$props4.id,
-          cellWidth = _this$props4.cellWidth,
+          width = _this$props4.width,
           displayMenu = _this$props4.displayMenu,
           minLength = _this$props4.minLength,
           name = _this$props4.name,
@@ -584,7 +584,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       } : null;
       return /*#__PURE__*/_react["default"].createElement(_AutoCompleteWrapper["default"], {
         onKeyDown: this.handleKeyDown,
-        cellWidth: cellWidth
+        width: width
       }, /*#__PURE__*/_react["default"].createElement(_Status["default"], {
         id: id,
         length: options.length,
@@ -687,7 +687,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
 exports.AutoComplete = exports["default"] = AutoComplete;
 AutoComplete.defaultProps = {
-  cellWidth: 'one-third',
+  width: '33.3%',
   autoselect: false,
   defaultValue: '',
   displayMenu: 'overlay',
@@ -707,5 +707,10 @@ AutoComplete.defaultProps = {
   tAssistiveHint: function tAssistiveHint() {
     return 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.';
   },
-  dropdownArrow: _DropdownArrowDown["default"]
+  dropdownArrow: function dropdownArrow(props) {
+    return /*#__PURE__*/_react["default"].createElement(_CaretIcon.CaretIcon, (0, _extends2["default"])({
+      direction: "down",
+      size: "sm"
+    }, props));
+  }
 };

package/form/AutoComplete/index.mdx

@@ -16,61 +16,33 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
 
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithAutoSelect.tsx" />
 
 ### AutoComplete with inline style
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithInLine.tsx" />
 
 ### AutoComplete with default value
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithDefaultValue.tsx" />
 
 ### AutoComplete with placeholder
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithPlaceHolder.tsx" />
 
 ### AutoComplete with all option's values
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete"story="WithShowAllValues.tsx" />
 
 ### AutoComplete with min length
 
 This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithMinLength.tsx" />
 
 ## API
 

package/form/Button/index.mdx

@@ -24,21 +24,13 @@ Use a default button for the main call to action on a page.
 
 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="form/Button"
-  story="CallToActionButton.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="CallToActionButton.tsx" />
 
 ### Secondary buttons
 
 Use secondary buttons for secondary calls to action on a page.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="Secondary.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="Secondary.tsx" />
 
 ### Warning buttons
 
@@ -56,22 +48,14 @@ Disabled buttons have poor contrast and can confuse some users, so avoid them if
 
 Use a button group when two or more buttons are placed together.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtons.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtons.tsx" />
 
 Any links within a button group will automatically align with the buttons.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtonsAndLinks.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+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
@@ -101,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+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
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/form/Checkbox/Checkbox.stories.d.ts

@@ -7,6 +7,8 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/form/Checkbox/__stories__/Default";
+export * from "@digigov/ui/form/Checkbox/__stories__/Inline";
+export * from "@digigov/ui/form/Checkbox/__stories__/InlineWithDivider";
 export * from "@digigov/ui/form/Checkbox/__stories__/MultipleQuestions";
 export * from "@digigov/ui/form/Checkbox/__stories__/WithHint";
 export * from "@digigov/ui/form/Checkbox/__stories__/NoneAnswer";

package/form/Checkbox/Checkbox.stories.js

@@ -24,6 +24,34 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _Inline = require("@digigov/ui/form/Checkbox/__stories__/Inline");
+
+Object.keys(_Inline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Inline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Inline[key];
+    }
+  });
+});
+
+var _InlineWithDivider = require("@digigov/ui/form/Checkbox/__stories__/InlineWithDivider");
+
+Object.keys(_InlineWithDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InlineWithDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InlineWithDivider[key];
+    }
+  });
+});
+
 var _MultipleQuestions = require("@digigov/ui/form/Checkbox/__stories__/MultipleQuestions");
 
 Object.keys(_MultipleQuestions).forEach(function (key) {

package/form/Checkbox/__stories__/ConditionalReveal.js

@@ -27,7 +27,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   value: "email"
 }, "Email"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxConditional, null, "Email address", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "email-address",
-  cellWidth: "one-third"
+  width: "33.3%"
 })), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
   name: "email",
   value: "phone"

package/form/Checkbox/__stories__/Inline.d.ts

@@ -0,0 +1,2 @@
+export declare const Inline: () => JSX.Element;
+export default Inline;

package/form/Checkbox/__stories__/Inline.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Inline = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = require("@digigov/ui/form/Checkbox");
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _Hint = require("@digigov/ui/typography/Hint");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.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.Hint, {
+  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(_Checkbox.Checkbox, {
+  layout: "horizontal"
+}, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "fever"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"))));
+
+var Inline = function Inline() {
+  return _ref;
+};
+
+exports.Inline = Inline;
+var _default = Inline;
+exports["default"] = _default;

package/form/Checkbox/__stories__/InlineWithDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const InlineWithDivider: () => JSX.Element;
+export default InlineWithDivider;

package/form/Checkbox/__stories__/InlineWithDivider.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InlineWithDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = require("@digigov/ui/form/Checkbox");
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _Hint = require("@digigov/ui/typography/Hint");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.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.Hint, {
+  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(_Checkbox.Checkbox, {
+  layout: "horizontal"
+}, /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
+  name: "feeling",
+  value: "fever",
+  dividerText: "\u03AE"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"))));
+
+var InlineWithDivider = function InlineWithDivider() {
+  return _ref;
+};
+
+exports.InlineWithDivider = InlineWithDivider;
+var _default = InlineWithDivider;
+exports["default"] = _default;

package/form/Checkbox/__stories__/NoneAnswer.js

@@ -22,7 +22,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
 }, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
   name: "fatigue",
   value: "fatigue",
-  divider: "\u03AE"
+  dividerText: "\u03AE"
 }, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));
 
 var NoneAnswer = function NoneAnswer() {

package/form/Checkbox/__stories__/NoneAnswerWithError.js

@@ -28,7 +28,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   name: "country",
   value: "fr"
 }, "\u0393\u03B1\u03BB\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Checkbox.CheckboxItem, {
-  divider: "\u03AE",
+  dividerText: "\u03AE",
   name: "country",
   value: "none"
 }, "\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2"))));

package/form/Checkbox/index.mdx

@@ -11,57 +11,33 @@ import Checkbox from '@digigov/ui/form/Checkbox';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="MultipleQuestions.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="WithHint.tsx" />
 
 ### Add an option for ‘none’
 
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswer.tsx" />
 
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswerWithError.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox"story="WithErrorMessage.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -69,11 +45,12 @@ You can ask the user a related question when they select a particular checkbox,
 
 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="form/Checkbox"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
 
 ## API
 

package/form/DateInputContainer/index.mdx

@@ -11,34 +11,23 @@ import DateInputContainer from '@digigov/ui/form/DateInputContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessageForSingleField.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/form/ErrorMessage/index.mdx

@@ -14,11 +14,7 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/ErrorMessage"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/ErrorMessage" story="Default.tsx" />
 
 ## API
 

package/form/FileUpload/index.mdx

@@ -11,16 +11,14 @@ import FileUpload from '@digigov/ui/form/FileUpload';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/FileUpload" story="Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
+<Story packageName="@digigov/ui" component="form/FileUpload" story="WithErrorMessage.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="FileUpload" />

package/form/RadioContainer/RadioContainer.stories.d.ts

@@ -13,4 +13,5 @@ export * from "@digigov/ui/form/RadioContainer/__stories__/WithHints";
 export * from "@digigov/ui/form/RadioContainer/__stories__/NoneAnswer";
 export * from "@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage";
 export * from "@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal";
+export * from "@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider";
 import RadioContainer from "@digigov/ui/form/RadioContainer";

package/form/RadioContainer/RadioContainer.stories.js

@@ -107,6 +107,20 @@ Object.keys(_ConditionalReveal).forEach(function (key) {
     }
   });
 });
+
+var _InlineWithDivider = require("@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider");
+
+Object.keys(_InlineWithDivider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InlineWithDivider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InlineWithDivider[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/form/RadioContainer',
   description: 'Use the radios component when users can only select one option from a list.',

package/form/RadioContainer/__stories__/ConditionalReveal.js

@@ -27,7 +27,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   value: "email"
 }, "Email"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioConditional, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7 email", /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "email",
-  cellWidth: "one-third"
+  width: "33.3%"
 })), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "contact",
   value: "phone"

package/form/RadioContainer/__stories__/Inline.js

@@ -20,7 +20,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
 }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "name-hint"
 }, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
-  inline: true
+  layout: "horizontal"
 }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
   name: "changed_name",
   value: "yes"

package/form/RadioContainer/__stories__/InlineWithDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const InlineWithDivider: () => JSX.Element;
+export default InlineWithDivider;

package/form/RadioContainer/__stories__/InlineWithDivider.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InlineWithDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldContainer = require("@digigov/ui/form/FieldContainer");
+
+var _RadioContainer = require("@digigov/ui/form/RadioContainer");
+
+var _Hint = require("@digigov/ui/typography/Hint");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, {
+  "aria-describedby": "name-hint"
+}, /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
+  id: "name-hint"
+}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  layout: "horizontal"
+}, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "changed_name",
+  value: "yes"
+}, "\u039D\u03B1\u03B9"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  name: "changed_name",
+  value: "no",
+  divider: "\u03AE"
+}, "\u038C\u03C7\u03B9"))));
+
+var InlineWithDivider = function InlineWithDivider() {
+  return _ref;
+};
+
+exports.InlineWithDivider = InlineWithDivider;
+var _default = InlineWithDivider;
+exports["default"] = _default;