@digigov/ui 0.30.3 → 0.32.0

package/esm/typography/NormalText/__stories__/FontSizes.js

@@ -6,37 +6,49 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "14"
 }, " govgr-!-font-size-14 ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "16"
 }, " govgr-!-font-size-16 ");
 
-var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref5 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "19"
 }, " govgr-!-font-size-19 ");
 
-var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref7 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "24"
 }, " govgr-!-font-size-24 ");
 
-var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref9 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "30"
 }, " govgr-!-font-size-30 ");
 
-var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref11 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "48"
 }, " govgr-!-font-size-48 ");
 
-var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref13 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "72"

package/esm/typography/NormalText/__stories__/FontWeight.js

@@ -6,7 +6,9 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   fontWeight: "regular"
 }, " govgr-!-font-weight-regular ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   fontWeight: "bold"

package/esm/typography/NormalText/__stories__/Variants.js

@@ -6,7 +6,9 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   variant: "small"
 }, " govgr-variant-small ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   variant: "lead"

package/hooks/useFontSize.d.ts

@@ -0,0 +1,6 @@
+import { UseVariantVarsResult } from "@digigov/ui/hooks/useVariantVars";
+export declare type FontSizeOptions = 'default' | 'large';
+export declare type StoredFontSizeOptions = FontSizeOptions | null;
+export declare type UseFontSizeResult = UseVariantVarsResult<FontSizeOptions>;
+export declare const useFontSize: () => UseFontSizeResult;
+export default useFontSize;

package/hooks/useFontSize.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFontSize = exports["default"] = void 0;
+
+var _useVariantVars = _interopRequireDefault(require("@digigov/ui/hooks/useVariantVars"));
+
+var useFontSize = function useFontSize() {
+  var config = {
+    'name': 'font-size',
+    'variables': ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl'],
+    'variants': ['default', 'large']
+  };
+  return (0, _useVariantVars["default"])(config);
+};
+
+exports.useFontSize = useFontSize;
+var _default = useFontSize;
+exports["default"] = _default;

package/hooks/useHighlightLinks.d.ts

@@ -0,0 +1,8 @@
+export declare type HighlightLinksOptions = 'default' | 'highlight';
+export declare type StoredHighlightLinksOptions = HighlightLinksOptions | null;
+export declare type UseHighlightLinksResult = [
+    highlightLinks: HighlightLinksOptions,
+    changeHighlightLinks: (selectedHighlightLinks: HighlightLinksOptions) => void
+];
+export declare const useHighlightLinks: () => UseHighlightLinksResult;
+export default useHighlightLinks;

package/hooks/useHighlightLinks.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightLinks = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useHighlightLinks = function useHighlightLinks() {
+  var storedHighlightLinks = localStorage.getItem('--theme-highlight-links');
+
+  var _useState = (0, _react.useState)(storedHighlightLinks || 'default'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      highlightLinks = _useState2[0],
+      changeHighlightLinks = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (highlightLinks === 'highlight') {
+      document.documentElement.classList.add("govgr-highlight-links");
+    } else {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    }
+
+    localStorage.setItem('--theme-highlight-links', highlightLinks);
+  }, [highlightLinks]);
+  (0, _react.useEffect)(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      document.documentElement.classList.add(localStorage.getItem('--theme-highlight-links') === 'highlight' ? "govgr-highlight-links" : '');
+    };
+
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return [highlightLinks, changeHighlightLinks];
+};
+
+exports.useHighlightLinks = useHighlightLinks;
+var _default = useHighlightLinks;
+exports["default"] = _default;

package/hooks/useLetterSpacing.d.ts

