@laerdal/life-react-components 1.11.0-dev.4 → 1.11.0-dev.40.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/AccordionItem.cjs +5 -3
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.js +5 -3
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +2 -2
- package/dist/Accordion/AccordionMenu.cjs.map +1 -1
- package/dist/Accordion/AccordionMenu.js +2 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/ContentAccordion.cjs +5 -3
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +5 -3
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Accordion/index.cjs.map +1 -1
- package/dist/Accordion/index.js.map +1 -1
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/AuthPage/AuthPage.cjs.map +1 -1
- package/dist/AuthPage/AuthPage.js.map +1 -1
- package/dist/AuthPage/Information.cjs.map +1 -1
- package/dist/AuthPage/Information.js.map +1 -1
- package/dist/AuthPage/ScreenSetsContainer.cjs.map +1 -1
- package/dist/AuthPage/ScreenSetsContainer.js.map +1 -1
- package/dist/AuthPage/_AuthPageSection.cjs.map +1 -1
- package/dist/AuthPage/_AuthPageSection.js.map +1 -1
- package/dist/AuthPage/index.cjs.map +1 -1
- package/dist/AuthPage/index.js.map +1 -1
- package/dist/AuthPage/screenSetsErrorMessages.cjs.map +1 -1
- package/dist/AuthPage/screenSetsErrorMessages.js.map +1 -1
- package/dist/Banners/Banner.cjs +2 -2
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js +2 -2
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Banners/OverviewBanner.cjs +2 -2
- package/dist/Banners/OverviewBanner.cjs.map +1 -1
- package/dist/Banners/OverviewBanner.js +2 -2
- package/dist/Banners/OverviewBanner.js.map +1 -1
- package/dist/Banners/index.cjs.map +1 -1
- package/dist/Banners/index.js.map +1 -1
- package/dist/Banners/styles.cjs.map +1 -1
- package/dist/Banners/styles.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +17 -5
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/Breadcrumb/Breadcrumb.js +18 -6
- package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/Breadcrumb/BreadcrumbItem.cjs.map +1 -1
- package/dist/Breadcrumb/BreadcrumbItem.js.map +1 -1
- package/dist/Breadcrumb/index.cjs.map +1 -1
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Breadcrumb/styles.cjs.map +1 -1
- package/dist/Breadcrumb/styles.js.map +1 -1
- package/dist/Button/BackButton.cjs +2 -2
- package/dist/Button/BackButton.cjs.map +1 -1
- package/dist/Button/BackButton.js +2 -2
- package/dist/Button/BackButton.js.map +1 -1
- package/dist/Button/Button.cjs +2 -2
- package/dist/Button/Button.cjs.map +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/DualFunctionButton.cjs +29 -14
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.js +28 -14
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/Iconbutton.cjs +4 -4
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.js +4 -4
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/Card/HorizontalCard/index.cjs.map +1 -1
- package/dist/Card/HorizontalCard/index.js.map +1 -1
- package/dist/Card/HorizontalCard/types.cjs.map +1 -1
- package/dist/Card/HorizontalCard/types.js.map +1 -1
- package/dist/Card/VerticalCard/Card.cjs +2 -2
- package/dist/Card/VerticalCard/Card.cjs.map +1 -1
- package/dist/Card/VerticalCard/Card.js +2 -2
- package/dist/Card/VerticalCard/Card.js.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +1 -1
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +2 -2
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +2 -2
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChipTypes.cjs.map +1 -1
- package/dist/Chips/ChipTypes.js.map +1 -1
- package/dist/Chips/ChoiceChips.cjs +2 -2
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +2 -2
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +2 -2
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +2 -2
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +2 -2
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +2 -2
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Chips/index.cjs.map +1 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +34 -23
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js +34 -23
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
- package/dist/ChipsInput/ChipInput.cjs +2 -2
- package/dist/ChipsInput/ChipInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipInput.js +2 -2
- package/dist/ChipsInput/ChipInput.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +2 -2
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +2 -2
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.js.map +1 -1
- package/dist/ChipsInput/index.cjs.map +1 -1
- package/dist/ChipsInput/index.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +28 -14
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +28 -14
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +27 -11
- package/dist/Dropdown/DropdownButton.cjs.map +1 -1
- package/dist/Dropdown/DropdownButton.js +27 -11
- package/dist/Dropdown/DropdownButton.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.cjs.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownButtonTypes.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +43 -5
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.d.ts +2 -0
- package/dist/Dropdown/DropdownContent.js +43 -5
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +25 -11
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +25 -11
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/Dropdown/index.cjs.map +1 -1
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.cjs.map +1 -1
- package/dist/Footer/Components/FooterBottomLinks.js.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/Footer/Components/FooterNavSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNavSection.js.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/Footer/Footer.cjs.map +1 -1
- package/dist/Footer/Footer.js.map +1 -1
- package/dist/Footer/SiteFooter.cjs +2 -2
- package/dist/Footer/SiteFooter.cjs.map +1 -1
- package/dist/Footer/SiteFooter.js +2 -2
- package/dist/Footer/SiteFooter.js.map +1 -1
- package/dist/Footer/index.cjs.map +1 -1
- package/dist/Footer/index.js.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +2 -2
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js +2 -2
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -4
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -4
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +0 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +0 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/index.cjs.map +1 -1
- package/dist/GlobalNavigationBar/index.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +24 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +7 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js +8 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +53 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts +6 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +34 -0
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +3 -5
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js +2 -4
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +30 -61
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +30 -57
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +3 -1
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/HyperLink/HyperLink.cjs +2 -2
- package/dist/HyperLink/HyperLink.cjs.map +1 -1
- package/dist/HyperLink/HyperLink.js +2 -2
- package/dist/HyperLink/HyperLink.js.map +1 -1
- package/dist/HyperLink/index.cjs.map +1 -1
- package/dist/HyperLink/index.js.map +1 -1
- package/dist/HyperLink/styling.cjs.map +1 -1
- package/dist/HyperLink/styling.js.map +1 -1
- package/dist/Image/ImageWithFallbacks.cjs +2 -2
- package/dist/Image/ImageWithFallbacks.cjs.map +1 -1
- package/dist/Image/ImageWithFallbacks.js +2 -2
- package/dist/Image/ImageWithFallbacks.js.map +1 -1
- package/dist/Image/index.cjs.map +1 -1
- package/dist/Image/index.js.map +1 -1
- package/dist/InputFields/Checkbox.cjs +3 -2
- package/dist/InputFields/Checkbox.cjs.map +1 -1
- package/dist/InputFields/Checkbox.js +3 -2
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +14 -6
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +1 -1
- package/dist/InputFields/DatepickerField.js +8 -6
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/InputFields/Label.cjs.map +1 -1
- package/dist/InputFields/Label.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +26 -44
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +5 -6
- package/dist/InputFields/NumberField.js +26 -41
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/PasswordField.cjs +2 -2
- package/dist/InputFields/PasswordField.cjs.map +1 -1
- package/dist/InputFields/PasswordField.d.ts +1 -1
- package/dist/InputFields/PasswordField.js +2 -2
- package/dist/InputFields/PasswordField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +2 -2
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.js +2 -2
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.cjs.map +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs +1 -0
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.js +1 -0
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/TextField.cjs +2 -2
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +1 -1
- package/dist/InputFields/TextField.js +2 -2
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/Textarea.cjs +2 -2
- package/dist/InputFields/Textarea.cjs.map +1 -1
- package/dist/InputFields/Textarea.d.ts +2 -2
- package/dist/InputFields/Textarea.js +2 -2
- package/dist/InputFields/Textarea.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/InputFields/components/SearchField.cjs +2 -2
- package/dist/InputFields/components/SearchField.cjs.map +1 -1
- package/dist/InputFields/components/SearchField.js +2 -2
- package/dist/InputFields/components/SearchField.js.map +1 -1
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.js.map +1 -1
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/InputFields/types.cjs.map +1 -1
- package/dist/InputFields/types.d.ts +1 -0
- package/dist/InputFields/types.js.map +1 -1
- package/dist/Layouts/index.cjs.map +1 -1
- package/dist/Layouts/index.js.map +1 -1
- package/dist/LinearProgress/LinearProgress.cjs +2 -2
- package/dist/LinearProgress/LinearProgress.cjs.map +1 -1
- package/dist/LinearProgress/LinearProgress.js +2 -2
- package/dist/LinearProgress/LinearProgress.js.map +1 -1
- package/dist/LinearProgress/index.cjs.map +1 -1
- package/dist/LinearProgress/index.js.map +1 -1
- package/dist/List/ListRow.cjs +2 -2
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.js +2 -2
- package/dist/List/ListRow.js.map +1 -1
- package/dist/List/index.cjs.map +1 -1
- package/dist/List/index.js.map +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.cjs.map +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/LoadingIndicator/index.cjs.map +1 -1
- package/dist/LoadingIndicator/index.js.map +1 -1
- package/dist/LoadingPage/GlobalLoadingPage.cjs.map +1 -1
- package/dist/LoadingPage/GlobalLoadingPage.js.map +1 -1
- package/dist/LoadingPage/index.cjs.map +1 -1
- package/dist/LoadingPage/index.js.map +1 -1
- package/dist/MenuItem/MenuItem.cjs +2 -2
- package/dist/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/MenuItem/MenuItem.d.ts +1 -1
- package/dist/MenuItem/MenuItem.js +2 -2
- package/dist/MenuItem/MenuItem.js.map +1 -1
- package/dist/MenuItem/index.cjs.map +1 -1
- package/dist/MenuItem/index.js.map +1 -1
- package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -1
- package/dist/MiniProductCard/MiniProductCard.js.map +1 -1
- package/dist/MiniProductCard/index.cjs.map +1 -1
- package/dist/MiniProductCard/index.js.map +1 -1
- package/dist/Modals/Modal.cjs.map +1 -1
- package/dist/Modals/Modal.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +3 -3
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.js +3 -3
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +4 -3
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.d.ts +1 -0
- package/dist/Modals/ModalContent.js +4 -3
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +1 -0
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +1 -0
- package/dist/Modals/ModalDialog.js +1 -0
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalNote.cjs.map +1 -1
- package/dist/Modals/ModalNote.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Modals/index.cjs.map +1 -1
- package/dist/Modals/index.js.map +1 -1
- package/dist/NavItem/NavItem.cjs.map +1 -1
- package/dist/NavItem/NavItem.js.map +1 -1
- package/dist/NavItem/index.cjs.map +1 -1
- package/dist/NavItem/index.js.map +1 -1
- package/dist/NotificationDot/NotificationDot.cjs.map +1 -1
- package/dist/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/NotificationDot/index.cjs.map +1 -1
- package/dist/NotificationDot/index.js.map +1 -1
- package/dist/Paginator/Paginator.cjs +2 -2
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js +3 -3
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/Paginator/index.cjs.map +1 -1
- package/dist/Paginator/index.js.map +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Popover/index.cjs.map +1 -1
- package/dist/Popover/index.js.map +1 -1
- package/dist/ProfileButton/ProfileButton.cjs +2 -2
- package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
- package/dist/ProfileButton/ProfileButton.d.ts +1 -1
- package/dist/ProfileButton/ProfileButton.js +2 -2
- package/dist/ProfileButton/ProfileButton.js.map +1 -1
- package/dist/ProfileButton/index.cjs.map +1 -1
- package/dist/ProfileButton/index.js.map +1 -1
- package/dist/QuizButton/QuizButton.cjs +5 -3
- package/dist/QuizButton/QuizButton.cjs.map +1 -1
- package/dist/QuizButton/QuizButton.js +5 -3
- package/dist/QuizButton/QuizButton.js.map +1 -1
- package/dist/QuizButton/index.cjs.map +1 -1
- package/dist/QuizButton/index.js.map +1 -1
- package/dist/SegmentControl/SegmentControl.cjs +2 -2
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
- package/dist/SegmentControl/SegmentControl.js +2 -2
- package/dist/SegmentControl/SegmentControl.js.map +1 -1
- package/dist/SegmentControl/index.cjs.map +1 -1
- package/dist/SegmentControl/index.js.map +1 -1
- package/dist/Services/functions.cjs.map +1 -1
- package/dist/Services/functions.js.map +1 -1
- package/dist/SideMenu/SideMenu.cjs +2 -2
- package/dist/SideMenu/SideMenu.cjs.map +1 -1
- package/dist/SideMenu/SideMenu.js +2 -2
- package/dist/SideMenu/SideMenu.js.map +1 -1
- package/dist/SideMenu/SideMenuBody.cjs.map +1 -1
- package/dist/SideMenu/SideMenuBody.js.map +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs +2 -2
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -1
- package/dist/SideMenu/SideMenuFooter.js +2 -2
- package/dist/SideMenu/SideMenuFooter.js.map +1 -1
- package/dist/SideMenu/SideMenuHeader.cjs +2 -2
- package/dist/SideMenu/SideMenuHeader.cjs.map +1 -1
- package/dist/SideMenu/SideMenuHeader.js +2 -2
- package/dist/SideMenu/SideMenuHeader.js.map +1 -1
- package/dist/SideMenu/index.cjs.map +1 -1
- package/dist/SideMenu/index.js.map +1 -1
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/SkipToContent/SkipToContent.cjs +5 -0
- package/dist/SkipToContent/SkipToContent.cjs.map +1 -1
- package/dist/SkipToContent/SkipToContent.d.ts +3 -1
- package/dist/SkipToContent/SkipToContent.js +4 -0
- package/dist/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/SkipToContent/index.cjs.map +1 -1
- package/dist/SkipToContent/index.js.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.cjs +56 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -0
- package/dist/Switcher/MobileCustomMenuContent.d.ts +8 -0
- package/dist/Switcher/MobileCustomMenuContent.js +39 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +17 -4
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
- package/dist/Switcher/MobileSwitcherMenu.js +16 -4
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/Switcher/index.cjs.map +1 -1
- package/dist/Switcher/index.js.map +1 -1
- package/dist/Table/Table.cjs +17 -9
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +17 -9
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +8 -7
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.d.ts +1 -3
- package/dist/Table/TableBody.js +8 -7
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableHeaders.cjs +2 -2
- package/dist/Table/TableHeaders.cjs.map +1 -1
- package/dist/Table/TableHeaders.js +2 -2
- package/dist/Table/TableHeaders.js.map +1 -1
- package/dist/Table/TableStyles.cjs +1 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +1 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +6 -1
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Table/index.cjs.map +1 -1
- package/dist/Table/index.d.ts +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +2 -2
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +2 -2
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/TabLink.cjs +16 -20
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.d.ts +1 -1
- package/dist/Tabs/TabLink.js +17 -20
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Tabs/Tabs.cjs.map +1 -1
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/VerticalTabs.cjs +1 -2
- package/dist/Tabs/VerticalTabs.cjs.map +1 -1
- package/dist/Tabs/VerticalTabs.d.ts +1 -3
- package/dist/Tabs/VerticalTabs.js +1 -2
- package/dist/Tabs/VerticalTabs.js.map +1 -1
- package/dist/Tabs/index.cjs.map +1 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tag/Tag.cjs +2 -2
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +2 -2
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/index.cjs.map +1 -1
- package/dist/Tag/index.js.map +1 -1
- package/dist/Tile/Tile.cjs +2 -2
- package/dist/Tile/Tile.cjs.map +1 -1
- package/dist/Tile/Tile.js +2 -2
- package/dist/Tile/Tile.js.map +1 -1
- package/dist/Tile/TileBody.cjs.map +1 -1
- package/dist/Tile/TileBody.d.ts +1 -0
- package/dist/Tile/TileBody.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +2 -2
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileFooter.cjs.map +1 -1
- package/dist/Tile/TileFooter.js.map +1 -1
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Tile/index.cjs.map +1 -1
- package/dist/Tile/index.js.map +1 -1
- package/dist/Toasters/Toast.cjs +2 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -2
- package/dist/Toasters/Toast.js.map +1 -1
- package/dist/Toasters/ToastContext.cjs +7 -2
- package/dist/Toasters/ToastContext.cjs.map +1 -1
- package/dist/Toasters/ToastContext.d.ts +6 -4
- package/dist/Toasters/ToastContext.js +6 -2
- package/dist/Toasters/ToastContext.js.map +1 -1
- package/dist/Toasters/index.cjs.map +1 -1
- package/dist/Toasters/index.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +2 -2
- package/dist/Toggles/ToggleButton.cjs.map +1 -1
- package/dist/Toggles/ToggleButton.js +2 -2
- package/dist/Toggles/ToggleButton.js.map +1 -1
- package/dist/Toggles/ToggleSwitch.cjs +2 -2
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +2 -2
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/dist/Toggles/TogglerTypes.cjs.map +1 -1
- package/dist/Toggles/TogglerTypes.js.map +1 -1
- package/dist/Toggles/index.cjs.map +1 -1
- package/dist/Toggles/index.js.map +1 -1
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
- package/dist/Tooltips/TooltipStyles.d.ts +1 -1
- package/dist/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
- package/dist/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +2 -2
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.js +2 -2
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/Tooltips/index.cjs.map +1 -1
- package/dist/Tooltips/index.js.map +1 -1
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs.map +1 -1
- package/dist/common/ActionWithin.js.map +1 -1
- package/dist/common/ClickOutside.cjs.map +1 -1
- package/dist/common/ClickOutside.js.map +1 -1
- package/dist/common/EventHandlers.cjs.map +1 -1
- package/dist/common/EventHandlers.js.map +1 -1
- package/dist/common/FocusOutside.cjs.map +1 -1
- package/dist/common/FocusOutside.js.map +1 -1
- package/dist/common/FocusVisible.cjs.map +1 -1
- package/dist/common/FocusVisible.d.ts +1 -1
- package/dist/common/FocusVisible.js.map +1 -1
- package/dist/common/InputStyling.cjs.map +1 -1
- package/dist/common/InputStyling.js.map +1 -1
- package/dist/common/NavigationHelper.cjs +8 -6
- package/dist/common/NavigationHelper.cjs.map +1 -1
- package/dist/common/NavigationHelper.js +9 -7
- package/dist/common/NavigationHelper.js.map +1 -1
- package/dist/common/ScrollableContainer.cjs +44 -0
- package/dist/common/ScrollableContainer.cjs.map +1 -0
- package/dist/common/ScrollableContainer.d.ts +2 -0
- package/dist/common/ScrollableContainer.js +28 -0
- package/dist/common/ScrollableContainer.js.map +1 -0
- package/dist/common/StackState.cjs.map +1 -1
- package/dist/common/StackState.js.map +1 -1
- package/dist/common/index.cjs.map +1 -1
- package/dist/common/index.js.map +1 -1
- package/dist/icons/contenticons/ContentIcons.cjs +83 -2
- package/dist/icons/contenticons/ContentIcons.cjs.map +1 -1
- package/dist/icons/contenticons/ContentIcons.d.ts +3 -0
- package/dist/icons/contenticons/ContentIcons.js +72 -0
- package/dist/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/icons/index.cjs +14 -7
- package/dist/icons/index.cjs.map +1 -1
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +14 -7
- package/dist/icons/index.js.map +1 -1
- package/dist/icons/systemicons/SystemIcons.cjs +30 -1
- package/dist/icons/systemicons/SystemIcons.cjs.map +1 -1
- package/dist/icons/systemicons/SystemIcons.d.ts +1 -0
- package/dist/icons/systemicons/SystemIcons.js +26 -0
- package/dist/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/breakpoints.cjs.map +1 -1
- package/dist/styles/breakpoints.js.map +1 -1
- package/dist/styles/colors.cjs.map +1 -1
- package/dist/styles/colors.js.map +1 -1
- package/dist/styles/focus-styles.cjs.map +1 -1
- package/dist/styles/focus-styles.js.map +1 -1
- package/dist/styles/global.cjs.map +1 -1
- package/dist/styles/global.js.map +1 -1
- package/dist/styles/index.cjs.map +1 -1
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/shadowstyles.cjs.map +1 -1
- package/dist/styles/shadowstyles.js.map +1 -1
- package/dist/styles/typography.cjs +24 -12
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.d.ts +2 -0
- package/dist/styles/typography.js +24 -12
- package/dist/styles/typography.js.map +1 -1
- package/dist/styles/z-indexes.cjs.map +1 -1
- package/dist/styles/z-indexes.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +50 -44
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n display: flex;\n align-items: center;\n\n button:first-child {\n margin-right: 2px;\n }\n\n div.button-content {\n gap: 0px;\n padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n }\n`;\n\nexport interface ButtonOption {\n label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n dropdownCustomizationProps: DropdownCustomizationProps;\n dropdownMenuValues?: string[];\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n testId,\n disabled,\n id,\n dropdownMenuValues,\n setDropdownMenuValues,\n dropdownCustomizationProps,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, icon, onClick, ...renderProps } = props;\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n const dropdownButtonRef = useClickOutsideRef(\n () => setIsOpen(false),\n [dropdownContainerRef],\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n );\n \n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n return (\n <ButtonsContainer ref={dropdownContainerRef} size={size}>\n <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n {children}\n </Button>\n <DropdownContent\n containerRef={dropdownContainerRef}\n customizationProps={dropdownCustomizationProps}\n filter=\"\"\n ref={dropdownContentRef}\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n isButton={true}\n setIsOpen={setIsOpen}\n focused={focused}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n setFocused={setFocused}\n size={size}\n outline={keyboardNavigated}\n isOpen={isOpen}\n id={dropdownContentId}\n messageOnNoResults=\"\"\n alignLeft={true}\n ariaRolesType=\"menu\"\n />\n </Dropdown>\n <Button\n variant={variant}\n {...renderProps}\n onKeyPress={(e: any) => {\n if (isOpen) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n setFocused(0);\n setKeyboardNavigated(true);\n }\n }}\n testId={'options_toggleBtn'}\n ref={dropdownButtonRef}\n aria-activedescendant={activeDescendant}\n role=\"button\"\n aria-controls={dropdownContentId}\n disabled={disabled}\n type={type}\n size={size}\n minWidth={'unset'}\n onClick={(e) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }}\n icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n flatEdge=\"left\"\n />\n </ButtonsContainer>\n );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
|
|
@@ -8,14 +8,15 @@ var _excluded = ["children", "variant", "type", "size", "width", "testId", "disa
|
|
|
8
8
|
|
|
9
9
|
var _templateObject;
|
|
10
10
|
|
|
11
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
12
|
|
|
13
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
14
|
|
|
15
15
|
import * as React from 'react';
|
|
16
16
|
import Button from './Button';
|
|
17
17
|
import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
|
|
18
18
|
import { Dropdown } from '../Dropdown/CommonStyling';
|
|
19
|
+
import { nanoid } from 'nanoid';
|
|
19
20
|
import { Size } from '../types';
|
|
20
21
|
import DropdownContent from '../Dropdown/DropdownContent';
|
|
21
22
|
import styled from 'styled-components';
|
|
@@ -56,22 +57,27 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
|
|
|
56
57
|
isOpen = _React$useState2[0],
|
|
57
58
|
setIsOpen = _React$useState2[1];
|
|
58
59
|
|
|
59
|
-
var _React$useState3 = React.useState(
|
|
60
|
+
var _React$useState3 = React.useState(),
|
|
60
61
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
activeDescendant = _React$useState4[0],
|
|
63
|
+
setActiveDescendant = _React$useState4[1];
|
|
63
64
|
|
|
64
|
-
var _React$useState5 = React.useState(
|
|
65
|
+
var _React$useState5 = React.useState(null),
|
|
65
66
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
focused = _React$useState6[0],
|
|
68
|
+
setFocused = _React$useState6[1];
|
|
69
|
+
|
|
70
|
+
var _React$useState7 = React.useState(false),
|
|
71
|
+
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
72
|
+
keyboardNavigated = _React$useState8[0],
|
|
73
|
+
setKeyboardNavigated = _React$useState8[1];
|
|
68
74
|
|
|
69
75
|
var dropdownContainerRef = React.useRef(null);
|
|
70
76
|
|
|
71
|
-
var _React$
|
|
72
|
-
_React$
|
|
73
|
-
selectedValues = _React$
|
|
74
|
-
setSelectedValues = _React$
|
|
77
|
+
var _React$useState9 = React.useState([]),
|
|
78
|
+
_React$useState10 = _slicedToArray(_React$useState9, 2),
|
|
79
|
+
selectedValues = _React$useState10[0],
|
|
80
|
+
setSelectedValues = _React$useState10[1];
|
|
75
81
|
|
|
76
82
|
var dropdownContentRef = React.useRef(null);
|
|
77
83
|
var dropdownButtonRef = useClickOutsideRef(function () {
|
|
@@ -79,6 +85,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
|
|
|
79
85
|
}, [dropdownContainerRef], useFocusOutsideRef(function () {
|
|
80
86
|
return setIsOpen(false);
|
|
81
87
|
}, [dropdownContentRef]));
|
|
88
|
+
var dropdownContentId = id ? id + '_dropdownContent' : nanoid();
|
|
82
89
|
React.useEffect(function () {
|
|
83
90
|
!isOpen && setKeyboardNavigated(false);
|
|
84
91
|
}, [isOpen]);
|
|
@@ -111,13 +118,17 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
|
|
|
111
118
|
isButton: true,
|
|
112
119
|
setIsOpen: setIsOpen,
|
|
113
120
|
focused: focused,
|
|
121
|
+
onActiveDescendantChanged: function onActiveDescendantChanged(e) {
|
|
122
|
+
return setActiveDescendant(e);
|
|
123
|
+
},
|
|
114
124
|
setFocused: setFocused,
|
|
115
125
|
size: size,
|
|
116
126
|
outline: keyboardNavigated,
|
|
117
127
|
isOpen: isOpen,
|
|
118
|
-
id:
|
|
128
|
+
id: dropdownContentId,
|
|
119
129
|
messageOnNoResults: "",
|
|
120
|
-
alignLeft: true
|
|
130
|
+
alignLeft: true,
|
|
131
|
+
ariaRolesType: "menu"
|
|
121
132
|
})]
|
|
122
133
|
}), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
|
|
123
134
|
variant: variant
|
|
@@ -132,6 +143,9 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
|
|
|
132
143
|
},
|
|
133
144
|
testId: 'options_toggleBtn',
|
|
134
145
|
ref: dropdownButtonRef,
|
|
146
|
+
"aria-activedescendant": activeDescendant,
|
|
147
|
+
role: "button",
|
|
148
|
+
"aria-controls": dropdownContentId,
|
|
135
149
|
disabled: disabled,
|
|
136
150
|
type: type,
|
|
137
151
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n display: flex;\n align-items: center;\n\n button:first-child {\n margin-right: 2px;\n }\n\n div.button-content {\n gap: 0px;\n padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n }\n`;\n\nexport interface ButtonOption {\n label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n dropdownCustomizationProps: DropdownCustomizationProps;\n dropdownMenuValues?: string[];\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n testId,\n disabled,\n id,\n dropdownMenuValues,\n setDropdownMenuValues,\n dropdownCustomizationProps,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, icon, onClick, ...renderProps } = props;\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n const dropdownButtonRef = useClickOutsideRef(\n () => setIsOpen(false),\n [dropdownContainerRef],\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n );\n \n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n return (\n <ButtonsContainer ref={dropdownContainerRef} size={size}>\n <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n {children}\n </Button>\n <DropdownContent\n containerRef={dropdownContainerRef}\n customizationProps={dropdownCustomizationProps}\n filter=\"\"\n ref={dropdownContentRef}\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n isButton={true}\n setIsOpen={setIsOpen}\n focused={focused}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n setFocused={setFocused}\n size={size}\n outline={keyboardNavigated}\n isOpen={isOpen}\n id={dropdownContentId}\n messageOnNoResults=\"\"\n alignLeft={true}\n ariaRolesType=\"menu\"\n />\n </Dropdown>\n <Button\n variant={variant}\n {...renderProps}\n onKeyPress={(e: any) => {\n if (isOpen) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n setFocused(0);\n setKeyboardNavigated(true);\n }\n }}\n testId={'options_toggleBtn'}\n ref={dropdownButtonRef}\n aria-activedescendant={activeDescendant}\n role=\"button\"\n aria-controls={dropdownContentId}\n disabled={disabled}\n type={type}\n size={size}\n minWidth={'unset'}\n onClick={(e) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }}\n icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n flatEdge=\"left\"\n />\n </ButtonsContainer>\n );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
|
|
@@ -29,9 +29,9 @@ var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobi
|
|
|
29
29
|
|
|
30
30
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
31
31
|
|
|
32
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
32
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
33
33
|
|
|
34
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
34
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
35
35
|
|
|
36
36
|
var getBorderRadius = function getBorderRadius(props) {
|
|
37
37
|
return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
|
|
@@ -132,7 +132,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
132
132
|
shouldNotInteract: shouldNotInteract,
|
|
133
133
|
iconColor: iconColor,
|
|
134
134
|
unsetIconSize: unsetIconSize,
|
|
135
|
-
tabIndex: tabIndex
|
|
135
|
+
tabIndex: tabIndex,
|
|
136
136
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
137
137
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
138
138
|
hidden: hidden,
|
|
@@ -162,7 +162,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
162
162
|
useTransparentBackground: useTransparentBackground,
|
|
163
163
|
iconColor: iconColor,
|
|
164
164
|
unsetIconSize: unsetIconSize,
|
|
165
|
-
tabIndex: tabIndex
|
|
165
|
+
tabIndex: tabIndex,
|
|
166
166
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
167
167
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
168
168
|
hidden: hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
|
|
1
|
+
{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
|
|
@@ -6,9 +6,9 @@ var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobi
|
|
|
6
6
|
|
|
7
7
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
8
8
|
|
|
9
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
9
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
10
10
|
|
|
11
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
11
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
12
|
|
|
13
13
|
import React from 'react';
|
|
14
14
|
import styled from 'styled-components';
|
|
@@ -107,7 +107,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
107
107
|
shouldNotInteract: shouldNotInteract,
|
|
108
108
|
iconColor: iconColor,
|
|
109
109
|
unsetIconSize: unsetIconSize,
|
|
110
|
-
tabIndex: tabIndex
|
|
110
|
+
tabIndex: tabIndex,
|
|
111
111
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
112
112
|
onMouseDown: defaultOnMouseDownHandler,
|
|
113
113
|
hidden: hidden,
|
|
@@ -137,7 +137,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
137
137
|
useTransparentBackground: useTransparentBackground,
|
|
138
138
|
iconColor: iconColor,
|
|
139
139
|
unsetIconSize: unsetIconSize,
|
|
140
|
-
tabIndex: tabIndex
|
|
140
|
+
tabIndex: tabIndex,
|
|
141
141
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
142
142
|
onMouseDown: defaultOnMouseDownHandler,
|
|
143
143
|
hidden: hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
|
|
1
|
+
{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
|
package/dist/Button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","IconButton","Button","BackButton","DualFunctionButton"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAnB,QAAoC,cAApC;AACA,SAAQD,OAAO,IAAIE,MAAnB,QAAgC,UAAhC;AACA,SAAQF,OAAO,IAAIG,UAAnB,QAAoC,cAApC;AACA,SAAQH,OAAO,IAAII,kBAAnB,QAA4C,sBAA5C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"HorizontalCard.cjs","names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n }\n }\n }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled,\n className,\n ...rest\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <Container ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <ContentContainer>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </ContentContainer>\n </Container>\n )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${ContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ${ContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.outline {\n ${ContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n }\n }\n }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled,\n className,\n ...rest\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <Container ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <ContentContainer>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </ContentContainer>\n </Container>\n )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"HorizontalCardActions.cjs","names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,SAAQC,UAAR,QAAyB,cAAzB;AACA,SAAQC,YAAR,QAA2B,eAA3B;AACA,SAAQC,cAAR,QAA6B,gBAA7B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;;;AAEA,IAAMC,SAAS,GAAGD,MAAM,CAACE,GAAV,yFAAf;AAMA,OAAO,IAAMC,qBAAqB,gBAAGP,KAAK,CAACQ,UAAN,CAAiB,gBACCC,GADD,EAC0D;EAAA,IADxDC,OACwD,QADxDA,OACwD;EAAA,IAD/CC,QAC+C,QAD/CA,QAC+C;;EAE9G,sBAA4BX,KAAK,CAACY,QAAN,CAAqD,EAArD,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EACA,IAAMC,MAAM,GAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEK,MAAT,KAAmB,CAAlC;EAEAf,KAAK,CAACgB,SAAN,CAAgB,YAAM;IACpBF,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAX,CAAL,CAAmBG,IAAnB,CAAwB,IAAxB,EAA8BC,GAA9B,CAAkC;MAAA,oBAAMnB,KAAK,CAACoB,SAAN,EAAN;IAAA,CAAlC,CAAD,CAAT;EACD,CAFD,EAEG,CAACL,MAAD,CAFH;EAIAf,KAAK,CAACqB,mBAAN,CAA0BZ,GAA1B,EAA+B;IAAA,OAAMI,MAAN;EAAA,CAA/B,EAA6C,CAACA,MAAD,CAA7C;;EAEA,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EACCC,KADD,EACmB;IACtC,QAAQD,IAAI,CAACE,aAAb;MACE,KAAK,MAAL;QAAa;UAAA;;UACX,oBAAO,KAAC,UAAD;YAAY,GAAG,EAAEZ,MAAM,CAACW,KAAD,CAAvB;YAEY,OAAO,EAAE,WAFrB;YAGY,wBAAwB,EAAE,IAHtC;YAIY,KAAK,EAAE,UAJnB;YAKY,MAAM,EAAED,IAAI,CAACG,MALzB;YAMY,QAAQ,oBAAEH,IAAI,CAACZ,QAAP,2DAAmBA,QANvC;YAAA,UAOJY,IAAI,CAACI;UAPD,GACiBH,KADjB,CAAP;QASD;;MACD,KAAK,QAAL;QAAe;UAAA;;UACb,oBAAO,KAAC,YAAD;YAAc,GAAG,EAAEX,MAAM,CAACW,KAAD,CAAzB;YAEc,MAAM,EAAED,IAAI,CAACK,MAF3B;YAGc,QAAQ,EAAEL,IAAI,CAACM,QAH7B;YAIc,YAAY,EAAEN,IAAI,CAACO,YAJjC;YAKc,WAAW,EAAEP,IAAI,CAACQ,WALhC;YAMc,QAAQ,qBAAER,IAAI,CAACZ,QAAP,6DAAmBA;UANzC,GACmBa,KADnB,CAAP;QAOD;;MACD,KAAK,UAAL;QAAiB;UAAA;;UACf,oBAAO,KAAC,cAAD;YAAgB,GAAG,EAAEX,MAAM,CAACW,KAAD,CAA3B;YAEgB,IAAI,EAAE,MAFtB;YAGgB,KAAK,EAAED,IAAI,CAACS,KAH5B;YAIgB,SAAS,EAAET,IAAI,CAACU,SAJhC;YAKgB,OAAO,EAAEV,IAAI,CAACW,OAL9B;YAMgB,IAAI,EAAEX,IAAI,CAACI,IAN3B;YAOgB,MAAM,EAAEJ,IAAI,CAACG,MAP7B;YAQgB,UAAU,EAAEH,IAAI,CAACY,UARjC;YASgB,WAAW,EAAEZ,IAAI,CAACa,WATlC;YAUgB,aAAa,EAAEb,IAAI,CAACc,aAVpC;YAWgB,aAAa,EAAEd,IAAI,CAACe,aAXpC;YAYgB,WAAW,EAAEf,IAAI,CAACgB,WAZlC;YAagB,UAAU,EAAEhB,IAAI,CAACiB,UAbjC;YAcgB,UAAU,EAAEjB,IAAI,CAACkB,UAdjC;YAegB,SAAS,EAAElB,IAAI,CAACmB,SAfhC;YAgBgB,QAAQ,qBAAEnB,IAAI,CAACZ,QAAP,6DAAmBA;UAhB3C,GACqBa,KADrB,CAAP;QAiBD;IAvCH;EAyCD,CA3CD;;EA8CA,oBACE;IAAA,UAEI,CAAAd,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEK,MAAT,kBACA,KAAC,SAAD;MAAA,UACGL,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CAAa,UAACI,IAAD,EAAOC,KAAP;QAAA,OAAiBF,YAAY,CAACC,IAAD,EAAOC,KAAP,CAA7B;MAAA,CAAb;IADH;EAHJ,EADF;AAUD,CApEoC,CAA9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"HorizontalCardBody.cjs","names":["Container","styled","div","Title","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","ComponentXSStyling","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nconst Title = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst Description = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <Container>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n {\n tags &&\n <TagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </TagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </Container>\n )\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAGC,yBAAA,CAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,yBAAA,CAAOC,GAAV,wIACP,IAAAE,yBAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CADO,EAGED,cAAA,CAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGT,yBAAA,CAAOC,GAAV,gGACb,IAAAS,0BAAA,EAAmBN,0BAAA,CAAmBO,OAAtC,EAA+CL,cAAA,CAAOM,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGb,yBAAA,CAAOC,GAAV,qLAAnB;;AAUO,IAAMa,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;EAAA,IAJJC,KAII,QAJJA,KAII;EAAA,IAHJC,WAGI,QAHJA,WAGI;EAAA,IAFJC,QAEI,QAFJA,QAEI;EAAA,IADJC,IACI,QADJA,IACI;EAEvE,oBACE,sBAAC,SAAD;IAAA,wBACE,qBAAC,KAAD;MAAA,UAAQH;IAAR,EADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;MAAA,UAAcA;IAAd,EAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;MAAA,UAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;QAAA,oBACvB,qBAAC,QAAD;UAAiB,KAAK,EAAED,GAAG,CAACE,KAA5B;UAAmC,OAAO,EAAEF,GAAG,CAACG,OAAhD;UAAyD,IAAI,EAAEH,GAAG,CAACI;QAAnE,GAAUH,KAAV,CADuB;MAAA,CAAT;IAAhB,EALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;MAAgB,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;MAAuC,GAAG,EAAER,QAAQ,CAACS;IAArD,EATf;EAAA,EADF;AAaD,CApBM"}
|