@digigov/ui 0.30.2 → 0.31.0

package/app/Header/__stories__/WithNavigation.js

@@ -35,14 +35,16 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Header.Header, null, /*
   href: "#"
 }))));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_ui.SectionBreak, null);
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_ui.SectionBreak, {
+  visible: false
+});
 
 var WithNavigation = function WithNavigation() {
   var _useNavList = (0, _useNavList2.useNavList)(),
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton;
 
-  var setRegister = function setRegister(name) {
-    return (0, _extends2["default"])({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return (0, _extends2["default"])({}, registerButton(name));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_Basic.Top, null, _ref, /*#__PURE__*/_react["default"].createElement(_Nav.Nav, {
@@ -53,28 +55,28 @@ var WithNavigation = function WithNavigation() {
       label: 'Home',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
     link: {
       name: 'form',
       label: 'Form registration',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
     link: {
       name: 'news',
       label: 'News',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
     link: {
       name: 'contact',
       label: 'Contact',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), _ref2)));
 };
 

package/app/QrCodeScanner/__stories__/Default.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _QrCodeScanner = require("@digigov/ui/app/QrCodeScanner");
 
-var _Title = require("@digigov/ui/typography/Title");
+var _Heading = require("@digigov/ui/typography/Heading");
 
 var _ErrorSummary = require("@digigov/ui/core/ErrorSummary");
 
@@ -64,8 +64,8 @@ var Default = function Default() {
     validate: validate,
     onScan: handleScan,
     onError: handleError
-  }, error.message && /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Title.Title, {
-    size: "sm"
+  }, error.message && /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+    size: "s"
   }, error.message))));
 };
 

package/app/QrCodeViewer/QRCode.stories.d.ts

@@ -6,4 +6,3 @@ declare namespace _default {
 export default _default;
 export * from "./__stories__/Default";
 export * from "./__stories__/Custom";
-import QrCodeViewer from "@digigov/ui/app/QrCodeViewer";

package/app/QrCodeViewer/index.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 import { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';
 export interface QrCodeViewerProps extends QRPropsCanvas {
 }
-export declare const QrCodeViewer: (props: QrCodeViewerProps) => React.ReactElement;
-export default QrCodeViewer;
+export declare const QrCodeViewer: React.ForwardRefExoticComponent<QrCodeViewerProps & React.RefAttributes<unknown>>;

package/app/QrCodeViewer/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.QrCodeViewer = void 0;
+exports.QrCodeViewer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -50,7 +50,7 @@ var ERROR_LEVEL_MAP = {
   H: _qrcodegen["default"].QrCode.Ecc.HIGH
 };
 
-function QrCodeViewerCanvas(props) {
+var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCodeViewerCanvas(props, ref) {
   var value = props.value,
       _props$size = props.size,
       size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
@@ -67,7 +67,7 @@ function QrCodeViewerCanvas(props) {
       otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
 
-  var _canvas = (0, _react.useRef)(null);
+  var _canvas = ref || (0, _react.useRef)(null);
 
   var _image = (0, _react.useRef)(null); // We're just using this state to trigger rerenders when images load. We
   // Don't actually read the value anywhere. A smarter use of useEffect would
@@ -169,12 +169,12 @@ function QrCodeViewerCanvas(props) {
     width: size,
     ref: _canvas
   }, otherProps)), img);
-}
+});
 
-var QrCodeViewer = function QrCodeViewer(props) {
-  return /*#__PURE__*/_react["default"].createElement(QrCodeViewerCanvas, props);
-};
+var QrCodeViewer = /*#__PURE__*/_react["default"].forwardRef(function QrCodeViewer(props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(QrCodeViewerCanvas, (0, _extends2["default"])({}, props, {
+    ref: ref
+  }));
+});
 
-exports.QrCodeViewer = QrCodeViewer;
-var _default = QrCodeViewer;
-exports["default"] = _default;
+exports.QrCodeViewer = QrCodeViewer;

package/app/ThemeOptionsForm/index.d.ts

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

package/app/ThemeOptionsForm/index.js

