@laerdal/life-react-components 1.8.0-dev.26 → 1.8.0-dev.28
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/TileBody.cjs +1 -1
- package/dist/Tile/TileBody.cjs.map +1 -1
- package/dist/Tile/TileBody.js +1 -1
- package/dist/Tile/TileBody.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +1 -1
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +1 -1
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/index.cjs +0 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/z-indexes.cjs +1 -2
- package/dist/styles/z-indexes.cjs.map +1 -1
- package/dist/styles/z-indexes.d.ts +0 -1
- package/dist/styles/z-indexes.js +1 -2
- package/dist/styles/z-indexes.js.map +1 -1
- package/dist/types.cjs +1 -11
- package/dist/types.cjs.map +1 -1
- package/dist/types.d.ts +0 -6
- package/dist/types.js +0 -9
- package/dist/types.js.map +1 -1
- package/package.json +2 -2
- package/dist/Popover/Popover.cjs +0 -267
- package/dist/Popover/Popover.cjs.map +0 -1
- package/dist/Popover/Popover.d.ts +0 -26
- package/dist/Popover/Popover.js +0 -231
- package/dist/Popover/Popover.js.map +0 -1
- package/dist/Popover/index.cjs +0 -16
- package/dist/Popover/index.cjs.map +0 -1
- package/dist/Popover/index.d.ts +0 -1
- package/dist/Popover/index.js +0 -2
- package/dist/Popover/index.js.map +0 -1
package/dist/Tile/TileBody.cjs
CHANGED
|
@@ -21,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
21
21
|
|
|
22
22
|
var _templateObject;
|
|
23
23
|
|
|
24
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n margin: 8px
|
|
24
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n margin: 8px;\n overflow: auto;\n box-sizing: border-box;\n\n &.small {\n padding: 0 8px;\n }\n\n &.medium {\n padding: 0 12px;\n }\n\n &.large {\n padding: 0 16px;\n }\n\n ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
25
25
|
|
|
26
26
|
var TileBody = function TileBody(_ref) {
|
|
27
27
|
var children = _ref.children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["Wrapper","styled","div","Size","Small","TileBody","children","size"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["Wrapper","styled","div","Size","Small","TileBody","children","size"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,wSAkBT,8BAAiBC,YAAKC,KAAtB,CAlBS,CAAb;;AAqBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;eAWeD,Q","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n flex: 1;\n margin: 8px;\n overflow: auto;\n box-sizing: border-box;\n\n &.small {\n padding: 0 8px;\n }\n\n &.medium {\n padding: 0 12px;\n }\n\n &.large {\n padding: 0 16px;\n }\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n return (\n <Wrapper className={size}>\n {children}\n </Wrapper>\n )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.cjs"}
|
package/dist/Tile/TileBody.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Size } from '../types';
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { scrollBarStyling } from '../styles';
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n margin: 8px
|
|
10
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n margin: 8px;\n overflow: auto;\n box-sizing: border-box;\n\n &.small {\n padding: 0 8px;\n }\n\n &.medium {\n padding: 0 12px;\n }\n\n &.large {\n padding: 0 16px;\n }\n\n ", "\n"])), scrollBarStyling(Size.Small));
|
|
11
11
|
|
|
12
12
|
var TileBody = function TileBody(_ref) {
|
|
13
13
|
var children = _ref.children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;;AAEA,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;;AAEA,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAV,0RAkBTF,gBAAgB,CAACF,IAAI,CAACK,KAAN,CAlBP,CAAb;;AAqBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;AAWA,eAAeD,QAAf","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n flex: 1;\n margin: 8px;\n overflow: auto;\n box-sizing: border-box;\n\n &.small {\n padding: 0 8px;\n }\n\n &.medium {\n padding: 0 12px;\n }\n\n &.large {\n padding: 0 16px;\n }\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n return (\n <Wrapper className={size}>\n {children}\n </Wrapper>\n )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.js"}
|
|
@@ -60,7 +60,7 @@ var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_temp
|
|
|
60
60
|
|
|
61
61
|
exports.TileHyperLinkText = TileHyperLinkText;
|
|
62
62
|
|
|
63
|
-
var TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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:
|
|
63
|
+
var TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
|
|
64
64
|
|
|
65
65
|
exports.TileHyperLinkWrapper = TileHyperLinkWrapper;
|
|
66
66
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentTextStyle","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","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","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``;\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``;\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:
|
|
1
|
+
{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentTextStyle","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","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","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``;\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``;\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"],"file":"TileCommonItems.cjs"}
|
|
@@ -25,7 +25,7 @@ export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _ta
|
|
|
25
25
|
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));
|
|
26
26
|
export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
|
|
27
27
|
export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
|
|
28
|
-
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:
|
|
28
|
+
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));
|
|
29
29
|
export var RenderTileItem = function RenderTileItem(item, size) {
|
|
30
30
|
var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
31
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"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"],"mappings":"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","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``;\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``;\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: 24px;\n height: 24px;\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"],"file":"TileCommonItems.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"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"],"mappings":"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","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``;\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``;\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"],"file":"TileCommonItems.js"}
|
package/dist/index.cjs
CHANGED
|
@@ -574,18 +574,4 @@ Object.keys(_ProfileButton).forEach(function (key) {
|
|
|
574
574
|
});
|
|
575
575
|
|
|
576
576
|
var _assets = require("./assets");
|
|
577
|
-
|
|
578
|
-
var _Popover = require("./Popover");
|
|
579
|
-
|
|
580
|
-
Object.keys(_Popover).forEach(function (key) {
|
|
581
|
-
if (key === "default" || key === "__esModule") return;
|
|
582
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
583
|
-
if (key in exports && exports[key] === _Popover[key]) return;
|
|
584
|
-
Object.defineProperty(exports, key, {
|
|
585
|
-
enumerable: true,
|
|
586
|
-
get: function get() {
|
|
587
|
-
return _Popover[key];
|
|
588
|
-
}
|
|
589
|
-
});
|
|
590
|
-
});
|
|
591
577
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,iBAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,iBAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\n"],"file":"index.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"
|
|
1
|
+
{"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE;AAfc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\n\n\n dropdown: '1000',\n sticky_menu: '1020',\n fixed_menu: '1030',\n backdrop: '1040',\n off_canvas: '1050',\n modal: '1060',\n toast: '1070',\n tooltip: '1080',\n}\n"],"file":"z-indexes.cjs"}
|
package/dist/styles/z-indexes.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"
|
|
1
|
+
{"version":3,"sources":["../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAKvBC,EAAAA,KAAK,EAAE,IALgB;AAQvBC,EAAAA,QAAQ,EAAE,MARa;AASvBC,EAAAA,WAAW,EAAE,MATU;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,QAAQ,EAAE,MAXa;AAYvBC,EAAAA,UAAU,EAAE,MAZW;AAavBC,EAAAA,KAAK,EAAE,MAbgB;AAcvBC,EAAAA,KAAK,EAAE,MAdgB;AAevBC,EAAAA,OAAO,EAAE;AAfc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n hover: '1',\n active: '2',\n focus: '3',\n\n badge: '10',\n\n\n dropdown: '1000',\n sticky_menu: '1020',\n fixed_menu: '1030',\n backdrop: '1040',\n off_canvas: '1050',\n modal: '1060',\n toast: '1070',\n tooltip: '1080',\n}\n"],"file":"z-indexes.js"}
|
package/dist/types.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ToastPosition = exports.ToastEntryDirection = exports.ToastColor = exports.ToastActionType = exports.States = exports.Size =
|
|
6
|
+
exports.ToastPosition = exports.ToastEntryDirection = exports.ToastColor = exports.ToastActionType = exports.States = exports.Size = void 0;
|
|
7
7
|
var States;
|
|
8
8
|
exports.States = States;
|
|
9
9
|
|
|
@@ -24,16 +24,6 @@ exports.Size = Size;
|
|
|
24
24
|
Size["Large"] = "large";
|
|
25
25
|
})(Size || (exports.Size = Size = {}));
|
|
26
26
|
|
|
27
|
-
var Position;
|
|
28
|
-
exports.Position = Position;
|
|
29
|
-
|
|
30
|
-
(function (Position) {
|
|
31
|
-
Position["Top"] = "top";
|
|
32
|
-
Position["Bottom"] = "bottom";
|
|
33
|
-
Position["Right"] = "right";
|
|
34
|
-
Position["Left"] = "left";
|
|
35
|
-
})(Position || (exports.Position = Position = {}));
|
|
36
|
-
|
|
37
27
|
var ToastColor;
|
|
38
28
|
exports.ToastColor = ToastColor;
|
|
39
29
|
|
package/dist/types.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"names":["States","Size","
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"names":["States","Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":";;;;;;IAOYA,M;;;WAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;GAAAA,M,sBAAAA,M;;IAMAC,I;;;WAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,oBAAAA,I;;IAQAC,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U;;IASAC,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;IAKAC,a;;;WAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,6BAAAA,a;;IASAC,mB;;;WAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,mCAAAA,mB","sourcesContent":["export interface Product {\n id: string;\n name: string;\n type: string;\n image: string;\n}\n\nexport enum States {\n Default = 'default',\n Valid = 'valid',\n Invalid = 'invalid',\n}\n\nexport enum Size {\n XXSmall = 'xxsmall',\n XSmall = 'xsmall',\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport enum ToastColor {\n BLACK,\n WHITE,\n BLUE,\n GREEN,\n ORANGE,\n RED,\n}\n\nexport enum ToastActionType {\n PRIMARY,\n SECONDARY,\n}\n\nexport enum ToastPosition {\n TOPLEFT,\n TOPMIDDLE,\n TOPRIGHT,\n BOTTOMLEFT,\n BOTTOMMIDDLE,\n BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection {\n TOP,\n BOTTOM,\n LEFT,\n RIGHT,\n}\n\nexport interface SwitcherNavItem {\n label: string;\n url: string;\n disabled?: boolean;\n Icon?: any;\n as?: any;\n testId?: string;\n}\n\nexport interface NavLink {\n label: string;\n to: string;\n target?: string;\n}\n\nexport interface NavSection {\n header: string;\n links: NavLink[];\n}\n\nexport interface NavOptions {\n sections: NavSection[];\n}\n"],"file":"types.cjs"}
|
package/dist/types.d.ts
CHANGED
package/dist/types.js
CHANGED
|
@@ -16,15 +16,6 @@ export var Size;
|
|
|
16
16
|
Size["Large"] = "large";
|
|
17
17
|
})(Size || (Size = {}));
|
|
18
18
|
|
|
19
|
-
export var Position;
|
|
20
|
-
|
|
21
|
-
(function (Position) {
|
|
22
|
-
Position["Top"] = "top";
|
|
23
|
-
Position["Bottom"] = "bottom";
|
|
24
|
-
Position["Right"] = "right";
|
|
25
|
-
Position["Left"] = "left";
|
|
26
|
-
})(Position || (Position = {}));
|
|
27
|
-
|
|
28
19
|
export var ToastColor;
|
|
29
20
|
|
|
30
21
|
(function (ToastColor) {
|
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"names":["States","Size","
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"names":["States","Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,MAAZ;;WAAYA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;AAAAA,EAAAA,M;GAAAA,M,KAAAA,M;;AAMZ,WAAYC,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;AAQZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n id: string;\n name: string;\n type: string;\n image: string;\n}\n\nexport enum States {\n Default = 'default',\n Valid = 'valid',\n Invalid = 'invalid',\n}\n\nexport enum Size {\n XXSmall = 'xxsmall',\n XSmall = 'xsmall',\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport enum ToastColor {\n BLACK,\n WHITE,\n BLUE,\n GREEN,\n ORANGE,\n RED,\n}\n\nexport enum ToastActionType {\n PRIMARY,\n SECONDARY,\n}\n\nexport enum ToastPosition {\n TOPLEFT,\n TOPMIDDLE,\n TOPRIGHT,\n BOTTOMLEFT,\n BOTTOMMIDDLE,\n BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection {\n TOP,\n BOTTOM,\n LEFT,\n RIGHT,\n}\n\nexport interface SwitcherNavItem {\n label: string;\n url: string;\n disabled?: boolean;\n Icon?: any;\n as?: any;\n testId?: string;\n}\n\nexport interface NavLink {\n label: string;\n to: string;\n target?: string;\n}\n\nexport interface NavSection {\n header: string;\n links: NavLink[];\n}\n\nexport interface NavOptions {\n sections: NavSection[];\n}\n"],"file":"types.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@laerdal/life-react-components",
|
|
3
|
-
"version": "1.8.0-dev.
|
|
3
|
+
"version": "1.8.0-dev.28",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Thomas Kalve <thomas.kalve@laerdal.com>",
|
|
6
6
|
"contributors": [
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"styled-components": "^5.1.1",
|
|
70
70
|
"typescript": "~4.3.5",
|
|
71
71
|
"react-inlinesvg": "^2.3.0",
|
|
72
|
-
"@laerdal/figma-svg": "^2.9.
|
|
72
|
+
"@laerdal/figma-svg": "^2.9.2"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@babel/cli": "^7.16.0",
|
package/dist/Popover/Popover.cjs
DELETED
|
@@ -1,267 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports.default = void 0;
|
|
11
|
-
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
|
-
var React = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
21
|
-
|
|
22
|
-
var _ = require("..");
|
|
23
|
-
|
|
24
|
-
var _Button = require("../Button");
|
|
25
|
-
|
|
26
|
-
var _icons = require("../icons");
|
|
27
|
-
|
|
28
|
-
var _styles = require("../styles");
|
|
29
|
-
|
|
30
|
-
var _types = require("../types");
|
|
31
|
-
|
|
32
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
|
-
|
|
34
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
35
|
-
|
|
36
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
|
-
|
|
38
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
|
-
|
|
40
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n border-radius: 4px;\n background: ", ";\n cursor: default;\n box-shadow: ", ";\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n"])), function (props) {
|
|
41
|
-
return props.size === _types.Size.Small ? '240px' : props.size === _types.Size.Large ? '480px' : '360px';
|
|
42
|
-
}, function (props) {
|
|
43
|
-
return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
|
|
44
|
-
}, _.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
|
|
45
|
-
return props.position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
|
|
46
|
-
}, function (props) {
|
|
47
|
-
return props.position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
|
|
48
|
-
}, function (props) {
|
|
49
|
-
return props.position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
|
|
50
|
-
}, function (props) {
|
|
51
|
-
return props.position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
|
|
52
|
-
}, _.COLORS.white, function (props) {
|
|
53
|
-
return props.position == _types.Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
|
|
54
|
-
}, function (props) {
|
|
55
|
-
return props.position == _types.Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
|
|
56
|
-
}, function (props) {
|
|
57
|
-
return props.position == _types.Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
|
|
58
|
-
}, function (props) {
|
|
59
|
-
return props.position == _types.Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n display: flex;\n"])), function (props) {
|
|
63
|
-
return props.size === _types.Size.Small ? '56px' : props.size === _types.Size.Large ? '72px' : '64px';
|
|
64
|
-
}, function (props) {
|
|
65
|
-
return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
var MainContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n"])), function (props) {
|
|
69
|
-
return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
var MiddleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n padding-right: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
|
|
73
|
-
return props.size === _types.Size.Small ? '104px' : props.size === _types.Size.Large ? '304px' : '208px';
|
|
74
|
-
}, function (props) {
|
|
75
|
-
return props.size === _types.Size.Small ? '312px' : props.size === _types.Size.Large ? '576px' : '424px';
|
|
76
|
-
}, function (props) {
|
|
77
|
-
return props.size === _types.Size.Small ? '6px' : props.size === _types.Size.Large ? '14px' : '10px';
|
|
78
|
-
}, (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
79
|
-
|
|
80
|
-
var BottomContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
|
|
81
|
-
return props.size === _types.Size.Small ? '64px' : props.size === _types.Size.Large ? '88px' : '72px';
|
|
82
|
-
}, function (props) {
|
|
83
|
-
return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
var TextContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n flex-grow: 1;\n"])), function (props) {
|
|
87
|
-
return renderMargins(props.note, props.size);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
var NoteContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), function (props) {
|
|
91
|
-
return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600);
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
var LabelContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), function (props) {
|
|
95
|
-
return props.size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null);
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
var CloseButtonContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", ";\n"])), function (props) {
|
|
99
|
-
return props.size === _types.Size.Small ? '4px 16px 4px 0' : props.size === _types.Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
var TextButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", ";\n"])), function (props) {
|
|
103
|
-
return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
var IconButtonContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", ";\n display: flex;\n"])), function (props) {
|
|
107
|
-
return props.size === _types.Size.Small ? '8px 16px 8px 0' : props.size === _types.Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n\n .pointer-space {\n height: ", ";\n width: ", ";\n position: absolute;\n\n ", ";\n ", ";\n\n ", ";\n ", ";\n }\n\n ", "\n"])), function (props) {
|
|
111
|
-
return props.position === _types.Position.Top || props.position === _types.Position.Bottom ? '8px' : '100%';
|
|
112
|
-
}, function (props) {
|
|
113
|
-
return props.position === _types.Position.Left || props.position === _types.Position.Right ? '8px' : '100%';
|
|
114
|
-
}, function (props) {
|
|
115
|
-
return props.position === _types.Position.Left ? 'right:100%; bottom: 0%' : '';
|
|
116
|
-
}, function (props) {
|
|
117
|
-
return props.position === _types.Position.Right ? 'left:100%; bottom: 0%' : '';
|
|
118
|
-
}, function (props) {
|
|
119
|
-
return props.position === _types.Position.Top ? 'bottom: 100%' : '';
|
|
120
|
-
}, function (props) {
|
|
121
|
-
return props.position === _types.Position.Bottom ? 'top: 100%' : '';
|
|
122
|
-
}, function (props) {
|
|
123
|
-
return props.showOnClick ? "".concat(Container, " {\n visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n opacity: ").concat(props.showPopover ? '1' : '0', ";\n }\n cursor: pointer;") : "&:hover {\n ".concat(Container, " {\n visibility: visible;\n opacity: 1;\n }\n }");
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
var renderMargins = function renderMargins(isNotePresent, size) {
|
|
127
|
-
if (isNotePresent) {
|
|
128
|
-
return size === _types.Size.Small ? '10px 16px' : size === _types.Size.Large ? '14px 24px' : '12px 20px';
|
|
129
|
-
} else {
|
|
130
|
-
return size === _types.Size.Small ? '18px 16px' : size === _types.Size.Large ? '24px' : '20px';
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
var Popover = function Popover(_ref) {
|
|
135
|
-
var _bottomSectionProps$t, _bottomSectionProps$i;
|
|
136
|
-
|
|
137
|
-
var _ref$size = _ref.size,
|
|
138
|
-
size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
|
|
139
|
-
topSectionProps = _ref.topSectionProps,
|
|
140
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
141
|
-
mainContent = _ref.mainContent,
|
|
142
|
-
children = _ref.children,
|
|
143
|
-
position = _ref.position,
|
|
144
|
-
_ref$showOnClick = _ref.showOnClick,
|
|
145
|
-
showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
|
|
146
|
-
|
|
147
|
-
var _React$useState = React.useState(false),
|
|
148
|
-
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
149
|
-
showPopover = _React$useState2[0],
|
|
150
|
-
setShowPopover = _React$useState2[1];
|
|
151
|
-
|
|
152
|
-
var popoverRef = React.useRef();
|
|
153
|
-
React.useEffect(function () {
|
|
154
|
-
var checkIfClickedOutside = function checkIfClickedOutside(e) {
|
|
155
|
-
if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
|
|
156
|
-
setShowPopover(false);
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
document.addEventListener("mousedown", checkIfClickedOutside);
|
|
161
|
-
return function () {
|
|
162
|
-
document.removeEventListener("mousedown", checkIfClickedOutside);
|
|
163
|
-
};
|
|
164
|
-
}, [showPopover]);
|
|
165
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
166
|
-
position: position,
|
|
167
|
-
showOnClick: showOnClick,
|
|
168
|
-
showPopover: showPopover,
|
|
169
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
170
|
-
size: size,
|
|
171
|
-
position: position,
|
|
172
|
-
ref: popoverRef,
|
|
173
|
-
children: [!!topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopContainer, {
|
|
174
|
-
size: size,
|
|
175
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
176
|
-
note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
|
|
177
|
-
size: size,
|
|
178
|
-
children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteContainer, {
|
|
179
|
-
size: size,
|
|
180
|
-
children: topSectionProps.note
|
|
181
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelContainer, {
|
|
182
|
-
size: size,
|
|
183
|
-
children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
|
|
184
|
-
})]
|
|
185
|
-
}), showOnClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButtonContainer, {
|
|
186
|
-
size: size,
|
|
187
|
-
"data-testid": 'closeBtn',
|
|
188
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
189
|
-
action: function action() {
|
|
190
|
-
return setShowPopover(false);
|
|
191
|
-
},
|
|
192
|
-
useTransparentBackground: true,
|
|
193
|
-
iconColor: _.COLORS.neutral_600,
|
|
194
|
-
variant: "secondary",
|
|
195
|
-
shape: "circular",
|
|
196
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {})
|
|
197
|
-
})
|
|
198
|
-
})]
|
|
199
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MainContentWrapper, {
|
|
200
|
-
size: size,
|
|
201
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MiddleContainer, {
|
|
202
|
-
size: size,
|
|
203
|
-
children: mainContent
|
|
204
|
-
})
|
|
205
|
-
}), !!bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomContainer, {
|
|
206
|
-
size: size,
|
|
207
|
-
children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextButtonContainer, {
|
|
208
|
-
size: size,
|
|
209
|
-
"data-testid": 'textBtn',
|
|
210
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
211
|
-
size: size,
|
|
212
|
-
variant: "secondary",
|
|
213
|
-
icon: bottomSectionProps.textButton.icon,
|
|
214
|
-
onClick: bottomSectionProps.textButton.action,
|
|
215
|
-
children: bottomSectionProps.textButton.label
|
|
216
|
-
})
|
|
217
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
218
|
-
className: "bottom-flex"
|
|
219
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContainer, {
|
|
220
|
-
size: size,
|
|
221
|
-
"data-testid": 'iconBtn',
|
|
222
|
-
children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
|
|
223
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
224
|
-
action: iconButton.action,
|
|
225
|
-
variant: "secondary",
|
|
226
|
-
shape: "circular",
|
|
227
|
-
useTransparentBackground: true,
|
|
228
|
-
children: iconButton.icon
|
|
229
|
-
});
|
|
230
|
-
})
|
|
231
|
-
})]
|
|
232
|
-
})]
|
|
233
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
234
|
-
onClick: function onClick() {
|
|
235
|
-
return showOnClick && setShowPopover(!showPopover);
|
|
236
|
-
},
|
|
237
|
-
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
238
|
-
className: "pointer-space"
|
|
239
|
-
})]
|
|
240
|
-
})]
|
|
241
|
-
});
|
|
242
|
-
};
|
|
243
|
-
|
|
244
|
-
Popover.propTypes = {
|
|
245
|
-
topSectionProps: _propTypes.default.shape({
|
|
246
|
-
text: _propTypes.default.string.isRequired,
|
|
247
|
-
note: _propTypes.default.string
|
|
248
|
-
}),
|
|
249
|
-
bottomSectionProps: _propTypes.default.shape({
|
|
250
|
-
iconButtons: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
251
|
-
icon: _propTypes.default.node.isRequired,
|
|
252
|
-
action: _propTypes.default.func.isRequired,
|
|
253
|
-
label: _propTypes.default.string
|
|
254
|
-
})),
|
|
255
|
-
textButton: _propTypes.default.shape({
|
|
256
|
-
icon: _propTypes.default.node.isRequired,
|
|
257
|
-
action: _propTypes.default.func.isRequired,
|
|
258
|
-
label: _propTypes.default.string
|
|
259
|
-
})
|
|
260
|
-
}),
|
|
261
|
-
mainContent: _propTypes.default.node.isRequired,
|
|
262
|
-
children: _propTypes.default.node.isRequired,
|
|
263
|
-
showOnClick: _propTypes.default.bool.isRequired
|
|
264
|
-
};
|
|
265
|
-
var _default = Popover;
|
|
266
|
-
exports.default = _default;
|
|
267
|
-
//# sourceMappingURL=Popover.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n border-radius: 4px;\n background: ${COLORS.white};\n cursor: default;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ${Z_INDEXES.popover};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n padding: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px')};\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding-right: ${props=>props.size===Size.Small ? '6px' : (props.size===Size.Large ? '14px' : '10px')};\n overflow-y: auto;\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n display: flex;\n flex-direction: column;\n margin: ${props=>renderMargins(props.note, props.size)};\n flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n position: relative;\n\n .pointer-space {\n height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '8px' : '100%'};\n width: ${props=>props.position===Position.Left || props.position===Position.Right ? '8px' : '100%'};\n position: absolute;\n\n ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n }\n\n ${props=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\n }`\n }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n if(isNotePresent){\n return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n }\n}\n\ntype topSectionProps = {\n text: string;\n note?: string;\n}\n\ntype actionButtonProps = {\n icon: React.ReactNode;\n action: ()=>void;\n label?: string;\n}\n\ntype bottomSectionProps = {\n iconButtons?: actionButtonProps[];\n textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n topSectionProps?: topSectionProps;\n bottomSectionProps?: bottomSectionProps;\n mainContent: React.ReactNode;\n children: React.ReactNode;\n position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\n\n const [showPopover, setShowPopover] = React.useState(false);\n const popoverRef = React.useRef<any>();\n\n React.useEffect(()=>{\n const checkIfClickedOutside = (e: { target: any; }) => {\n if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n setShowPopover(false);\n }\n }\n\n document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n return () => {\n document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n }\n },[showPopover]);\n\n return (\n <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n <Container size={size} position={position} ref={popoverRef}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </LabelContainer>\n </TextContainer>\n\n {showOnClick && \n <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n <SystemIcons.Close />\n </IconButton>\n </CloseButtonContainer>\n }\n </TopContainer>\n }\n\n <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\n\n {!!bottomSectionProps && \n <BottomContainer size={size}>\n {!!bottomSectionProps?.textButton?.icon && \n <TextButtonContainer size={size} data-testid={'textBtn'}>\n <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n {bottomSectionProps.textButton.label}\n </Button>\n </TextButtonContainer>\n }\n\n <div className='bottom-flex'/>\n \n <IconButtonContainer size={size} data-testid={'iconBtn'}>\n {bottomSectionProps?.iconButtons?.map((iconButton) =>\n \n <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n {iconButton.icon}\n </IconButton> \n )}\n </IconButtonContainer>\n </BottomContainer>\n }\n </Container>\n\n <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n {children}\n\n <div className='pointer-space'/>\n </div>\n\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Position, Size } from '../types';
|
|
3
|
-
declare type topSectionProps = {
|
|
4
|
-
text: string;
|
|
5
|
-
note?: string;
|
|
6
|
-
};
|
|
7
|
-
declare type actionButtonProps = {
|
|
8
|
-
icon: React.ReactNode;
|
|
9
|
-
action: () => void;
|
|
10
|
-
label?: string;
|
|
11
|
-
};
|
|
12
|
-
declare type bottomSectionProps = {
|
|
13
|
-
iconButtons?: actionButtonProps[];
|
|
14
|
-
textButton?: actionButtonProps;
|
|
15
|
-
};
|
|
16
|
-
declare type PopoverProps = {
|
|
17
|
-
size?: Size.Small | Size.Medium | Size.Large;
|
|
18
|
-
topSectionProps?: topSectionProps;
|
|
19
|
-
bottomSectionProps?: bottomSectionProps;
|
|
20
|
-
mainContent: React.ReactNode;
|
|
21
|
-
children: React.ReactNode;
|
|
22
|
-
position: Position.Top | Position.Bottom | Position.Right | Position.Left;
|
|
23
|
-
showOnClick: boolean;
|
|
24
|
-
};
|
|
25
|
-
declare const Popover: React.FunctionComponent<PopoverProps>;
|
|
26
|
-
export default Popover;
|
package/dist/Popover/Popover.js
DELETED
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
3
|
-
import _pt from "prop-types";
|
|
4
|
-
|
|
5
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
6
|
-
|
|
7
|
-
import * as React from 'react';
|
|
8
|
-
import styled from 'styled-components';
|
|
9
|
-
import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
|
|
10
|
-
import { Button, IconButton } from '../Button';
|
|
11
|
-
import { SystemIcons } from '../icons';
|
|
12
|
-
import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
|
|
13
|
-
import { Position, Size } from '../types';
|
|
14
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n border-radius: 4px;\n background: ", ";\n cursor: default;\n box-shadow: ", ";\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n"])), function (props) {
|
|
17
|
-
return props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px';
|
|
18
|
-
}, function (props) {
|
|
19
|
-
return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
|
|
20
|
-
}, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
|
|
21
|
-
return props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
|
|
22
|
-
}, function (props) {
|
|
23
|
-
return props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
|
|
24
|
-
}, function (props) {
|
|
25
|
-
return props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
|
|
26
|
-
}, function (props) {
|
|
27
|
-
return props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
|
|
28
|
-
}, COLORS.white, function (props) {
|
|
29
|
-
return props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
|
|
30
|
-
}, function (props) {
|
|
31
|
-
return props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
|
|
32
|
-
}, function (props) {
|
|
33
|
-
return props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
|
|
34
|
-
}, function (props) {
|
|
35
|
-
return props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
|
|
36
|
-
});
|
|
37
|
-
var TopContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n display: flex;\n"])), function (props) {
|
|
38
|
-
return props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px';
|
|
39
|
-
}, function (props) {
|
|
40
|
-
return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
|
|
41
|
-
});
|
|
42
|
-
var MainContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: ", ";\n"])), function (props) {
|
|
43
|
-
return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
|
|
44
|
-
});
|
|
45
|
-
var MiddleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n padding-right: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
|
|
46
|
-
return props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px';
|
|
47
|
-
}, function (props) {
|
|
48
|
-
return props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px';
|
|
49
|
-
}, function (props) {
|
|
50
|
-
return props.size === Size.Small ? '6px' : props.size === Size.Large ? '14px' : '10px';
|
|
51
|
-
}, scrollBarStyling(Size.Small));
|
|
52
|
-
var BottomContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
|
|
53
|
-
return props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px';
|
|
54
|
-
}, function (props) {
|
|
55
|
-
return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
|
|
56
|
-
});
|
|
57
|
-
var TextContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n flex-grow: 1;\n"])), function (props) {
|
|
58
|
-
return renderMargins(props.note, props.size);
|
|
59
|
-
});
|
|
60
|
-
var NoteContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
61
|
-
return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : props.size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600);
|
|
62
|
-
});
|
|
63
|
-
var LabelContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
64
|
-
return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null);
|
|
65
|
-
});
|
|
66
|
-
var CloseButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: ", ";\n"])), function (props) {
|
|
67
|
-
return props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
|
|
68
|
-
});
|
|
69
|
-
var TextButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin: ", ";\n"])), function (props) {
|
|
70
|
-
return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
|
|
71
|
-
});
|
|
72
|
-
var IconButtonContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin: ", ";\n display: flex;\n"])), function (props) {
|
|
73
|
-
return props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
|
|
74
|
-
});
|
|
75
|
-
var Wrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: relative;\n\n .pointer-space {\n height: ", ";\n width: ", ";\n position: absolute;\n\n ", ";\n ", ";\n\n ", ";\n ", ";\n }\n\n ", "\n"])), function (props) {
|
|
76
|
-
return props.position === Position.Top || props.position === Position.Bottom ? '8px' : '100%';
|
|
77
|
-
}, function (props) {
|
|
78
|
-
return props.position === Position.Left || props.position === Position.Right ? '8px' : '100%';
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.position === Position.Left ? 'right:100%; bottom: 0%' : '';
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return props.position === Position.Right ? 'left:100%; bottom: 0%' : '';
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.position === Position.Top ? 'bottom: 100%' : '';
|
|
85
|
-
}, function (props) {
|
|
86
|
-
return props.position === Position.Bottom ? 'top: 100%' : '';
|
|
87
|
-
}, function (props) {
|
|
88
|
-
return props.showOnClick ? "".concat(Container, " {\n visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n opacity: ").concat(props.showPopover ? '1' : '0', ";\n }\n cursor: pointer;") : "&:hover {\n ".concat(Container, " {\n visibility: visible;\n opacity: 1;\n }\n }");
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
var renderMargins = function renderMargins(isNotePresent, size) {
|
|
92
|
-
if (isNotePresent) {
|
|
93
|
-
return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
|
|
94
|
-
} else {
|
|
95
|
-
return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
var Popover = function Popover(_ref) {
|
|
100
|
-
var _bottomSectionProps$t, _bottomSectionProps$i;
|
|
101
|
-
|
|
102
|
-
var _ref$size = _ref.size,
|
|
103
|
-
size = _ref$size === void 0 ? Size.Medium : _ref$size,
|
|
104
|
-
topSectionProps = _ref.topSectionProps,
|
|
105
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
106
|
-
mainContent = _ref.mainContent,
|
|
107
|
-
children = _ref.children,
|
|
108
|
-
position = _ref.position,
|
|
109
|
-
_ref$showOnClick = _ref.showOnClick,
|
|
110
|
-
showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
|
|
111
|
-
|
|
112
|
-
var _React$useState = React.useState(false),
|
|
113
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
114
|
-
showPopover = _React$useState2[0],
|
|
115
|
-
setShowPopover = _React$useState2[1];
|
|
116
|
-
|
|
117
|
-
var popoverRef = React.useRef();
|
|
118
|
-
React.useEffect(function () {
|
|
119
|
-
var checkIfClickedOutside = function checkIfClickedOutside(e) {
|
|
120
|
-
if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
|
|
121
|
-
setShowPopover(false);
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
document.addEventListener("mousedown", checkIfClickedOutside);
|
|
126
|
-
return function () {
|
|
127
|
-
document.removeEventListener("mousedown", checkIfClickedOutside);
|
|
128
|
-
};
|
|
129
|
-
}, [showPopover]);
|
|
130
|
-
return /*#__PURE__*/_jsxs(Wrapper, {
|
|
131
|
-
position: position,
|
|
132
|
-
showOnClick: showOnClick,
|
|
133
|
-
showPopover: showPopover,
|
|
134
|
-
children: [/*#__PURE__*/_jsxs(Container, {
|
|
135
|
-
size: size,
|
|
136
|
-
position: position,
|
|
137
|
-
ref: popoverRef,
|
|
138
|
-
children: [!!topSectionProps && /*#__PURE__*/_jsxs(TopContainer, {
|
|
139
|
-
size: size,
|
|
140
|
-
children: [/*#__PURE__*/_jsxs(TextContainer, {
|
|
141
|
-
note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
|
|
142
|
-
size: size,
|
|
143
|
-
children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/_jsx(NoteContainer, {
|
|
144
|
-
size: size,
|
|
145
|
-
children: topSectionProps.note
|
|
146
|
-
}), /*#__PURE__*/_jsx(LabelContainer, {
|
|
147
|
-
size: size,
|
|
148
|
-
children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
|
|
149
|
-
})]
|
|
150
|
-
}), showOnClick && /*#__PURE__*/_jsx(CloseButtonContainer, {
|
|
151
|
-
size: size,
|
|
152
|
-
"data-testid": 'closeBtn',
|
|
153
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
|
154
|
-
action: function action() {
|
|
155
|
-
return setShowPopover(false);
|
|
156
|
-
},
|
|
157
|
-
useTransparentBackground: true,
|
|
158
|
-
iconColor: COLORS.neutral_600,
|
|
159
|
-
variant: "secondary",
|
|
160
|
-
shape: "circular",
|
|
161
|
-
children: /*#__PURE__*/_jsx(SystemIcons.Close, {})
|
|
162
|
-
})
|
|
163
|
-
})]
|
|
164
|
-
}), /*#__PURE__*/_jsx(MainContentWrapper, {
|
|
165
|
-
size: size,
|
|
166
|
-
children: /*#__PURE__*/_jsx(MiddleContainer, {
|
|
167
|
-
size: size,
|
|
168
|
-
children: mainContent
|
|
169
|
-
})
|
|
170
|
-
}), !!bottomSectionProps && /*#__PURE__*/_jsxs(BottomContainer, {
|
|
171
|
-
size: size,
|
|
172
|
-
children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/_jsx(TextButtonContainer, {
|
|
173
|
-
size: size,
|
|
174
|
-
"data-testid": 'textBtn',
|
|
175
|
-
children: /*#__PURE__*/_jsx(Button, {
|
|
176
|
-
size: size,
|
|
177
|
-
variant: "secondary",
|
|
178
|
-
icon: bottomSectionProps.textButton.icon,
|
|
179
|
-
onClick: bottomSectionProps.textButton.action,
|
|
180
|
-
children: bottomSectionProps.textButton.label
|
|
181
|
-
})
|
|
182
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
183
|
-
className: "bottom-flex"
|
|
184
|
-
}), /*#__PURE__*/_jsx(IconButtonContainer, {
|
|
185
|
-
size: size,
|
|
186
|
-
"data-testid": 'iconBtn',
|
|
187
|
-
children: bottomSectionProps === null || bottomSectionProps === void 0 ? void 0 : (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(function (iconButton) {
|
|
188
|
-
return /*#__PURE__*/_jsx(IconButton, {
|
|
189
|
-
action: iconButton.action,
|
|
190
|
-
variant: "secondary",
|
|
191
|
-
shape: "circular",
|
|
192
|
-
useTransparentBackground: true,
|
|
193
|
-
children: iconButton.icon
|
|
194
|
-
});
|
|
195
|
-
})
|
|
196
|
-
})]
|
|
197
|
-
})]
|
|
198
|
-
}), /*#__PURE__*/_jsxs("div", {
|
|
199
|
-
onClick: function onClick() {
|
|
200
|
-
return showOnClick && setShowPopover(!showPopover);
|
|
201
|
-
},
|
|
202
|
-
children: [children, /*#__PURE__*/_jsx("div", {
|
|
203
|
-
className: "pointer-space"
|
|
204
|
-
})]
|
|
205
|
-
})]
|
|
206
|
-
});
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
Popover.propTypes = {
|
|
210
|
-
topSectionProps: _pt.shape({
|
|
211
|
-
text: _pt.string.isRequired,
|
|
212
|
-
note: _pt.string
|
|
213
|
-
}),
|
|
214
|
-
bottomSectionProps: _pt.shape({
|
|
215
|
-
iconButtons: _pt.arrayOf(_pt.shape({
|
|
216
|
-
icon: _pt.node.isRequired,
|
|
217
|
-
action: _pt.func.isRequired,
|
|
218
|
-
label: _pt.string
|
|
219
|
-
})),
|
|
220
|
-
textButton: _pt.shape({
|
|
221
|
-
icon: _pt.node.isRequired,
|
|
222
|
-
action: _pt.func.isRequired,
|
|
223
|
-
label: _pt.string
|
|
224
|
-
})
|
|
225
|
-
}),
|
|
226
|
-
mainContent: _pt.node.isRequired,
|
|
227
|
-
children: _pt.node.isRequired,
|
|
228
|
-
showOnClick: _pt.bool.isRequired
|
|
229
|
-
};
|
|
230
|
-
export default Popover;
|
|
231
|
-
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{size: Size, position: Position}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n border-radius: 4px;\n background: ${COLORS.white};\n cursor: default;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n position: absolute; \n visibility: hidden;\n opacity: 0;\n z-index: ${Z_INDEXES.popover};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n padding: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px')};\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding-right: ${props=>props.size===Size.Small ? '6px' : (props.size===Size.Large ? '14px' : '10px')};\n overflow-y: auto;\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '64px' : (props.size===Size.Large ? '88px' : '72px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n`;\n\nconst TextContainer = styled.div<{note: boolean, size: Size}>`\n display: flex;\n flex-direction: column;\n margin: ${props=>renderMargins(props.note, props.size)};\n flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null))}\n`;\n\nconst CloseButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '4px 16px 4px 0' : (props.size===Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{size: Size}>`\n margin: ${props=>props.size===Size.Small ? '8px 16px 8px 0' : (props.size===Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n display: flex;\n`;\n\nconst Wrapper = styled.div<{position: Position, showOnClick: boolean, showPopover: boolean}>`\n position: relative;\n\n .pointer-space {\n height: ${props=>props.position===Position.Top || props.position===Position.Bottom ? '8px' : '100%'};\n width: ${props=>props.position===Position.Left || props.position===Position.Right ? '8px' : '100%'};\n position: absolute;\n\n ${props=>props.position===Position.Left ? 'right:100%; bottom: 0%' : ''};\n ${props=>props.position===Position.Right ? 'left:100%; bottom: 0%' : ''};\n\n ${props=>props.position===Position.Top ? 'bottom: 100%' : ''};\n ${props=>props.position===Position.Bottom ? 'top: 100%' : ''};\n }\n\n ${props=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\n }`\n }\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n if(isNotePresent){\n return (size===Size.Small ? '10px 16px' : (size===Size.Large ? '14px 24px' : '12px 20px'));\n }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\n }\n}\n\ntype topSectionProps = {\n text: string;\n note?: string;\n}\n\ntype actionButtonProps = {\n icon: React.ReactNode;\n action: ()=>void;\n label?: string;\n}\n\ntype bottomSectionProps = {\n iconButtons?: actionButtonProps[];\n textButton?: actionButtonProps;\n}\n\ntype PopoverProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n topSectionProps?: topSectionProps;\n bottomSectionProps?: bottomSectionProps;\n mainContent: React.ReactNode;\n children: React.ReactNode;\n position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n showOnClick: boolean;\n}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\n\n const [showPopover, setShowPopover] = React.useState(false);\n const popoverRef = React.useRef<any>();\n\n React.useEffect(()=>{\n const checkIfClickedOutside = (e: { target: any; }) => {\n if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n setShowPopover(false);\n }\n }\n\n document.addEventListener(\"mousedown\", checkIfClickedOutside)\n\n return () => {\n document.removeEventListener(\"mousedown\", checkIfClickedOutside)\n }\n },[showPopover]);\n\n return (\n <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n <Container size={size} position={position} ref={popoverRef}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </LabelContainer>\n </TextContainer>\n\n {showOnClick && \n <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n <IconButton action={()=>setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant='secondary' shape='circular'>\n <SystemIcons.Close />\n </IconButton>\n </CloseButtonContainer>\n }\n </TopContainer>\n }\n\n <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\n\n {!!bottomSectionProps && \n <BottomContainer size={size}>\n {!!bottomSectionProps?.textButton?.icon && \n <TextButtonContainer size={size} data-testid={'textBtn'}>\n <Button size={size} variant='secondary' icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n {bottomSectionProps.textButton.label}\n </Button>\n </TextButtonContainer>\n }\n\n <div className='bottom-flex'/>\n \n <IconButtonContainer size={size} data-testid={'iconBtn'}>\n {bottomSectionProps?.iconButtons?.map((iconButton) =>\n \n <IconButton action={iconButton.action} variant='secondary' shape='circular' useTransparentBackground>\n {iconButton.icon}\n </IconButton> \n )}\n </IconButtonContainer>\n </BottomContainer>\n }\n </Container>\n\n <div onClick={()=>showOnClick && setShowPopover(!showPopover)}>\n {children}\n\n <div className='pointer-space'/>\n </div>\n\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.js"}
|
package/dist/Popover/index.cjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
Object.defineProperty(exports, "Popover", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return _Popover.default;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
var _Popover = _interopRequireDefault(require("./Popover"));
|
|
16
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Popover/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.cjs"}
|
package/dist/Popover/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Popover } from './Popover';
|
package/dist/Popover/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Popover/index.ts"],"names":["default","Popover"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.js"}
|