@laerdal/life-react-components 1.9.8-dev.9.full → 1.9.9-dev.5.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/ContentAccordion.cjs +5 -5
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +6 -6
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Accordion/styles.cjs +1 -1
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.js +1 -1
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.cjs +10 -46
- package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
- package/dist/Breadcrumb/Breadcrumb.js +8 -43
- package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/Breadcrumb/styles.cjs +55 -0
- package/dist/Breadcrumb/styles.cjs.map +1 -0
- package/dist/Breadcrumb/styles.d.ts +7 -0
- package/dist/Breadcrumb/styles.js +39 -0
- package/dist/Breadcrumb/styles.js.map +1 -0
- package/dist/Button/Button.cjs +3 -3
- package/dist/Button/Button.cjs.map +1 -1
- package/dist/Button/Button.js +3 -3
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/DualFunctionButton.cjs +1 -0
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.js +1 -0
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/Iconbutton.cjs +2 -1
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.d.ts +1 -0
- package/dist/Button/Iconbutton.js +1 -1
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/Card/VerticalCard/Card.cjs +1 -0
- package/dist/Card/VerticalCard/Card.cjs.map +1 -1
- package/dist/Card/VerticalCard/Card.js +1 -0
- package/dist/Card/VerticalCard/Card.js.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs +2 -0
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.js +2 -0
- package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs +1 -0
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js +1 -0
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs +3 -0
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.js +3 -0
- package/dist/Card/VerticalCard/CardTopSection.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +2 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +2 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +1 -1
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +1 -1
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/GlobalNavigationBar/__tests__/GlobalNavigationBar.tests.d.ts +1 -0
- package/dist/GlobalNavigationBar/__tests__/Logo.tests.d.ts +1 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +5 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.d.ts +2 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/MenuItem/MenuItem.cjs +5 -3
- package/dist/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/MenuItem/MenuItem.js +5 -3
- package/dist/MenuItem/MenuItem.js.map +1 -1
- package/dist/Popover/Popover.cjs +40 -26
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.d.ts +1 -0
- package/dist/Popover/Popover.js +40 -26
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/ProfileButton/ProfileButton.cjs +5 -3
- package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
- package/dist/ProfileButton/ProfileButton.d.ts +3 -0
- package/dist/ProfileButton/ProfileButton.js +2 -2
- package/dist/ProfileButton/ProfileButton.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +2 -0
- package/dist/Toggles/ToggleButton.cjs.map +1 -1
- package/dist/Toggles/ToggleButton.d.ts +1 -0
- package/dist/Toggles/ToggleButton.js +2 -0
- package/dist/Toggles/ToggleButton.js.map +1 -1
- package/dist/Toggles/ToggleSwitch.cjs +1 -0
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +1 -0
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/package.json +2 -1
|
@@ -43,7 +43,7 @@ var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObje
|
|
|
43
43
|
|
|
44
44
|
exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
|
|
45
45
|
|
|
46
|
-
var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["
|
|
46
|
+
var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
47
47
|
|
|
48
48
|
exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
|
|
49
49
|
|
|
@@ -51,15 +51,15 @@ var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4
|
|
|
51
51
|
|
|
52
52
|
exports.ContentAccordionItemContent = ContentAccordionItemContent;
|
|
53
53
|
|
|
54
|
-
var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["
|
|
54
|
+
var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
55
55
|
|
|
56
56
|
exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
|
|
57
57
|
|
|
58
|
-
var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["
|
|
58
|
+
var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
59
59
|
|
|
60
60
|
exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
|
|
61
61
|
|
|
62
|
-
var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["
|
|
62
|
+
var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
63
63
|
|
|
64
64
|
exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
|
|
65
65
|
|
|
@@ -67,7 +67,7 @@ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_t
|
|
|
67
67
|
|
|
68
68
|
exports.ContentAccordionItem = ContentAccordionItem;
|
|
69
69
|
|
|
70
|
-
var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n
|
|
70
|
+
var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
|
|
71
71
|
|
|
72
72
|
exports.ContentAccordionWrapper = ContentAccordionWrapper;
|
|
73
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","ParagraphTextStyle","Bold","black","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ParagraphLStyling,\n ParagraphMStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n} from '../styles/typography';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n } else {\n let active = props.items.find((item) => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter((key) => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
|
|
@@ -9,7 +9,7 @@ import React from 'react';
|
|
|
9
9
|
import styled from 'styled-components';
|
|
10
10
|
import { Size } from '../types';
|
|
11
11
|
import { SystemIcons } from '../icons';
|
|
12
|
-
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
|
|
12
|
+
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphTextStyle } from '../styles/typography';
|
|
13
13
|
import { COLORS, focusStyles } from '../styles';
|
|
14
14
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
15
15
|
import { defaultOnMouseDownHandler } from '../common';
|
|
@@ -17,13 +17,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
17
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
18
|
export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
|
|
19
19
|
export var ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
20
|
-
export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["
|
|
20
|
+
export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
|
|
21
21
|
export var ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n"])));
|
|
22
|
-
export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["
|
|
23
|
-
export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["
|
|
24
|
-
export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["
|
|
22
|
+
export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
|
|
23
|
+
export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
|
|
24
|
+
export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
|
|
25
25
|
export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
|
|
26
|
-
export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n
|
|
26
|
+
export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
|
|
27
27
|
export var ContentAccordion = function ContentAccordion(props) {
|
|
28
28
|
var _props$size;
|
|
29
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,WAAT,QAA4B,UAA5B;AACA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,iBALF,EAMEC,iBANF,EAOEC,iBAPF,EAQEC,kBARF,QASO,sBATP;AAUA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AACA,SAASC,SAAT,QAA0B,qBAA1B;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;AAEA,OAAO,IAAMC,0BAA0B,GAAGf,MAAM,CAACgB,GAAV,mZAK5BL,MAAM,CAACM,WALqB,EAS1BN,MAAM,CAACO,WATmB,EAUfP,MAAM,CAACQ,UAVQ,EAWxBN,SAAS,CAACO,KAXc,EAejCR,WAfiC,EAmB1BD,MAAM,CAACU,WAnBmB,EAoBfV,MAAM,CAACW,WApBQ,EAqBxBT,SAAS,CAACU,MArBc,CAAhC;AAyBP,OAAO,IAAMC,8BAA8B,GAAGxB,MAAM,CAACgB,GAAV,+JAApC;AAUP,OAAO,IAAMS,8BAA8B,GAAGzB,MAAM,CAACgB,GAAV,uEAApC;AAEP,OAAO,IAAMU,2BAA2B,GAAG1B,MAAM,CAACgB,GAAV,sHAAjC;AAKP,OAAO,IAAMW,iCAAiC,GAAG3B,MAAM,CAACgB,GAAV,uEAAvC;AAEP,OAAO,IAAMY,+BAA+B,GAAG5B,MAAM,CAACgB,GAAV,uEAArC;AAEP,OAAO,IAAMa,iCAAiC,GAAG7B,MAAM,CAACgB,GAAV,uEAAvC;AAEP,OAAO,IAAMc,oBAAoB,GAAG9B,MAAM,CAACgB,GAAV,2UAGPL,MAAM,CAACoB,WAHA,EAM3BL,2BAN2B,EAY3BX,0BAZ2B,EAalBJ,MAAM,CAACqB,WAbW,CAA1B;AAoBP,OAAO,IAAMC,uBAAuB,GAAGjC,MAAM,CAACgB,GAAV,+hCAIhCc,oBAJgC,EAKLnB,MAAM,CAACoB,WALF,EAY9BhB,0BAZ8B,EAe5BV,iBAAiB,CAACC,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAfW,EAkB9BR,2BAlB8B,EAsB5BC,iCAtB4B,EAuB1BlB,iBAAiB,CAACC,kBAAkB,CAACyB,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CAvBS,EA0B5BR,+BA1B4B,EA2B1BnB,iBAAiB,CAACC,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CA3BS,EAoC9BrB,0BApC8B,EAuC5BX,iBAAiB,CAACE,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAvCW,EA0C9BR,2BA1C8B,EA8C5BC,iCA9C4B,EA+C1BnB,iBAAiB,CAACE,kBAAkB,CAACyB,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CA/CS,EAkD5BR,+BAlD4B,EAmD1BpB,iBAAiB,CAACE,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CAnDS,EA4D9BrB,0BA5D8B,EA+D5BZ,iBAAiB,CAACG,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CA/DW,EAkE9BR,2BAlE8B,EAsE5BC,iCAtE4B,EAuE1BpB,iBAAiB,CAACG,kBAAkB,CAACyB,IAApB,EAA0BxB,MAAM,CAACyB,KAAjC,CAvES,EA0E5BR,+BA1E4B,EA2E1BrB,iBAAiB,CAACG,kBAAkB,CAACwB,OAApB,EAA6BvB,MAAM,CAACyB,KAApC,CA3ES,CAA7B;AAiGP,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AACzF,wBAA4BvC,KAAK,CAACwC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA1C,EAAAA,KAAK,CAAC2C,SAAN,CAAgB,YAAM;AACpB,QAAIJ,KAAK,CAACK,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACH,KAAK,CAACM,KAAN,CAAYC,MAAZ,CAAmB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACvB,MAAf;AAAA,OAAnB,EAA0CwB,GAA1C,CAA8C,UAACD,IAAD;AAAA,eAAUA,IAAI,CAACE,GAAf;AAAA,OAA9C,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAIzB,MAAM,wBAAGe,KAAK,CAACM,KAAN,CAAYK,IAAZ,CAAiB,UAACH,IAAD;AAAA,eAAU,CAAC,CAACA,IAAI,CAACvB,MAAjB;AAAA,OAAjB,CAAH,sDAAG,kBAA2CyB,GAAxD;;AACA,UAAIzB,MAAJ,EAAY;AACVkB,QAAAA,SAAS,CAAC,CAAClB,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACe,KAAK,CAACM,KAAP,EAAcN,KAAK,CAACK,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAJ,EAA+B;AAC7BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAACG,GAAD;AAAA,eAASA,GAAG,KAAKF,IAAI,CAACE,GAAtB;AAAA,OAAd,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIV,KAAK,CAACK,KAAV,EAAiB;AACfF,QAAAA,SAAS,8BAAKD,MAAL,IAAaM,IAAI,CAACE,GAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,GAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,CAACP,IAAD,EAAgC;AACjD,QAAMQ,QAAQ,GAAGd,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAjB;AAEA,wBACE,MAAC,oBAAD;AAAqC,MAAA,EAAE,iBAAUF,IAAI,CAACE,GAAf,CAAvC;AAA6D,MAAA,SAAS,EAAE,GAAGO,MAAH,CAAUD,QAAQ,GAAG,SAAH,GAAe,EAAjC,EAAqCC,MAArC,CAA4CT,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAA1E,CAAxE;AAAA,8BACE,MAAC,0BAAD;AACE,QAAA,QAAQ,EAAE,CAACL,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBK,SADjC;AAEE,QAAA,WAAW,EAAE1C,yBAFf;AAGE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACgC,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,SAHX;AAIE,QAAA,UAAU,EAAE,oBAACW,KAAD;AAAA,iBAAWA,KAAK,CAACT,GAAN,KAAc,OAAd,IAAyBE,WAAW,CAACJ,IAAD,CAA/C;AAAA,SAJd;AAAA,gCAKE,KAAC,8BAAD;AAAA,oBACGR,KAAK,CAACK,KAAN,GAAcW,QAAQ,gBAAG,KAAC,WAAD,CAAa,KAAb,KAAH,gBAA2B,KAAC,WAAD,CAAa,IAAb,KAAjD,GAAwEA,QAAQ,gBAAG,KAAC,WAAD,CAAa,WAAb,KAAH,gBAAiC,KAAC,WAAD,CAAa,YAAb;AADpH,UALF,eAQE,KAAC,8BAAD;AAAA,oBAAiCR,IAAI,CAACY;AAAtC,UARF;AAAA,QADF,eAWE,MAAC,2BAAD;AAAA,mBACGZ,IAAI,CAACa,MAAL,iBAAe,KAAC,iCAAD;AAAA,oBAAoCb,IAAI,CAACa;AAAzC,UADlB,eAEE,KAAC,+BAAD;AAAA,oBAAkCb,IAAI,CAACc;AAAvC,UAFF,EAGGd,IAAI,CAACe,MAAL,iBAAe,KAAC,iCAAD;AAAA,oBAAoCf,IAAI,CAACe;AAAzC,UAHlB;AAAA,QAXF;AAAA,OAA2Bf,IAAI,CAACE,GAAhC,CADF;AAmBD,GAtBD;;AAwBA,sBAAO,KAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,GAAGO,MAAH,2BAAcjB,KAAK,CAACwB,IAApB,qDAA4B7D,IAAI,CAAC8D,MAAjC,EAApC;AAAA,cAAiFzB,KAAK,CAACM,KAAN,CAAYG,GAAZ,CAAgB,UAACD,IAAD;AAAA,aAAUO,UAAU,CAACP,IAAD,CAApB;AAAA,KAAhB;AAAjF,IAAP;AACD,CApDM;;AALLF,EAAAA,K;AAVAI,IAAAA,G;AACAU,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAV,IAAAA,Q;AACA5B,IAAAA,M;;AAKAoB,EAAAA,K;;AA0DF,eAAeN,gBAAf","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ParagraphLStyling,\n ParagraphMStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n} from '../styles/typography';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n } else {\n let active = props.items.find((item) => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter((key) => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
|
|
@@ -27,7 +27,7 @@ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (
|
|
|
27
27
|
|
|
28
28
|
exports.AccordionItemContainer = AccordionItemContainer;
|
|
29
29
|
|
|
30
|
-
var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n
|
|
30
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
31
31
|
|
|
32
32
|
exports.ItemHeaderContainer = ItemHeaderContainer;
|
|
33
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,2sBAQ5B,+BAAkBO,2BAAmBC,OAArC,EAA8CJ,eAAOK,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdN,eAAOO,UApBO,EAqBnBP,eAAOQ,WArBY,EAsBjBC,oBAAUC,KAtBO,EA0BnBV,eAAOW,WA1BY,EA2BdX,eAAOY,WA3BO,EA4BjBH,oBAAUI,MA5BO,EAgCnBb,eAAOc,WAhCY,EAoCdd,eAAOe,KApCO,EAqCnBf,eAAOgB,WArCY,EAyCjBhB,eAAOgB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,gJACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACqB,OAAN,IAAiB,UAA5B;AAAA,CADiB,EAElB,UAACrB,KAAD;AAAA,SAAWA,KAAK,CAACsB,MAAN,IAAgB,QAA3B;AAAA,CAFkB,EAGdpB,eAAOe,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string; margin?: string }>`\n padding: ${(props) => props.padding || '0px 16px'};\n margin: ${(props) => props.margin || '12px 0'};\n background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}
|
package/dist/Accordion/styles.js
CHANGED
|
@@ -9,7 +9,7 @@ export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject
|
|
|
9
9
|
export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ", ";\n"])), function (props) {
|
|
10
10
|
return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
|
|
11
11
|
});
|
|
12
|
-
export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n
|
|
12
|
+
export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
|
|
13
13
|
export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
|
|
14
14
|
export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", ";\n margin: ", ";\n background: ", ";\n"])), function (props) {
|
|
15
15
|
return props.padding || '0px 16px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;AAAA,OAAOA,MAAP,MAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,kBAApC,EAAwDC,WAAxD,QAA2E,WAA3E;AACA,SAASC,SAAT,QAA0B,qBAA1B;AAEA,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAV,oKAA1B;AAOP,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAV,0LAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCT,MAAM,CAACU,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;AAQP,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAV,6rBAQ5BL,iBAAiB,CAACC,kBAAkB,CAACU,OAApB,EAA6BZ,MAAM,CAACa,WAApC,CARW,EAgB1BV,WAhB0B,EAoBdH,MAAM,CAACc,UApBO,EAqBnBd,MAAM,CAACe,WArBY,EAsBjBX,SAAS,CAACY,KAtBO,EA0BnBhB,MAAM,CAACiB,WA1BY,EA2BdjB,MAAM,CAACkB,WA3BO,EA4BjBd,SAAS,CAACe,MA5BO,EAgCnBnB,MAAM,CAACoB,WAhCY,EAoCdpB,MAAM,CAACqB,KApCO,EAqCnBrB,MAAM,CAACsB,WArCY,EAyCjBtB,MAAM,CAACsB,WAzCU,CAAzB;AA8CP,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAV,+FAAzB;AAIP,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAV,kIACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACiB,OAAN,IAAiB,UAA5B;AAAA,CADiB,EAElB,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACkB,MAAN,IAAgB,QAA3B;AAAA,CAFkB,EAGd1B,MAAM,CAACqB,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string; margin?: string }>`\n padding: ${(props) => props.padding || '0px 16px'};\n margin: ${(props) => props.margin || '12px 0'};\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
|
|
@@ -9,64 +9,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
13
|
|
|
16
14
|
var React = _interopRequireWildcard(require("react"));
|
|
17
15
|
|
|
18
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
-
|
|
20
16
|
var _styles = require("../styles");
|
|
21
17
|
|
|
22
18
|
var _ = require("..");
|
|
23
19
|
|
|
24
20
|
var _reactRouter = require("react-router");
|
|
25
21
|
|
|
26
|
-
var _typography = require("../styles/typography");
|
|
27
|
-
|
|
28
22
|
var _DropdownButton = _interopRequireDefault(require("../Dropdown/DropdownButton"));
|
|
29
23
|
|
|
30
|
-
var
|
|
24
|
+
var _styles2 = require("./styles");
|
|
31
25
|
|
|
32
|
-
var
|
|
26
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
27
|
|
|
34
28
|
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); }
|
|
35
29
|
|
|
36
30
|
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; }
|
|
37
31
|
|
|
38
|
-
var marginRight = function marginRight(size) {
|
|
39
|
-
return size == _.Size.Small || size == _.Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var BreadcrumbContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display:flex;\n align-items: center;\n min-height: 48px;\n \n a {\n text-decoration: none;\n ", "\n ", "\n }\n\n .chevronicon {\n ", "\n }\n\n a:hover {\n color: ", ";\n }\n a:active {\n color: ", ";\n }\n"])), function (props) {
|
|
43
|
-
return FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
|
|
44
|
-
}, function (props) {
|
|
45
|
-
return marginRight(props.size);
|
|
46
|
-
}, function (props) {
|
|
47
|
-
return marginRight(props.size);
|
|
48
|
-
}, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
|
|
49
|
-
|
|
50
|
-
var FontStyles = function FontStyles(size, textStyle, color) {
|
|
51
|
-
switch (size) {
|
|
52
|
-
case _.Size.XSmall:
|
|
53
|
-
return (0, _typography.ComponentXXSStyling)(textStyle, color);
|
|
54
|
-
|
|
55
|
-
case _.Size.Medium:
|
|
56
|
-
return (0, _typography.ComponentMStyling)(textStyle, color);
|
|
57
|
-
|
|
58
|
-
case _.Size.Small:
|
|
59
|
-
default:
|
|
60
|
-
return (0, _typography.ComponentSStyling)(textStyle, color);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
var LastBreadcrumbItem = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n"])), function (props) {
|
|
65
|
-
return FontStyles(props.size, _.ComponentTextStyle.Bold, _styles.COLORS.neutral_800);
|
|
66
|
-
}, function (props) {
|
|
67
|
-
return marginRight(props.size);
|
|
68
|
-
});
|
|
69
|
-
|
|
70
32
|
var Breadcrumb = function Breadcrumb(_ref) {
|
|
71
33
|
var items = _ref.items,
|
|
72
34
|
_ref$size = _ref.size,
|
|
@@ -89,10 +51,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
89
51
|
history.push(links[0]);
|
|
90
52
|
};
|
|
91
53
|
|
|
92
|
-
var chevronSize = size == _.Size.Medium ?
|
|
93
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BreadcrumbContainer, {
|
|
54
|
+
var chevronSize = size == _.Size.Medium ? '24px' : size == _.Size.Small ? '20px' : '16px';
|
|
55
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.BreadcrumbContainer, {
|
|
94
56
|
size: size,
|
|
57
|
+
"data-testid": 'breacrumbContainer',
|
|
95
58
|
children: [homeIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.IconButton, {
|
|
59
|
+
id: "homeIcon",
|
|
96
60
|
variant: "secondary",
|
|
97
61
|
shape: "circular",
|
|
98
62
|
action: function action() {
|
|
@@ -102,7 +66,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
102
66
|
size: chevronSize
|
|
103
67
|
})
|
|
104
68
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
|
|
105
|
-
id:
|
|
69
|
+
id: 'homelink',
|
|
106
70
|
variant: "default",
|
|
107
71
|
href: homeUrl,
|
|
108
72
|
children: homeLabel
|
|
@@ -128,7 +92,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
128
92
|
color: _styles.COLORS.neutral_500,
|
|
129
93
|
size: chevronSize
|
|
130
94
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
|
|
131
|
-
id:
|
|
95
|
+
id: 'link-item-' + (items.length - 3),
|
|
132
96
|
target: "_self",
|
|
133
97
|
variant: "default",
|
|
134
98
|
href: items[items.length - 3].url,
|
|
@@ -140,7 +104,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
140
104
|
color: _styles.COLORS.neutral_500,
|
|
141
105
|
size: chevronSize
|
|
142
106
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HyperLink, {
|
|
143
|
-
id:
|
|
107
|
+
id: 'link-item-' + (items.length - 2),
|
|
144
108
|
target: "_self",
|
|
145
109
|
variant: "default",
|
|
146
110
|
href: items[items.length - 2].url,
|
|
@@ -151,7 +115,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
151
115
|
className: "chevronicon",
|
|
152
116
|
color: _styles.COLORS.neutral_500,
|
|
153
117
|
size: chevronSize
|
|
154
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LastBreadcrumbItem, {
|
|
118
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.LastBreadcrumbItem, {
|
|
155
119
|
size: size,
|
|
156
120
|
children: items[items.length - 1].label
|
|
157
121
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"names":["Breadcrumb","items","size","Size","Small","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","label","navigate","links","push","chevronSize","Medium","COLORS","neutral_500","neutral_600"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { COLORS } from '../styles';\nimport { Size, SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { BreadcrumbContainer, LastBreadcrumbItem } from './styles';\n\ntype BreadcrumbProps = {\n homeIcon?: boolean;\n homeLabel?: string;\n homeUrl?: string;\n items?: BreadcrumbItem[];\n size?: Size;\n};\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size = Size.Small, homeIcon = true, homeLabel = 'Home', homeUrl = '/' }) => {\n const history = useHistory();\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 history.push(links[0]);\n };\n\n const chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';\n\n return (\n <BreadcrumbContainer size={size} data-testid={'breacrumbContainer'}>\n {homeIcon ? (\n <IconButton id=\"homeIcon\" variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n <SystemIcons.Home size={chevronSize} />\n </IconButton>\n ) : (\n <HyperLink id={'homelink'} variant=\"default\" href={homeUrl}>\n {homeLabel}\n </HyperLink>\n )}\n\n {!!items &&\n items.length > 2 &&\n (items.length > 3 ? (\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\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 <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={'link-item-' + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n {items[items.length - 3].label}\n </HyperLink>\n </>\n ))}\n\n {!!items && items.length > 1 && (\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <HyperLink id={'link-item-' + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n {items[items.length - 2].label}\n </HyperLink>\n </>\n )}\n\n {!!items && items.length > 0 && (\n <>\n <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n <LastBreadcrumbItem size={size}>{items[items.length - 1].label}</LastBreadcrumbItem>\n </>\n )}\n </BreadcrumbContainer>\n );\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.cjs"}
|
|
@@ -1,52 +1,15 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
1
|
import _pt from "prop-types";
|
|
3
|
-
|
|
4
|
-
var _templateObject, _templateObject2;
|
|
5
|
-
|
|
6
2
|
import * as React from 'react';
|
|
7
|
-
import styled from 'styled-components';
|
|
8
3
|
import { COLORS } from '../styles';
|
|
9
|
-
import {
|
|
4
|
+
import { Size, SystemIcons } from '..';
|
|
10
5
|
import { useHistory } from 'react-router';
|
|
11
6
|
import { HyperLink, IconButton } from '..';
|
|
12
|
-
import { ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
|
|
13
7
|
import DropdownButton from '../Dropdown/DropdownButton';
|
|
8
|
+
import { BreadcrumbContainer, LastBreadcrumbItem } from './styles';
|
|
14
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
16
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
12
|
|
|
18
|
-
var marginRight = function marginRight(size) {
|
|
19
|
-
return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
var BreadcrumbContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display:flex;\n align-items: center;\n min-height: 48px;\n \n a {\n text-decoration: none;\n ", "\n ", "\n }\n\n .chevronicon {\n ", "\n }\n\n a:hover {\n color: ", ";\n }\n a:active {\n color: ", ";\n }\n"])), function (props) {
|
|
23
|
-
return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600);
|
|
24
|
-
}, function (props) {
|
|
25
|
-
return marginRight(props.size);
|
|
26
|
-
}, function (props) {
|
|
27
|
-
return marginRight(props.size);
|
|
28
|
-
}, COLORS.primary_700, COLORS.primary_800);
|
|
29
|
-
|
|
30
|
-
var FontStyles = function FontStyles(size, textStyle, color) {
|
|
31
|
-
switch (size) {
|
|
32
|
-
case Size.XSmall:
|
|
33
|
-
return ComponentXXSStyling(textStyle, color);
|
|
34
|
-
|
|
35
|
-
case Size.Medium:
|
|
36
|
-
return ComponentMStyling(textStyle, color);
|
|
37
|
-
|
|
38
|
-
case Size.Small:
|
|
39
|
-
default:
|
|
40
|
-
return ComponentSStyling(textStyle, color);
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
var LastBreadcrumbItem = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n ", "\n"])), function (props) {
|
|
45
|
-
return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800);
|
|
46
|
-
}, function (props) {
|
|
47
|
-
return marginRight(props.size);
|
|
48
|
-
});
|
|
49
|
-
|
|
50
13
|
var Breadcrumb = function Breadcrumb(_ref) {
|
|
51
14
|
var items = _ref.items,
|
|
52
15
|
_ref$size = _ref.size,
|
|
@@ -69,10 +32,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
69
32
|
history.push(links[0]);
|
|
70
33
|
};
|
|
71
34
|
|
|
72
|
-
var chevronSize = size == Size.Medium ?
|
|
35
|
+
var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
|
|
73
36
|
return /*#__PURE__*/_jsxs(BreadcrumbContainer, {
|
|
74
37
|
size: size,
|
|
38
|
+
"data-testid": 'breacrumbContainer',
|
|
75
39
|
children: [homeIcon ? /*#__PURE__*/_jsx(IconButton, {
|
|
40
|
+
id: "homeIcon",
|
|
76
41
|
variant: "secondary",
|
|
77
42
|
shape: "circular",
|
|
78
43
|
action: function action() {
|
|
@@ -82,7 +47,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
82
47
|
size: chevronSize
|
|
83
48
|
})
|
|
84
49
|
}) : /*#__PURE__*/_jsx(HyperLink, {
|
|
85
|
-
id:
|
|
50
|
+
id: 'homelink',
|
|
86
51
|
variant: "default",
|
|
87
52
|
href: homeUrl,
|
|
88
53
|
children: homeLabel
|
|
@@ -108,7 +73,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
108
73
|
color: COLORS.neutral_500,
|
|
109
74
|
size: chevronSize
|
|
110
75
|
}), /*#__PURE__*/_jsx(HyperLink, {
|
|
111
|
-
id:
|
|
76
|
+
id: 'link-item-' + (items.length - 3),
|
|
112
77
|
target: "_self",
|
|
113
78
|
variant: "default",
|
|
114
79
|
href: items[items.length - 3].url,
|
|
@@ -120,7 +85,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
|
|
|
120
85
|
color: COLORS.neutral_500,
|
|
121
86
|
size: chevronSize
|
|
122
87
|
}), /*#__PURE__*/_jsx(HyperLink, {
|
|
123
|
-
id:
|
|
88
|
+
id: 'link-item-' + (items.length - 2),
|
|
124
89
|
target: "_self",
|
|
125
90
|
variant: "default",
|
|
126
91
|
href: items[items.length - 2].url,
|