@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/es/hooks/useWindowSize.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = (collapseSize) => {
+    const [width, setWidth] = useState();
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return () => { };
+        }
+        const updateSize = () => {
+            setWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', updateSize);
+        // Call handler right away so state gets updated with initial window size
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    if (!width) {
+        return {
+            isMobile: false,
+        };
+    }
+    return {
+        isMobile: width < collapseSize,
+    };
+};
+
+export { useWindowSize as default };

package/build/es/index.js

@@ -1,23 +1,37 @@
 export { default as Accordion } from './components/Accordion/Accordion.js';
-export { default as AccordionItem } from './components/Accordion/AccordionItem.js';
+export { default as AccordionItem } from './components/AccordionItem/AccordionItem.js';
 export { default as AmountSelector } from './components/AmountSelector/AmountSelector.js';
-export { Button } from './components/Buttons/ButtonDefault.js';
-export { default as ButtonPrimary } from './components/Buttons/ButtonPrimary.js';
-export { default as ButtonSecondary } from './components/Buttons/ButtonSecondary.js';
-export { default as ButtonTertiary } from './components/Buttons/ButtonTertiary.js';
-export { default as ButtonRound } from './components/Buttons/ButtonRound.js';
-export { default as CloseButton } from './components/Buttons/CloseButton.js';
-export { default as ButtonIcon } from './components/Buttons/ButtonIcon.js';
-export { default as ButtonIconPrimary } from './components/Buttons/ButtonIconPrimary.js';
-export { default as Card } from './components/Card/Card.js';
-export { default as CardRow } from './components/Card/CardRow.js';
+export { default as Box } from './components/Box/Box.js';
+export { default as Button } from './components/Button/Button.js';
+export { default as ButtonClose } from './components/Button/ButtonClose.js';
+export { default as ButtonIcon } from './components/Button/ButtonIcon.js';
+export { default as ButtonPrimary } from './components/Button/ButtonPrimary.js';
+export { default as ButtonRound } from './components/Button/ButtonRound.js';
+export { default as ButtonSecondary } from './components/Button/ButtonSecondary.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as DnaLogo } from './components/DnaLogo/DnaLogo.js';
 export { default as EmptyState } from './components/EmptyState/EmptyState.js';
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as Helper } from './components/Helper/Helper.js';
 export { default as Icon } from './components/Icon/Icon.js';
-export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hobbies, hotdog, house, hub, idCard, info, iot1, iot2, iot3, ip, key, kids, laptop, leaf, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x } from './components/Icon/Icons.js';
+export { default as hlArrowBackSmall } from './components/Icons/Small/hlArrowBackSmall.js';
+export { default as hlArrowForwardSmall } from './components/Icons/Small/hlArrowForwardSmall.js';
+export { default as hlArrowUnderSmall } from './components/Icons/Small/hlArrowUnderSmall.js';
+export { default as hlCalendarSmall } from './components/Icons/Small/hlCalendarSmall.js';
+export { default as hlChevronDownSmall } from './components/Icons/Small/hlChevronDownSmall.js';
+export { default as hlChevronLeftSmall } from './components/Icons/Small/hlChevronLeftSmall.js';
+export { default as hlChevronRightSmall } from './components/Icons/Small/hlChevronRightSmall.js';
+export { default as hlChevronUpSmall } from './components/Icons/Small/hlChevronUpSmall.js';
+export { default as hlClockSmall } from './components/Icons/Small/hlClockSmall.js';
+export { default as hlDownloadSmall } from './components/Icons/Small/hlDownloadSmall.js';
+export { default as hlExternalSmall } from './components/Icons/Small/hlExternalSmall.js';
+export { default as hlUploadSmall } from './components/Icons/Small/hlUploadSmall.js';
+export { default as facebook } from './components/Icons/Social/facebook.js';
+export { default as instagram } from './components/Icons/Social/instagram.js';
+export { default as linkedin } from './components/Icons/Social/linkedin.js';
+export { default as tiktok } from './components/Icons/Social/tiktok.js';
+export { default as twitter } from './components/Icons/Social/twitter.js';
+export { default as youtube } from './components/Icons/Social/youtube.js';
 export { default as hl404 } from './components/Icons/hl404.js';
 export { default as hl4gSim } from './components/Icons/hl4gSim.js';
 export { default as hl5gSim } from './components/Icons/hl5gSim.js';
@@ -30,7 +44,7 @@ export { default as hlCameraFront } from './components/Icons/hlCameraFront.js';
 export { default as hlCart } from './components/Icons/hlCart.js';
 export { default as hlCartEmpty } from './components/Icons/hlCartEmpty.js';
 export { default as hlChat } from './components/Icons/hlChat.js';