@@ -0,0 +1,243 @@
+"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.ThemeOptionsForm = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _FieldContainer = _interopRequireWildcard(require("@digigov/ui/core/FieldContainer"));
+
+var _RadioContainer = require("@digigov/ui/core/RadioContainer");
+
+var _SectionBreak = _interopRequireDefault(require("@digigov/ui/core/SectionBreak"));
+
+var _useTheme3 = _interopRequireDefault(require("@digigov/ui/hooks/useTheme"));
+
+var _useFontSize3 = _interopRequireDefault(require("@digigov/ui/hooks/useFontSize"));
+
+var _useLineHeight3 = _interopRequireDefault(require("@digigov/ui/hooks/useLineHeight"));
+
+var _useLetterSpacing3 = _interopRequireDefault(require("@digigov/ui/hooks/useLetterSpacing"));
+
+var _useHighlightLinks3 = _interopRequireDefault(require("@digigov/ui/hooks/useHighlightLinks"));
+
+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(_FieldContainer.FieldsetLegend, {
+  size: "s"
+}, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B8\u03AD\u03BC\u03B1\u03C4\u03BF\u03C2");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "s"
+}, "M\u03AD\u03B3\u03B5\u03B8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "s"
+}, "\u038E\u03C8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AE\u03C2 \u03BA\u03B5\u03B9\u03BC\u03AD\u03BD\u03C9\u03BD");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "s"
+}, "\u0391\u03C0\u03CC\u03C3\u03C4\u03B1\u03C3\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "s"
+}, "\u0388\u03BD\u03C4\u03BF\u03BD\u03B7 \u03B5\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03C9\u03BD");
+
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], {
+  visible: false
+});
+
+var ThemeOptionsForm = function ThemeOptionsForm() {
+  var _useTheme = (0, _useTheme3["default"])(),
+      _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
+
+  var _useState = (0, _react.useState)(theme || 'auto'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedTheme = _useState2[0],
+      setSelectedTheme = _useState2[1];
+
+  var _useFontSize = (0, _useFontSize3["default"])(),
+      _useFontSize2 = (0, _slicedToArray2["default"])(_useFontSize, 2),
+      fontSize = _useFontSize2[0],
+      changeFontSize = _useFontSize2[1];
+
+  var _useState3 = (0, _react.useState)(fontSize || 'default'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedFontSize = _useState4[0],
+      setSelectedFontSize = _useState4[1];
+
+  var _useLineHeight = (0, _useLineHeight3["default"])(),
+      _useLineHeight2 = (0, _slicedToArray2["default"])(_useLineHeight, 2),
+      lineHeight = _useLineHeight2[0],
+      changeLineHeight = _useLineHeight2[1];
+
+  var _useState5 = (0, _react.useState)(lineHeight || 'default'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedLineHeight = _useState6[0],
+      setSelectedLineHeight = _useState6[1];
+
+  var _useLetterSpacing = (0, _useLetterSpacing3["default"])(),
+      _useLetterSpacing2 = (0, _slicedToArray2["default"])(_useLetterSpacing, 2),
+      letterSpacing = _useLetterSpacing2[0],
+      changeLetterSpacing = _useLetterSpacing2[1];
+
+  var _useState7 = (0, _react.useState)(letterSpacing || 'default'),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedLetterSpacing = _useState8[0],
+      setSelectedLetterSpacing = _useState8[1];
+
+  var _useHighlightLinks = (0, _useHighlightLinks3["default"])(),
+      _useHighlightLinks2 = (0, _slicedToArray2["default"])(_useHighlightLinks, 2),
+      highlightLinks = _useHighlightLinks2[0],
+      changeHighlightLinks = _useHighlightLinks2[1];
+
+  var _useState9 = (0, _react.useState)(highlightLinks || 'default'),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedHighlightLinks = _useState10[0],
+      setSelectedHighlightLinks = _useState10[1];
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+
+  function optionsHasChanged() {
+    if (theme != selectedTheme || fontSize != selectedFontSize || lineHeight != selectedLineHeight || letterSpacing != selectedLetterSpacing || highlightLinks != selectedHighlightLinks) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "light",
+    onChange: function onChange() {
+      return setSelectedTheme('light');
+    },
+    checked: selectedTheme === 'light'
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "dark",
+    onChange: function onChange() {
+      return setSelectedTheme('dark');
+    },
+    checked: selectedTheme === 'dark'
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "auto",
+    onChange: function onChange() {
+      return setSelectedTheme('auto');
+    },
+    checked: selectedTheme === 'auto'
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref2, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "font-size",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedFontSize('default');
+    },
+    checked: selectedFontSize === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "font-size",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedFontSize('large');
+    },
+    checked: selectedFontSize === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref3, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "line-height",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLineHeight('default');
+    },
+    checked: selectedLineHeight === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "line-height",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLineHeight('large');
+    },
+    checked: selectedLineHeight === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref4, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "letter-spacing",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLetterSpacing('default');
+    },
+    checked: selectedLetterSpacing === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03AE (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "letter-spacing",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLetterSpacing('extra');
+    },
+    checked: selectedLetterSpacing === 'extra'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03B7")))), /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref5, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "highlight-links",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedHighlightLinks('default');
+    },
+    checked: selectedHighlightLinks === 'default'
+  }, "\u038C\u03C7\u03B9 (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "highlight-links",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedHighlightLinks('highlight');
+    },
+    checked: selectedHighlightLinks === 'highlight'
+  }, "\u039D\u03B1\u03B9")), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: resetOptions,
+    variant: "link"
+  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"))), _ref6, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleOptions,
+    disabled: !optionsHasChanged()
+  }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
+};
+
+exports.ThemeOptionsForm = ThemeOptionsForm;
+var _default = ThemeOptionsForm;
+exports["default"] = _default;

