@laerdal/life-react-components 2.1.1-dev.21.full → 2.1.1-dev.24
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/Tile/TileCommonItems.cjs +2 -2
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileHeader.cjs +18 -10
- package/dist/Tile/TileHeader.cjs.map +1 -1
- package/dist/Tile/TileHeader.js +18 -10
- package/dist/Tile/TileHeader.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -1
- package/dist/Tile/TileTypes.js.map +1 -1
- package/package.json +1 -1
|
@@ -24,11 +24,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
24
24
|
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; }
|
|
25
25
|
var TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
|
|
26
26
|
exports.TileNoteText = TileNoteText;
|
|
27
|
-
var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
27
|
+
var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["display: flex;"])));
|
|
28
28
|
exports.TileNoteIcon = TileNoteIcon;
|
|
29
29
|
var TileNoteWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n &.small {\n gap: 4px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n gap: 6px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n\n ", " {\n ", "\n }\n }\n"])), _styles.COLORS.neutral_600, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
30
30
|
exports.TileNoteWrapper = TileNoteWrapper;
|
|
31
|
-
var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
31
|
+
var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["display: flex"])));
|
|
32
32
|
exports.TileHyperLinkIcon = TileHyperLinkIcon;
|
|
33
33
|
var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
34
34
|
exports.TileHyperLinkText = TileHyperLinkText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div
|
|
1
|
+
{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":"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"}
|
|
@@ -17,9 +17,9 @@ import { Size } from '../types';
|
|
|
17
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
19
|
export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
|
|
20
|
-
export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
|
|
20
|
+
export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
|
|
21
21
|
export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n &.small {\n gap: 4px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n gap: 6px;\n\n ", " {\n width: 16px;\n height: 16px;\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ", " {\n width: 20px;\n height: 20px;\n }\n\n ", " {\n ", "\n }\n }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
|
|
22
|
-
export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
|
|
22
|
+
export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
|
|
23
23
|
export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
|
|
24
24
|
export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: max-content;\n\n ", "\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ", " {\n width: 24px;\n height: 24px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ", " {\n width: 24px;\n height: 24px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ", " {\n width: 28px;\n height: 28px;\n }\n\n ", " {\n ", "\n }\n\n a {\n gap: 8px;\n }\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
|
|
25
25
|
export var RenderTileItem = function RenderTileItem(item, size) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div
|
|
1
|
+
{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n TileDropdownButton,\n TileHyperLink,\n TileIconButton,\n TileNote,\n TileStandardButton,\n TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n COLORS, ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_600};\n\n &.small {\n gap: 4px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n\n &.medium {\n gap: 6px;\n\n ${TileNoteIcon} {\n width: 16px;\n height: 16px;\n }\n\n ${TileNoteText} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n\n &.large {\n gap: 8px;\n\n ${TileNoteIcon} {\n width: 20px;\n height: 20px;\n }\n\n ${TileNoteText} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n width: max-content;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n &.small {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 4px;\n }\n }\n\n &.medium {\n ${TileHyperLinkIcon} {\n width: 24px;\n height: 24px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 6px;\n }\n }\n\n &.large {\n ${TileHyperLinkIcon} {\n width: 28px;\n height: 28px;\n }\n\n ${TileHyperLinkText} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n a {\n gap: 8px;\n }\n }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n size: Size,\n key: any | undefined = undefined) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton key={key}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton key={key}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton key={key}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled}/>\n\n }\n case 'note': {\n return <TileNoteWrapper key={key} className={size}>\n {\n item.noteIcon &&\n <TileNoteIcon>\n {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n </TileNoteIcon>\n }\n <TileNoteText>{item.noteText}</TileNoteText>\n </TileNoteWrapper>\n\n }\n case 'link': {\n const {linkText, componentType, linkIcon, ...rest} = item;\n return <TileHyperLinkWrapper className={size} key={key}>\n <HyperLink {...rest}>\n <TileHyperLinkIcon>\n {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n </TileHyperLinkIcon>\n <TileHyperLinkText>{linkText}</TileHyperLinkText>\n </HyperLink>\n </TileHyperLinkWrapper>\n }\n case 'button': {\n const {buttonText, componentType, ...rest} = item;\n return <Button key={key}\n size={size}\n {...rest}>\n {buttonText}\n </Button>\n }\n }\n}\n"],"mappings":"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"}
|
package/dist/Tile/TileHeader.cjs
CHANGED
|
@@ -15,15 +15,17 @@ var _Button = require("../Button");
|
|
|
15
15
|
var _SystemIcons = require("../icons/systemicons/SystemIcons");
|
|
16
16
|
var _TileCommonItems = require("./TileCommonItems");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
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: center;\n gap: 4px;\n"])), _styles.COLORS.neutral_600);
|
|
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"])));
|
|
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: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 16px 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));
|
|
24
25
|
var TileHeader = function TileHeader(_ref) {
|
|
25
26
|
var title = _ref.title,
|
|
26
|
-
|
|
27
|
+
subtitle = _ref.subtitle,
|
|
28
|
+
subtitleIcon = _ref.subtitleIcon,
|
|
27
29
|
tooltip = _ref.tooltip,
|
|
28
30
|
buttons = _ref.buttons,
|
|
29
31
|
size = _ref.size;
|
|
@@ -52,10 +54,16 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
52
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
53
55
|
className: size,
|
|
54
56
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
55
|
-
children: [
|
|
56
|
-
children: tagLine
|
|
57
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
|
|
57
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
|
|
58
58
|
children: title
|
|
59
|
+
}), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SubtitleContainer, {
|
|
60
|
+
children: [subtitleIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleIconContainer, {
|
|
61
|
+
children: /*#__PURE__*/_react.default.cloneElement(subtitleIcon, {
|
|
62
|
+
size: size === _types.Size.Large ? '20px' : '16px'
|
|
63
|
+
})
|
|
64
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
65
|
+
children: subtitle
|
|
66
|
+
})]
|
|
59
67
|
})]
|
|
60
68
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
|
|
61
69
|
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.cjs","names":["
|
|
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 {Help} from '../icons/systemicons/SystemIcons';\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: center;\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\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 12px 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: 16px 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\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 <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":";;;;;;;;AAAA;AAEA;AACA;AACA;AASA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,qBAAqB,GAAGC,yBAAM,CAACC,IAAI,gMAQxC;AAED,IAAMC,iBAAiB,GAAGF,yBAAM,CAACG,GAAG,+JACzBC,cAAM,CAACC,WAAW,CAI5B;AAED,IAAMC,cAAc,GAAGN,yBAAM,CAACG,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACG,GAAG,yLAM/B;AAED,IAAMM,eAAe,GAAGT,yBAAM,CAACG,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGV,yBAAM,CAACG,GAAG,0kBAWpBD,iBAAiB,EACf,IAAAS,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDb,iBAAiB,EACf,IAAAc,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDb,iBAAiB,EACf,IAAAY,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAOU;EAAA,IANJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,iBAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEzB,cAAM,CAACC;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEoB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,wBACZ,qBAAC,cAAc;QAAA,UAAEL;MAAK,EAAkB,EAEtCC,QAAQ,iBACR,sBAAC,iBAAiB;QAAA,WAEdC,YAAY,iBACZ,qBAAC,qBAAqB;UAAA,uBAAEQ,cAAK,CAACC,YAAY,CAACT,YAAY,EAAwB;YAACG,IAAI,EAAEA,IAAI,KAAKE,WAAI,CAACK,KAAK,GAAG,MAAM,GAAG;UAAM,CAAC;QAAC,EAAyB,eAExJ;UAAA,UAAOX;QAAQ,EAAQ;MAAA,EACL;IAAA,EAER,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACS,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAET,IAAI,EAAEU,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEchB,UAAU;AAAA"}
|
package/dist/Tile/TileHeader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Size } from '../types';
|
|
5
5
|
import styled from 'styled-components';
|
|
@@ -10,14 +10,16 @@ import { Help } from '../icons/systemicons/SystemIcons';
|
|
|
10
10
|
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
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
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: center;\n gap: 4px;\n"])), COLORS.neutral_600);
|
|
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"])));
|
|
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: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n\n &.medium {\n padding: 12px 20px;\n min-height: 64px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n\n &.large {\n padding: 16px 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));
|
|
18
19
|
var TileHeader = function TileHeader(_ref) {
|
|
19
20
|
var title = _ref.title,
|
|
20
|
-
|
|
21
|
+
subtitle = _ref.subtitle,
|
|
22
|
+
subtitleIcon = _ref.subtitleIcon,
|
|
21
23
|
tooltip = _ref.tooltip,
|
|
22
24
|
buttons = _ref.buttons,
|
|
23
25
|
size = _ref.size;
|
|
@@ -46,10 +48,16 @@ var TileHeader = function TileHeader(_ref) {
|
|
|
46
48
|
return /*#__PURE__*/_jsxs(Wrapper, {
|
|
47
49
|
className: size,
|
|
48
50
|
children: [/*#__PURE__*/_jsxs(TextContainer, {
|
|
49
|
-
children: [
|
|
50
|
-
children: tagLine
|
|
51
|
-
}), /*#__PURE__*/_jsx(TitleContainer, {
|
|
51
|
+
children: [/*#__PURE__*/_jsx(TitleContainer, {
|
|
52
52
|
children: title
|
|
53
|
+
}), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
|
|
54
|
+
children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
|
|
55
|
+
children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
|
|
56
|
+
size: size === Size.Large ? '20px' : '16px'
|
|
57
|
+
})
|
|
58
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
59
|
+
children: subtitle
|
|
60
|
+
})]
|
|
53
61
|
})]
|
|
54
62
|
}), /*#__PURE__*/_jsxs(ActionContainer, {
|
|
55
63
|
children: [renderTooltip(), buttons && buttons.map(function (item, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","
|
|
1
|
+
{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","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 {Help} from '../icons/systemicons/SystemIcons';\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: center;\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\nconst ActionContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n min-height: 56px;\n box-sizing: border-box;\n\n &.small {\n padding: 8px 16px;\n min-height: 56px;\n\n ${SubtitleContainer} {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${TitleContainer} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n\n &.medium {\n padding: 12px 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: 16px 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\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 <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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"}
|
|
@@ -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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n
|
|
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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\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":""}
|
package/dist/Tile/TileTypes.d.ts
CHANGED
|
@@ -35,7 +35,8 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
|
|
|
35
35
|
export interface TileHeaderProps {
|
|
36
36
|
title: string;
|
|
37
37
|
tooltip?: string;
|
|
38
|
-
|
|
38
|
+
subtitle?: string;
|
|
39
|
+
subtitleIcon?: React.ReactNode;
|
|
39
40
|
buttons?: HeaderButtons[];
|
|
40
41
|
}
|
|
41
42
|
export interface TileFooterProps {
|
|
@@ -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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\n\nexport interface TileHeaderProps {\n title: string;\n tooltip?: string;\n
|
|
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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\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":""}
|