-export { default as hlCheck } from './components/Icons/hlCheck.js';
+export { default as hlCheck, hlSuccess } from './components/Icons/hlCheck.js';
 export { default as hlChevronDown } from './components/Icons/hlChevronDown.js';
 export { default as hlChevronLeft } from './components/Icons/hlChevronLeft.js';
 export { default as hlChevronRight } from './components/Icons/hlChevronRight.js';
@@ -101,38 +115,20 @@ export { default as hlUnlock } from './components/Icons/hlUnlock.js';
 export { default as hlUpload } from './components/Icons/hlUpload.js';
 export { default as hlWarning } from './components/Icons/hlWarning.js';
 export { default as hlWifi } from './components/Icons/hlWifi.js';
+export { default as hlWrench } from './components/Icons/hlWrench.js';
 export { default as hlX } from './components/Icons/hlX.js';
-export { hlArrowBack, default as hlArrowBackSmall, hlArrowSmallLeft } from './components/Icons/Small/hlArrowBackSmall.js';
-export { hlArrowForward, default as hlArrowForwardSmall, hlArrowSmallRight } from './components/Icons/Small/hlArrowForwardSmall.js';
-export { hlArrowSmallUnder, default as hlArrowUnderSmall } from './components/Icons/Small/hlArrowUnderSmall.js';
-export { default as hlCalendarSmall } from './components/Icons/Small/hlCalendarSmall.js';
-export { default as hlChevronDownSmall } from './components/Icons/Small/hlChevronDownSmall.js';
-export { default as hlChevronLeftSmall } from './components/Icons/Small/hlChevronLeftSmall.js';
-export { default as hlChevronRightSmall } from './components/Icons/Small/hlChevronRightSmall.js';
-export { default as hlChevronUpSmall } from './components/Icons/Small/hlChevronUpSmall.js';
-export { default as hlClockSmall } from './components/Icons/Small/hlClockSmall.js';
-export { default as hlDownloadSmall } from './components/Icons/Small/hlDownloadSmall.js';
-export { default as hlExternalSmall } from './components/Icons/Small/hlExternalSmall.js';
-export { default as hlUploadSmall } from './components/Icons/Small/hlUploadSmall.js';
-export { default as facebook } from './components/Icons/Social/facebook.js';
-export { default as instagram } from './components/Icons/Social/instagram.js';
-export { default as linkedin } from './components/Icons/Social/linkedin.js';
-export { default as tiktok } from './components/Icons/Social/tiktok.js';
-export { default as twitter } from './components/Icons/Social/twitter.js';
-export { default as youtube } from './components/Icons/Social/youtube.js';
-export { default as Image } from './components/Image/Image.js';
 export { default as Input } from './components/Input/Input.js';
 export { default as Label } from './components/Label/Label.js';
 export { default as LabelText } from './components/LabelText/LabelText.js';
 export { default as MainNavigation } from './components/MainNavigation/MainNavigation.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as Notification } from './components/Notification/Notification.js';
-export { NotificationBadge } from './components/NotificationBadge/NotificationBadge.js';
+export { default as NotificationBadge } from './components/NotificationBadge/NotificationBadge.js';
+export { default as Pill } from './components/Pill/Pill.js';
 export { default as PixelLoader } from './components/PixelLoader/PixelLoader.js';
 export { default as ProgressIndicator } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as ReadMore } from './components/ReadMore/ReadMore.js';
-export { default as Ribbon } from './components/Ribbon/Ribbon.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SecondaryNavigation } from './components/SecondaryNavigation/SecondaryNavigation.js';
 export { default as Selectbox } from './components/Selectbox/Selectbox.js';
@@ -140,6 +136,7 @@ export { default as Switch } from './components/Switch/Switch.js';
 export { default as Tab, TabStyle } from './components/Tabs/Tab.js';
 export { Tablist, default as Tabs } from './components/Tabs/Tabs.js';
 export { default as Textarea } from './components/Textarea/Textarea.js';
+export { default as Toaster } from './components/Toaster/Toaster.js';
 export { default as Tooltip } from './components/Tooltip/Tooltip.js';
 export { default as TooltipMenu } from './components/TooltipMenu/TooltipMenu.js';
 export { default as createStyled } from './utils/createStyled.js';

package/build/es/themes/globalStyles.d.ts

@@ -11,36 +11,92 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         };
     };
     breakpoints: import("./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;
@@ -98,6 +154,13 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }>>;
 export declare const CheckboxAndRadioInputCore: import("styled-components").StyledComponent<"input", {
     base: {
@@ -111,36 +174,92 @@ export declare const CheckboxAndRadioInputCore: import("styled-components").Styl
         };
     };
     breakpoints: import("./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;
@@ -198,6 +317,13 @@ export declare const CheckboxAndRadioInputCore: import("styled-components").Styl
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {}, never>;
 declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     base: {
@@ -211,36 +337,92 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         };
     };
     breakpoints: import("./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;
@@ -298,5 +480,12 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }>;
 export default _default;