@laerdal/life-react-components 2.3.1-dev.9 → 3.0.1-dev.1
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/AuthPage/AuthPage.cjs +1 -1
- package/dist/AuthPage/AuthPage.cjs.map +1 -1
- package/dist/AuthPage/AuthPage.d.ts +1 -0
- package/dist/AuthPage/AuthPage.js +1 -1
- package/dist/AuthPage/AuthPage.js.map +1 -1
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +34 -32
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.d.ts +1 -0
- package/dist/Breadcrumb/Breadcrumb.js +34 -32
- package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Footer/Components/FooterBottomLinks.d.ts +1 -0
- package/dist/Footer/Components/FooterDropdownLinks.d.ts +1 -0
- package/dist/Footer/Components/FooterNavSection.d.ts +1 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts +1 -0
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/Components/FooterTop.d.ts +1 -0
- package/dist/Footer/Footer.d.ts +1 -0
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts +1 -0
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +66 -5
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +66 -5
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs +102 -19
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.d.ts +4 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.js +102 -19
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.d.ts +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -0
- package/dist/InputFields/DatepickerField.cjs +1 -1
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +18 -1
- package/dist/InputFields/DatepickerField.js +1 -1
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs +2 -4
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.d.ts +1 -0
- package/dist/InputFields/DatepickerFieldHeader.js +2 -4
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/InputFields/Label.cjs.map +1 -1
- package/dist/InputFields/Label.d.ts +1 -1
- package/dist/InputFields/Label.js.map +1 -1
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +15 -0
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/PasswordField.cjs.map +1 -1
- package/dist/InputFields/PasswordField.d.ts +15 -1
- package/dist/InputFields/PasswordField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.d.ts +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +16 -3
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.d.ts +2 -2
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +20 -1
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.d.ts +10 -8
- package/dist/InputFields/index.js.map +1 -1
- package/dist/InputFields/types.cjs.map +1 -1
- package/dist/InputFields/types.d.ts +0 -19
- package/dist/InputFields/types.js.map +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.d.ts +1 -0
- package/dist/MiniProductCard/MiniProductCard.d.ts +1 -0
- package/dist/Modals/ModalContent.cjs +1 -1
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +1 -1
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +1 -1
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +1 -1
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.d.ts +1 -0
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/Panel/Panel.cjs +4 -4
- package/dist/Panel/Panel.cjs.map +1 -1
- package/dist/Panel/Panel.js +5 -5
- package/dist/Panel/Panel.js.map +1 -1
- package/dist/SideMenu/SideMenuBody.d.ts +1 -0
- package/dist/SideMenu/SideMenuFooter.d.ts +1 -0
- package/dist/SideMenu/SideMenuHeader.d.ts +1 -0
- package/dist/SideMenu/types.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs +3 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.js +3 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.d.ts +1 -0
- package/dist/Table/Table.cjs +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -0
- package/dist/Tabs/TabLink.cjs +52 -51
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.d.ts +13 -14
- package/dist/Tabs/TabLink.js +52 -51
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +3 -3
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.d.ts +1 -0
- package/dist/Tile/TileCommonItems.js +3 -3
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipOverflow.cjs +1 -1
- package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
- package/dist/Tooltips/TooltipOverflow.js +1 -1
- package/dist/Tooltips/TooltipOverflow.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipWrapper.d.ts +1 -0
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs +1 -1
- package/dist/common/ActionWithin.js +1 -1
- package/dist/common/FocusVisible.cjs +1 -1
- package/dist/common/FocusVisible.js +1 -1
- package/dist/icons/contenticons/AedNoShockAdvised.cjs +41 -0
- package/dist/icons/contenticons/AedNoShockAdvised.cjs.map +1 -0
- package/dist/icons/contenticons/AedNoShockAdvised.d.ts +3 -0
- package/dist/icons/contenticons/AedNoShockAdvised.js +30 -0
- package/dist/icons/contenticons/AedNoShockAdvised.js.map +1 -0
- package/dist/icons/contenticons/AedShockAdvised.cjs +41 -0
- package/dist/icons/contenticons/AedShockAdvised.cjs.map +1 -0
- package/dist/icons/contenticons/AedShockAdvised.d.ts +3 -0
- package/dist/icons/contenticons/AedShockAdvised.js +30 -0
- package/dist/icons/contenticons/AedShockAdvised.js.map +1 -0
- package/dist/icons/contenticons/{NoShockAdvised.cjs → Data.cjs} +5 -5
- package/dist/icons/contenticons/Data.cjs.map +1 -0
- package/dist/icons/contenticons/Data.d.ts +3 -0
- package/dist/icons/contenticons/{NoShockAdvised.js → Data.js} +3 -3
- package/dist/icons/contenticons/Data.js.map +1 -0
- package/dist/icons/contenticons/DecisionFlow.cjs +41 -0
- package/dist/icons/contenticons/DecisionFlow.cjs.map +1 -0
- package/dist/icons/contenticons/DecisionFlow.d.ts +3 -0
- package/dist/icons/contenticons/DecisionFlow.js +30 -0
- package/dist/icons/contenticons/DecisionFlow.js.map +1 -0
- package/dist/icons/contenticons/Metronome.cjs +41 -0
- package/dist/icons/contenticons/Metronome.cjs.map +1 -0
- package/dist/icons/contenticons/Metronome.d.ts +3 -0
- package/dist/icons/contenticons/Metronome.js +30 -0
- package/dist/icons/contenticons/Metronome.js.map +1 -0
- package/dist/icons/contenticons/ShockAutomated.cjs +41 -0
- package/dist/icons/contenticons/ShockAutomated.cjs.map +1 -0
- package/dist/icons/contenticons/{NoShockAdvised.d.ts → ShockAutomated.d.ts} +1 -1
- package/dist/icons/contenticons/ShockAutomated.js +30 -0
- package/dist/icons/contenticons/ShockAutomated.js.map +1 -0
- package/dist/icons/contenticons/ShockNotAdvised.cjs +41 -0
- package/dist/icons/contenticons/ShockNotAdvised.cjs.map +1 -0
- package/dist/icons/contenticons/ShockNotAdvised.d.ts +3 -0
- package/dist/icons/contenticons/ShockNotAdvised.js +30 -0
- package/dist/icons/contenticons/ShockNotAdvised.js.map +1 -0
- package/dist/icons/contenticons/Stock.cjs +41 -0
- package/dist/icons/contenticons/Stock.cjs.map +1 -0
- package/dist/icons/contenticons/Stock.d.ts +3 -0
- package/dist/icons/contenticons/Stock.js +30 -0
- package/dist/icons/contenticons/Stock.js.map +1 -0
- package/dist/icons/contenticons/Visibility.cjs +41 -0
- package/dist/icons/contenticons/Visibility.cjs.map +1 -0
- package/dist/icons/contenticons/Visibility.d.ts +3 -0
- package/dist/icons/contenticons/Visibility.js +30 -0
- package/dist/icons/contenticons/Visibility.js.map +1 -0
- package/dist/icons/contenticons/index.cjs +92 -4
- package/dist/icons/contenticons/index.cjs.map +1 -1
- package/dist/icons/contenticons/index.d.ts +9 -1
- package/dist/icons/contenticons/index.js +9 -1
- package/dist/icons/contenticons/index.js.map +1 -1
- package/dist/icons/systemicons/Adult.cjs +41 -0
- package/dist/icons/systemicons/Adult.cjs.map +1 -0
- package/dist/icons/systemicons/Adult.d.ts +3 -0
- package/dist/icons/systemicons/Adult.js +30 -0
- package/dist/icons/systemicons/Adult.js.map +1 -0
- package/dist/icons/systemicons/AedPads.cjs +41 -0
- package/dist/icons/systemicons/AedPads.cjs.map +1 -0
- package/dist/icons/systemicons/AedPads.d.ts +3 -0
- package/dist/icons/systemicons/AedPads.js +30 -0
- package/dist/icons/systemicons/AedPads.js.map +1 -0
- package/dist/icons/systemicons/AedPadsCorrect.cjs +41 -0
- package/dist/icons/systemicons/AedPadsCorrect.cjs.map +1 -0
- package/dist/icons/systemicons/AedPadsCorrect.d.ts +3 -0
- package/dist/icons/systemicons/AedPadsCorrect.js +30 -0
- package/dist/icons/systemicons/AedPadsCorrect.js.map +1 -0
- package/dist/icons/systemicons/AedPadsError.cjs +41 -0
- package/dist/icons/systemicons/AedPadsError.cjs.map +1 -0
- package/dist/icons/systemicons/AedPadsError.d.ts +3 -0
- package/dist/icons/systemicons/AedPadsError.js +30 -0
- package/dist/icons/systemicons/AedPadsError.js.map +1 -0
- package/dist/icons/systemicons/Archive.cjs +41 -0
- package/dist/icons/systemicons/Archive.cjs.map +1 -0
- package/dist/icons/systemicons/Archive.d.ts +3 -0
- package/dist/icons/systemicons/Archive.js +30 -0
- package/dist/icons/systemicons/Archive.js.map +1 -0
- package/dist/icons/systemicons/ArrowCollapse.cjs +41 -0
- package/dist/icons/systemicons/ArrowCollapse.cjs.map +1 -0
- package/dist/icons/systemicons/ArrowCollapse.d.ts +3 -0
- package/dist/icons/systemicons/ArrowCollapse.js +30 -0
- package/dist/icons/systemicons/ArrowCollapse.js.map +1 -0
- package/dist/icons/systemicons/ArrowExpand.cjs +41 -0
- package/dist/icons/systemicons/ArrowExpand.cjs.map +1 -0
- package/dist/icons/systemicons/ArrowExpand.d.ts +3 -0
- package/dist/icons/systemicons/ArrowExpand.js +30 -0
- package/dist/icons/systemicons/ArrowExpand.js.map +1 -0
- package/dist/icons/systemicons/Child.cjs +41 -0
- package/dist/icons/systemicons/Child.cjs.map +1 -0
- package/dist/icons/systemicons/Child.d.ts +3 -0
- package/dist/icons/systemicons/Child.js +30 -0
- package/dist/icons/systemicons/Child.js.map +1 -0
- package/dist/icons/systemicons/Copy.cjs +41 -0
- package/dist/icons/systemicons/Copy.cjs.map +1 -0
- package/dist/icons/systemicons/Copy.d.ts +3 -0
- package/dist/icons/systemicons/Copy.js +30 -0
- package/dist/icons/systemicons/Copy.js.map +1 -0
- package/dist/icons/systemicons/DecisionFlow.cjs +41 -0
- package/dist/icons/systemicons/DecisionFlow.cjs.map +1 -0
- package/dist/icons/systemicons/DecisionFlow.d.ts +3 -0
- package/dist/icons/systemicons/DecisionFlow.js +30 -0
- package/dist/icons/systemicons/DecisionFlow.js.map +1 -0
- package/dist/icons/systemicons/HeartShock.cjs +41 -0
- package/dist/icons/systemicons/HeartShock.cjs.map +1 -0
- package/dist/icons/systemicons/HeartShock.d.ts +3 -0
- package/dist/icons/systemicons/HeartShock.js +30 -0
- package/dist/icons/systemicons/HeartShock.js.map +1 -0
- package/dist/icons/systemicons/Infant.cjs +41 -0
- package/dist/icons/systemicons/Infant.cjs.map +1 -0
- package/dist/icons/systemicons/Infant.d.ts +3 -0
- package/dist/icons/systemicons/Infant.js +30 -0
- package/dist/icons/systemicons/Infant.js.map +1 -0
- package/dist/icons/systemicons/LegendStrokeDashed.cjs +41 -0
- package/dist/icons/systemicons/LegendStrokeDashed.cjs.map +1 -0
- package/dist/icons/systemicons/LegendStrokeDashed.d.ts +3 -0
- package/dist/icons/systemicons/LegendStrokeDashed.js +30 -0
- package/dist/icons/systemicons/LegendStrokeDashed.js.map +1 -0
- package/dist/icons/systemicons/LegendStrokeSolid.cjs +41 -0
- package/dist/icons/systemicons/LegendStrokeSolid.cjs.map +1 -0
- package/dist/icons/systemicons/LegendStrokeSolid.d.ts +3 -0
- package/dist/icons/systemicons/LegendStrokeSolid.js +30 -0
- package/dist/icons/systemicons/LegendStrokeSolid.js.map +1 -0
- package/dist/icons/systemicons/LoadingMedium.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingMedium.js.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.js.map +1 -1
- package/dist/icons/systemicons/Metronome.cjs +41 -0
- package/dist/icons/systemicons/Metronome.cjs.map +1 -0
- package/dist/icons/systemicons/Metronome.d.ts +3 -0
- package/dist/icons/systemicons/Metronome.js +30 -0
- package/dist/icons/systemicons/Metronome.js.map +1 -0
- package/dist/icons/systemicons/Pin.cjs +41 -0
- package/dist/icons/systemicons/Pin.cjs.map +1 -0
- package/dist/icons/systemicons/Pin.d.ts +3 -0
- package/dist/icons/systemicons/Pin.js +30 -0
- package/dist/icons/systemicons/Pin.js.map +1 -0
- package/dist/icons/systemicons/Shock.cjs +41 -0
- package/dist/icons/systemicons/Shock.cjs.map +1 -0
- package/dist/icons/systemicons/Shock.d.ts +3 -0
- package/dist/icons/systemicons/Shock.js +30 -0
- package/dist/icons/systemicons/Shock.js.map +1 -0
- package/dist/icons/systemicons/ShockAdvised.cjs +41 -0
- package/dist/icons/systemicons/ShockAdvised.cjs.map +1 -0
- package/dist/icons/systemicons/ShockAdvised.d.ts +3 -0
- package/dist/icons/systemicons/ShockAdvised.js +30 -0
- package/dist/icons/systemicons/ShockAdvised.js.map +1 -0
- package/dist/icons/systemicons/ShockAutomated.cjs +41 -0
- package/dist/icons/systemicons/ShockAutomated.cjs.map +1 -0
- package/dist/icons/systemicons/ShockAutomated.d.ts +3 -0
- package/dist/icons/systemicons/ShockAutomated.js +30 -0
- package/dist/icons/systemicons/ShockAutomated.js.map +1 -0
- package/dist/icons/systemicons/ShockNotAdvised.cjs +41 -0
- package/dist/icons/systemicons/ShockNotAdvised.cjs.map +1 -0
- package/dist/icons/systemicons/ShockNotAdvised.d.ts +3 -0
- package/dist/icons/systemicons/ShockNotAdvised.js +30 -0
- package/dist/icons/systemicons/ShockNotAdvised.js.map +1 -0
- package/dist/icons/systemicons/Translation.cjs +41 -0
- package/dist/icons/systemicons/Translation.cjs.map +1 -0
- package/dist/icons/systemicons/Translation.d.ts +3 -0
- package/dist/icons/systemicons/Translation.js +30 -0
- package/dist/icons/systemicons/Translation.js.map +1 -0
- package/dist/icons/systemicons/ZoomOut.cjs +41 -0
- package/dist/icons/systemicons/ZoomOut.cjs.map +1 -0
- package/dist/icons/systemicons/ZoomOut.d.ts +3 -0
- package/dist/icons/systemicons/ZoomOut.js +30 -0
- package/dist/icons/systemicons/ZoomOut.js.map +1 -0
- package/dist/icons/systemicons/index.cjs +250 -8
- package/dist/icons/systemicons/index.cjs.map +1 -1
- package/dist/icons/systemicons/index.d.ts +23 -1
- package/dist/icons/systemicons/index.js +23 -1
- package/dist/icons/systemicons/index.js.map +1 -1
- package/package.json +9 -10
- package/dist/icons/contenticons/NoShockAdvised.cjs.map +0 -1
- package/dist/icons/contenticons/NoShockAdvised.js.map +0 -1
|
@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
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; }
|
|
22
22
|
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; }
|
|
23
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
23
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
24
24
|
var AuthPage = function AuthPage(_ref) {
|
|
25
25
|
var screenSetsContainerId = _ref.screenSetsContainerId,
|
|
26
26
|
panel = _ref.panel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,
|
|
1
|
+
{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0TAUtBC,mBAAW,CAACC,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,qBAAC,YAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,qBAAC,4BAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}
|
|
@@ -11,7 +11,7 @@ import { Panel } from "../Panel";
|
|
|
11
11
|
import { BREAKPOINTS } from "../styles";
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.MEDIUM);
|
|
14
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.MEDIUM);
|
|
15
15
|
var AuthPage = function AuthPage(_ref) {
|
|
16
16
|
var screenSetsContainerId = _ref.screenSetsContainerId,
|
|
17
17
|
panel = _ref.panel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,
|
|
1
|
+
{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4SAUtBF,WAAW,CAACG,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,KAAC,KAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,KAAC,mBAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,aAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAkBvB,eAAeD,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAGA;AAEA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,wvBAClB,UAACC,KAAuB;EAAA,OAAMA,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACC,KAAK,GAAGC,cAAM,CAACC,WAAW;AAAA,CAAC,EAGlFD,cAAM,CAACE,KAAK,EACP,UAACJ,KAAuB;EAAA,OAAMA,KAAK,CAACK,MAAM,GAAG,MAAM,GAAG,GAAG;AAAA,CAAC,EAMpEC,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,EAcnBC,qBAAU,EAEC,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACU,IAAI;AAAA,GAGrB,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACW,WAAW;AAAA,GAIjB,UAACX,KAAK;EAAA,OAAKA,KAAK,CAACY,WAAW;AAAA,GACvCV,cAAM,CAACW,KAAK,CAO1B;AAED,IAAMC,YAAY,GAAGhB,yBAAM,CAACC,GAAG,2qBAC3B,IAAAgB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAKnDX,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,EAqBfF,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,CAgBtB;AAED,IAAMU,aAAa,GAAGpB,yBAAM,CAACC,GAAG,8GAE/B;AAED,IAAMoB,eAAe,GAAGrB,yBAAM,CAACC,GAAG,uHAE9B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,KAAK,GAAG,IAAAmB,uBAAc,EAACpB,KAAK,CAACC,KAAK,CAAC,GAAG,IAAI;AAAA,CAAC,CAChE;AAED,IAAMoB,oBAAoB,GAAGvB,yBAAM,CAACC,GAAG,yMAOtC;AAiBD,IAAMuB,MAA4C,GAAG,SAA/CA,MAA4C,OAe5C;EAAA,IAdJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,QAAQ,QAARA,QAAQ;IACRpB,MAAM,QAANA,MAAM;IACNqB,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRjB,IAAI,QAAJA,IAAI;IACJkB,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,IAAI;EAEP,sBAA0BC,KAAK,CAACC,QAAQ,CAAS,IAAAC,gBAAS,GAAE,GAAGC,MAAM,CAACC,UAAU,GAAG,CAAC,CAAC,CAAC;IAAA;IAA/EC,KAAK;IAAEC,QAAQ;EACtBN,KAAK,CAACO,SAAS,CAAC,YAAM;IACpB,SAASC,YAAY,GAAG;MACtBF,QAAQ,CAACH,MAAM,CAACC,UAAU,CAAC;IAC7B;IACAD,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAML,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIG,YAAY,GAAG;IACjBC,SAAS,EAAE7C,cAAM,CAAC8C,WAAW;IAC7BC,WAAW,EAAE/C,cAAM,CAACgD,WAAW;IAC/BC,UAAU,EAAEjD,cAAM,CAACkD,UAAU;IAC7BC,cAAc,EAAEnD,cAAM,CAACoD,WAAW;IAClCzB,IAAI,EAAE0B,kBAAW,CAACC,GAAG;IACrBC,aAAa,EAAEjC,IAAI;IACnBkC,YAAY,EAAExD,cAAM,CAACyD,WAAW;IAChChD,WAAW,EAAET,cAAM,CAAC0D,WAAW;IAC/BhD,WAAW,EAAEV,cAAM,CAAC2D;EACtB,CAAC;EACD,QAAQrC,IAAI;IACV,KAAK,SAAS;MACZsB,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAAC4D,WAAW;MAC3ChB,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAAC6D,WAAW;MAC7CjB,YAAY,CAACY,YAAY,GAAGxD,cAAM,CAAC8D,WAAW;MAC9ClB,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAAC+D,UAAU;MAC3CnB,YAAY,CAACjB,IAAI,GAAG0B,kBAAW,CAACW,IAAI;MACpCpB,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAACiE,WAAW;MAChDrB,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAACkE,WAAW;MAC7CtB,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAACkE,WAAW;MAC7C;IACF,KAAK,UAAU;MACbtB,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAACmE,YAAY;MAC5CvB,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAACoE,YAAY;MAC9CxB,YAAY,CAACY,YAAY,GAAGxD,cAAM,CAACqE,YAAY;MAC/CzB,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAACsE,WAAW;MAC5C1B,YAAY,CAACjB,IAAI,GAAG0B,kBAAW,CAACkB,gBAAgB;MAChD3B,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAACwE,YAAY;MACjD5B,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAACyE,YAAY;MAC9C7B,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAACyE,YAAY;MAC9C;IACF,KAAK,UAAU;MACb7B,YAAY,CAACC,SAAS,GAAG7C,cAAM,CAACC,WAAW;MAC3C2C,YAAY,CAACG,WAAW,GAAG/C,cAAM,CAAC0E,WAAW;MAC7C9B,YAAY,CAACY,YAAY,GAAGxD,cAAM,CAAC2E,WAAW;MAC9C/B,YAAY,CAACK,UAAU,GAAGjD,cAAM,CAAC4E,UAAU;MAC3ChC,YAAY,CAACjB,IAAI,GAAG0B,kBAAW,CAACwB,QAAQ;MACxCjC,YAAY,CAACO,cAAc,GAAGnD,cAAM,CAAC8E,WAAW;MAChDlC,YAAY,CAACnC,WAAW,GAAGT,cAAM,CAAC+E,WAAW;MAC7CnC,YAAY,CAAClC,WAAW,GAAGV,cAAM,CAAC+E,WAAW;MAC7C;EAAM;EAGV,IAAMC,GAAG,aAAMjD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,SAAS,GAAG,mBAAmB,GAAG,EAAE,CAAE;EAExE,oBACE,qBAAC,eAAe;IACd,eAAaN,MAAO;IACpB,KAAK,EAAEoB,YAAY,CAACC,SAAU;IAC9B,WAAW,EAAED,YAAY,CAAClC,WAAY;IACtC,WAAW,EAAEkC,YAAY,CAACnC,WAAY;IACtC,IAAI,EAAEmC,YAAY,CAACG,WAAY;IAC/B,KAAK,EAAEH,YAAY,CAACK,UAAW;IAC/B,MAAM,EAAE9C,MAAO;IACf,SAAS,EAAE6E,GAAI;IACf,IAAI,EAAC;EAAM,GACPhD,IAAI;IAAA,uBACR,sBAAC,YAAY;MAAC,KAAK,EAAE;QAAEiD,KAAK,EAAErC,YAAY,CAACG;MAAY,CAAE;MAAC,SAAS,EAAE1B,IAAK;MAAA,WACvEM,IAAI,GAAGA,IAAI,GAAGC,MAAM,GAAG,IAAI,gBAAG,qBAAC,YAAY,CAAC,IAAI;QAAC,KAAK,EAAEgB,YAAY,CAACG,WAAY;QAAC,IAAI,EAAC;MAAM,EAAG,eACjG,qBAAC,oBAAoB;QAAA,uBACnB,sBAAC,2BAAmB;UAAC,IAAI,EAAE1B,IAAK;UAAC,KAAK,EAAEiB,KAAM;UAAC,KAAK,EAAEM,YAAY,CAACG,WAAY;UAAA,WAC5ExB,QAAQ,UACRf,IAAI,IAAIiB,QAAQ,iBACf,qBAAC,oBAAS;YACR,EAAE,YAAKyD,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAC,gBAAc;YAC7D,OAAO,EAAE,iBAACC,CAAC,EAAK;cACd,IAAIxD,UAAU,EAAE;gBACdwD,CAAC,CAACC,cAAc,EAAE;gBAClBzD,UAAU,CAACwD,CAAC,CAAC;cACf;YACF,CAAE;YACF,IAAI,EAAE7E,IAAK;YACX,OAAO,EAAC,SAAS;YAAA,UAChBiB;UAAQ,EAEZ;QAAA;MACmB,EACD,EACtBC,OAAO,iBACN,qBAAC,aAAa;QAAA,uBACZ,qBAAC,eAAe;UAAC,KAAK,EAAEkB,YAAY,CAACW,aAAc;UAAA,uBACjD,qBAAC,kBAAU;YAAC,OAAO,EAAC,WAAW;YAAC,KAAK,EAAC,UAAU;YAAC,wBAAwB;YAAC,oBAAoB,EAAEX,YAAY,CAACY,YAAa;YAAC,MAAM,EAAE;cAAA,OAAM9B,OAAO,EAAE;YAAA,CAAC;YAAA,uBACjJ,qBAAC,kBAAW,CAAC,KAAK;cAAC,KAAK,EAAEkB,YAAY,CAACO,cAAe;cAAC,IAAI,EAAC;YAAM;UAAG;QAC1D;MACG,EAErB;IAAA;EACY,GACC;AAEtB,CAAC;AAAC;EAjIA7B,IAAI,4BAAG,SAAS,EAAG,UAAU,EAAG,UAAU,EAAG,SAAS;EACtDd,IAAI;EACJiB,QAAQ;EACRI,UAAU;EACV0D,KAAK;EACLpF,MAAM;EACNqB,MAAM;EACNG,IAAI;EACJD,OAAO;EACPE,MAAM;EACNE,SAAS;AAAA;AAAA,eAyHIV,MAAM;AAAA"}
|
|
1
|
+
{"version":3,"file":"Banner.cjs","names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentMStyling","ComponentTextStyle","Regular","ButtonWrapper","ButtonContainer","getButtonStyle","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","hasWindow","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","SystemIcons","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","hasWindow","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","removeEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","color","Math","floor","random","e","preventDefault","hover"],"sources":["../../src/Banners/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport { StyledLink } from '../HyperLink';\nimport { hasWindow } from '../utils/utils';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string; linkVisited: string; linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n border-radius: 4px;\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link {\n color: ${(props) => props.link};\n }\n &:visited {\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active {\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n\n &.full-width-banner {\n margin: 8px;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 64px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n\n .full-width-banner & {\n margin: 0 16px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 64px;\n }\n\n &.small {\n margin: 0 16px;\n }\n\n &.medium {\n margin: 0 32px;\n }\n\n &.large {\n margin: 0 64px;\n }\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n}) => {\n const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: SystemIcons.Tip,\n containerType: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800,\n };\n switch (type) {\n case 'warning':\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = SystemIcons.Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case 'critical':\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = SystemIcons.TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case 'positive':\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = SystemIcons.ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n\n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer\n data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n role=\"note\"\n {...rest}>\n <BannerCenter style={{ color: bannerParams.accentColor }} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <SystemIcons.Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ var _reactRouter = require("react-router");
|
|
|
16
16
|
var _DropdownButton = _interopRequireDefault(require("../Dropdown/DropdownButton"));
|
|
17
17
|
var _styles2 = require("./styles");
|
|
18
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
-
var _excluded = ["items", "size", "homeIcon", "homeLabel", "homeUrl"];
|
|
19
|
+
var _excluded = ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"];
|
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
22
|
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; }
|
|
@@ -29,6 +29,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
29
29
|
homeIcon = _ref$homeIcon === void 0 ? true : _ref$homeIcon,
|
|
30
30
|
_ref$homeLabel = _ref.homeLabel,
|
|
31
31
|
homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
|
|
32
|
+
_ref$lastItemAsLabel = _ref.lastItemAsLabel,
|
|
33
|
+
lastItemAsLabel = _ref$lastItemAsLabel === void 0 ? false : _ref$lastItemAsLabel,
|
|
32
34
|
_ref$homeUrl = _ref.homeUrl,
|
|
33
35
|
homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl,
|
|
34
36
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -46,13 +48,28 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
46
48
|
var renderChevron = function renderChevron() {
|
|
47
49
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
48
50
|
"aria-hidden": "true",
|
|
49
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.
|
|
51
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.ForwardSlash, {
|
|
50
52
|
className: "chevronicon",
|
|
51
53
|
color: _styles.COLORS.neutral_500,
|
|
52
54
|
size: chevronSize
|
|
53
55
|
})
|
|
54
56
|
});
|
|
55
57
|
};
|
|
58
|
+
var renderBreadcrumbLinkItem = function renderBreadcrumbLinkItem(index, item) {
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
60
|
+
children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
|
|
61
|
+
id: 'link-item-' + index,
|
|
62
|
+
onClick: function onClick(e) {
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
navigateHook(item.url);
|
|
65
|
+
},
|
|
66
|
+
target: "_self",
|
|
67
|
+
variant: "default",
|
|
68
|
+
href: item.url,
|
|
69
|
+
children: item.label
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
};
|
|
56
73
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, _objectSpread(_objectSpread({
|
|
57
74
|
size: size,
|
|
58
75
|
"data-testid": 'breacrumbContainer'
|
|
@@ -88,35 +105,19 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
88
105
|
}),
|
|
89
106
|
onClick: navigate
|
|
90
107
|
})]
|
|
91
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.
|
|
92
|
-
children:
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
|
|
105
|
-
id: 'link-item-' + (items.length - 2),
|
|
106
|
-
onClick: function onClick(e) {
|
|
107
|
-
e.preventDefault();
|
|
108
|
-
navigateHook(items[items.length - 2].url);
|
|
109
|
-
},
|
|
110
|
-
target: "_self",
|
|
111
|
-
variant: "default",
|
|
112
|
-
href: items[items.length - 2].url,
|
|
113
|
-
children: items[items.length - 2].label
|
|
114
|
-
})]
|
|
115
|
-
}), !!items && items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
116
|
-
children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
|
|
117
|
-
size: size,
|
|
118
|
-
children: items[items.length - 1].label
|
|
119
|
-
})]
|
|
108
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
109
|
+
children: renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])
|
|
110
|
+
})), !!items && items.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
111
|
+
children: renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])
|
|
112
|
+
}), !!items && items.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
113
|
+
children: lastItemAsLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
114
|
+
children: [renderChevron(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
|
|
115
|
+
size: size,
|
|
116
|
+
children: items[items.length - 1].label
|
|
117
|
+
})]
|
|
118
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
119
|
+
children: [renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]), renderChevron()]
|
|
120
|
+
})
|
|
120
121
|
})]
|
|
121
122
|
}));
|
|
122
123
|
};
|
|
@@ -124,7 +125,8 @@ Breadcrumb.propTypes = {
|
|
|
124
125
|
homeIcon: _propTypes.default.bool,
|
|
125
126
|
homeLabel: _propTypes.default.string,
|
|
126
127
|
homeUrl: _propTypes.default.string,
|
|
127
|
-
items: _propTypes.default.array
|
|
128
|
+
items: _propTypes.default.array,
|
|
129
|
+
lastItemAsLabel: _propTypes.default.bool
|
|
128
130
|
};
|
|
129
131
|
var _default = Breadcrumb;
|
|
130
132
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.cjs","names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","rest","navigateHook","useNavigate","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","COLORS","neutral_500","e","preventDefault","neutral_600"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useNavigate } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
|
|
1
|
+
{"version":3,"file":"Breadcrumb.cjs","names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","lastItemAsLabel","homeUrl","rest","navigateHook","useNavigate","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","COLORS","neutral_500","renderBreadcrumbLinkItem","index","item","e","preventDefault","neutral_600"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useNavigate } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\nimport internal from 'stream';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n lastItemAsLabel?: boolean;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({\n items,\n size = Size.Small,\n homeIcon = true,\n homeLabel = 'Home',\n lastItemAsLabel = false,\n homeUrl = '/',\n ...rest\n}) => {\n const navigateHook = useNavigate();\n const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n const navigate = (links: string[]) => {\n navigateHook(links[0]);\n };\n\n const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n const renderChevron = () => (\n <div aria-hidden=\"true\">\n <SystemIcons.ForwardSlash className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n </div>\n );\n const renderBreadcrumbLinkItem = (index: number, item: BreadcrumbItem) => {\n return (\n <>\n {renderChevron()}\n <HyperLink\n id={'link-item-' + index}\n onClick={(e) => {\n e.preventDefault();\n navigateHook(item.url);\n }}\n target=\"_self\"\n variant=\"default\"\n href={item.url}>\n {item.label}\n </HyperLink>\n </>\n );\n };\n\n return (\n <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'} {...rest}>\n {homeIcon ? (\n <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => navigateHook(homeUrl)}>\n <SystemIcons.Home size={chevronSize} />\n </IconButton>\n ) : (\n <HyperLink\n id={'homelink'}\n variant=\"default\"\n href={homeUrl}\n onClick={(e) => {\n e.preventDefault();\n navigateHook(homeUrl);\n }}>\n {homeLabel}\n </HyperLink>\n )}\n\n {!!items &&\n items.length > 2 &&\n (items.length > 3 ? (\n <>\n {renderChevron()}\n <DropdownButton\n type={'icon'}\n alignLeft={true}\n items={dropdownItems}\n size={size}\n icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n onClick={navigate}\n />\n </>\n ) : (\n <>{renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])}</>\n ))}\n\n {!!items && items.length > 1 && <>{renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])}</>}\n\n {!!items && items.length > 0 && (\n <>\n {lastItemAsLabel ? (\n <>\n {renderChevron()}\n <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n </>\n ) : (\n <>\n {renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1])}\n {renderChevron()}\n </>\n )}\n </>\n )}\n </BreadcrumbContainer>\n );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _pt from "prop-types";
|
|
4
|
-
var _excluded = ["items", "size", "homeIcon", "homeLabel", "homeUrl"];
|
|
4
|
+
var _excluded = ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"];
|
|
5
5
|
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; }
|
|
6
6
|
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; }
|
|
7
7
|
import * as React from 'react';
|
|
@@ -22,6 +22,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
22
22
|
homeIcon = _ref$homeIcon === void 0 ? true : _ref$homeIcon,
|
|
23
23
|
_ref$homeLabel = _ref.homeLabel,
|
|
24
24
|
homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
|
|
25
|
+
_ref$lastItemAsLabel = _ref.lastItemAsLabel,
|
|
26
|
+
lastItemAsLabel = _ref$lastItemAsLabel === void 0 ? false : _ref$lastItemAsLabel,
|
|
25
27
|
_ref$homeUrl = _ref.homeUrl,
|
|
26
28
|
homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl,
|
|
27
29
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -39,13 +41,28 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
39
41
|
var renderChevron = function renderChevron() {
|
|
40
42
|
return /*#__PURE__*/_jsx("div", {
|
|
41
43
|
"aria-hidden": "true",
|
|
42
|
-
children: /*#__PURE__*/_jsx(SystemIcons.
|
|
44
|
+
children: /*#__PURE__*/_jsx(SystemIcons.ForwardSlash, {
|
|
43
45
|
className: "chevronicon",
|
|
44
46
|
color: COLORS.neutral_500,
|
|
45
47
|
size: chevronSize
|
|
46
48
|
})
|
|
47
49
|
});
|
|
48
50
|
};
|
|
51
|
+
var renderBreadcrumbLinkItem = function renderBreadcrumbLinkItem(index, item) {
|
|
52
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
53
|
+
children: [renderChevron(), /*#__PURE__*/_jsx(HyperLink, {
|
|
54
|
+
id: 'link-item-' + index,
|
|
55
|
+
onClick: function onClick(e) {
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
navigateHook(item.url);
|
|
58
|
+
},
|
|
59
|
+
target: "_self",
|
|
60
|
+
variant: "default",
|
|
61
|
+
href: item.url,
|
|
62
|
+
children: item.label
|
|
63
|
+
})]
|
|
64
|
+
});
|
|
65
|
+
};
|
|
49
66
|
return /*#__PURE__*/_jsxs(BreadcrumbContainer, _objectSpread(_objectSpread({
|
|
50
67
|
size: size,
|
|
51
68
|
"data-testid": 'breacrumbContainer'
|
|
@@ -81,35 +98,19 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
81
98
|
}),
|
|
82
99
|
onClick: navigate
|
|
83
100
|
})]
|
|
84
|
-
}) : /*#__PURE__*/
|
|
85
|
-
children:
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
children: [renderChevron(), /*#__PURE__*/_jsx(HyperLink, {
|
|
98
|
-
id: 'link-item-' + (items.length - 2),
|
|
99
|
-
onClick: function onClick(e) {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
navigateHook(items[items.length - 2].url);
|
|
102
|
-
},
|
|
103
|
-
target: "_self",
|
|
104
|
-
variant: "default",
|
|
105
|
-
href: items[items.length - 2].url,
|
|
106
|
-
children: items[items.length - 2].label
|
|
107
|
-
})]
|
|
108
|
-
}), !!items && items.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
|
|
109
|
-
children: [renderChevron(), /*#__PURE__*/_jsx(LastBreadcrumbItem, {
|
|
110
|
-
size: size,
|
|
111
|
-
children: items[items.length - 1].label
|
|
112
|
-
})]
|
|
101
|
+
}) : /*#__PURE__*/_jsx(_Fragment, {
|
|
102
|
+
children: renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])
|
|
103
|
+
})), !!items && items.length > 1 && /*#__PURE__*/_jsx(_Fragment, {
|
|
104
|
+
children: renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])
|
|
105
|
+
}), !!items && items.length > 0 && /*#__PURE__*/_jsx(_Fragment, {
|
|
106
|
+
children: lastItemAsLabel ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
107
|
+
children: [renderChevron(), /*#__PURE__*/_jsx(LastBreadcrumbItem, {
|
|
108
|
+
size: size,
|
|
109
|
+
children: items[items.length - 1].label
|
|
110
|
+
})]
|
|
111
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
112
|
+
children: [renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]), renderChevron()]
|
|
113
|
+
})
|
|
113
114
|
})]
|
|
114
115
|
}));
|
|
115
116
|
};
|
|
@@ -117,7 +118,8 @@ Breadcrumb.propTypes = {
|
|
|
117
118
|
homeIcon: _pt.bool,
|
|
118
119
|
homeLabel: _pt.string,
|
|
119
120
|
homeUrl: _pt.string,
|
|
120
|
-
items: _pt.array
|
|
121
|
+
items: _pt.array,
|
|
122
|
+
lastItemAsLabel: _pt.bool
|
|
121
123
|
};
|
|
122
124
|
export default Breadcrumb;
|
|
123
125
|
//# sourceMappingURL=Breadcrumb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","names":["React","COLORS","Size","SystemIcons","useNavigate","HyperLink","IconButton","DropdownButton","BreadcrumbContainer","LastBreadcrumbItem","Breadcrumb","items","size","Small","homeIcon","homeLabel","homeUrl","rest","navigateHook","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","neutral_500","e","preventDefault","neutral_600"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useNavigate } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","names":["React","COLORS","Size","SystemIcons","useNavigate","HyperLink","IconButton","DropdownButton","BreadcrumbContainer","LastBreadcrumbItem","Breadcrumb","items","size","Small","homeIcon","homeLabel","lastItemAsLabel","homeUrl","rest","navigateHook","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","chevronSize","Medium","renderChevron","neutral_500","renderBreadcrumbLinkItem","index","item","e","preventDefault","neutral_600"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useNavigate } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\nimport internal from 'stream';\n\ntype BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n lastItemAsLabel?: boolean;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({\n items,\n size = Size.Small,\n homeIcon = true,\n homeLabel = 'Home',\n lastItemAsLabel = false,\n homeUrl = '/',\n ...rest\n}) => {\n const navigateHook = useNavigate();\n const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map((x) => ({ value: x.url, displayLabel: x.label })) : [];\n const navigate = (links: string[]) => {\n navigateHook(links[0]);\n };\n\n const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n const renderChevron = () => (\n <div aria-hidden=\"true\">\n <SystemIcons.ForwardSlash className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n </div>\n );\n const renderBreadcrumbLinkItem = (index: number, item: BreadcrumbItem) => {\n return (\n <>\n {renderChevron()}\n <HyperLink\n id={'link-item-' + index}\n onClick={(e) => {\n e.preventDefault();\n navigateHook(item.url);\n }}\n target=\"_self\"\n variant=\"default\"\n href={item.url}>\n {item.label}\n </HyperLink>\n </>\n );\n };\n\n return (\n <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'} {...rest}>\n {homeIcon ? (\n <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => navigateHook(homeUrl)}>\n <SystemIcons.Home size={chevronSize} />\n </IconButton>\n ) : (\n <HyperLink\n id={'homelink'}\n variant=\"default\"\n href={homeUrl}\n onClick={(e) => {\n e.preventDefault();\n navigateHook(homeUrl);\n }}>\n {homeLabel}\n </HyperLink>\n )}\n\n {!!items &&\n items.length > 2 &&\n (items.length > 3 ? (\n <>\n {renderChevron()}\n <DropdownButton\n type={'icon'}\n alignLeft={true}\n items={dropdownItems}\n size={size}\n icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n onClick={navigate}\n />\n </>\n ) : (\n <>{renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])}</>\n ))}\n\n {!!items && items.length > 1 && <>{renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])}</>}\n\n {!!items && items.length > 0 && (\n <>\n {lastItemAsLabel ? (\n <>\n {renderChevron()}\n <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n </>\n ) : (\n <>\n {renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1])}\n {renderChevron()}\n </>\n )}\n </>\n )}\n </BreadcrumbContainer>\n );\n};\n\nexport default Breadcrumb;\n"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
23
23
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
24
24
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
25
25
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
26
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
26
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
27
27
|
var MAX_MENU_HEIGHT = 240;
|
|
28
28
|
var AVG_OPTION_HEIGHT = 48;
|
|
29
29
|
var OFFSET_BEFORE_SHOW = 1000000;
|
|
@@ -5,7 +5,7 @@ import _pt from "prop-types";
|
|
|
5
5
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
6
6
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
7
7
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
9
|
import React from 'react';
|
|
10
10
|
import styled from 'styled-components';
|
|
11
11
|
import Button from '../Button/Button';
|