@digigov/ui 0.26.7 → 0.27.0

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Fri, 30 Sep 2022 10:47:58 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Oct 2022 14:14:00 GMT and should not be manually modified.
+
+## 0.27.0
+Fri, 14 Oct 2022 14:14:00 GMT
+
+### Minor changes
+
+- update storybook example for Breadcrumb
+- Add ThemeToggleButton component
+
+### Patches
+
+- Hide buttons by default on print. Add inverted logo at govgr/images. Add extra stories at some components.
+- Add SummaryList story with row variations
+- add keyboard logic for modal component
+- Move Autocomplete stories utils to Autocomplete utils for simpler library integration in the Storybook examples
 
 ## 0.26.7
 Fri, 30 Sep 2022 10:47:58 GMT

package/admin/AutoComplete/__stories__/Default.js

@@ -13,10 +13,10 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   cellWidth: "one-third",
   id: "govgr"
 }));

package/admin/AutoComplete/__stories__/WithAutoSelect.js

@@ -13,7 +13,7 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   className: "govgr-btn govgr-btn-primary"
@@ -21,7 +21,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
 
 var WithAutoSelect = function WithAutoSelect() {
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-    source: _utils["default"],
+    source: _utils.suggest,
     autoselect: true,
     id: "govgr" // tStatusResults={(x, y) => {
     //   return `Results x: ${x} y: ${y}`;

package/admin/AutoComplete/__stories__/WithDefaultValue.js

@@ -13,10 +13,10 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   autoselect: true,
   defaultValue: "Germany",
   id: "govgr"

package/admin/AutoComplete/__stories__/WithInLine.js

@@ -13,10 +13,10 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   autoselect: true,
   displayMenu: "inline",
   id: "govgr"

package/admin/AutoComplete/__stories__/WithMinLength.js

@@ -15,10 +15,10 @@ var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
 var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, "This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)"), /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   autoselect: true,
   minLength: 2,
   id: "govgr"

package/admin/AutoComplete/__stories__/WithPlaceHolder.js

@@ -13,10 +13,10 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   autoselect: true,
   placeholder: "Search for a country",
   id: "govgr"

package/admin/AutoComplete/__stories__/WithShowAllValues.js

