@laerdal/life-react-components 1.9.9-dev.28.full → 1.9.9-dev.30
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 +1 -1
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +1 -1
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +3 -1
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +3 -1
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/__tests__/Tablist.tests.d.ts +2 -0
- package/package.json +1 -1
|
@@ -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 }\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.
|
|
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.ComponentSStyling)(_typography.ComponentTextStyle.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.ComponentMStyling)(_typography.ComponentTextStyle.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.ComponentLStyling)(_typography.ComponentTextStyle.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","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"}
|
|
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","black","ParagraphTextStyle","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 ${ComponentSStyling(ComponentTextStyle.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 ${ComponentMStyling(ComponentTextStyle.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 ${ComponentLStyling(ComponentTextStyle.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"}
|
|
@@ -23,7 +23,7 @@ export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_
|
|
|
23
23
|
export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
|
|
24
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 }\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,
|
|
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, ComponentSStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.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","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":"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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.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":"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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 ${ComponentSStyling(ComponentTextStyle.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 ${ComponentMStyling(ComponentTextStyle.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 ${ComponentLStyling(ComponentTextStyle.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"}
|
|
@@ -40,7 +40,7 @@ var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_
|
|
|
40
40
|
|
|
41
41
|
var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-bottom: 1px solid ", ";\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ", ";\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
|
|
42
42
|
|
|
43
|
-
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n
|
|
43
|
+
var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &.selected {\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
@@ -64,10 +64,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, {
|
|
67
|
+
"data-testid": 'horizontal-tabs-container',
|
|
67
68
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
|
|
68
69
|
className: "".concat(sideFill ? 'fill' : '')
|
|
69
70
|
}), tabs.map(function (tab, index) {
|
|
70
71
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, {
|
|
72
|
+
"data-testid": "tab_".concat(tab.value),
|
|
71
73
|
tabIndex: tab.disabled ? -1 : 0,
|
|
72
74
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
73
75
|
style: fullWidth ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","defaultOnMouseDownHandler","width","length","selected"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","defaultOnMouseDownHandler","width","length","selected"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &.selected {\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n data-testid={`tab_${tab.value}`}\n key={`${tab}_${index}`}\n tabIndex={tab.disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}
|
|
@@ -26,7 +26,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
26
26
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
27
|
var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n"])));
|
|
28
28
|
var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n border-bottom: 1px solid ", ";\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ", ";\n }\n"])), COLORS.neutral_100, COLORS.white);
|
|
29
|
-
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n
|
|
29
|
+
var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ", ";\n div {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n }\n &.selected {\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ", ";\n color: ", ";\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.selected {\n background-color: ", ";\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n background: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ", ";\n border-bottom: 0px;\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n }\n }\n\n &.disabled {\n color: ", ";\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-", " {\n ", "\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-", " {\n ", "\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-", " {\n ", "\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
|
|
30
30
|
|
|
31
31
|
var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
32
32
|
var size = _ref.size,
|
|
@@ -49,10 +49,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
|
|
|
49
49
|
};
|
|
50
50
|
|
|
51
51
|
return /*#__PURE__*/_jsxs(HorizontalTabContainer, {
|
|
52
|
+
"data-testid": 'horizontal-tabs-container',
|
|
52
53
|
children: [/*#__PURE__*/_jsx(TabSideFill, {
|
|
53
54
|
className: "".concat(sideFill ? 'fill' : '')
|
|
54
55
|
}), tabs.map(function (tab, index) {
|
|
55
56
|
return /*#__PURE__*/_jsx(TabButton, {
|
|
57
|
+
"data-testid": "tab_".concat(tab.value),
|
|
56
58
|
tabIndex: tab.disabled ? -1 : 0,
|
|
57
59
|
onMouseDown: defaultOnMouseDownHandler,
|
|
58
60
|
style: fullWidth ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","width","length","selected"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","width","length","selected"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,WAArC,QAAwD,WAAxD;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AACA,SAASC,SAAT,QAA0B,qBAA1B;AACA,SAASC,yBAAT,QAA0C,WAA1C,C,CAEA;;;;AACA,IAAMC,sBAAsB,GAAGP,MAAM,CAACQ,GAAV,wJAA5B;AAOA,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2MAEYX,MAAM,CAACa,WAFnB,EAOCb,MAAM,CAACc,KAPR,CAAjB;AAWA,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAV,yhEACJhB,MAAM,CAACiB,WADH,EAQAT,SAAS,CAACU,KARV,EAUKlB,MAAM,CAACmB,UAVZ,EAWAnB,MAAM,CAACoB,WAXP,EAciBpB,MAAM,CAACoB,WAdxB,EAgBkBpB,MAAM,CAACa,WAhBzB,EAiBmBb,MAAM,CAACa,WAjB1B,EAsBAL,SAAS,CAACa,MAtBV,EA0BTnB,WA1BS,EAmCKF,MAAM,CAACmB,UAnCZ,EAoCAnB,MAAM,CAACoB,WApCP,EAuCiBpB,MAAM,CAACoB,WAvCxB,EAyCkBpB,MAAM,CAACa,WAzCzB,EA0CmBb,MAAM,CAACa,WA1C1B,EA+CWb,MAAM,CAACc,KA/ClB,EAgDed,MAAM,CAACsB,WAhDtB,EAkDgBtB,MAAM,CAACa,WAlDvB,EAmDiBb,MAAM,CAACa,WAnDxB,EAuDPX,WAvDO,EA2DKF,MAAM,CAACuB,WA3DZ,EA4DAvB,MAAM,CAACwB,WA5DP,EA6DkBxB,MAAM,CAACyB,QA7DzB,EA6DkDzB,MAAM,CAAC0B,KA7DzD,EAiEiB1B,MAAM,CAACwB,WAjExB,EAmEkBxB,MAAM,CAACa,WAnEzB,EAoEmBb,MAAM,CAACa,WApE1B,EAyEAb,MAAM,CAAC2B,WAzEP,EA+EE3B,MAAM,CAAC2B,WA/ET,EAmFF5B,IAAI,CAAC6B,MAnFH,EAoFPrB,kBAAkB,CAACN,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CApFX,EA0FF9B,IAAI,CAAC+B,KA1FH,EA2FPxB,iBAAiB,CAACL,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CA3FV,EAiGF9B,IAAI,CAACgC,MAjGH,EAkGP1B,iBAAiB,CAACJ,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAlGV,EAwGF9B,IAAI,CAACiC,KAxGH,EAyGP5B,iBAAiB,CAACH,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAzGV,CAAf,C,CAiHA;;AAgBA,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,OAA0E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,IAAiE,QAAjEA,IAAiE;AAAA,MAA3DC,QAA2D,QAA3DA,QAA2D;AAAA,MAAjDC,SAAiD,QAAjDA,SAAiD;AAAA,MAAtCC,WAAsC,QAAtCA,WAAsC;;AAC/F;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,EAAD,EAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,MAAC,sBAAD;AAAwB,mBAAa,2BAArC;AAAA,4BACE,KAAC,WAAD;AAAa,MAAA,SAAS,YAAKR,QAAQ,GAAG,MAAH,GAAY,EAAzB;AAAtB,MADF,EAEGD,IAAI,CAACU,GAAL,CAAS,UAACC,GAAD,EAAqBC,KAArB;AAAA,0BACR,KAAC,SAAD;AACE,qCAAoBD,GAAG,CAACE,KAAxB,CADF;AAGE,QAAA,QAAQ,EAAEF,GAAG,CAACG,QAAJ,GAAe,CAAC,CAAhB,GAAoB,CAHhC;AAIE,QAAA,WAAW,EAAExC,yBAJf;AAKE,QAAA,KAAK,EAAE4B,SAAS,GAAG;AAAEa,UAAAA,KAAK,YAAK,MAAMf,IAAI,CAACgB,MAAhB;AAAP,SAAH,GAAwC,EAL1D;AAME,QAAA,SAAS,iBAAUjB,IAAV,cAAkBY,GAAG,CAACM,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDN,GAAG,CAACG,QAAJ,GAAe,UAAf,GAA4B,EAAhF,CANX;AAOE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACH,GAAG,CAACG,QAAL,IAAiBV,WAAW,CAACO,GAAG,CAACN,EAAL,CAAlC;AAAA,SAPX;AAAA,+BAQE;AAAK,UAAA,SAAS,iBAAUN,IAAV,cAAkBY,GAAG,CAACM,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDN,GAAG,CAACG,QAAJ,GAAe,UAAf,GAA4B,EAAhF,CAAd;AAAA,oBAAqGH,GAAG,CAACE;AAAzG;AARF,mBAEUF,GAFV,cAEiBC,KAFjB,EADQ;AAAA,KAAT,CAFH;AAAA,IADF;AAiBD,CAhCD;;;AAbEZ,EAAAA,I;AAOAa,IAAAA,K;AACAI,IAAAA,Q;AACAZ,IAAAA,E;AACAS,IAAAA,Q;;AATAb,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA4CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n width: 100%;\n display: flex;\n position: relative;\n flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n position: absolute;\n border-bottom: 1px solid ${COLORS.neutral_100};\n bottom: 0;\n width: 100%;\n\n &.fill {\n background: ${COLORS.white};\n }\n`;\n\nconst TabButton = styled.button`\n color: ${COLORS.neutral_800};\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n div {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n }\n &.selected {\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_700};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.selected {\n background-color: ${COLORS.white};\n border-top: 2px solid ${COLORS.primary_500};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n\n &.selected {\n border-top: 2px solid ${COLORS.primary_800};\n border-bottom: 0px;\n border-left: 1px solid ${COLORS.neutral_100};\n border-right: 1px solid ${COLORS.neutral_100};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n box-shadow: none !important;\n\n &:hover {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.size-${Size.XSmall} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 32px;\n margin-top: 16px;\n }\n\n &.size-${Size.Small} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n padding: 0px 16px;\n height: 40px;\n margin-top: 8px;\n }\n\n &.size-${Size.Medium} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n height: 48px;\n min-width: 96px;\n padding: 0px 16px;\n }\n\n &.size-${Size.Large} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n height: 56px;\n min-width: 144px;\n padding: 0px 16px;\n }\n }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n size: Size;\n tabs: HorizontalTab[];\n sideFill?: boolean;\n fullWidth?: boolean;\n onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n value: string;\n selected: boolean;\n to: string;\n disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n /**\n * Informs parent component of tab change and clears focus.\n * @param to - A link to which user should be navigated.\n */\n const doTabChange = (to: string): void => {\n // Let's inform parent component\n onTabChange(to);\n\n // Let's clear focus\n if (document.activeElement instanceof HTMLElement) {\n document.activeElement!.blur();\n }\n };\n\n return (\n <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\n data-testid={`tab_${tab.value}`}\n key={`${tab}_${index}`}\n tabIndex={tab.disabled ? -1 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n onClick={() => !tab.disabled && doTabChange(tab.to)}>\n <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
|