@dnanpm/styleguide 2.3.0 → 3.1.0

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

@@ -1,17 +1,24 @@
 export { default as Accordion } from './Accordion/Accordion';
-export { default as AccordionItem } from './Accordion/AccordionItem';
+export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
-export * from './Buttons';
-export * from './Card';
+export { default as Box } from './Box/Box';
+export { default as Button } from './Button/Button';
+export { default as ButtonArrow } from './Button/ButtonArrow';
+export { default as ButtonClose } from './Button/ButtonClose';
+export { default as ButtonIcon } from './Button/ButtonIcon';
+export { default as ButtonPrimary } from './Button/ButtonPrimary';
+export { default as ButtonRound } from './Button/ButtonRound';
+export { default as ButtonSecondary } from './Button/ButtonSecondary';
 export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as Chip } from './Chip/Chip';
+export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
+export { default as Drawer } from './Drawer/Drawer';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';
-export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
-export * from './Icon/Icons';
 export * from './Icons';
-export { default as Image } from './Image/Image';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
@@ -19,17 +26,18 @@ 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 Pill } from './Pill/Pill';
 export { default as PixelLoader } from './PixelLoader/PixelLoader';
 export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as ReadMore } from './ReadMore/ReadMore';
-export { default as Ribbon } from './Ribbon/Ribbon';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab, TabStyle } from './Tabs/Tab';
-export { default as Tabs, Tablist } from './Tabs/Tabs';
-export { default as Textarea, TextareaProps } from './Textarea/Textarea';
+export { Tablist, default as Tabs } from './Tabs/Tabs';
+export { default as Textarea } from './Textarea/Textarea';
+export { default as Toaster } from './Toaster/Toaster';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TooltipMenu } from './TooltipMenu/TooltipMenu';

package/build/es/hooks/modifyBodyClass.js

@@ -13,4 +13,4 @@ function useBodyClass(className) {
     }, [className]);
 }
 
-export default useBodyClass;
+export { useBodyClass as default };

package/build/es/hooks/useCloseOutsideOrElementClicked.js

@@ -30,4 +30,4 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
     });
 };
 
-export default useCloseOutsideOrElementClicked;
+export { useCloseOutsideOrElementClicked as default };

package/build/es/hooks/useDebounceFunc.js

@@ -1,9 +1,9 @@
-import { useCallback, useRef } from 'react';
+import * as React from 'react';
 
 const DEFAULT_DELAY = 400;
 const useDebounceFunc = (func, delay = DEFAULT_DELAY) => {
-    const debounce = useRef();
-    return useCallback((...args) => {
+    const debounce = React.useRef();
+    return React.useCallback((...args) => {
         if (debounce.current)
             clearTimeout(debounce.current);
         debounce.current = setTimeout(() => {

package/build/es/hooks/useDocHeight.js

@@ -1,13 +1,13 @@
-import { useCallback, useEffect } from 'react';
+import * as React from 'react';
 import { useDebounceFunc } from './useDebounceFunc.js';
 
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
-    const setDocHeight = useCallback(() => {
+    const setDocHeight = React.useCallback(() => {
         document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
     const debounceSetDocHeight = useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
-    useEffect(() => {
+    React.useEffect(() => {
         setDocHeight();
         window.addEventListener('resize', debounceSetDocHeight);
         window.addEventListener('orientationchange', debounceSetDocHeight);

package/build/es/hooks/useElementDimensions.js

@@ -30,4 +30,4 @@ function useResizeObserver() {
     return { ref, width: size.width, height: size.height };
 }
 
-export default useResizeObserver;
+export { useResizeObserver as default };

package/build/es/hooks/useOutsideClick.js

@@ -20,4 +20,4 @@ const useOutsideClick = (ref, callback) => {
     });
 };
 
-export default useOutsideClick;
+export { useOutsideClick as default };

package/build/es/hooks/useScrollPosition.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 /* eslint-disable react-hooks/exhaustive-deps */
 const isBrowser = typeof window !== 'undefined';
@@ -24,7 +24,7 @@ const getScrollPosition = (ref) => {
         };
 };
 const useScrollPosition = (effect, deps, element, useWindow, wait) => {
-    const position = React.useRef(getScrollPosition({
+    const position = React__default.useRef(getScrollPosition({
         useWindow,
     }));
     let throttleTimeout = null;
@@ -40,7 +40,7 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
         position.current = currPos;
         throttleTimeout = null;
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (!isBrowser) {
             return undefined;
         }
@@ -65,4 +65,4 @@ useScrollPosition.defaultProps = {
     wait: null,
 };
 
-export default useScrollPosition;
+export { useScrollPosition as default };

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

@@ -0,0 +1,4 @@
+declare const useWindowSize: (collapseSize: number) => {
+    isMobile: boolean;
+};
+export default useWindowSize;

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,28 +1,47 @@
 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 ButtonArrow } from './components/Button/ButtonArrow.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 Chip } from './components/Chip/Chip.js';
+export { default as Divider } from './components/Divider/Divider.js';
 export { default as DnaLogo } from './components/DnaLogo/DnaLogo.js';
+export { default as Drawer } from './components/Drawer/Drawer.js';
 export { default as EmptyState } from './components/EmptyState/EmptyState.js';
+export { default as Floater } from './components/Floater/Floater.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';
 export { default as hlBattery } from './components/Icons/hlBattery.js';
 export { default as hlBell } from './components/Icons/hlBell.js';
+export { default as hlCableTVCard } from './components/Icons/hlCableTVCard.js';
 export { default as hlCalendar } from './components/Icons/hlCalendar.js';
 export { default as hlCall } from './components/Icons/hlCall.js';
 export { default as hlCameraBack } from './components/Icons/hlCameraBack.js';
@@ -30,7 +49,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';
@@ -60,10 +79,13 @@ export { default as hlHeadphones } from './components/Icons/hlHeadphones.js';
 export { default as hlHeadset } from './components/Icons/hlHeadset.js';
 export { default as hlHeart } from './components/Icons/hlHeart.js';
 export { default as hlHome } from './components/Icons/hlHome.js';
+export { default as hlHub } from './components/Icons/hlHub.js';
 export { default as hlImage } from './components/Icons/hlImage.js';
 export { default as hlInfo } from './components/Icons/hlInfo.js';
 export { default as hlInstallment } from './components/Icons/hlInstallment.js';
 export { default as hlIotSim } from './components/Icons/hlIotSim.js';
+export { default as hlLaptop } from './components/Icons/hlLaptop.js';
+export { default as hlLiveVideo } from './components/Icons/hlLiveVideo.js';
 export { default as hlLock } from './components/Icons/hlLock.js';
 export { default as hlMagnifyingGlass } from './components/Icons/hlMagnifyingGlass.js';
 export { default as hlMarker } from './components/Icons/hlMarker.js';
@@ -82,6 +104,7 @@ export { default as hlPaytime } from './components/Icons/hlPaytime.js';
 export { default as hlPen } from './components/Icons/hlPen.js';
 export { default as hlPerson } from './components/Icons/hlPerson.js';
 export { default as hlPhone } from './components/Icons/hlPhone.js';
+export { default as hlPlaylist } from './components/Icons/hlPlaylist.js';
 export { default as hlPlus } from './components/Icons/hlPlus.js';
 export { default as hlPrepaid } from './components/Icons/hlPrepaid.js';
 export { default as hlProcessor } from './components/Icons/hlProcessor.js';
@@ -101,38 +124,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 +145,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';