@laerdal/life-react-components 3.2.2-dev.1.full → 3.2.2-dev.2.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/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.d.ts +1 -1
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/index.cjs.map +1 -1
- package/dist/Tag/index.d.ts +1 -1
- package/dist/Tag/index.js.map +1 -1
- package/dist/Tile/TileHeader.cjs +17 -6
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js +17 -6
- package/dist/Tile/TileHeader.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -0
- package/dist/Tile/TileTypes.js.map +1 -1
- package/package.json +1 -1
package/dist/Tag/Tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\
|
|
1
|
+
{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}
|
package/dist/Tag/Tag.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
|
|
3
|
-
type TagProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
4
|
label?: string;
|
|
5
5
|
icon?: React.ReactNode;
|
|
6
6
|
variant?: TagVariants;
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}
|
package/dist/Tag/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants } from './Tag';"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":";;;;;;;;;;;;AAAA"}
|
package/dist/Tag/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as Tag } from './Tag';
|
|
2
|
-
export type { TagVariants } from './Tag';
|
|
2
|
+
export type { TagVariants, TagProps } from './Tag';
|
package/dist/Tag/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","Tag"],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants } from './Tag';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAAG,QAAQ,OAAO"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","Tag"],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAAG,QAAQ,OAAO"}
|
package/dist/Tile/TileHeader.cjs
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
8
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
10
|
var _react = _interopRequireDefault(require("react"));
|
|
10
11
|
var _types = require("../types");
|
|
@@ -14,21 +15,26 @@ var _Tooltips = require("../Tooltips");
|
|
|
14
15
|
var _Button = require("../Button");
|
|
15
16
|
var _icons = require("../icons");
|
|
16
17
|
var _TileCommonItems = require("./TileCommonItems");
|
|
18
|
+
var _Tag = require("../Tag");
|
|
17
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
19
|
-
var
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
21
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
+
var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 16px;\n height: 16px;\n\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
20
24
|
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
25
|
var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.black);
|
|
22
26
|
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
|
-
var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n
|
|
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));
|
|
27
|
+
var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 100%;\n"])));
|
|
28
|
+
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 min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n min-height: 72px;\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));
|
|
29
|
+
var TagContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n align-self: center;\n"])));
|
|
25
30
|
var TileHeader = function TileHeader(_ref) {
|
|
26
31
|
var title = _ref.title,
|
|
27
32
|
subtitle = _ref.subtitle,
|
|
28
33
|
subtitleIcon = _ref.subtitleIcon,
|
|
29
34
|
tooltip = _ref.tooltip,
|
|
30
35
|
buttons = _ref.buttons,
|
|
31
|
-
size = _ref.size
|
|
36
|
+
size = _ref.size,
|
|
37
|
+
tag = _ref.tag;
|
|
32
38
|
var renderTooltip = function renderTooltip() {
|
|
33
39
|
return !!tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
|
|
34
40
|
delay: "0s",
|
|
@@ -51,6 +57,11 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
51
57
|
})
|
|
52
58
|
});
|
|
53
59
|
};
|
|
60
|
+
var renderTag = function renderTag() {
|
|
61
|
+
return !!tag && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagContainer, {
|
|
62
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, _objectSpread({}, tag))
|
|
63
|
+
});
|
|
64
|
+
};
|
|
54
65
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
55
66
|
className: size,
|
|
56
67
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
@@ -66,7 +77,7 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
66
77
|
})]
|
|
67
78
|
})]
|
|
68
79
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
|
|
69
|
-
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
80
|
+
children: [renderTooltip(), renderTag(), buttons && buttons.map(function (item, index) {
|
|
70
81
|
return (0, _TileCommonItems.RenderTileItem)(item, size, index);
|
|
71
82
|
})]
|
|
72
83
|
})]
|
|
@@ -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: 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
|
|
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","TagContainer","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","Size","XSmall","cursor","renderTag","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';\nimport {Tag} from \"../Tag\";\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n\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 height: 100%;\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 min-height: 64px;\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 min-height: 72px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\nconst TagContainer = styled.div`\n align-self: center;\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size,\n tag\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 const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\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 {renderTag()}\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
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
1
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
4
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
6
|
import React from 'react';
|
|
4
7
|
import { Size } from '../types';
|
|
5
8
|
import styled from 'styled-components';
|
|
@@ -8,21 +11,24 @@ import { TooltipWrapper } from '../Tooltips';
|
|
|
8
11
|
import { IconButton } from '../Button';
|
|
9
12
|
import { SystemIcons } from '../icons';
|
|
10
13
|
import { RenderTileItem } from './TileCommonItems';
|
|
14
|
+
import { Tag } from "../Tag";
|
|
11
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
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"])));
|
|
17
|
+
var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 16px;\n height: 16px;\n\n .large & {\n width: 20px;\n height: 20px;\n }\n"])));
|
|
14
18
|
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
19
|
var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.black);
|
|
16
20
|
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
|
-
var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n
|
|
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));
|
|
21
|
+
var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n height: 100%;\n"])));
|
|
22
|
+
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 min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 12px 24px;\n min-height: 72px;\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));
|
|
23
|
+
var TagContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n align-self: center;\n"])));
|
|
19
24
|
var TileHeader = function TileHeader(_ref) {
|
|
20
25
|
var title = _ref.title,
|
|
21
26
|
subtitle = _ref.subtitle,
|
|
22
27
|
subtitleIcon = _ref.subtitleIcon,
|
|
23
28
|
tooltip = _ref.tooltip,
|
|
24
29
|
buttons = _ref.buttons,
|
|
25
|
-
size = _ref.size
|
|
30
|
+
size = _ref.size,
|
|
31
|
+
tag = _ref.tag;
|
|
26
32
|
var renderTooltip = function renderTooltip() {
|
|
27
33
|
return !!tooltip && /*#__PURE__*/_jsx(TooltipWrapper, {
|
|
28
34
|
delay: "0s",
|
|
@@ -45,6 +51,11 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
45
51
|
})
|
|
46
52
|
});
|
|
47
53
|
};
|
|
54
|
+
var renderTag = function renderTag() {
|
|
55
|
+
return !!tag && /*#__PURE__*/_jsx(TagContainer, {
|
|
56
|
+
children: /*#__PURE__*/_jsx(Tag, _objectSpread({}, tag))
|
|
57
|
+
});
|
|
58
|
+
};
|
|
48
59
|
return /*#__PURE__*/_jsxs(Wrapper, {
|
|
49
60
|
className: size,
|
|
50
61
|
children: [/*#__PURE__*/_jsxs(TextContainer, {
|
|
@@ -60,7 +71,7 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
60
71
|
})]
|
|
61
72
|
})]
|
|
62
73
|
}), /*#__PURE__*/_jsxs(ActionContainer, {
|
|
63
|
-
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
74
|
+
children: [renderTooltip(), renderTag(), buttons && buttons.map(function (item, index) {
|
|
64
75
|
return RenderTileItem(item, size, index);
|
|
65
76
|
})]
|
|
66
77
|
})]
|
|
@@ -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: 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
|
|
1
|
+
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","Tag","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TagContainer","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","XSmall","cursor","renderTag","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';\nimport {Tag} from \"../Tag\";\n\nconst SubtitleIconContainer = styled.span`\n display: flex;\n width: 16px;\n height: 16px;\n\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 height: 100%;\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 min-height: 64px;\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 min-height: 72px;\n\n ${SubtitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n }\n`;\n\nconst TagContainer = styled.div`\n align-self: center;\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n title,\n subtitle,\n subtitleIcon,\n tooltip,\n buttons,\n size,\n tag\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 const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\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 {renderTag()}\n {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n </ActionContainer>\n </Wrapper>\n )\n}\n\nexport default TileHeader;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAClB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,cAAc,QAAO,mBAAmB;AAChD,SAAQC,GAAG,QAAO,QAAQ;AAAC;AAAA;AAE3B,IAAMC,qBAAqB,GAAGb,MAAM,CAACc,IAAI,oLASxC;AAED,IAAMC,iBAAiB,GAAGf,MAAM,CAACgB,GAAG,qJACzBf,MAAM,CAACgB,WAAW,CAI5B;AAED,IAAMC,cAAc,GAAGlB,MAAM,CAACgB,GAAG,0FACtBf,MAAM,CAACkB,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACgB,GAAG,0RAiB/B;AAED,IAAMK,eAAe,GAAGrB,MAAM,CAACgB,GAAG,4GAGjC;AAED,IAAMM,OAAO,GAAGtB,MAAM,CAACgB,GAAG,wiBAUpBD,iBAAiB,EACfR,mBAAmB,CAACF,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC,EAGvDL,cAAc,EACZd,iBAAiB,CAACC,kBAAkB,CAACmB,IAAI,EAAE,IAAI,CAAC,EAQlDT,iBAAiB,EACfT,kBAAkB,CAACD,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC,EAGtDL,cAAc,EACZf,iBAAiB,CAACE,kBAAkB,CAACmB,IAAI,EAAE,IAAI,CAAC,EASlDT,iBAAiB,EACfX,iBAAiB,CAACC,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC,EAGrDL,cAAc,EACZhB,iBAAiB,CAACG,kBAAkB,CAACmB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAED,IAAMC,YAAY,GAAGzB,MAAM,CAACgB,GAAG,gGAE9B;AAGD,IAAMU,UAAqE,GAAG,SAAxEA,UAAqE,OAQU;EAAA,IAPJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACJC,GAAG,QAAHA,GAAG;EAGlF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACJ,OAAO,iBACT,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAE/B,IAAI,CAACoC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,KAAC,WAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEnC,MAAM,CAACgB;QAAY;MAAE;IAC/C,EACE;EAAA;EAGnB,IAAMoB,SAAS,GAAG,SAAZA,SAAS;IAAA,OAAS,CAAC,CAACJ,GAAG,iBAAI,KAAC,YAAY;MAAA,uBAAC,KAAC,GAAG,oBAAKA,GAAG;IAAG,EAAe;EAAA;EAG7E,oBACE,MAAC,OAAO;IAAC,SAAS,EAAED,IAAK;IAAA,wBACvB,MAAC,aAAa;MAAA,wBACZ,KAAC,cAAc;QAAA,UAAEL;MAAK,EAAkB,EAEtCC,QAAQ,iBACR,MAAC,iBAAiB;QAAA,WAEdC,YAAY,iBACZ,KAAC,qBAAqB;UAAA,uBAAE/B,KAAK,CAACwC,YAAY,CAACT,YAAY,EAAwB;YAACG,IAAI,EAAEA,IAAI,KAAKjC,IAAI,CAACwC,KAAK,GAAG,MAAM,GAAG;UAAM,CAAC;QAAC,EAAyB,eAExJ;UAAA,UAAOX;QAAQ,EAAQ;MAAA,EACL;IAAA,EAER,eAChB,MAAC,eAAe;MAAA,WACbM,aAAa,EAAE,EACfG,SAAS,EAAE,EACXN,OAAO,IAAIA,OAAO,CAACS,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK/B,cAAc,CAAC8B,IAAI,EAAET,IAAI,EAAEU,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAED,eAAehB,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\nimport {TagProps} from \"../Tag\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n title: string;\n tag?: TagProps;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|
package/dist/Tile/TileTypes.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { ButtonProps } from '../Button/Button';
|
|
|
6
6
|
import { HyperlinkProps } from '../HyperLink/HyperLink';
|
|
7
7
|
import { Size } from '../types';
|
|
8
8
|
import { TooltipProps } from "../Tooltips/TooltipTypes";
|
|
9
|
+
import { TagProps } from "../Tag";
|
|
9
10
|
export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
|
|
10
11
|
componentType: 'icon';
|
|
11
12
|
icon: React.ReactNode;
|
|
@@ -36,6 +37,7 @@ export type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButt
|
|
|
36
37
|
export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
|
|
37
38
|
export interface TileHeaderProps {
|
|
38
39
|
title: string;
|
|
40
|
+
tag?: TagProps;
|
|
39
41
|
tooltip?: string;
|
|
40
42
|
subtitle?: string;
|
|
41
43
|
subtitleIcon?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\nimport {TagProps} from \"../Tag\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n componentType: 'button';\n buttonText: string;\n}\n\nexport type TileNote = {\n componentType: 'note';\n noteIcon?: React.ReactNode;\n noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n componentType: 'link';\n linkIcon?: React.ReactNode;\n linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n title: string;\n tag?: TagProps;\n tooltip?: string;\n subtitle?: string;\n subtitleIcon?: React.ReactNode;\n\n buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n leftItem?: TileNote | TileHyperLink | TileStandardButton;\n buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n style?: {\n width?: string,\n minWidth?: string,\n maxWidth?: string,\n height?: string,\n minHeight?: string,\n maxHeight?: string,\n };\n\n size?: Size.Small | Size.Medium | Size.Large\n\n header?: TileHeaderProps;\n footer?: TileFooterProps;\n}\n"],"mappings":""}
|