@laerdal/life-react-components 1.5.1-dev.15 → 1.5.1-dev.18
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/SegmentControl/SegmentControl.cjs +1 -1
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
- package/dist/SegmentControl/SegmentControl.js +1 -1
- package/dist/SegmentControl/SegmentControl.js.map +1 -1
- package/dist/index.cjs +0 -13
- 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/package.json +1 -1
- package/dist/Card/Card.cjs +0 -101
- package/dist/Card/Card.cjs.map +0 -1
- package/dist/Card/Card.d.ts +0 -23
- package/dist/Card/Card.js +0 -74
- package/dist/Card/Card.js.map +0 -1
- package/dist/Card/CardBottomSection.cjs +0 -135
- package/dist/Card/CardBottomSection.cjs.map +0 -1
- package/dist/Card/CardBottomSection.d.ts +0 -22
- package/dist/Card/CardBottomSection.js +0 -105
- package/dist/Card/CardBottomSection.js.map +0 -1
- package/dist/Card/CardMiddleSection.cjs +0 -104
- package/dist/Card/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/CardMiddleSection.d.ts +0 -14
- package/dist/Card/CardMiddleSection.js +0 -80
- package/dist/Card/CardMiddleSection.js.map +0 -1
- package/dist/Card/CardTopSection.cjs +0 -108
- package/dist/Card/CardTopSection.cjs.map +0 -1
- package/dist/Card/CardTopSection.d.ts +0 -17
- package/dist/Card/CardTopSection.js +0 -81
- package/dist/Card/CardTopSection.js.map +0 -1
- package/dist/Card/index.cjs +0 -52
- package/dist/Card/index.cjs.map +0 -1
- package/dist/Card/index.d.ts +0 -5
- package/dist/Card/index.js +0 -6
- package/dist/Card/index.js.map +0 -1
|
@@ -33,7 +33,7 @@ var SegmentControlItemBackground = _styledComponents.default.div(_templateObject
|
|
|
33
33
|
|
|
34
34
|
exports.SegmentControlItemBackground = SegmentControlItemBackground;
|
|
35
35
|
|
|
36
|
-
var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n
|
|
36
|
+
var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
|
|
37
37
|
|
|
38
38
|
exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
|
|
39
39
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGO,IAAMA,yBAAyB,GAAGC,0BAAOC,GAAV,2QAS3BC,eAAOC,WAToB,CAA/B;;;;AAYA,IAAMC,4BAA4B,GAAGJ,0BAAOC,GAAV,sNAKnBC,eAAOG,UALY,CAAlC;;;;AASA,IAAMC,yBAAyB,GAAGN,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
|
|
@@ -11,7 +11,7 @@ import { defaultOnMouseDownHandler } from '../common';
|
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ", ";\n"])), COLORS.neutral_600);
|
|
13
13
|
export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n padding: 4px 0px;\n"])), COLORS.neutral_20);
|
|
14
|
-
export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n
|
|
14
|
+
export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
|
|
15
15
|
export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ", ":first-of-type {\n ", " {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ", ":last-of-type {\n ", " {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ", " {\n ", "\n min-height: 32px;\n }\n }\n\n &.medium {\n ", " {\n ", "\n min-height: 40px;\n }\n }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
|
|
16
16
|
|
|
17
17
|
var SegmentControl = function SegmentControl(_ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,iBAAnC,EAAsDC,kBAAtD,EAA0EC,SAA1E,QAA0F,WAA1F;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;AAGA,OAAO,IAAMC,yBAAyB,GAAGP,MAAM,CAACQ,GAAV,6PAS3BP,MAAM,CAACQ,WAToB,CAA/B;AAYP,OAAO,IAAMC,4BAA4B,GAAGV,MAAM,CAACQ,GAAV,wMAKnBP,MAAM,CAACU,UALY,CAAlC;AASP,OAAO,IAAMC,yBAAyB,GAAGZ,MAAM,CAACQ,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
|
package/dist/index.cjs
CHANGED
|
@@ -445,17 +445,4 @@ Object.keys(_SegmentControl).forEach(function (key) {
|
|
|
445
445
|
}
|
|
446
446
|
});
|
|
447
447
|
});
|
|
448
|
-
|
|
449
|
-
var _Card = require("./Card");
|
|
450
|
-
|
|
451
|
-
Object.keys(_Card).forEach(function (key) {
|
|
452
|
-
if (key === "default" || key === "__esModule") return;
|
|
453
|
-
if (key in exports && exports[key] === _Card[key]) return;
|
|
454
|
-
Object.defineProperty(exports, key, {
|
|
455
|
-
enumerable: true,
|
|
456
|
-
get: function get() {
|
|
457
|
-
return _Card[key];
|
|
458
|
-
}
|
|
459
|
-
});
|
|
460
|
-
});
|
|
461
448
|
//# 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;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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 './LinearProgression';\nexport * from './SegmentControl';\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":[],"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,qBAAd;AACA,cAAc,kBAAd
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"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,qBAAd;AACA,cAAc,kBAAd","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 './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.js"}
|
package/package.json
CHANGED
package/dist/Card/Card.cjs
DELETED
|
@@ -1,101 +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 = exports.InteractionType = exports.CardTopLevelContainer = void 0;
|
|
11
|
-
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
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 _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
|
|
23
|
-
|
|
24
|
-
var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
|
|
25
|
-
|
|
26
|
-
var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
|
|
27
|
-
|
|
28
|
-
var _ = require("..");
|
|
29
|
-
|
|
30
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
-
|
|
32
|
-
var _templateObject;
|
|
33
|
-
|
|
34
|
-
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); }
|
|
35
|
-
|
|
36
|
-
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; }
|
|
37
|
-
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
39
|
-
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
41
|
-
|
|
42
|
-
var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), _.COLORS.white, _.COLORS.neutral_200, function (props) {
|
|
43
|
-
return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
exports.CardTopLevelContainer = CardTopLevelContainer;
|
|
47
|
-
var InteractionType;
|
|
48
|
-
exports.InteractionType = InteractionType;
|
|
49
|
-
|
|
50
|
-
(function (InteractionType) {
|
|
51
|
-
InteractionType[InteractionType["None"] = 0] = "None";
|
|
52
|
-
InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
|
|
53
|
-
InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
|
|
54
|
-
})(InteractionType || (exports.InteractionType = InteractionType = {}));
|
|
55
|
-
|
|
56
|
-
var Card = function Card(_ref) {
|
|
57
|
-
var _ref$interactionType = _ref.interactionType,
|
|
58
|
-
interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
|
|
59
|
-
onCardClicked = _ref.onCardClicked,
|
|
60
|
-
topSectionProps = _ref.topSectionProps,
|
|
61
|
-
middleSectionProps = _ref.middleSectionProps,
|
|
62
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
63
|
-
disabled = _ref.disabled;
|
|
64
|
-
var rootRef = React.useRef(null);
|
|
65
|
-
|
|
66
|
-
var onCardClick = function onCardClick() {
|
|
67
|
-
if (interactionType == InteractionType.Clickable) {
|
|
68
|
-
var _rootRef$current;
|
|
69
|
-
|
|
70
|
-
if (onCardClicked) onCardClicked();
|
|
71
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
|
|
76
|
-
disabled: disabled,
|
|
77
|
-
ref: rootRef,
|
|
78
|
-
tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
|
|
79
|
-
interactionType: interactionType,
|
|
80
|
-
onClick: onCardClick,
|
|
81
|
-
children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
|
82
|
-
disabled: disabled,
|
|
83
|
-
interactionType: interactionType
|
|
84
|
-
})), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
85
|
-
disabled: disabled,
|
|
86
|
-
interactionType: interactionType
|
|
87
|
-
})), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
|
|
88
|
-
disabled: disabled,
|
|
89
|
-
interactionType: interactionType
|
|
90
|
-
}))]
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
Card.propTypes = {
|
|
95
|
-
interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
|
|
96
|
-
onCardClicked: _propTypes.default.func.isRequired,
|
|
97
|
-
disabled: _propTypes.default.bool.isRequired
|
|
98
|
-
};
|
|
99
|
-
var _default = Card;
|
|
100
|
-
exports.default = _default;
|
|
101
|
-
//# sourceMappingURL=Card.cjs.map
|
package/dist/Card/Card.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","neutral_200","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,ySACZC,SAAOC,KADK,EAMZD,SAAOE,WANK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,0eADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,GAA+C,CAA/C,GAAmD,CAAC,CAAvH;AAA0H,IAAA,eAAe,EAAEF,eAA3I;AAA4J,IAAA,OAAO,EAAEa,WAArK;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
|
package/dist/Card/Card.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CardTopSectionProps } from './CardTopSection';
|
|
3
|
-
import { CardMiddleSectionProps } from './CardMiddleSection';
|
|
4
|
-
import { CardBottomSectionProps } from './CardBottomSection';
|
|
5
|
-
export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
-
interactionType: InteractionType;
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
}, never>;
|
|
9
|
-
export declare enum InteractionType {
|
|
10
|
-
None = 0,
|
|
11
|
-
Clickable = 1,
|
|
12
|
-
Selectable = 2
|
|
13
|
-
}
|
|
14
|
-
export interface CardProps {
|
|
15
|
-
interactionType: InteractionType;
|
|
16
|
-
onCardClicked: () => {};
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
topSectionProps?: CardTopSectionProps;
|
|
19
|
-
middleSectionProps?: CardMiddleSectionProps;
|
|
20
|
-
bottomSectionProps?: CardBottomSectionProps;
|
|
21
|
-
}
|
|
22
|
-
declare const Card: React.FunctionComponent<CardProps>;
|
|
23
|
-
export default Card;
|
package/dist/Card/Card.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
3
|
-
import _pt from "prop-types";
|
|
4
|
-
|
|
5
|
-
var _templateObject;
|
|
6
|
-
|
|
7
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
8
|
-
|
|
9
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
10
|
-
|
|
11
|
-
import * as React from 'react';
|
|
12
|
-
import styled from 'styled-components';
|
|
13
|
-
import CardTopSection from './CardTopSection';
|
|
14
|
-
import CardMiddleSection from './CardMiddleSection';
|
|
15
|
-
import CardBottomSection from './CardBottomSection';
|
|
16
|
-
import { COLORS } from '..';
|
|
17
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
|
-
export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), COLORS.white, COLORS.neutral_200, function (props) {
|
|
20
|
-
return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
|
|
21
|
-
});
|
|
22
|
-
export var InteractionType;
|
|
23
|
-
|
|
24
|
-
(function (InteractionType) {
|
|
25
|
-
InteractionType[InteractionType["None"] = 0] = "None";
|
|
26
|
-
InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
|
|
27
|
-
InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
|
|
28
|
-
})(InteractionType || (InteractionType = {}));
|
|
29
|
-
|
|
30
|
-
var Card = function Card(_ref) {
|
|
31
|
-
var _ref$interactionType = _ref.interactionType,
|
|
32
|
-
interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
|
|
33
|
-
onCardClicked = _ref.onCardClicked,
|
|
34
|
-
topSectionProps = _ref.topSectionProps,
|
|
35
|
-
middleSectionProps = _ref.middleSectionProps,
|
|
36
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
37
|
-
disabled = _ref.disabled;
|
|
38
|
-
var rootRef = React.useRef(null);
|
|
39
|
-
|
|
40
|
-
var onCardClick = function onCardClick() {
|
|
41
|
-
if (interactionType == InteractionType.Clickable) {
|
|
42
|
-
var _rootRef$current;
|
|
43
|
-
|
|
44
|
-
if (onCardClicked) onCardClicked();
|
|
45
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
|
|
50
|
-
disabled: disabled,
|
|
51
|
-
ref: rootRef,
|
|
52
|
-
tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
|
|
53
|
-
interactionType: interactionType,
|
|
54
|
-
onClick: onCardClick,
|
|
55
|
-
children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
|
56
|
-
disabled: disabled,
|
|
57
|
-
interactionType: interactionType
|
|
58
|
-
})), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
59
|
-
disabled: disabled,
|
|
60
|
-
interactionType: interactionType
|
|
61
|
-
})), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
|
|
62
|
-
disabled: disabled,
|
|
63
|
-
interactionType: interactionType
|
|
64
|
-
}))]
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
Card.propTypes = {
|
|
69
|
-
interactionType: _pt.oneOf([0, 1, 2]).isRequired,
|
|
70
|
-
onCardClicked: _pt.func.isRequired,
|
|
71
|
-
disabled: _pt.bool.isRequired
|
|
72
|
-
};
|
|
73
|
-
export default Card;
|
|
74
|
-
//# sourceMappingURL=Card.js.map
|
package/dist/Card/Card.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","neutral_200","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,2RACZF,MAAM,CAACG,KADK,EAMZH,MAAM,CAACI,WANK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,0eADK;AAAA,CAXyB,CAA3B;AAmCP,WAAYF,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIZ,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEX,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,GAA+C,CAA/C,GAAmD,CAAC,CAAvH;AAA0H,IAAA,eAAe,EAAEF,eAA3I;AAA4J,IAAA,OAAO,EAAEY,WAArK;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;AAgCF,eAAeC,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
|
|
@@ -1,135 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
-
|
|
16
|
-
var React = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
-
|
|
20
|
-
var _ = require("..");
|
|
21
|
-
|
|
22
|
-
var _assets = require("../assets");
|
|
23
|
-
|
|
24
|
-
var _Button = require("../Button");
|
|
25
|
-
|
|
26
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
|
-
|
|
28
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
29
|
-
|
|
30
|
-
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); }
|
|
31
|
-
|
|
32
|
-
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; }
|
|
33
|
-
|
|
34
|
-
var ProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
|
|
35
|
-
|
|
36
|
-
var NotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 24px;\n margin-top: 24px;\n position: relative;\n"])));
|
|
37
|
-
|
|
38
|
-
var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ", "\n"])), function (props) {
|
|
39
|
-
return props.disabled ? "\n color: ".concat(_.COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
var Divider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n"])), _.COLORS.neutral_100);
|
|
43
|
-
|
|
44
|
-
var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n svg {\n margin-right: 4px;\n }\n"])), _.COLORS.neutral_500);
|
|
45
|
-
|
|
46
|
-
var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n svg {\n margin-right: 4px;\n }\n"])), _.COLORS.neutral_500);
|
|
47
|
-
|
|
48
|
-
var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 2;\n"])));
|
|
49
|
-
|
|
50
|
-
var ButtonRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
|
|
51
|
-
|
|
52
|
-
var Container = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ", ";\n\n ", " {\n ", "\n }\n"])), function (props) {
|
|
53
|
-
return props.disabled ? 'not-allowed' : 'pointer';
|
|
54
|
-
}, ButtonRowContainer, function (props) {
|
|
55
|
-
return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
var CardBottomSection = function CardBottomSection(_ref) {
|
|
59
|
-
var interactionType = _ref.interactionType,
|
|
60
|
-
progressLevel = _ref.progressLevel,
|
|
61
|
-
progressMax = _ref.progressMax,
|
|
62
|
-
_ref$progressType = _ref.progressType,
|
|
63
|
-
progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
|
|
64
|
-
noteLeft = _ref.noteLeft,
|
|
65
|
-
noteLeftIcon = _ref.noteLeftIcon,
|
|
66
|
-
noteRight = _ref.noteRight,
|
|
67
|
-
noteRightIcon = _ref.noteRightIcon,
|
|
68
|
-
authorName = _ref.authorName,
|
|
69
|
-
actions = _ref.actions,
|
|
70
|
-
disabled = _ref.disabled;
|
|
71
|
-
var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
|
|
72
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
73
|
-
disabled: disabled,
|
|
74
|
-
interactionType: interactionType,
|
|
75
|
-
children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
|
|
76
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
|
|
77
|
-
size: _.Size.Small,
|
|
78
|
-
type: progressType,
|
|
79
|
-
variant: _.LinearProgressionVariant.Normal,
|
|
80
|
-
value: progressLevel,
|
|
81
|
-
max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
|
|
82
|
-
})
|
|
83
|
-
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NotesContainer, {
|
|
84
|
-
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteLeft, {
|
|
85
|
-
children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
86
|
-
children: noteLeft
|
|
87
|
-
})]
|
|
88
|
-
}), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteRight, {
|
|
89
|
-
children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
90
|
-
children: noteRight
|
|
91
|
-
})]
|
|
92
|
-
})]
|
|
93
|
-
}), authorName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
|
|
94
|
-
disabled: disabled,
|
|
95
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorName, {
|
|
96
|
-
children: authorName
|
|
97
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
|
|
98
|
-
width: "80px",
|
|
99
|
-
height: "43px"
|
|
100
|
-
})]
|
|
101
|
-
}), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonRowContainer, {
|
|
102
|
-
children: actions.map(function (x) {
|
|
103
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
104
|
-
disabled: disabled,
|
|
105
|
-
variant: "secondary",
|
|
106
|
-
shape: "square",
|
|
107
|
-
action: function action(e) {
|
|
108
|
-
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
109
|
-
x.onClick();
|
|
110
|
-
},
|
|
111
|
-
children: x.icon
|
|
112
|
-
});
|
|
113
|
-
})
|
|
114
|
-
})]
|
|
115
|
-
});
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
CardBottomSection.propTypes = {
|
|
119
|
-
progressLevel: _propTypes.default.number,
|
|
120
|
-
progressMax: _propTypes.default.number,
|
|
121
|
-
noteLeft: _propTypes.default.string,
|
|
122
|
-
noteLeftIcon: _propTypes.default.node,
|
|
123
|
-
noteRight: _propTypes.default.string,
|
|
124
|
-
noteRightIcon: _propTypes.default.node,
|
|
125
|
-
authorName: _propTypes.default.string,
|
|
126
|
-
actions: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
127
|
-
icon: _propTypes.default.node.isRequired,
|
|
128
|
-
onClick: _propTypes.default.func.isRequired
|
|
129
|
-
})),
|
|
130
|
-
logoSrc: _propTypes.default.string.isRequired,
|
|
131
|
-
disabled: _propTypes.default.bool.isRequired
|
|
132
|
-
};
|
|
133
|
-
var _default = CardBottomSection;
|
|
134
|
-
exports.default = _default;
|
|
135
|
-
//# sourceMappingURL=CardBottomSection.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","AuthorContainer","props","disabled","COLORS","neutral_300","Divider","neutral_100","NoteLeft","neutral_500","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressionType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressionVariant","Normal","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressionType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_500};\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_500};\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressionType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgression size={Size.Small}\n type={progressType}\n variant={LinearProgressionVariant.Normal}\n value={progressLevel} \n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <div>{noteLeft}</div>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <div>{noteRight}</div>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"square\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { InteractionType, LinearProgressionType } from '..';
|
|
3
|
-
export interface ActionItem {
|
|
4
|
-
icon: React.ReactNode;
|
|
5
|
-
onClick: () => void;
|
|
6
|
-
}
|
|
7
|
-
export interface CardBottomSectionProps {
|
|
8
|
-
interactionType: InteractionType;
|
|
9
|
-
progressLevel?: number;
|
|
10
|
-
progressMax?: number;
|
|
11
|
-
progressType?: LinearProgressionType;
|
|
12
|
-
noteLeft?: string;
|
|
13
|
-
noteLeftIcon?: React.ReactNode;
|
|
14
|
-
noteRight?: string;
|
|
15
|
-
noteRightIcon?: React.ReactNode;
|
|
16
|
-
authorName?: string;
|
|
17
|
-
actions?: ActionItem[];
|
|
18
|
-
logoSrc: string;
|
|
19
|
-
disabled: boolean;
|
|
20
|
-
}
|
|
21
|
-
declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
|
|
22
|
-
export default CardBottomSection;
|