@@ -13,10 +13,10 @@ var _AutoComplete = _interopRequireDefault(require("@digigov/ui/admin/AutoComple
 
 var _Field = _interopRequireDefault(require("@digigov/ui/core/Field"));
 
-var _utils = _interopRequireDefault(require("@digigov/ui/admin/AutoComplete/__stories__/utils"));
+var _utils = require("@digigov/ui/admin/AutoComplete/utils");
 
 var _ref = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
-  source: _utils["default"],
+  source: _utils.suggest,
   autoselect: true,
   showAllValues: true,
   id: "govgr"

package/admin/AutoComplete/__stories__/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const results: string[];
-export default function suggest(query: string, syncResults: (options: string[]) => void): void;

package/admin/AutoComplete/__stories__/utils.js

@@ -1,15 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = suggest;
-exports.results = void 0;
-var results = ['Afghanistan', 'Akrotiri', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Ashmore and Cartier Islands', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas, The', 'Bahrain', 'Bangladesh', 'Barbados', 'Bassas da India', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Clipperton Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Cook Islands', 'Coral Sea Islands', 'Costa Rica', "Cote d'Ivoire", 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Dhekelia', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Europa Island', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern and Antarctic Lands', 'Gabon', 'Gambia,', 'Gaza Strip', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Glorioso Islands', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island and McDonald Islands', 'Holy See (Vatican City)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Jan Mayen', 'Japan', 'Jersey', 'Jordan', 'Juan de Nova Island', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States of', 'Moldova', 'Monaco', 'Mongolia', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Navassa Island', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paracel Islands', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn Islands', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Pierre and Miquelon', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Spratly Islands', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tromelin Island', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands', 'Wake Island', 'Wallis and Futuna', 'West Bank', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe'];
-exports.results = results;
-
-function suggest(query, syncResults) {
-  syncResults(query ? results.filter(function (result) {
-    return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-  }) : []);
-}
+"use strict";

package/admin/AutoComplete/index.mdx

@@ -3,7 +3,6 @@ id: autocomplete
 title: AutoComplete
 ---
 
-
 Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search 
 through, select from large collections of options and help services get more consistent data.
 

package/admin/AutoComplete/utils.d.ts

@@ -7,3 +7,5 @@ export declare const keyCodes: {
 };
 export declare function isIosDevice(): boolean | undefined;
 export declare function isPrintableKeyCode(keyCode: number): boolean;
+export declare const results: string[];
+export declare function suggest(query: string, syncResults: (options: string[]) => void): void;

package/admin/AutoComplete/utils.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isIosDevice = isIosDevice;
 exports.isPrintableKeyCode = isPrintableKeyCode;
-exports.keyCodes = void 0;
+exports.results = exports.keyCodes = void 0;
+exports.suggest = suggest;
 var keyCodes = {
   13: 'enter',
   27: 'escape',
@@ -27,4 +28,16 @@ function isPrintableKeyCode(keyCode) {
   keyCode > 185 && keyCode < 193 || // ;=,-./` (in order)
   keyCode > 218 && keyCode < 223 // [\]' (in order)
   ;
-}
+}
+/* Helper Utils for __stories__ */
+
+
+var results = ['Afghanistan', 'Akrotiri', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Ashmore and Cartier Islands', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas, The', 'Bahrain', 'Bangladesh', 'Barbados', 'Bassas da India', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'British Virgin Islands', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Clipperton Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Cook Islands', 'Coral Sea Islands', 'Costa Rica', "Cote d'Ivoire", 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Dhekelia', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Europa Island', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern and Antarctic Lands', 'Gabon', 'Gambia,', 'Gaza Strip', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Glorioso Islands', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island and McDonald Islands', 'Holy See (Vatican City)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Jan Mayen', 'Japan', 'Jersey', 'Jordan', 'Juan de Nova Island', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, Federated States of', 'Moldova', 'Monaco', 'Mongolia', 'Montserrat', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Navassa Island', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paracel Islands', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn Islands', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania', 'Russia', 'Rwanda', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Pierre and Miquelon', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia and Montenegro', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Spratly Islands', 'Sri Lanka', 'Sudan', 'Suriname', 'Svalbard', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tromelin Island', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands', 'Wake Island', 'Wallis and Futuna', 'West Bank', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe'];
+exports.results = results;
+
+function suggest(query, syncResults) {
+  syncResults(query ? results.filter(function (result) {
+    return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+  }) : []);
+}
+/* end Helpers Utils __stories__ */

package/admin/Modal/__stories__/AlertDialog.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AlertDialog = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Modal = _interopRequireWildcard(require("@digigov/ui/admin/Modal"));
 
@@ -23,22 +23,6 @@ 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; }
 
-function useModal() {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  function toggleModal() {
-    setOpen(!open);
-  }
-
-  return {
-    open: open,
-    toggleModal: toggleModal
-  };
-}
-
 var _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
   id: "modal-label"
 }, "\u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7");
@@ -48,8 +32,8 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, {
 }, /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "\u0395\u03AF\u03C3\u03C4\u03B5 \u03C3\u03AF\u03B3\u03BF\u03C5\u03C1\u03BF\u03B9 \u03CC\u03C4\u03B9 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B9\u03B1\u03B3\u03C1\u03AC\u03C8\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03AE;"));
 
 var AlertDialog = function AlertDialog() {
-  var _useModal = useModal(),
-      open = _useModal.open,
+  var _useModal = (0, _Modal.useModal)(),
+      modalProps = _useModal.modalProps,
       toggleModal = _useModal.toggleModal;
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
@@ -57,13 +41,16 @@ var AlertDialog = function AlertDialog() {
     onClick: function onClick() {
       return toggleModal();
     }
-  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
-    open: open,
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    color: "warning",
+    onClick: function onClick() {
+      return toggleModal();
+    }
+  }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], (0, _extends2["default"])({}, modalProps, {
     role: "alertdialog",
-    "aria-modal": "true",
     "aria-labelledby": "modal-label",
     "aria-describedby": "modal-content"
-  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  }), _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
     onClick: function onClick() {
       return toggleModal();
     }

package/admin/Modal/__stories__/Default.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Modal = _interopRequireWildcard(require("@digigov/ui/admin/Modal"));
 
@@ -25,22 +25,6 @@ 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; }
 
