@laerdal/life-react-components 1.7.0-dev.6 → 1.7.0-dev.7.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card/Card.cjs +28 -44
- package/dist/Card/Card.cjs.map +1 -1
- package/dist/Card/Card.d.ts +3 -11
- package/dist/Card/Card.js +26 -44
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/CardBottomSection.cjs +2 -9
- package/dist/Card/CardBottomSection.cjs.map +1 -1
- package/dist/Card/CardBottomSection.d.ts +1 -2
- package/dist/Card/CardBottomSection.js +3 -10
- package/dist/Card/CardBottomSection.js.map +1 -1
- package/dist/Card/CardMiddleSection.cjs +2 -7
- package/dist/Card/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/CardMiddleSection.d.ts +0 -2
- package/dist/Card/CardMiddleSection.js +3 -8
- package/dist/Card/CardMiddleSection.js.map +1 -1
- package/dist/Card/CardTopSection.cjs +9 -12
- package/dist/Card/CardTopSection.cjs.map +1 -1
- package/dist/Card/CardTopSection.d.ts +2 -4
- package/dist/Card/CardTopSection.js +10 -13
- package/dist/Card/CardTopSection.js.map +1 -1
- package/dist/Card/index.cjs +1 -13
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.d.ts +0 -1
- package/dist/Card/index.js +0 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/List/ListRow.cjs +2 -5
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.js +3 -2
- package/dist/List/ListRow.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +4 -0
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +4 -1
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tooltips/TooltipStyles.cjs +2 -2
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
- package/dist/Tooltips/TooltipStyles.js +3 -3
- package/dist/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +2 -0
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.d.ts +1 -1
- package/dist/Tooltips/TooltipWrapper.js +2 -0
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","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","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","disabled","width","length","selected","value"],"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>\n <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n {tabs.map((tab: HorizontalTab, index: number) => (\n <TabButton\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' : ''}`}>\n {tab.value}\n </div>\n </TabButton>\n ))}\n </HorizontalTabContainer>\n );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
|
|
@@ -88,9 +88,9 @@ var TooltipTrigger = function TooltipTrigger(delay) {
|
|
|
88
88
|
|
|
89
89
|
exports.TooltipTrigger = TooltipTrigger;
|
|
90
90
|
|
|
91
|
-
var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n position: relative;\n\n ", "\n"])), function (props) {
|
|
91
|
+
var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n position: relative;\n\n ", "\n \n &:focus{\n ", "\n }\n"])), function (props) {
|
|
92
92
|
return TooltipTrigger(props.delay);
|
|
93
|
-
});
|
|
93
|
+
}, _styles.focusStyles);
|
|
94
94
|
|
|
95
95
|
exports.TooltipContainer = TooltipContainer;
|
|
96
96
|
//# sourceMappingURL=TooltipStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34em;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: ${Z_INDEXES.tooltip};\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' || props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ${delay ?? '1s'};\n }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n display: inline-block;\n position: relative;\n\n ${props => TooltipTrigger(props.delay)}\n \n &:focus{\n ${focusStyles}\n }\n`;\n"],"file":"TooltipStyles.cjs"}
|
|
@@ -4,7 +4,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
4
4
|
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
6
|
import { Size } from '../types';
|
|
7
|
-
import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
|
|
7
|
+
import { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
|
|
8
8
|
import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
|
|
9
9
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
10
10
|
|
|
@@ -63,7 +63,7 @@ Tooltip.defaultProps = {
|
|
|
63
63
|
export var TooltipTrigger = function TooltipTrigger(delay) {
|
|
64
64
|
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover ", ", &:focus-within ", ", &:focus ", " {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ", ";\n }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
|
|
65
65
|
};
|
|
66
|
-
export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n"])), function (props) {
|
|
66
|
+
export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n \n &:focus{\n ", "\n }\n"])), function (props) {
|
|
67
67
|
return TooltipTrigger(props.delay);
|
|
68
|
-
});
|
|
68
|
+
}, focusStyles);
|
|
69
69
|
//# sourceMappingURL=TooltipStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,UAAR,EAAoBC,MAApB,EAA4BC,kBAA5B,EAAgDC,WAAhD,QAAkE,WAAlE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,kBAA/C,QAAyE,sBAAzE;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAA4B;AACjD,SAAOA,IAAI,IAAIV,IAAI,CAACW,MAAb,GAAsB,KAAtB,GAA+B,CAACD,IAAD,IAASA,IAAI,IAAIV,IAAI,CAACY,KAAvB,GAAgC,MAAhC,GAAyC,MAA9E;AACD,CAFD;;AAIA,OAAO,IAAMC,OAAO,GAAGf,MAAM,CAACgB,GAAV,iuBASd,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACY,KAAnB,IAA4BG,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACgB,MAA/C,GAAwDV,iBAAiB,CAACH,kBAAkB,CAACc,OAApB,EAA6Bf,MAAM,CAACgB,KAApC,CAAzE,GAAsH,EAA3H;AAAA,CATS,EAUd,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACW,MAAnB,GAA6BJ,kBAAkB,CAACJ,kBAAkB,CAACc,OAApB,EAA6Bf,MAAM,CAACgB,KAApC,CAA/C,GAA4F,EAAjG;AAAA,CAVS,EAWd,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACgB,MAAnB,GAA4BX,iBAAiB,CAACF,kBAAkB,CAACc,OAApB,EAA6Bf,MAAM,CAACgB,KAApC,CAA7C,GAA0F,EAA/F;AAAA,CAXS,EAYd,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,KAAN,IAAe,QAAf,GAA0B,qBAA1B,GAAkD,EAAvD;AAAA,CAZS,EAaFlB,UAAU,CAACmB,YAbT,EAeL,UAAAL,KAAK;AAAA,SAAIA,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACW,MAAnB,GAA4B,SAA5B,GAAwCI,KAAK,CAACL,IAAN,IAAcV,IAAI,CAACgB,MAAnB,GAA4B,UAA5B,GAAyC,UAArF;AAAA,CAfA,EAkBN,UAAAD,KAAK;AAAA,SAAIA,KAAK,CAACM,MAAV;AAAA,CAlBC,EAoBFnB,MAAM,CAACoB,WApBL,EAuBLd,SAAS,CAACe,OAvBL,EAwBd,UAAAR,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,eAA1B,GAA4CT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,YAA7B,GAA4C,EAA7F;AAAA,CAxBS,EA0Bd,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,4DAA3B,GAA0F,EAA/F;AAAA,CA1BS,EA2Bd,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,qDAA5B,GAAoF,EAAzF;AAAA,CA3BS,EA6Bd,UAAAT,KAAK;AAAA,SACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GACI,EADJ,GAEIT,KAAK,CAACI,KAAN,IAAe,OAAf,GACA,WADA,GAEAJ,KAAK,CAACI,KAAN,IAAe,KAAf,GACA,YADA,GAEA,yCAPC;AAAA,CA7BS,EAwCd,UAAAJ,KAAK;AAAA,SAAK,CAACA,KAAK,CAACU,SAAP,GAAmB,gBAAnB,GAAsC,EAA3C;AAAA,CAxCS,EA2Cd,UAAAV,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,YAA1B,GAAyCT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,eAA7B,GAA+C,EAA7F;AAAA,CA3CS,EA6Cd,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,uDAA5B,GAAsF,EAA3F;AAAA,CA7CS,EA8Cd,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,sDAA3B,GAAoF,EAAzF;AAAA,CA9CS,EAgDd,UAAAT,KAAK;AAAA,SACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GAAwD,EAAxD,GACAT,KAAK,CAACI,KAAN,IAAe,OAAf,mBAAkCV,cAAc,CAACM,KAAK,CAACL,IAAP,CAAhD,SAAkEK,KAAK,CAACI,KAAN,IAAe,KAAf,oBAAiCV,cAAc,CAACM,KAAK,CAACL,IAAP,CAA/C,SAAiE,YAF9H;AAAA,CAhDS,EAoDd,UAAAK,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,EAA3B,GAAgC,oBAArC;AAAA,CApDS,EAwDA,UAAAT,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0BtB,MAAM,CAACoB,WAAjC,GAA+C,aAApD;AAAA,CAxDL,EAyDE,UAAAP,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4BtB,MAAM,CAACoB,WAAnC,GAAiD,aAAtD;AAAA,CAzDP,EA0DE,UAAAP,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6BtB,MAAM,CAACoB,WAApC,GAAkD,aAAvD;AAAA,CA1DP,EA2DE,UAAAP,KAAK;AAAA,SAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2BtB,MAAM,CAACoB,WAAlC,GAAgD,aAArD;AAAA,CA3DP,CAAb;AA+DPT,OAAO,CAACa,YAAR,GAAuB;AACrBD,EAAAA,SAAS,EAAE,KADU;AAErBf,EAAAA,IAAI,EAAEV,IAAI,CAACY,KAFU;AAGrBS,EAAAA,MAAM,EAAE,MAHa;AAIrBF,EAAAA,KAAK,EAAE,QAJc;AAKrBK,EAAAA,QAAQ,EAAE;AALW,CAAvB;AAQA,OAAO,IAAMG,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD;AAAA,SAAoB7B,GAApB,yMAClBc,OADkB,EACSA,OADT,EAC6BA,OAD7B,EAINe,KAJM,aAINA,KAJM,cAINA,KAJM,GAIG,IAJH;AAAA,CAAvB;AAQP,OAAO,IAAMC,gBAAgB,GAAG/B,MAAM,CAACgB,GAAV,oKAIzB,UAAAC,KAAK;AAAA,SAAIY,cAAc,CAACZ,KAAK,CAACa,KAAP,CAAlB;AAAA,CAJoB,EAOvBxB,WAPuB,CAAtB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34em;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: ${Z_INDEXES.tooltip};\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' || props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ${delay ?? '1s'};\n }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n display: inline-block;\n position: relative;\n\n ${props => TooltipTrigger(props.delay)}\n \n &:focus{\n ${focusStyles}\n }\n`;\n"],"file":"TooltipStyles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAYG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n label?: string;\n withArrow?: boolean;\n width?: string;\n size?: Size;\n delay?: string;\n tabIndex?: number;\n height?: string;\n align? : 'start' | 'end' | 'center' | undefined;\n position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n children?: React.ReactNode;\n };\n"],"file":"TooltipTypes.cjs"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAYG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n label?: string;\n withArrow?: boolean;\n width?: string;\n size?: Size;\n delay?: string;\n tabIndex?: number;\n height?: string;\n align? : 'start' | 'end' | 'center' | undefined;\n position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n children?: React.ReactNode;\n };\n"],"file":"TooltipTypes.js"}
|
|
@@ -23,6 +23,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
23
23
|
var label = _ref.label,
|
|
24
24
|
children = _ref.children,
|
|
25
25
|
withArrow = _ref.withArrow,
|
|
26
|
+
tabIndex = _ref.tabIndex,
|
|
26
27
|
_ref$size = _ref.size,
|
|
27
28
|
size = _ref$size === void 0 ? _.Size.Small : _ref$size,
|
|
28
29
|
_ref$height = _ref.height,
|
|
@@ -35,6 +36,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
35
36
|
position = _ref$position === void 0 ? 'bottom' : _ref$position;
|
|
36
37
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
|
|
37
38
|
delay: delay,
|
|
39
|
+
tabIndex: tabIndex,
|
|
38
40
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
|
|
39
41
|
align: align,
|
|
40
42
|
height: height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,sBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEL,QAA1C;AAAA,4BACC,qBAAC,sBAAD;AAAS,MAAA,KAAK,EAAEO,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEH,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAES,QAJb;AAAA,gBAKIX;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;eAsBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center', \n position = 'bottom' } : TooltipProps) => {\n \n return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n <Tooltip align={align}\n height={height}\n size={size}\n withArrow={withArrow}\n position={position}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.cjs"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TooltipProps } from './TooltipTypes';
|
|
2
|
-
declare const TooltipWrapper: ({ label, children, withArrow, size, height, delay, align, position }: TooltipProps) => JSX.Element;
|
|
2
|
+
declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position }: TooltipProps) => JSX.Element;
|
|
3
3
|
export default TooltipWrapper;
|
|
@@ -8,6 +8,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
8
8
|
var label = _ref.label,
|
|
9
9
|
children = _ref.children,
|
|
10
10
|
withArrow = _ref.withArrow,
|
|
11
|
+
tabIndex = _ref.tabIndex,
|
|
11
12
|
_ref$size = _ref.size,
|
|
12
13
|
size = _ref$size === void 0 ? Size.Small : _ref$size,
|
|
13
14
|
_ref$height = _ref.height,
|
|
@@ -20,6 +21,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
20
21
|
position = _ref$position === void 0 ? 'bottom' : _ref$position;
|
|
21
22
|
return /*#__PURE__*/_jsxs(TooltipContainer, {
|
|
22
23
|
delay: delay,
|
|
24
|
+
tabIndex: tabIndex,
|
|
23
25
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
|
24
26
|
align: align,
|
|
25
27
|
height: height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,
|
|
1
|
+
{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCN,IAAI,CAACO,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,MAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEJ,QAA1C;AAAA,4BACC,KAAC,OAAD;AAAS,MAAA,KAAK,EAAEM,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEF,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAEQ,QAJb;AAAA,gBAKIV;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;AAsBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center', \n position = 'bottom' } : TooltipProps) => {\n \n return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n <Tooltip align={align}\n height={height}\n size={size}\n withArrow={withArrow}\n position={position}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.js"}
|