package/app/ThemePaletteForm/index.d.ts

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

package/app/{ThemeSelectorOptions → ThemePaletteForm}/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ThemeToggleOptions = void 0;
+exports["default"] = exports.ThemePaletteForm = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -23,7 +23,7 @@ var _RadioContainer = require("@digigov/ui/core/RadioContainer");
 
 var _SectionBreak = _interopRequireDefault(require("@digigov/ui/core/SectionBreak"));
 
-var _useTheme2 = _interopRequireDefault(require("@digigov/ui/hooks/useTheme"));
+var _useTheme3 = _interopRequireDefault(require("@digigov/ui/hooks/useTheme"));
 
 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); }
 
@@ -33,10 +33,11 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
 
-var ThemeToggleOptions = function ThemeToggleOptions() {
-  var _useTheme = (0, _useTheme2["default"])(),
-      theme = _useTheme.theme,
-      changeTheme = _useTheme.changeTheme;
+var ThemePaletteForm = function ThemePaletteForm() {
+  var _useTheme = (0, _useTheme3["default"])(),
+      _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
 
   var _useState = (0, _react.useState)(theme || 'auto'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -75,6 +76,6 @@ var ThemeToggleOptions = function ThemeToggleOptions() {
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
 };
 
-exports.ThemeToggleOptions = ThemeToggleOptions;
-var _default = ThemeToggleOptions;
+exports.ThemePaletteForm = ThemePaletteForm;
+var _default = ThemePaletteForm;
 exports["default"] = _default;

package/app/index.d.ts

@@ -10,4 +10,5 @@ export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
 export * from '@digigov/ui/app/I18nText';
 export * from '@digigov/ui/app/PhaseBannerHeader';
-export * from '@digigov/ui/app/ThemeSelectorOptions';
+export * from '@digigov/ui/app/ThemePaletteForm';
+export * from '@digigov/ui/app/ThemeOptionsForm';

package/app/index.js

@@ -160,15 +160,28 @@ Object.keys(_PhaseBannerHeader).forEach(function (key) {
   });
 });
 
-var _ThemeSelectorOptions = require("@digigov/ui/app/ThemeSelectorOptions");
+var _ThemePaletteForm = require("@digigov/ui/app/ThemePaletteForm");
 
-Object.keys(_ThemeSelectorOptions).forEach(function (key) {
+Object.keys(_ThemePaletteForm).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ThemeSelectorOptions[key]) return;
+  if (key in exports && exports[key] === _ThemePaletteForm[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _ThemeSelectorOptions[key];
+      return _ThemePaletteForm[key];
+    }
+  });
+});
+
+var _ThemeOptionsForm = require("@digigov/ui/app/ThemeOptionsForm");
+
+Object.keys(_ThemeOptionsForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ThemeOptionsForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ThemeOptionsForm[key];
     }
   });
 });

package/core/Accordion/index.d.ts

@@ -5,7 +5,7 @@ import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent
 import AccordionSectionSummaryHeading from '@digigov/react-core/AccordionSectionSummaryHeading';
 import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
 import AccordionControls from '@digigov/react-core/AccordionControls';