-function useModal() {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  function toggleModal() {
-    setOpen(!open);
-  }
-
-  return {
-    open: open,
-    toggleModal: toggleModal
-  };
-}
-
 var _ref = /*#__PURE__*/_react["default"].createElement(_Modal.ModalHeading, {
   id: "modal-label"
 }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5");
@@ -53,20 +37,17 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Modal.ModalContent, nu
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u03A5\u03C0\u03BF\u03B2\u03BF\u03BB\u03AE");
 
 var Default = function Default() {
-  var _useModal = useModal(),
-      open = _useModal.open,
-      toggleModal = _useModal.toggleModal;
+  var _useModal = (0, _Modal.useModal)(),
+      toggleModal = _useModal.toggleModal,
+      modalProps = _useModal.modalProps;
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
     onClick: function onClick() {
       return toggleModal();
     }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
-    open: open,
-    role: "dialog",
-    "aria-modal": "true",
+  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7 \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_Modal["default"], (0, _extends2["default"])({}, modalProps, {
     "aria-labelledby": "modal-label"
-  }, _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, _ref3, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  }), _ref, _ref2, /*#__PURE__*/_react["default"].createElement(_Modal.ModalAction, null, _ref3, /*#__PURE__*/_react["default"].createElement(_core.Button, {
     variant: "link",
     onClick: function onClick() {
       return toggleModal();

package/admin/Modal/index.d.ts

@@ -2,5 +2,17 @@ export * from '@digigov/react-extensions/admin/Modal';
 export * from '@digigov/react-extensions/admin/ModalHeading';
 export * from '@digigov/react-extensions/admin/ModalContent';
 export * from '@digigov/react-extensions/admin/ModalAction';
-import Modal from '@digigov/react-extensions/admin/Modal';
+import React from 'react';
+import { ModalProps as ModalContainerProps } from '@digigov/react-extensions/admin/Modal';
+export interface ModalProps extends ModalContainerProps {
+    onEscape?: () => void;
+}
+export declare const useModal: () => {
+    toggleModal: (x?: any) => void;
+    closeModal: () => void;
+    modalProps: ModalProps;
+    modalData: any;
+};
+export declare const Modal: (props: ModalProps) => React.ReactElement | null;
+export declare const ModalBase: ({ open, children, onEscape, ...props }: ModalProps) => React.ReactElement;
 export default Modal;

package/admin/Modal/index.js

@@ -1,12 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-exports["default"] = void 0;
+var _exportNames = {
+  useModal: true,
+  Modal: true,
+  ModalBase: true
+};
+exports.useModal = exports["default"] = exports.ModalBase = exports.Modal = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _Modal = _interopRequireWildcard(require("@digigov/react-extensions/admin/Modal"));
 
@@ -64,9 +76,98 @@ Object.keys(_ModalAction).forEach(function (key) {
   });
 });
 
+var _react = _interopRequireWildcard(require("react"));
+
+var _useKeypress = _interopRequireDefault(require("@digigov/ui/hooks/useKeypress"));
+
+var _excluded = ["open", "children", "onEscape"];
+
 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 _default = _Modal["default"];
+var useModal = function useModal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      modalData = _useState4[0],
+      setModalData = _useState4[1];
+
+  function toggleModal(data) {
+    setOpen(!open);
+
+    if (data) {
+      setModalData(data);
+    }
+  }
+
+  var closeModal = (0, _react.useCallback)(function closeModal() {
+    setOpen(false);
+  }, []);
+  return {
+    toggleModal: toggleModal,
+    closeModal: closeModal,
+    modalData: modalData,
+    modalProps: {
+      onEscape: closeModal,
+      open: open,
+      role: 'dialog',
+      'aria-modal': 'true'
+    }
+  };
+};
+
+exports.useModal = useModal;
+
+var Modal = function Modal(props) {
+  if (props.open) {
+    return /*#__PURE__*/_react["default"].createElement(ModalBase, props);
+  } else {
+    return null;
+  }
+};
+
+exports.Modal = Modal;
+
+var ModalBase = function ModalBase(_ref) {
+  var open = _ref.open,
+      children = _ref.children,
+      onEscape = _ref.onEscape,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var firstModalElement = (0, _react.useRef)();
+  var lastModalElement = (0, _react.useRef)();
+  var handleFocus = (0, _react.useCallback)(function () {
+    firstModalElement.current.focus();
+  }, []);
+  (0, _useKeypress["default"])('Escape', onEscape);
+  (0, _react.useEffect)(function () {
+    handleFocus();
+    lastModalElement.current.addEventListener('focus', handleFocus);
+    return function () {
+      lastModalElement.current.removeEventListener('focus', handleFocus);
+    };
+  }, [open]);
+  return /*#__PURE__*/_react["default"].createElement(_Modal["default"], (0, _extends2["default"])({
+    open: open,
+    role: "dialog"
+  }, props, {
+    "aria-hidden": "false",
+    "aria-modal": "true"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    tabIndex: -1,
+    ref: firstModalElement,
+    "aria-hidden": "true"
+  }), open && children, /*#__PURE__*/_react["default"].createElement("span", {
+    tabIndex: 0,
+    ref: lastModalElement,
+    "aria-hidden": "true"
+  }));
+};
+
+exports.ModalBase = ModalBase;
+var _default = Modal;
 exports["default"] = _default;

package/core/Breadcrumbs/Breadcrumbs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ol>li:nth-child(1)>a"
+                "selector": "html>body>div:nth-child(5)>nav>ol>li:nth-child(1)>a"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ol>li:nth-child(1)>a"
+                "selector": "html>body>div:nth-child(5)>nav>ol>li:nth-child(1)>a"
               }
             },
             {

package/core/Breadcrumbs/__stories__/Default.js

@@ -19,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
   role: "navigation",
-  "aria-label": "navigation"
+  "aria-label": "Breadcrumb"
 }, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsList, null, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {
   href: "#"
 }, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.BreadcrumbsListItem, {

package/core/Button/Button.stories.d.ts

@@ -13,4 +13,5 @@ export * from "./__stories__/Disabled";
 export * from "./__stories__/ButtonLinkButton";
 export * from "./__stories__/Back";
 export * from "./__stories__/WithVariantLink";
+export * from "./__stories__/ThemeToggle";
 import Button from "@digigov/ui/core/Button";

package/core/Button/Button.stories.js

@@ -150,6 +150,20 @@ Object.keys(_WithVariantLink).forEach(function (key) {
   });
 });
 