@@ -0,0 +1,6 @@
+import { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+export declare type LetterSpacingOptions = 'default' | 'extra';
+export declare type StoredLetterSpacingOptions = LetterSpacingOptions | null;
+export declare type UseLetterSpacingResult = UseVariantVarsResult<LetterSpacingOptions>;
+export declare const useLetterSpacing: () => UseLetterSpacingResult;
+export default useLetterSpacing;

package/hooks/useLetterSpacing.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLetterSpacing = exports["default"] = void 0;
+
+var _useVariantVars = _interopRequireDefault(require("@digigov/ui/hooks/useVariantVars"));
+
+var useLetterSpacing = function useLetterSpacing() {
+  var config = {
+    name: 'letter-spacing',
+    variables: ["letter-spacing-normal", "letter-spacing-wide", "letter-spacing-wider", "letter-spacing-widest"],
+    variants: ['default', 'extra']
+  };
+  return (0, _useVariantVars["default"])(config);
+};
+
+exports.useLetterSpacing = useLetterSpacing;
+var _default = useLetterSpacing;
+exports["default"] = _default;

package/hooks/useLineHeight.d.ts

@@ -0,0 +1,6 @@
+import { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+export declare type LineHeightOptions = 'default' | 'large';
+export declare type StoredLineHeightOptions = LineHeightOptions | null;
+export declare type UseLineHeightResult = UseVariantVarsResult<LineHeightOptions>;
+export declare const useLineHeight: () => UseLineHeightResult;
+export default useLineHeight;

package/hooks/useLineHeight.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineHeight = exports["default"] = void 0;
+
+var _useVariantVars = _interopRequireDefault(require("@digigov/ui/hooks/useVariantVars"));
+
+var useLineHeight = function useLineHeight() {
+  var config = {
+    name: 'line-height',
+    variables: ["line-h-sm", "line-h-base", "line-h-lg", "line-h-xl", "line-h-2xl", "line-h-3xl", "line-h-4xl", "line-h-5xl"],
+    variants: ['default', 'large']
+  };
+  return (0, _useVariantVars["default"])(config);
+};
+
+exports.useLineHeight = useLineHeight;
+var _default = useLineHeight;
+exports["default"] = _default;

package/hooks/useNavList.d.ts

@@ -1,5 +1,5 @@
-import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
-export interface UseNavListReturn extends UseTogglableSectionsReturn {
+import { UseTogglableNavReturn } from '@digigov/ui/hooks/useTogglableNav';
+export interface UseNavListReturn extends UseTogglableNavReturn {
     container: (key: string) => {
         active: boolean;
         id: string;

package/hooks/useNavList.js

@@ -11,25 +11,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _useTogglableNav2 = require("@digigov/ui/hooks/useTogglableNav");
 
-var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+var _react = require("react");
 
-var _excluded = ["register", "opened"];
+var _excluded = ["registerButton", "registerLink", "opened"];
 
 var useNavList = function useNavList() {
   var registeredContainers = (0, _react.useRef)({});
 
-  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+  var _useTogglableNav = (0, _useTogglableNav2.useTogglableNav)({
     singleOpen: true,
     toggleOpenClose: true,
+    toggleParentOpen: true,
     toggleProperty: 'active',
     onToggleProperty: 'onClick',
     ariaNavigation: true
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
+      registerButton = _useTogglableNav.registerButton,
+      registerLink = _useTogglableNav.registerLink,
+      opened = _useTogglableNav.opened,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableNav, _excluded);
 
   var container = (0, _react.useCallback)(function (key) {
     return {
@@ -43,7 +45,8 @@ var useNavList = function useNavList() {
     };
   }, [opened]);
   return (0, _extends2["default"])({
-    register: register,
+    registerButton: registerButton,
+    registerLink: registerLink,
     opened: opened,
     container: container
   }, rest);

package/hooks/useTheme.d.ts

@@ -1,8 +1,8 @@
 export declare type ThemeSelectOptions = 'light' | 'dark' | 'auto';
 export declare type StoredThemeOptions = ThemeSelectOptions | null;
-export interface UseThemeResult {
-    theme: ThemeSelectOptions;
-    changeTheme: (selectedTheme: ThemeSelectOptions) => void;
-}
+export declare type UseThemeResult = [
+    theme: ThemeSelectOptions,
+    changeTheme: (selectedTheme: ThemeSelectOptions) => void
+];
 export declare const useTheme: () => UseThemeResult;
 export default useTheme;

package/hooks/useTheme.js

@@ -11,11 +11,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-;
-
 var useTheme = function useTheme() {
   var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  var storedTheme = localStorage.getItem('theme');
+  var storedTheme = localStorage.getItem('--theme-palette');
 
   var _useState = (0, _react.useState)(storedTheme || 'auto'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -23,21 +21,33 @@ var useTheme = function useTheme() {
       changeTheme = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
+
     if (theme === 'auto') {
-      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
     } else {
-      document.documentElement.className = theme;
+      document.documentElement.classList.add(theme);
     }
 
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('--theme-palette', theme);
   }, [theme]);
   (0, _react.useEffect)(function () {
     var beforePrintListener = function beforePrintListener() {
-      document.documentElement.className = 'light';
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
     };
 
     var afterPrintListener = function afterPrintListener() {
-      document.documentElement.className = localStorage.getItem('theme') || theme;
+      document.documentElement.classList.remove('light');
+      var localtheme;
+
+      if (localStorage.getItem('--theme-palette') === 'auto') {
+        localtheme = prefersDarkScheme ? 'dark' : 'light';
+      } else {
+        localtheme = localStorage.getItem('--theme-palette');
+      }
+
+      document.documentElement.classList.add(localtheme || theme);
     };
 
     window.addEventListener('beforeprint', beforePrintListener);
@@ -47,10 +57,7 @@ var useTheme = function useTheme() {
       window.removeEventListener('afterprint', afterPrintListener);
     };
   }, []);
-  return {
-    theme: theme,
-    changeTheme: changeTheme
-  };
+  return [theme, changeTheme];
 };
 
 exports.useTheme = useTheme;

package/hooks/useTogglableNav.d.ts

@@ -0,0 +1,25 @@
+export interface UseTogglableNavInterface {
+    toggleProperty: string;
+    singleOpen?: boolean;
+    toggleOpenClose?: boolean;
+    toggleParentOpen?: boolean;
+    onToggleProperty: string;
+    initial?: Record<string, boolean>;
+    firstOpen?: boolean;
+    ariaNavigation?: boolean;
+    toggleHook?: (id: string) => void;
+}
+export interface UseTogglableNavReturn {
+    registerButton: (el: string) => any;
+    registerLink: (el: string) => any;
+    registered: {
+        current: Record<string, {
+            el: HTMLElement;
+            type: string;
+        }>;
+    };
+    opened: Record<string, boolean>;
+    toggle: (id: string) => void;
+    setOpened: (opened: ((curOpened: Record<string, boolean>) => Record<string, boolean>) | Record<string, boolean>) => void;
+}
+export declare function useTogglableNav({ toggleProperty, toggleOpenClose, toggleParentOpen, onToggleProperty, initial, ariaNavigation, toggleHook, }: UseTogglableNavInterface): UseTogglableNavReturn;