@laerdal/life-react-components 2.3.1-dev.4 → 2.3.1-dev.5
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/AccordionItem.cjs +2 -1
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.js +2 -1
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/styles.cjs +8 -4
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.js +8 -4
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/Tile/TileHeader.cjs +3 -3
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js +3 -3
- package/dist/Tile/TileHeader.js.map +1 -1
- package/package.json +1 -1
|
@@ -31,9 +31,10 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
31
31
|
_props$size = props.size,
|
|
32
32
|
size = _props$size === void 0 ? _.Size.Medium : _props$size,
|
|
33
33
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
34
|
-
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '')
|
|
34
|
+
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
|
|
35
35
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AccordionItemContainer, {
|
|
36
36
|
id: id,
|
|
37
|
+
className: size,
|
|
37
38
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
|
|
38
39
|
role: "button",
|
|
39
40
|
"aria-expanded": isActive,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Size","Medium","rest","cls","undefined","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '')
|
|
1
|
+
{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Size","Medium","rest","cls","undefined","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n return (\n <AccordionItemContainer id={id} className={size}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAoD;AAAA;AAAA;AAAA;AAUpD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGC,MAAI,CAACC,MAAM;IACfC,IAAI,0CACLd,KAAK;EAET,IAAMe,GAAG,GAAG,CAACZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,SAAS,EAAEU,IAAK;IAAA,wBAC9C,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeR,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGU,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACV,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACgB,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEhB,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEkB,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPT,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA8DMT,aAAa;AAAA"}
|
|
@@ -25,9 +25,10 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
25
25
|
_props$size = props.size,
|
|
26
26
|
size = _props$size === void 0 ? Size.Medium : _props$size,
|
|
27
27
|
rest = _objectWithoutProperties(props, _excluded);
|
|
28
|
-
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '')
|
|
28
|
+
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
|
|
29
29
|
return /*#__PURE__*/_jsxs(AccordionItemContainer, {
|
|
30
30
|
id: id,
|
|
31
|
+
className: size,
|
|
31
32
|
children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
|
|
32
33
|
role: "button",
|
|
33
34
|
"aria-expanded": isActive,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","names":["React","Size","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Medium","rest","cls","undefined","e","key"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '')
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","names":["React","Size","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Medium","rest","cls","undefined","e","key"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n return (\n <AccordionItemContainer id={id} className={size}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,QAAO,IAAI;AAC3C,SAAQC,WAAW,QAAO,UAAU;AAEpC,SAAQC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,UAAU;AACvF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAUpD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGlB,IAAI,CAACmB,MAAM;IACfC,IAAI,4BACLb,KAAK;EAET,IAAMc,GAAG,GAAG,CAACX,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,SAAS,EAAEU,IAAK;IAAA,wBAC9C,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeR,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGS,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACT,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACe,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEf,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEgB;IAAI,GACXD,IAAI;MAAA,WACPR,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,KAAC,WAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,KAAC,WAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA8DT,eAAeT,aAAa"}
|
|
@@ -12,12 +12,16 @@ var _zIndexes = require("../styles/z-indexes");
|
|
|
12
12
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
13
13
|
var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
14
14
|
exports.AccordionMenuWrapper = AccordionMenuWrapper;
|
|
15
|
-
var ItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n
|
|
15
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n .medium & {\n ", "\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .large & {\n ", "\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
16
16
|
exports.ItemHeaderContainer = ItemHeaderContainer;
|
|
17
17
|
var AccordionItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ", ":not(.active) {\n border-bottom: 1px solid ", ";\n }\n"])), ItemHeaderContainer, _styles.COLORS.neutral_100);
|
|
18
18
|
exports.AccordionItemContainer = AccordionItemContainer;
|
|
19
|
-
var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
|
|
20
|
-
return props.padding || '
|
|
21
|
-
}, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null),
|
|
19
|
+
var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n padding: ", ";\n ", "\n }\n \n .large & {\n padding: ", ";\n ", "\n }\n\n"])), function (props) {
|
|
20
|
+
return props.padding || '8px 16px';
|
|
21
|
+
}, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
|
|
22
|
+
return props.padding || '12px 24px';
|
|
23
|
+
}, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), function (props) {
|
|
24
|
+
return props.padding || '14px 32px';
|
|
25
|
+
}, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
22
26
|
exports.ItemBodyContainer = ItemBodyContainer;
|
|
23
27
|
//# sourceMappingURL=styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n
|
|
1
|
+
{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '8px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n padding: ${(props) => props.padding || '12px 24px'};\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n padding: ${(props) => props.padding || '14px 32px'};\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AAQA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAIK,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,0jCASzC,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAe/D,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAWjE,IAAAE,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAUjEG,mBAAW,EAICJ,cAAM,CAACK,UAAU,EACtBL,cAAM,CAACM,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBR,cAAM,CAACS,WAAW,EACbT,cAAM,CAACU,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBX,cAAM,CAACY,WAAW,EAIbZ,cAAM,CAACa,KAAK,EACjBb,cAAM,CAACc,WAAW,EAIhBd,cAAM,CAACc,WAAW,CAGhC;AAAC;AAEK,IAAMC,sBAAsB,GAAGrB,yBAAM,CAACC,GAAG,uQAMzBC,mBAAmB,EACXI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,iBAAiB,GAAGvB,yBAAM,CAACC,GAAG,wPAC9B,UAACuB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAjB,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACmB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChD,IAAAhB,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAAC"}
|
package/dist/Accordion/styles.js
CHANGED
|
@@ -4,9 +4,13 @@ import styled from 'styled-components';
|
|
|
4
4
|
import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
|
|
5
5
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
6
6
|
export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
7
|
-
export var ItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n
|
|
7
|
+
export var ItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n .medium & {\n ", "\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .large & {\n ", "\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
|
|
8
8
|
export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ", ":not(.active) {\n border-bottom: 1px solid ", ";\n }\n"])), ItemHeaderContainer, COLORS.neutral_100);
|
|
9
|
-
export var ItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
|
|
10
|
-
return props.padding || '
|
|
11
|
-
}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null),
|
|
9
|
+
export var ItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n padding: ", ";\n ", "\n }\n \n .large & {\n padding: ", ";\n ", "\n }\n\n"])), function (props) {
|
|
10
|
+
return props.padding || '8px 16px';
|
|
11
|
+
}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), function (props) {
|
|
12
|
+
return props.padding || '12px 24px';
|
|
13
|
+
}, ComponentMStyling(ComponentTextStyle.Regular, null), function (props) {
|
|
14
|
+
return props.padding || '14px 32px';
|
|
15
|
+
}, ComponentLStyling(ComponentTextStyle.Regular, null));
|
|
12
16
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '8px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n padding: ${(props) => props.padding || '12px 24px'};\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n padding: ${(props) => props.padding || '14px 32px'};\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,oKAK7C;AAID,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACS,GAAG,4iCASzCL,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAe/DT,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAWjEV,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAUjEN,WAAW,EAICL,MAAM,CAACY,UAAU,EACtBZ,MAAM,CAACa,WAAW,EAChBP,SAAS,CAACQ,KAAK,EAIjBd,MAAM,CAACe,WAAW,EACbf,MAAM,CAACgB,WAAW,EACrBV,SAAS,CAACW,MAAM,EAIlBjB,MAAM,CAACkB,WAAW,EAIblB,MAAM,CAACmB,KAAK,EACjBnB,MAAM,CAACoB,WAAW,EAIhBpB,MAAM,CAACoB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGtB,MAAM,CAACS,GAAG,yPAMzBC,mBAAmB,EACXT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,iBAAiB,GAAGxB,MAAM,CAACS,GAAG,0OAC9B,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,UAAU;AAAA,GACnCzB,MAAM,CAACmB,KAAK,EAExBhB,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAGxC,UAACc,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChDvB,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAI1C,UAACc,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GAChDxB,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,CAGxD"}
|
package/dist/Tile/TileHeader.cjs
CHANGED
|
@@ -17,11 +17,11 @@ var _TileCommonItems = require("./TileCommonItems");
|
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
19
19
|
var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
20
|
-
var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n display: flex;\n align-items:
|
|
20
|
+
var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: 4px;\n"])), _styles.COLORS.neutral_600);
|
|
21
21
|
var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.black);
|
|
22
|
-
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n"])));
|
|
22
|
+
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n\n padding: 14px 0;\n\n .medium & {\n padding: 12px 0;\n }\n\n .large & {\n padding: 12px 0;\n }\n\n"])));
|
|
23
23
|
var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
24
|
-
var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items:
|
|
24
|
+
var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 4px 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 8px 20px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n"])), SubtitleContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
25
25
|
var TileHeader = function TileHeader(_ref) {
|
|
26
26
|
var title = _ref.title,
|
|
27
27
|
subtitle = _ref.subtitle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items:
|
|
1
|
+
{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n\n padding: 14px 0;\n\n .medium & {\n padding: 12px 0;\n }\n\n .large & {\n padding: 12px 0;\n }\n\n`;\n\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: flex-start;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 4px 16px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 8px 20px;\n\n ${SubtitleContainer} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size\n }) => {\n\n const renderTooltip = () =>\n !!tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n align=\"center\"\n position=\"bottom\"\n withArrow={false}\n label={tooltip}>\n <IconButton variant=\"secondary\"\n shape=\"circular\"\n style={{cursor: 'help'}}\n action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n\n return (\n <Wrapper className={size}>\n <TextContainer>\n <TitleContainer>{title}</TitleContainer>\n {\n subtitle &&\n <SubtitleContainer>\n {\n subtitleIcon &&\n <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n }\n <span>{subtitle}</span>\n </SubtitleContainer>\n }\n </TextContainer>\n <ActionContainer>\n {renderTooltip()}\n {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n </ActionContainer>\n </Wrapper>\n )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
|
package/dist/Tile/TileHeader.js
CHANGED
|
@@ -11,11 +11,11 @@ import { RenderTileItem } from './TileCommonItems';
|
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
14
|
-
var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n align-items:
|
|
14
|
+
var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n align-items: flex-start;\n gap: 4px;\n"])), COLORS.neutral_600);
|
|
15
15
|
var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.black);
|
|
16
|
-
var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n"])));
|
|
16
|
+
var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n\n padding: 14px 0;\n\n .medium & {\n padding: 12px 0;\n }\n\n .large & {\n padding: 12px 0;\n }\n\n"])));
|
|
17
17
|
var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
18
|
-
var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items:
|
|
18
|
+
var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 4px 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 8px 20px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
|
|
19
19
|
var TileHeader = function TileHeader(_ref) {
|
|
20
20
|
var title = _ref.title,
|
|
21
21
|
subtitle = _ref.subtitle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items:
|
|
1
|
+
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n .large & {\n width: 20px;\n height: 20px;\n }\n`;\n\nconst SubtitleContainer = styled.div`\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: flex-start;\n gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n flex: 1;\n\n padding: 14px 0;\n\n .medium & {\n padding: 12px 0;\n }\n\n .large & {\n padding: 12px 0;\n }\n\n`;\n\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: flex-start;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 4px 16px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 8px 20px;\n\n ${SubtitleContainer} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size\n }) => {\n\n const renderTooltip = () =>\n !!tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n align=\"center\"\n position=\"bottom\"\n withArrow={false}\n label={tooltip}>\n <IconButton variant=\"secondary\"\n shape=\"circular\"\n style={{cursor: 'help'}}\n action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n\n return (\n <Wrapper className={size}>\n <TextContainer>\n <TitleContainer>{title}</TitleContainer>\n {\n subtitle &&\n <SubtitleContainer>\n {\n subtitleIcon &&\n <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n }\n <span>{subtitle}</span>\n </SubtitleContainer>\n }\n </TextContainer>\n <ActionContainer>\n {renderTooltip()}\n {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n </ActionContainer>\n </Wrapper>\n )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
|