+var _ThemeToggle = require("./__stories__/ThemeToggle");
+
+Object.keys(_ThemeToggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ThemeToggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ThemeToggle[key];
+    }
+  });
+});
+
 /* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/Core/Button',

package/core/Button/Button.stories.playwright.json

@@ -88,6 +88,28 @@
           "title": "Keyboard navigation"
         }
       ]
+    },
+    "digigov-ui-core-button--theme-toggle": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html"
+              }
+            }
+          ],
+          "id": "wPoD1odPNvOc",
+          "title": "change theme"
+        }
+      ]
     }
   }
 }

package/core/Button/ThemeToggleButton.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps as CoreButtonProps } from '@digigov/react-core/Button';
+export declare type ButtonProps = CoreButtonProps;
+export declare const ThemeToggleButton: () => JSX.Element;
+export default ThemeToggleButton;

package/core/Button/ThemeToggleButton.js

@@ -0,0 +1,54 @@
+"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.ThemeToggleButton = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("@digigov/react-core/Button"));
+
+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 ThemeToggleButton = function ThemeToggleButton() {
+  var _useState = (0, _react.useState)(function () {
+    var currentTheme = localStorage.getItem('theme');
+    var prefersScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return currentTheme || prefersScheme || 'light';
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      theme = _useState2[0],
+      setTheme = _useState2[1];
+
+  function toggleTheme() {
+    if (theme === 'light') {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    localStorage.setItem('theme', theme);
+    document.documentElement.className = theme;
+  }, [theme]);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: toggleTheme,
+    variant: "link",
+    role: "button",
+    "aria-label": "\u0391\u03BD\u03C4\u03B9\u03C3\u03C4\u03C1\u03BF\u03C6\u03AE \u03C7\u03C1\u03C9\u03BC\u03AC\u03C4\u03C9\u03BD"
+  }, "\u0391\u03BD\u03C4\u03B9\u03C3\u03C4\u03C1\u03BF\u03C6\u03AE \u03C7\u03C1\u03C9\u03BC\u03AC\u03C4\u03C9\u03BD");
+};
+
+exports.ThemeToggleButton = ThemeToggleButton;
+var _default = ThemeToggleButton;
+exports["default"] = _default;