@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/es/components/MainNavigation/context/NavContext.js

@@ -1,22 +1,37 @@
-import React from 'react';
+import React__default from 'react';
 
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-// const NavContext = React.createContext<MainNavigationProps>({
-const NavContext = React.createContext({
-    lang: 'fi',
-    navZIndex: null,
-    menuLevel: {},
-    handleNavMenuClick: null,
-    getBackLink: {},
-    isMobileMenu: null,
-    items: {},
-    level1Items: {},
-    level2Items: {},
-    resetMenuEvents: null,
-    loginComponent: null,
-    nextJSLinkComponent: null,
-    collapseSize: null,
+const NavContext = React__default.createContext({
+    collapseSize: 767,
+    currentUrl: '',
+    getBackLink: () => ({ id: '', pages: [], titles: {}, urls: {} }),
+    handleNavMenuClick: () => { },
+    handleToggleClick: () => { },
     isLoggedIn: false,
+    isMobileMenu: false,
+    isMobileMenuOpen: false,
+    items: {},
+    lang: 'fi',
+    loginComponent: false,
+    menuLevel: {
+        level1: null,
+        animate1: true,
+        level2: null,
+        animate2: true,
+        level1Mobile: null,
+        level2Mobile: null,
+        scrollPosition: 0,
+        hideOnScroll: false,
+    },
+    minicartComponent: undefined,
+    navZIndex: 1030,
+    nextJSLinkComponent: false,
+    resetMenuEvents: () => { },
+    searchComponent: false,
+    tooltipItems: {
+        minicart: false,
+        login: false,
+        search: false,
+    },
 });
 
-export default NavContext;
+export { NavContext as default };

package/build/es/components/MainNavigation/globalNavStyles.d.ts

@@ -10,36 +10,92 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -97,6 +153,13 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
 }, never>;
@@ -112,36 +175,92 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -199,6 +318,13 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
 }, never>;
@@ -214,36 +340,92 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -301,6 +483,13 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
     isHighlighted?: boolean | undefined;
@@ -317,36 +506,92 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         };
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -404,6 +649,13 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isInView?: boolean | undefined;
 }, never>;

package/build/es/components/MainNavigation/globalNavStyles.js

@@ -1,13 +1,14 @@
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 
 const MenuItem = styled.li `
     position: relative;
     padding: 0;
     margin: 0;
     height: 100%;
-    color: ${p => p.theme.color.text};
+    color: ${theme.color.text.black};
     & > a {
-        color: ${p => (p.isActive ? p.theme.color.hotPink : p.theme.color.text)};
+        color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
     }
 `;
 const MenuLink = styled.a `
@@ -27,13 +28,13 @@ const MenuLink = styled.a `
     display: block;
     text-decoration: none;
     text-align: left;
-    color: ${p => (p && p.isActive ? p.theme.color.hotPink : p.theme.color.text)};
+    color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
     padding: 0.5em 1em;
     white-space: normal;
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => p.theme.color.hotPink};
+        color: ${theme.color.text.pink};
         cursor: pointer;
         outline: none;
         border-bottom: none;
@@ -50,7 +51,7 @@ const MenuLinkWithChildren = styled.button `
     font-size: inherit;
     font-family: inherit;
     white-space: normal;
-    color: ${p => p && (p.isActive || p.isHighlighted) ? p.theme.color.hotPink : p.theme.color.text};
+    color: ${p => p && (p.isActive || p.isHighlighted) ? theme.color.text.pink : theme.color.default.black};
     padding: 0.5em 1em;
     span {
         position: relative;
@@ -61,13 +62,13 @@ const MenuLinkWithChildren = styled.button `
             bottom: -6px;
             left: 0;
             border-bottom: 1px solid
-                ${p => (p && p.isHighlighted ? p.theme.color.hotPink : 'transparent')};
+                ${p => (p.isHighlighted ? theme.color.default.pink : 'transparent')};
         }
     }
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => p.theme.color.hotPink};
+        color: ${theme.color.text.pink};
         cursor: pointer;
         outline: none;
     }
@@ -81,7 +82,7 @@ const MenuList = styled.ul `
     list-style: none;
     margin: 0;
     padding: 0;
-    background-color: ${p => p.theme.color.white};
+    background-color: ${theme.color.default.white};
     transition: all 300ms ease-in-out;
 `;