-import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
+import { UseTogglableTabReturn } from '@digigov/ui/hooks/useTogglableTab';
 export declare const AccordionItemDetails: React.ForwardRefExoticComponent<Pick<import("@digigov/react-core/AccordionSectionContent").AccordionSectionContentProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemSummary: ({ children, ...props }: {
     [x: string]: any;
@@ -15,7 +15,7 @@ export declare const AccordionItem: React.MemoExoticComponent<React.ForwardRefEx
 export interface UseAccordionProps {
     singleOpen?: boolean;
 }
-export interface UseAccordionReturn extends UseTogglableSectionsReturn {
+export interface UseAccordionReturn extends UseTogglableTabReturn {
 }
 declare const useAccordion: (props: UseAccordionProps) => UseAccordionReturn;
 export * from '@digigov/react-core/Accordion';

package/core/Accordion/index.js

@@ -150,7 +150,7 @@ Object.keys(_AccordionControls).forEach(function (key) {
 
 var _withDeprecation = _interopRequireDefault(require("@digigov/ui/utils/withDeprecation"));
 
-var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+var _useTogglableTab2 = require("@digigov/ui/hooks/useTogglableTab");
 
 var _AccordionSectionHeader = require("@digigov/react-core/AccordionSectionHeader");
 
@@ -195,16 +195,16 @@ var AccordionItem = (0, _withDeprecation["default"])( /*#__PURE__*/_react["defau
 exports.AccordionItem = AccordionItem;
 
 var useAccordion = function useAccordion(props) {
-  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+  var _useTogglableTab = (0, _useTogglableTab2.useTogglableTab)({
     toggleProperty: 'open',
     onToggleProperty: 'onToggle',
     singleOpen: props && !!props.singleOpen
   }),
-      register = _useTogglableSections.register,
-      setOpened = _useTogglableSections.setOpened,
-      opened = _useTogglableSections.opened,
-      registered = _useTogglableSections.registered,
-      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded2);
+      register = _useTogglableTab.register,
+      setOpened = _useTogglableTab.setOpened,
+      opened = _useTogglableTab.opened,
+      registered = _useTogglableTab.registered,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableTab, _excluded2);
 
   return (0, _extends2["default"])({
     register: register,

package/core/Divider/__stories__/Default.js

@@ -9,24 +9,19 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Divider = require("@digigov/ui/core/Divider");
+var _SectionBreak = require("@digigov/ui/core/SectionBreak");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true
-});
+var _ref = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, null);
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "m"
 });
 
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "l"
 });
 
-var _ref4 = /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
-  visible: true,
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
   size: "xl"
 });
 

package/core/ErrorSummary/__stories__/Default.js

@@ -11,12 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ErrorSummary = require("@digigov/ui/core/ErrorSummary");
 
-var _Title = require("@digigov/ui/typography/Title");
+var _Heading = require("@digigov/ui/typography/Heading");
 
 var _Link = require("@digigov/ui/core/Link");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Title.Title, {
-  size: "sm"
+var _ref = /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2"));
 
 var Default = function Default() {

package/core/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ErrorSummary = require("@digigov/ui/core/ErrorSummary");
 
-var _Title = require("@digigov/ui/typography/Title");
+var _Heading = require("@digigov/ui/typography/Heading");
 
 var _Link = require("@digigov/ui/core/Link");
 
@@ -27,8 +27,8 @@ var _Checkbox = require("@digigov/ui/core/Checkbox");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   className: "example"
-}, /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Title.Title, {
-  size: "sm"
+}, /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link.Link, {
   href: "#england"
 }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {

package/core/ErrorSummary/__stories__/LinkedToField.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ErrorSummary = require("@digigov/ui/core/ErrorSummary");
 
-var _Title = require("@digigov/ui/typography/Title");
+var _Heading = require("@digigov/ui/typography/Heading");
 
 var _Link = require("@digigov/ui/core/Link");
 
@@ -27,8 +27,8 @@ var _FieldContainer = require("@digigov/ui/core/FieldContainer");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   className: "example"
-}, /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Title.Title, {
-  size: "sm"
+}, /*#__PURE__*/_react["default"].createElement(_ErrorSummary.ErrorSummary, null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_Link.Link, {
   href: "#passport-date"
 }, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, {