@dnanpm/styleguide 3.8.1 → 3.8.2

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -19,7 +19,7 @@ const Element = styled.li `
     `};
 
     &:focus-within {
-        & > * {
+        & > *:not(a, span.dnasg-icon) {
             border-radius: ${theme.radius.s};
             border: 2px solid ${theme.color.focus.light};
             box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
@@ -35,6 +35,15 @@ const Element = styled.li `
         border-bottom: 3px solid ${isActive ? theme.color.text.pink : 'transparent'};
     `}
 
+    & > a {
+        &:focus-visible {
+            border-radius: ${theme.radius.s};
+            border: 2px solid ${theme.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+            outline: none;
+        }
+    }
+
     & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};

package/build/es/components/index.d.ts

@@ -31,6 +31,7 @@ export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
 export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
+export { default as Overlay } from './Overlay/Overlay';
 export { default as Pill } from './Pill/Pill';
 export { default as PixelLoader } from './PixelLoader/PixelLoader';
 export { default as PriorityNavigation } from './PriorityNavigation/PriorityNavigation';

package/build/es/hooks/useResizeObserver.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T> | undefined) => {
+declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T>) => {
     ref: RefObject<T> | undefined;
     width: number;
     height: number;

package/build/es/hooks/useScrollPosition.d.ts

@@ -12,7 +12,9 @@ interface ScrollPositionProps {
     currPos: ScrollPosition;
 }
 declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    (effect: {
+        ({ prevPos, currPos }: ScrollPositionProps): void;
+    }, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
     defaultProps: {
         element: boolean;
         useWindow: boolean;

package/build/es/index.js

@@ -139,6 +139,7 @@ export { default as MainNavigation } from './components/MainNavigation/MainNavig
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as Notification } from './components/Notification/Notification.js';
 export { default as NotificationBadge } from './components/NotificationBadge/NotificationBadge.js';
+export { default as Overlay } from './components/Overlay/Overlay.js';
 export { default as Pill } from './components/Pill/Pill.js';
 export { default as PixelLoader } from './components/PixelLoader/PixelLoader.js';
 export { default as PriorityNavigation } from './components/PriorityNavigation/PriorityNavigation.js';

package/build/es/themes/themeComponents/base.js

@@ -2,7 +2,7 @@ const base = {
     baseHeight: {
         value: 0.625,
         unit: 'rem',
-    },
+    }, // 10px
     baseWidth: {
         value: 0.625,
         unit: 'rem',

package/build/es/themes/themeComponents/fontSize.js

@@ -1,17 +1,17 @@
 const fontSize = {
-    default: '1rem',
-    xl: '1.25rem',
-    l: '1.125rem',
-    s: '0.875rem',
-    xs: '0.75rem',
-    h1XL: '2.875rem',
-    h1L: '2.5rem',
-    h1M: '2.125rem',
-    h1S: '1.875rem',
-    h2M: '1.875rem',
-    h2S: '1.625rem',
-    h3: '1.5rem',
-    h4: '1.25rem',
+    default: '1rem', // 16px
+    xl: '1.25rem', // 20px
+    l: '1.125rem', // 18px
+    s: '0.875rem', // 14px
+    xs: '0.75rem', // 12px
+    h1XL: '2.875rem', // 46px
+    h1L: '2.5rem', // 40px
+    h1M: '2.125rem', // 34px
+    h1S: '1.875rem', // 30px
+    h2M: '1.875rem', // 30px
+    h2S: '1.625rem', // 26px
+    h3: '1.5rem', // 24px
+    h4: '1.25rem', // 20px
     h5: '1rem', // 16px
 };
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);

package/build/es/themes/themeComponents/forms.js

@@ -1,5 +1,5 @@
 const forms = {
-    smallSelectWidth: '12rem',
+    smallSelectWidth: '12rem', // 192px
     smallSelectHeight: '2.5rem', // 40px
 };
 

package/build/es/themes/themeComponents/lineHeight.js

@@ -1,18 +1,18 @@
 const lineHeight = {
-    default: '1.5rem',
-    xl: '1.625rem',
-    s: '1.125rem',
-    xs: '1rem',
-    xxs: '0.875rem',
+    default: '1.5rem', // 24px
+    xl: '1.625rem', // 26px
+    s: '1.125rem', // 18px
+    xs: '1rem', // 16px
+    xxs: '0.875rem', // 14px
     auto: 'inherit',
-    h1XL: '3rem',
-    h1L: '2.875rem',
-    h1M: '2.5rem',
-    h1S: '2.25rem',
-    h2M: '2.25rem',
-    h2S: '2rem',
-    h3: '1.875rem',
-    h4: '1.5rem',
+    h1XL: '3rem', // 48px
+    h1L: '2.875rem', // 46px
+    h1M: '2.5rem', // 40px
+    h1S: '2.25rem', // 36px
+    h2M: '2.25rem', // 36px
+    h2S: '2rem', // 32px
+    h3: '1.875rem', // 30px
+    h4: '1.5rem', // 24px
     h5: '1rem', // 16px
 };
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);

package/build/es/utils/common.d.ts

@@ -1,6 +1,6 @@
 import type { ElevationLevel } from '../types/elevation.d';
 declare const getElevationShadow: ({ elevation, shadow, }: {
     elevation: ElevationLevel;
-    shadow?: string | undefined;
+    shadow?: string;
 }) => string;
 export default getElevationShadow;

package/build/es/utils/createStyled.d.ts

@@ -1,167 +1,6 @@
 import * as styledComponents from 'styled-components';
-declare const createStyled: <T extends {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}>() => {
+import type { ThemeInterface } from '../themes/theme';
+declare const createStyled: <T extends ThemeInterface>() => {
     styled: styledComponents.ThemedStyledInterface<T>;
     css: styledComponents.ThemedCssFunction<T>;
     createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, T>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, T>>[]) => styledComponents.GlobalStyleComponent<P, T>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.8.1",
+    "version": "v3.8.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -12,12 +12,13 @@
     "author": "DNA",
     "license": "ISC",
     "keywords": [
+        "DNA",
         "styleguide",
         "theme"
     ],
     "repository": {
         "type": "git",
-        "url": "ssh://git@oakdvcs.dna.fi:7999/dsg/styleguide.git"
+        "url": "git@github.com:DNA-Online-Services/styleguide.git"
     },
     "scripts": {
         "build": "rm -rf build && rollup -c",
@@ -39,69 +40,68 @@
         "not op_mini all"
     ],
     "devDependencies": {
-        "@babel/core": "^7.22.11",
-        "@babel/preset-env": "^7.22.10",
-        "@babel/preset-react": "^7.22.5",
-        "@babel/preset-typescript": "^7.22.11",
+        "@babel/core": "^7.25.8",
+        "@babel/preset-env": "^7.25.8",
+        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-typescript": "^7.25.7",
         "@dnanpm/icons": "2.0.3",
-        "@rollup/plugin-commonjs": "^25.0.4",
-        "@rollup/plugin-node-resolve": "^15.2.1",
-        "@rollup/plugin-typescript": "^11.1.5",
-        "@testing-library/jest-dom": "^6.3.0",
-        "@testing-library/react": "^14.1.2",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-typescript": "^12.1.1",
+        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.11",
-        "@types/node": "^14.14.22",
+        "@types/jest": "^29.5.13",
+        "@types/node": "^14.18.63",
         "@types/ramda": "^0.27.36",
-        "@types/react": "^18.2.27",
-        "@types/react-datepicker": "^4.19.4",
-        "@types/react-dom": "^18.2.12",
+        "@types/react": "^18.3.11",
+        "@types/react-datepicker": "^6.2.0",
+        "@types/react-dom": "^18.3.1",
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
         "@types/styled-components": "^5.1.7",
-        "@typescript-eslint/eslint-plugin": "^5.31.0",
-        "@typescript-eslint/parser": "^5.31.0",
-        "babel-loader": "^9.1.3",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
+        "babel-loader": "^9.2.1",
         "cross-env": "^7.0.3",
-        "css-loader": "^6.8.1",
-        "eslint": "^8.20.0",
+        "css-loader": "^6.11.0",
+        "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-airbnb-typescript": "^17.0.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "^39.3.3",
-        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-config-airbnb-typescript": "^17.1.0",
+        "eslint-config-prettier": "^8.10.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-jsdoc": "^39.9.1",
+        "eslint-plugin-jsx-a11y": "^6.10.1",
         "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-react": "^7.30.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",
-        "mini-css-extract-plugin": "^2.7.6",
-        "prettier": "^2.7.1",
-        "react": "^18.2.0",
+        "mini-css-extract-plugin": "^2.9.1",
+        "prettier": "^2.8.8",
+        "react": "^18.3.1",
         "react-docgen": "^5.4.3",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
-        "react-styleguidist": "^13.1.1",
-        "rollup": "^2.79.1",
-        "rollup-plugin-import-css": "^3.3.1",
+        "react-dom": "^18.3.1",
+        "react-styleguidist": "^13.1.3",
+        "rollup": "^3.29.4",
+        "rollup-plugin-import-css": "^3.5.5",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
-        "ts-jest": "^29.1.2",
+        "ts-jest": "^29.2.5",
         "ts-node": "^10.9.2",
-        "tslib": "^2.1.0",
-        "typescript": "^4.1.3",
-        "webpack": "^5.88.2"
+        "tslib": "^2.8.0",
+        "typescript": "^5.1.6",
+        "webpack": "^5.95.0"
     },
     "dependencies": {
-        "lazysizes": "^5.3.0",
         "ramda": "^0.27.1",
-        "react-datepicker": "^4.24.0",
+        "react-datepicker": "^6.9.0",
         "react-modal": "^3.16.1",
-        "react-select": "^5.7.0",
+        "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
-        "react-tooltip": "^5.21.5"
+        "react-tooltip": "^5.28.0"
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",