@laerdal/life-react-components 1.9.8-dev.15.full → 1.9.8-dev.16
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.
|
@@ -53,7 +53,7 @@ var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_template
|
|
|
53
53
|
|
|
54
54
|
exports.ItemIconRight = ItemIconRight;
|
|
55
55
|
|
|
56
|
-
var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", ";\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ", " {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ", " {\n margin-right: ", ";\n svg {\n display: block;\n margin: auto;\n height:", ";\n width:", ";\n }\n }\n\n ", " {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n }\n }\n"])), function (props) {
|
|
56
|
+
var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", ";\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ", " {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ", " {\n margin-right: ", ";\n svg {\n display: block;\n margin: auto;\n height:", ";\n width:", ";\n }\n }\n\n ", " {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n position: absolute;\n right: ", ";\n }\n }\n"])), function (props) {
|
|
57
57
|
return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
|
|
58
58
|
}, ItemLabel, ItemIcon, function (props) {
|
|
59
59
|
return props.size === _types.Size.Small ? '6px' : '8px';
|
|
@@ -61,12 +61,14 @@ var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateOb
|
|
|
61
61
|
return props.size === _types.Size.Small ? '20px' : '';
|
|
62
62
|
}, function (props) {
|
|
63
63
|
return props.size === _types.Size.Small ? '20px' : '';
|
|
64
|
-
}, ItemIconRight)
|
|
64
|
+
}, ItemIconRight, function (props) {
|
|
65
|
+
return props.size === _types.Size.Small ? '8px' : props.size === _types.Size.Medium ? '16px' : '24px';
|
|
66
|
+
});
|
|
65
67
|
|
|
66
68
|
exports.ItemContent = ItemContent;
|
|
67
69
|
|
|
68
70
|
var DropdownButtonCSS = function DropdownButtonCSS(size) {
|
|
69
|
-
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ", ";\n background-color: ", ";\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ", ", ", " {\n color: ", ";\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ", "\n }\n\n &:active:not(.active), &.active-state {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active {\n background: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ", ";\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background
|
|
71
|
+
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ", ";\n background-color: ", ";\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ", ", ", " {\n color: ", ";\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ", "\n }\n\n &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active {\n background: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ", ";\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background: none;\n cursor: not-allowed;\n \n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n background-color: ", ";\n\n ", ", ", " {\n color: ", ";\n } \n\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active:not(:disabled):not(.locked), &.active-active-state {\n background-color: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n\n &.active.locked {\n &::after {\n background-color: ", ";\n } \n }\n\n &.active:disabled:not(.locked) {\n &::after {\n background-color: ", ";\n } \n }\n\n &:disabled:not(.locked), &.disabled-state {\n background: none;\n cursor: not-allowed;\n \n ", ", ", " {\n color: ", " !important;\n }\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, ItemIcon, ItemLabel, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_500, _styles.COLORS.neutral_300, ItemIcon, ItemLabel, _styles.COLORS.neutral_300, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
|
|
70
72
|
};
|
|
71
73
|
|
|
72
74
|
exports.DropdownButtonCSS = DropdownButtonCSS;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","css","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n className?: string;\n tabIndex?: number;\n iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ${ItemLabel} {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ${ItemIcon} {\n margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n svg {\n display: block;\n margin: auto;\n height:${props=>props.size===Size.Small?'20px':''};\n width:${props=>props.size===Size.Small?'20px':''};\n }\n }\n\n ${ItemIconRight} {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n }\n }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n return css`\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_600};\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ${COLORS.primary_20};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ${focusStyles}\n }\n\n &:active:not(.active), &.active-state {\n background: ${COLORS.primary_100};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_800};\n }\n }\n\n &.active {\n background: ${COLORS.neutral_20};\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_800};\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background-color: transparent;\n cursor: not-allowed;\n color: ${COLORS.neutral_500};\n }\n\n &.active:hover, &.active-hover-state {\n background-color: ${COLORS.primary_20};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_700};\n } \n\n &::after {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.active:active, &.active-active-state {\n background-color: ${COLORS.primary_100};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled, &.disabled-state {\n background-color: transparent !important;\n cursor: not-allowed;\n color: ${COLORS.neutral_200} !important;\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id }: MenuItemProps, ref) => {\n return (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item.disabled || item.locked}\n tabIndex={tabIndex}\n onMouseDown={defaultOnMouseDownHandler}\n ref={ref}\n onClick={onClickHandler}\n className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n id={id}>\n {item.showDividerAbove && <div className=\"divider\" />}\n <ItemContent size={size}>\n {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n <ItemLabel>\n <div>\n <div>{item.displayLabel ?? item.value}</div>\n {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n </div>\n {\n item.locked &&\n <ItemIconRight>\n <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n </ItemIconRight>\n }\n {\n !item.locked && !!iconRight &&\n <ItemIconRight>\n {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n </ItemIconRight>\n }\n\n </ItemLabel>\n </ItemContent>\n </DropdownButton>\n );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","Medium","css","ComponentTextStyle","Regular","COLORS","neutral_600","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_300","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n className?: string;\n tabIndex?: number;\n iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ${ItemLabel} {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ${ItemIcon} {\n margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n svg {\n display: block;\n margin: auto;\n height:${props=>props.size===Size.Small?'20px':''};\n width:${props=>props.size===Size.Small?'20px':''};\n }\n }\n\n ${ItemIconRight} {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n position: absolute;\n right: ${props=>props.size===Size.Small?'8px':(props.size===Size.Medium?'16px':'24px')};\n }\n }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n return css`\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_600};\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ${COLORS.primary_20};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ${focusStyles}\n }\n\n &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n background: ${COLORS.primary_100};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_800};\n }\n }\n\n &.active {\n background: ${COLORS.neutral_20};\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_800};\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background: none;\n cursor: not-allowed;\n \n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.neutral_500};\n }\n }\n\n &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n background-color: ${COLORS.primary_20};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_700};\n } \n\n &::after {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.active:active:not(:disabled):not(.locked), &.active-active-state {\n background-color: ${COLORS.primary_100};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.active.locked {\n &::after {\n background-color: ${COLORS.neutral_500};\n } \n }\n\n &.active:disabled:not(.locked) {\n &::after {\n background-color: ${COLORS.neutral_300};\n } \n }\n\n &:disabled:not(.locked), &.disabled-state {\n background: none;\n cursor: not-allowed;\n \n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.neutral_300} !important;\n }\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id }: MenuItemProps, ref) => {\n return (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item.disabled || item.locked}\n tabIndex={tabIndex}\n onMouseDown={defaultOnMouseDownHandler}\n ref={ref}\n onClick={onClickHandler}\n className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n id={id}>\n {item.showDividerAbove && <div className=\"divider\" />}\n <ItemContent size={size}>\n {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n <ItemLabel>\n <div>\n <div>{item.displayLabel ?? item.value}</div>\n {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n </div>\n {\n item.locked &&\n <ItemIconRight>\n <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n </ItemIconRight>\n }\n {\n !item.locked && !!iconRight &&\n <ItemIconRight>\n {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n </ItemIconRight>\n }\n\n </ItemLabel>\n </ItemContent>\n </DropdownButton>\n );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
|
|
@@ -18,7 +18,7 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
|
|
|
18
18
|
export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
19
19
|
export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
|
|
20
20
|
export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n"])));
|
|
21
|
-
export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: ", ";\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ", " {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ", " {\n margin-right: ", ";\n svg {\n display: block;\n margin: auto;\n height:", ";\n width:", ";\n }\n }\n\n ", " {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n }\n }\n"])), function (props) {
|
|
21
|
+
export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: ", ";\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ", " {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ", " {\n margin-right: ", ";\n svg {\n display: block;\n margin: auto;\n height:", ";\n width:", ";\n }\n }\n\n ", " {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n position: absolute;\n right: ", ";\n }\n }\n"])), function (props) {
|
|
22
22
|
return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
|
|
23
23
|
}, ItemLabel, ItemIcon, function (props) {
|
|
24
24
|
return props.size === Size.Small ? '6px' : '8px';
|
|
@@ -26,9 +26,11 @@ export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _tag
|
|
|
26
26
|
return props.size === Size.Small ? '20px' : '';
|
|
27
27
|
}, function (props) {
|
|
28
28
|
return props.size === Size.Small ? '20px' : '';
|
|
29
|
-
}, ItemIconRight)
|
|
29
|
+
}, ItemIconRight, function (props) {
|
|
30
|
+
return props.size === Size.Small ? '8px' : props.size === Size.Medium ? '16px' : '24px';
|
|
31
|
+
});
|
|
30
32
|
export var DropdownButtonCSS = function DropdownButtonCSS(size) {
|
|
31
|
-
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ", ";\n background-color: ", ";\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ", ", ", " {\n color: ", ";\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ", "\n }\n\n &:active:not(.active), &.active-state {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active {\n background: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ", ";\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background
|
|
33
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ", ";\n background-color: ", ";\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ", ", ", " {\n color: ", ";\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ", "\n }\n\n &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n background: ", ";\n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active {\n background: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ", ";\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background: none;\n cursor: not-allowed;\n \n ", ", ", " {\n color: ", ";\n }\n }\n\n &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n background-color: ", ";\n\n ", ", ", " {\n color: ", ";\n } \n\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active:not(:disabled):not(.locked), &.active-active-state {\n background-color: ", ";\n\n ", ", ", " {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n\n &.active.locked {\n &::after {\n background-color: ", ";\n } \n }\n\n &.active:disabled:not(.locked) {\n &::after {\n background-color: ", ";\n } \n }\n\n &:disabled:not(.locked), &.disabled-state {\n background: none;\n cursor: not-allowed;\n \n ", ", ", " {\n color: ", " !important;\n }\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, ItemIcon, ItemLabel, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_500, COLORS.neutral_300, ItemIcon, ItemLabel, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_600);
|
|
32
34
|
};
|
|
33
35
|
var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
34
36
|
var _item$displayLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Regular","neutral_600","Medium","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n className?: string;\n tabIndex?: number;\n iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ${ItemLabel} {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ${ItemIcon} {\n margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n svg {\n display: block;\n margin: auto;\n height:${props=>props.size===Size.Small?'20px':''};\n width:${props=>props.size===Size.Small?'20px':''};\n }\n }\n\n ${ItemIconRight} {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n }\n }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n return css`\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_600};\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ${COLORS.primary_20};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ${focusStyles}\n }\n\n &:active:not(.active), &.active-state {\n background: ${COLORS.primary_100};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_800};\n }\n }\n\n &.active {\n background: ${COLORS.neutral_20};\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_800};\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background-color: transparent;\n cursor: not-allowed;\n color: ${COLORS.neutral_500};\n }\n\n &.active:hover, &.active-hover-state {\n background-color: ${COLORS.primary_20};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_700};\n } \n\n &::after {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.active:active, &.active-active-state {\n background-color: ${COLORS.primary_100};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &:disabled, &.disabled-state {\n background-color: transparent !important;\n cursor: not-allowed;\n color: ${COLORS.neutral_200} !important;\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id }: MenuItemProps, ref) => {\n return (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item.disabled || item.locked}\n tabIndex={tabIndex}\n onMouseDown={defaultOnMouseDownHandler}\n ref={ref}\n onClick={onClickHandler}\n className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n id={id}>\n {item.showDividerAbove && <div className=\"divider\" />}\n <ItemContent size={size}>\n {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n <ItemLabel>\n <div>\n <div>{item.displayLabel ?? item.value}</div>\n {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n </div>\n {\n item.locked &&\n <ItemIconRight>\n <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n </ItemIconRight>\n }\n {\n !item.locked && !!iconRight &&\n <ItemIconRight>\n {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n </ItemIconRight>\n }\n\n </ItemLabel>\n </ItemContent>\n </DropdownButton>\n );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Medium","Regular","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_300","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n className?: string;\n tabIndex?: number;\n iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\n display: flex;\n align-items: center;\n flex-grow: 2;\n\n ${ItemLabel} {\n flex: 1 0 calc(100% - 40px);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n ${ItemIcon} {\n margin-right: ${props=>props.size===Size.Small?'6px':'8px'};\n svg {\n display: block;\n margin: auto;\n height:${props=>props.size===Size.Small?'20px':''};\n width:${props=>props.size===Size.Small?'20px':''};\n }\n }\n\n ${ItemIconRight} {\n flex-grow: 2;\n\n .extraMargin {\n margin-left: calc(100% - 24px);\n position: absolute;\n right: ${props=>props.size===Size.Small?'8px':(props.size===Size.Medium?'16px':'24px')};\n }\n }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n return css`\n ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n position: relative;\n text-decoration: none;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n background-color: ${COLORS.white};\n border: none;\n cursor: pointer;\n background: none;\n width: 100%;\n text-align: left;\n\n span {\n margin: auto 0 auto 16px;\n line-height: 48px;\n }\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_600};\n }\n\n &:hover:not(.active):not(:disabled):not(.disabled-state),\n &.hover-state:not(.active):not(:disabled):not(.disabled-state) {\n background: ${COLORS.primary_20};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_700};\n }\n }\n\n &:focus, &.focus-state, &.focus-visible {\n ${focusStyles}\n }\n\n &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {\n background: ${COLORS.primary_100};\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.primary_800};\n }\n }\n\n &.active {\n background: ${COLORS.neutral_20};\n\n ${ItemLabel}, ${ItemIcon} {\n color: ${COLORS.neutral_800};\n }\n\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 4px;\n bottom: 4px;\n left: 4px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 4px;\n }\n }\n\n\n &.locked {\n background: none;\n cursor: not-allowed;\n \n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.neutral_500};\n }\n }\n\n &.active:hover:not(:disabled):not(.locked), &.active-hover-state {\n background-color: ${COLORS.primary_20};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_700};\n } \n\n &::after {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.active:active:not(:disabled):not(.locked), &.active-active-state {\n background-color: ${COLORS.primary_100};\n\n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.primary_800};\n }\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.active.locked {\n &::after {\n background-color: ${COLORS.neutral_500};\n } \n }\n\n &.active:disabled:not(.locked) {\n &::after {\n background-color: ${COLORS.neutral_300};\n } \n }\n\n &:disabled:not(.locked), &.disabled-state {\n background: none;\n cursor: not-allowed;\n \n ${ItemIcon}, ${ItemLabel} {\n color: ${COLORS.neutral_300} !important;\n }\n }\n\n &.dropdown-hover:not(:disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id }: MenuItemProps, ref) => {\n return (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item.disabled || item.locked}\n tabIndex={tabIndex}\n onMouseDown={defaultOnMouseDownHandler}\n ref={ref}\n onClick={onClickHandler}\n className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n id={id}>\n {item.showDividerAbove && <div className=\"divider\" />}\n <ItemContent size={size}>\n {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n <ItemLabel>\n <div>\n <div>{item.displayLabel ?? item.value}</div>\n {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n </div>\n {\n item.locked &&\n <ItemIconRight>\n <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n </ItemIconRight>\n }\n {\n !item.locked && !!iconRight &&\n <ItemIconRight>\n {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n </ItemIconRight>\n }\n\n </ItemLabel>\n </ItemContent>\n </DropdownButton>\n );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
|