@laerdal/life-react-components 2.2.0 → 2.2.1-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/AccordionItem.cjs +8 -17
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.d.ts +2 -0
- package/dist/Accordion/AccordionItem.js +9 -18
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +6 -2
- package/dist/Accordion/AccordionMenu.cjs.map +1 -1
- package/dist/Accordion/AccordionMenu.d.ts +3 -0
- package/dist/Accordion/AccordionMenu.js +6 -2
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/styles.cjs +7 -11
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.d.ts +1 -4
- package/dist/Accordion/styles.js +6 -9
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs +12 -9
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.d.ts +2 -0
- package/dist/Card/HorizontalCard/HorizontalCard.js +9 -8
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +13 -9
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +4 -0
- package/dist/Card/HorizontalCard/HorizontalCardBody.js +8 -8
- package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +7 -5
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +2 -0
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +4 -4
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/Card/HorizontalCard/index.cjs +33 -12
- package/dist/Card/HorizontalCard/index.cjs.map +1 -1
- package/dist/Card/HorizontalCard/index.d.ts +3 -1
- package/dist/Card/HorizontalCard/index.js +3 -1
- package/dist/Card/HorizontalCard/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ var _icons = require("../icons");
|
|
|
14
14
|
var _styles = require("./styles");
|
|
15
15
|
var _common = require("../common");
|
|
16
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
|
|
17
|
+
var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
|
|
18
18
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
19
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
20
20
|
var AccordionItem = function AccordionItem(props) {
|
|
@@ -28,11 +28,12 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
28
28
|
padding = props.padding,
|
|
29
29
|
children = props.children,
|
|
30
30
|
className = props.className,
|
|
31
|
+
_props$size = props.size,
|
|
32
|
+
size = _props$size === void 0 ? _.Size.Medium : _props$size,
|
|
31
33
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
32
|
-
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
|
|
34
|
+
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
|
|
33
35
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AccordionItemContainer, {
|
|
34
36
|
id: id,
|
|
35
|
-
displaySeparator: !isActive && !isLast,
|
|
36
37
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
|
|
37
38
|
role: "button",
|
|
38
39
|
"aria-expanded": isActive,
|
|
@@ -50,26 +51,16 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
50
51
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
51
52
|
className: cls
|
|
52
53
|
}, rest), {}, {
|
|
53
|
-
children: [icon
|
|
54
|
-
size: '24px'
|
|
55
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
54
|
+
children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
56
55
|
children: title
|
|
57
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
|
56
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
58
57
|
"aria-hidden": "true",
|
|
59
|
-
children: isActive
|
|
60
|
-
color: _.COLORS.neutral_800,
|
|
61
|
-
size: "20px"
|
|
62
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
|
|
63
|
-
color: _.COLORS.neutral_600,
|
|
64
|
-
size: "20px"
|
|
65
|
-
})
|
|
58
|
+
children: [isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {})]
|
|
66
59
|
})]
|
|
67
60
|
})), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
|
|
68
61
|
id: "itemContentFor_".concat(id),
|
|
69
62
|
padding: padding,
|
|
70
|
-
children:
|
|
71
|
-
children: children
|
|
72
|
-
})
|
|
63
|
+
children: children
|
|
73
64
|
})]
|
|
74
65
|
});
|
|
75
66
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","
|
|
1
|
+
{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Size","Medium","rest","cls","undefined","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n return (\n <AccordionItemContainer id={id}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAoD;AAAA;AAAA;AAAA;AAUpD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGC,MAAI,CAACC,MAAM;IACfC,IAAI,0CACLd,KAAK;EAET,IAAMe,GAAG,GAAG,CAACZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGU,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACV,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACgB,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEhB,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEkB,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPT,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA8DMT,aAAa;AAAA"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Size } from '..';
|
|
2
3
|
import { AccordionItemProps } from './AccordionMenu';
|
|
3
4
|
interface AccordionItemPropsInner extends AccordionItemProps {
|
|
4
5
|
onSelect: (id: string) => void;
|
|
5
6
|
isActive: boolean;
|
|
6
7
|
isLast: boolean;
|
|
7
8
|
padding?: string;
|
|
9
|
+
size?: Size.Small | Size.Medium | Size.Large;
|
|
8
10
|
}
|
|
9
11
|
declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
|
|
10
12
|
export default AccordionItem;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _pt from "prop-types";
|
|
4
|
-
var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
|
|
4
|
+
var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
|
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
6
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
8
|
+
import { Size } from '..';
|
|
9
9
|
import { SystemIcons } from '../icons';
|
|
10
10
|
import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
|
|
11
11
|
import { defaultOnMouseDownHandler } from '../common';
|
|
@@ -22,11 +22,12 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
22
22
|
padding = props.padding,
|
|
23
23
|
children = props.children,
|
|
24
24
|
className = props.className,
|
|
25
|
+
_props$size = props.size,
|
|
26
|
+
size = _props$size === void 0 ? Size.Medium : _props$size,
|
|
25
27
|
rest = _objectWithoutProperties(props, _excluded);
|
|
26
|
-
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
|
|
28
|
+
var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
|
|
27
29
|
return /*#__PURE__*/_jsxs(AccordionItemContainer, {
|
|
28
30
|
id: id,
|
|
29
|
-
displaySeparator: !isActive && !isLast,
|
|
30
31
|
children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
|
|
31
32
|
role: "button",
|
|
32
33
|
"aria-expanded": isActive,
|
|
@@ -44,26 +45,16 @@ var AccordionItem = function AccordionItem(props) {
|
|
|
44
45
|
onMouseDown: defaultOnMouseDownHandler,
|
|
45
46
|
className: cls
|
|
46
47
|
}, rest), {}, {
|
|
47
|
-
children: [icon
|
|
48
|
-
size: '24px'
|
|
49
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
48
|
+
children: [icon, /*#__PURE__*/_jsx("span", {
|
|
50
49
|
children: title
|
|
51
|
-
}), /*#__PURE__*/
|
|
50
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
52
51
|
"aria-hidden": "true",
|
|
53
|
-
children: isActive
|
|
54
|
-
color: COLORS.neutral_800,
|
|
55
|
-
size: "20px"
|
|
56
|
-
}) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
|
|
57
|
-
color: COLORS.neutral_600,
|
|
58
|
-
size: "20px"
|
|
59
|
-
})
|
|
52
|
+
children: [isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {})]
|
|
60
53
|
})]
|
|
61
54
|
})), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
|
|
62
55
|
id: "itemContentFor_".concat(id),
|
|
63
56
|
padding: padding,
|
|
64
|
-
children:
|
|
65
|
-
children: children
|
|
66
|
-
})
|
|
57
|
+
children: children
|
|
67
58
|
})]
|
|
68
59
|
});
|
|
69
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","names":["React","
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","names":["React","Size","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Medium","rest","cls","undefined","e","key"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {\n id,\n onSelect,\n isActive,\n title,\n icon,\n disabled,\n isLast,\n padding,\n children,\n className,\n size = Size.Medium,\n ...rest\n } = props;\n\n const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n return (\n <AccordionItemContainer id={id}>\n <ItemHeaderContainer\n role=\"button\"\n aria-expanded={isActive}\n id={`itemHeaderFor_${id}`}\n aria-controls={`itemContentFor_${id}`}\n tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter') onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={cls}\n {...rest}>\n {icon}\n <span>{title}</span>\n <div aria-hidden=\"true\">\n {\n isActive && <SystemIcons.ChevronUp/>\n }\n {\n !isActive && <SystemIcons.ChevronDown/>\n }\n </div>\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n {children}\n </ItemBodyContainer>\n )\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,QAAO,IAAI;AAC3C,SAAQC,WAAW,QAAO,UAAU;AAEpC,SAAQC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,UAAU;AACvF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAUpD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGlB,IAAI,CAACmB,MAAM;IACfC,IAAI,4BACLb,KAAK;EAET,IAAMc,GAAG,GAAG,CAACX,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGS,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACT,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACe,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEf,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEgB;IAAI,GACXD,IAAI;MAAA,WACPR,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,KAAC,WAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,KAAC,WAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA8DT,eAAeT,aAAa"}
|
|
@@ -14,8 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
14
14
|
var React = _interopRequireWildcard(require("react"));
|
|
15
15
|
var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
|
|
16
16
|
var _styles = require("./styles");
|
|
17
|
+
var _types = require("../types");
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
|
|
19
|
+
var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
|
|
19
20
|
_excluded2 = ["id", "disabled", "title", "icon", "children"];
|
|
20
21
|
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); }
|
|
21
22
|
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; }
|
|
@@ -28,6 +29,8 @@ var AccordionMenu = function AccordionMenu(props) {
|
|
|
28
29
|
onSelect = props.onSelect,
|
|
29
30
|
multipleActive = props.multipleActive,
|
|
30
31
|
padding = props.padding,
|
|
32
|
+
_props$size = props.size,
|
|
33
|
+
size = _props$size === void 0 ? _types.Size.Medium : _props$size,
|
|
31
34
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
32
35
|
var _React$useState = React.useState([]),
|
|
33
36
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -73,7 +76,8 @@ var AccordionMenu = function AccordionMenu(props) {
|
|
|
73
76
|
}),
|
|
74
77
|
isLast: index === items.length - 1,
|
|
75
78
|
onSelect: onSelected,
|
|
76
|
-
padding: padding
|
|
79
|
+
padding: padding,
|
|
80
|
+
size: size
|
|
77
81
|
}, rest), {}, {
|
|
78
82
|
children: children
|
|
79
83
|
}), id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Size","Medium","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n\n size?: Size.Small | Size.Medium | Size.Large;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n size={size}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Size } from "../types";
|
|
2
3
|
export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
3
4
|
items: AccordionItemProps[];
|
|
4
5
|
selectedItems?: string[];
|
|
@@ -6,12 +7,14 @@ export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement
|
|
|
6
7
|
onSelect?: (id: string) => void;
|
|
7
8
|
multipleActive?: boolean;
|
|
8
9
|
padding?: string;
|
|
10
|
+
size?: Size.Small | Size.Medium | Size.Large;
|
|
9
11
|
}
|
|
10
12
|
export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {
|
|
11
13
|
id: string;
|
|
12
14
|
disabled?: boolean;
|
|
13
15
|
title: string;
|
|
14
16
|
icon?: React.ReactNode;
|
|
17
|
+
size?: Size.Small | Size.Medium | Size.Large;
|
|
15
18
|
children: React.ReactNode;
|
|
16
19
|
}
|
|
17
20
|
declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
|
|
@@ -3,13 +3,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
5
|
import _pt from "prop-types";
|
|
6
|
-
var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
|
|
6
|
+
var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
|
|
7
7
|
_excluded2 = ["id", "disabled", "title", "icon", "children"];
|
|
8
8
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
9
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
10
10
|
import * as React from 'react';
|
|
11
11
|
import AccordionItem from './AccordionItem';
|
|
12
12
|
import { AccordionMenuWrapper } from './styles';
|
|
13
|
+
import { Size } from "../types";
|
|
13
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
15
|
var AccordionMenu = function AccordionMenu(props) {
|
|
15
16
|
var items = props.items,
|
|
@@ -18,6 +19,8 @@ var AccordionMenu = function AccordionMenu(props) {
|
|
|
18
19
|
onSelect = props.onSelect,
|
|
19
20
|
multipleActive = props.multipleActive,
|
|
20
21
|
padding = props.padding,
|
|
22
|
+
_props$size = props.size,
|
|
23
|
+
size = _props$size === void 0 ? Size.Medium : _props$size,
|
|
21
24
|
rest = _objectWithoutProperties(props, _excluded);
|
|
22
25
|
var _React$useState = React.useState([]),
|
|
23
26
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -63,7 +66,8 @@ var AccordionMenu = function AccordionMenu(props) {
|
|
|
63
66
|
}),
|
|
64
67
|
isLast: index === items.length - 1,
|
|
65
68
|
onSelect: onSelected,
|
|
66
|
-
padding: padding
|
|
69
|
+
padding: padding,
|
|
70
|
+
size: size
|
|
67
71
|
}, rest), {}, {
|
|
68
72
|
children: children
|
|
69
73
|
}), id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,SAASC,oBAAoB,QAAQ,UAAU;AAAC;
|
|
1
|
+
{"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","Size","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Medium","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n\n size?: Size.Small | Size.Medium | Size.Large;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n };\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find((x) => x == id);\n if (multipleActive) {\n if (isActive) updateFunc(collection.filter((x) => x != id));\n else updateFunc([...collection, id]);\n } else updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper {...rest}>\n {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n <AccordionItem\n key={id}\n id={id}\n disabled={disabled}\n title={title}\n aria-expanded={!!getCollection().find((x) => x == id)}\n icon={icon}\n isActive={!!getCollection().find((x) => x == id)}\n isLast={index === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n size={size}\n {...rest}>\n {children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
|
|
@@ -4,24 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.
|
|
7
|
+
exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _styles = require("../styles");
|
|
11
11
|
var _zIndexes = require("../styles/z-indexes");
|
|
12
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
13
13
|
var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
14
14
|
exports.AccordionMenuWrapper = AccordionMenuWrapper;
|
|
15
|
-
var
|
|
16
|
-
return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
|
|
17
|
-
});
|
|
18
|
-
exports.AccordionItemContainer = AccordionItemContainer;
|
|
19
|
-
var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
15
|
+
var ItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n &.medium {\n ", "\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ", "\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
20
16
|
exports.ItemHeaderContainer = ItemHeaderContainer;
|
|
21
|
-
var
|
|
22
|
-
exports.
|
|
23
|
-
var ItemBodyContainer = _styledComponents.default.div(
|
|
17
|
+
var AccordionItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ", ":not(.active) {\n border-bottom: 1px solid ", ";\n }\n"])), ItemHeaderContainer, _styles.COLORS.neutral_100);
|
|
18
|
+
exports.AccordionItemContainer = AccordionItemContainer;
|
|
19
|
+
var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
|
|
24
20
|
return props.padding || '12px 16px';
|
|
25
|
-
}, _styles.COLORS.white);
|
|
21
|
+
}, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
|
|
26
22
|
exports.ItemBodyContainer = ItemBodyContainer;
|
|
27
23
|
//# sourceMappingURL=styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","
|
|
1
|
+
{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AAQA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAIK,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,wjCASzC,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAe/D,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAWjE,IAAAE,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAUjEG,mBAAW,EAICJ,cAAM,CAACK,UAAU,EACtBL,cAAM,CAACM,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBR,cAAM,CAACS,WAAW,EACbT,cAAM,CAACU,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBX,cAAM,CAACY,WAAW,EAIbZ,cAAM,CAACa,KAAK,EACjBb,cAAM,CAACc,WAAW,EAIhBd,cAAM,CAACc,WAAW,CAGhC;AAAC;AAEK,IAAMC,sBAAsB,GAAGrB,yBAAM,CAACC,GAAG,uQAMzBC,mBAAmB,EACXI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,iBAAiB,GAAGvB,yBAAM,CAACC,GAAG,gNAC9B,UAACuB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGjD,IAAAG,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAInD,IAAAI,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAAC"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
-
displaySeparator: boolean;
|
|
4
|
-
}, never>;
|
|
5
2
|
export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export declare const
|
|
3
|
+
export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
4
|
export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
5
|
padding?: string | undefined;
|
|
9
6
|
}, never>;
|
package/dist/Accordion/styles.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';
|
|
4
|
+
import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
|
|
5
5
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
6
6
|
export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n"])));
|
|
7
|
-
export var
|
|
8
|
-
|
|
9
|
-
})
|
|
10
|
-
export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
|
|
11
|
-
export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-left: auto;\n"])));
|
|
12
|
-
export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n"])), function (props) {
|
|
7
|
+
export var ItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ", "\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n &.medium {\n ", "\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ", "\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
|
|
8
|
+
export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ", ":not(.active) {\n border-bottom: 1px solid ", ";\n }\n"])), ItemHeaderContainer, COLORS.neutral_100);
|
|
9
|
+
export var ItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: ", ";\n background: ", ";\n \n ", "\n \n .medium & {\n ", "\n }\n \n .large & {\n ", "\n }\n\n"])), function (props) {
|
|
13
10
|
return props.padding || '12px 16px';
|
|
14
|
-
}, COLORS.white);
|
|
11
|
+
}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null));
|
|
15
12
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n div:last-child {\n margin-left: auto;\n }\n\n padding: 0 16px;\n min-height: 48px;\n \n svg {\n width: 20px;\n height: 20px;\n }\n \n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 24px;\n min-height: 56px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n padding: 0 32px;\n min-height: 64px;\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n :focus:not(:active) {\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active {\n color: ${COLORS.neutral_800};\n }\n\n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const AccordionItemContainer = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n \n &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n padding: ${(props) => props.padding || '12px 16px'};\n background: ${COLORS.white};\n \n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n \n .medium & {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n \n .large & {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,oKAK7C;AAID,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACS,GAAG,0iCASzCL,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAe/DT,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAWjEV,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAUjEN,WAAW,EAICL,MAAM,CAACY,UAAU,EACtBZ,MAAM,CAACa,WAAW,EAChBP,SAAS,CAACQ,KAAK,EAIjBd,MAAM,CAACe,WAAW,EACbf,MAAM,CAACgB,WAAW,EACrBV,SAAS,CAACW,MAAM,EAIlBjB,MAAM,CAACkB,WAAW,EAIblB,MAAM,CAACmB,KAAK,EACjBnB,MAAM,CAACoB,WAAW,EAIhBpB,MAAM,CAACoB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGtB,MAAM,CAACS,GAAG,yPAMzBC,mBAAmB,EACXT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,iBAAiB,GAAGxB,MAAM,CAACS,GAAG,kMAC9B,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACmB,KAAK,EAExBhB,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAGjDR,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAInDT,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,CAGxD"}
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default = exports.HorizontalCard = void 0;
|
|
7
|
+
exports.default = exports.HorizontalCardContentContainer = exports.HorizontalCardContainer = exports.HorizontalCard = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
@@ -21,8 +21,10 @@ var _excluded = ["title", "description", "tags", "progress", "icon", "variant",
|
|
|
21
21
|
var _templateObject, _templateObject2;
|
|
22
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
23
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
-
var
|
|
25
|
-
|
|
24
|
+
var HorizontalCardContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n"])), _styles.COLORS.white);
|
|
25
|
+
exports.HorizontalCardContentContainer = HorizontalCardContentContainer;
|
|
26
|
+
var HorizontalCardContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex: 1;\n\n &.outline {\n ", " {\n box-shadow: inset 0 0 0 1px ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ", " {\n background-color: ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ", " {\n background-color: ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n }\n\n &:focus {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n\n &.outline {\n ", " {\n box-shadow: inset 0 0 0 1px ", ";\n }\n }\n }\n"])), HorizontalCardContentContainer, _styles.COLORS.neutral_200, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, _styles.COLORS.primary_20, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, _styles.COLORS.primary_100, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, HorizontalCardContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, _styles.COLORS.neutral_100);
|
|
27
|
+
exports.HorizontalCardContainer = HorizontalCardContainer;
|
|
26
28
|
var HorizontalCard = function HorizontalCard(_ref) {
|
|
27
29
|
var title = _ref.title,
|
|
28
30
|
description = _ref.description,
|
|
@@ -51,16 +53,17 @@ var HorizontalCard = function HorizontalCard(_ref) {
|
|
|
51
53
|
var handleButtonPress = function handleButtonPress(e) {
|
|
52
54
|
e.key === 'Enter' && handleClick();
|
|
53
55
|
};
|
|
54
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
56
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardContainer, {
|
|
55
57
|
ref: containerRef,
|
|
56
58
|
tabIndex: action && !disabled ? 0 : -1,
|
|
57
59
|
className: cls,
|
|
58
60
|
onKeyDown: handleButtonPress,
|
|
59
61
|
onClick: handleClick,
|
|
60
62
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalCardContentContainer, _objectSpread(_objectSpread({
|
|
64
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
65
|
+
"data-testid": dataTestId
|
|
66
|
+
}, rest), {}, {
|
|
64
67
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalCardThumbnail.HorizontalCardThumbnail, {
|
|
65
68
|
image: image,
|
|
66
69
|
icon: icon
|
|
@@ -76,8 +79,8 @@ var HorizontalCard = function HorizontalCard(_ref) {
|
|
|
76
79
|
actions: actions,
|
|
77
80
|
disabled: disabled
|
|
78
81
|
})]
|
|
79
|
-
})
|
|
80
|
-
})
|
|
82
|
+
}))
|
|
83
|
+
});
|
|
81
84
|
};
|
|
82
85
|
exports.HorizontalCard = HorizontalCard;
|
|
83
86
|
var _default = HorizontalCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCard.cjs","names":["
|
|
1
|
+
{"version":3,"file":"HorizontalCard.cjs","names":["HorizontalCardContentContainer","styled","div","COLORS","white","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${HorizontalCardContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${HorizontalCardContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${HorizontalCardContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.outline {\n ${HorizontalCardContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n }\n }\n }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled,\n className,\n dataTestId,\n ...rest\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <HorizontalCardContainer ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <HorizontalCardContentContainer\n onMouseDown={defaultOnMouseDownHandler}\n data-testid={dataTestId}\n {...rest}>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </HorizontalCardContentContainer>\n </HorizontalCardContainer>\n )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
+
export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
5
|
export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
|
|
4
6
|
export default HorizontalCard;
|
|
@@ -15,8 +15,8 @@ import { HorizontalCardActions } from './HorizontalCardActions';
|
|
|
15
15
|
import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var
|
|
19
|
-
var
|
|
18
|
+
export var HorizontalCardContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n"])), COLORS.white);
|
|
19
|
+
export var HorizontalCardContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n\n &.outline {\n ", " {\n box-shadow: inset 0 0 0 1px ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ", " {\n background-color: ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ", " {\n background-color: ", ";\n }\n }\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n }\n\n &:focus {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ", " {\n box-shadow: ", ";\n }\n }\n\n &.outline {\n ", " {\n box-shadow: inset 0 0 0 1px ", ";\n }\n }\n }\n"])), HorizontalCardContentContainer, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
|
|
20
20
|
export var HorizontalCard = function HorizontalCard(_ref) {
|
|
21
21
|
var title = _ref.title,
|
|
22
22
|
description = _ref.description,
|
|
@@ -45,16 +45,17 @@ export var HorizontalCard = function HorizontalCard(_ref) {
|
|
|
45
45
|
var handleButtonPress = function handleButtonPress(e) {
|
|
46
46
|
e.key === 'Enter' && handleClick();
|
|
47
47
|
};
|
|
48
|
-
return /*#__PURE__*/_jsx(
|
|
48
|
+
return /*#__PURE__*/_jsx(HorizontalCardContainer, {
|
|
49
49
|
ref: containerRef,
|
|
50
50
|
tabIndex: action && !disabled ? 0 : -1,
|
|
51
51
|
className: cls,
|
|
52
52
|
onKeyDown: handleButtonPress,
|
|
53
53
|
onClick: handleClick,
|
|
54
54
|
onMouseDown: defaultOnMouseDownHandler,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
children: /*#__PURE__*/_jsxs(HorizontalCardContentContainer, _objectSpread(_objectSpread({
|
|
56
|
+
onMouseDown: defaultOnMouseDownHandler,
|
|
57
|
+
"data-testid": dataTestId
|
|
58
|
+
}, rest), {}, {
|
|
58
59
|
children: [/*#__PURE__*/_jsx(HorizontalCardThumbnail, {
|
|
59
60
|
image: image,
|
|
60
61
|
icon: icon
|
|
@@ -70,8 +71,8 @@ export var HorizontalCard = function HorizontalCard(_ref) {
|
|
|
70
71
|
actions: actions,
|
|
71
72
|
disabled: disabled
|
|
72
73
|
})]
|
|
73
|
-
})
|
|
74
|
-
})
|
|
74
|
+
}))
|
|
75
|
+
});
|
|
75
76
|
};
|
|
76
77
|
export default HorizontalCard;
|
|
77
78
|
//# sourceMappingURL=HorizontalCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","
|
|
1
|
+
{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","HorizontalCardContentContainer","div","white","HorizontalCardContainer","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.white};\n border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n display: flex;\n flex: 1;\n\n &.outline {\n ${HorizontalCardContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover:not(.action-within):not(.disabled) {\n &.outline {\n ${HorizontalCardContentContainer} {\n background-color: ${COLORS.primary_20};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n }\n }\n\n &:active:not(.action-within):not(.disabled) {\n &.outline {\n ${HorizontalCardContentContainer} {\n background-color: ${COLORS.primary_100};\n }\n }\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n &.elevated {\n ${HorizontalCardContentContainer} {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n }\n\n &.outline {\n ${HorizontalCardContentContainer} {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n }\n }\n }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n title,\n description,\n tags,\n progress,\n icon,\n variant = 'outline',\n image,\n action,\n actions,\n disabled,\n className,\n dataTestId,\n ...rest\n }) => {\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, actionsRefs);\n\n const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n const handleClick = () => {\n !disabled && action && action();\n }\n\n const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n e.key === 'Enter' && handleClick();\n };\n\n return (\n <HorizontalCardContainer ref={containerRef}\n tabIndex={action && !disabled ? 0 : -1}\n className={cls}\n onKeyDown={handleButtonPress}\n onClick={handleClick}\n onMouseDown={defaultOnMouseDownHandler}>\n <HorizontalCardContentContainer\n onMouseDown={defaultOnMouseDownHandler}\n data-testid={dataTestId}\n {...rest}>\n\n <HorizontalCardThumbnail image={image}\n icon={icon}/>\n\n <HorizontalCardBody title={title}\n description={description}\n tags={tags}\n progress={progress}/>\n\n <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n actions={actions}\n disabled={disabled}/>\n\n </HorizontalCardContentContainer>\n </HorizontalCardContainer>\n )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.HorizontalCardBody = void 0;
|
|
7
|
+
exports.HorizontalCardBodyTitle = exports.HorizontalCardBodyTagsContainer = exports.HorizontalCardBodyDescription = exports.HorizontalCardBodyContainer = exports.HorizontalCardBody = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
@@ -13,21 +13,25 @@ var _LinearProgress = require("../../LinearProgress");
|
|
|
13
13
|
var _Tag = require("../../Tag");
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
var
|
|
19
|
-
|
|
16
|
+
var HorizontalCardBodyContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n"])));
|
|
17
|
+
exports.HorizontalCardBodyContainer = HorizontalCardBodyContainer;
|
|
18
|
+
var HorizontalCardBodyTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n .disabled & {\n color: ", ";\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
|
|
19
|
+
exports.HorizontalCardBodyTitle = HorizontalCardBodyTitle;
|
|
20
|
+
var HorizontalCardBodyDescription = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
21
|
+
exports.HorizontalCardBodyDescription = HorizontalCardBodyDescription;
|
|
22
|
+
var HorizontalCardBodyTagsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n"])));
|
|
23
|
+
exports.HorizontalCardBodyTagsContainer = HorizontalCardBodyTagsContainer;
|
|
20
24
|
var HorizontalCardBody = function HorizontalCardBody(_ref) {
|
|
21
25
|
var title = _ref.title,
|
|
22
26
|
description = _ref.description,
|
|
23
27
|
progress = _ref.progress,
|
|
24
28
|
tags = _ref.tags;
|
|
25
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
26
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
29
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalCardBodyContainer, {
|
|
30
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTitle, {
|
|
27
31
|
children: title
|
|
28
|
-
}), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
32
|
+
}), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyDescription, {
|
|
29
33
|
children: description
|
|
30
|
-
}), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
34
|
+
}), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardBodyTagsContainer, {
|
|
31
35
|
children: tags.map(function (tag, index) {
|
|
32
36
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
|
|
33
37
|
label: tag.label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardBody.cjs","names":["
|
|
1
|
+
{"version":3,"file":"HorizontalCardBody.cjs","names":["HorizontalCardBodyContainer","styled","div","HorizontalCardBodyTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","neutral_500","HorizontalCardBodyDescription","ComponentXSStyling","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nexport const HorizontalCardBodyContainer = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <HorizontalCardBodyContainer>\n <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n {\n tags &&\n <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </HorizontalCardBodyTagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </HorizontalCardBodyContainer>\n )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAA8B;AAAA;AAEvB,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,6KAMpD;AAAC;AAEK,IAAMC,uBAAuB,GAAGF,yBAAM,CAACC,GAAG,wIAC7C,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,EAE/CD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAEK,IAAMC,6BAA6B,GAAGT,yBAAM,CAACC,GAAG,gGACnD,IAAAS,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,CACrE;AAAC;AAEK,IAAMC,+BAA+B,GAAGb,yBAAM,CAACC,GAAG,qLAMxD;AAAC;AAIK,IAAMa,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,sBAAC,2BAA2B;IAAA,wBAC1B,qBAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,qBAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,qBAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,qBAAC,QAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,qBAAC,8BAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC;AAAC"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
+
export declare const HorizontalCardBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
7
|
type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
|
|
4
8
|
export declare const HorizontalCardBody: React.FunctionComponent<Props>;
|
|
5
9
|
export {};
|
|
@@ -7,21 +7,21 @@ import { LinearProgress } from '../../LinearProgress';
|
|
|
7
7
|
import { Tag } from '../../Tag';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
10
|
+
export var HorizontalCardBodyContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n"])));
|
|
11
|
+
export var HorizontalCardBodyTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n .disabled & {\n color: ", ";\n }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
|
|
12
|
+
export var HorizontalCardBodyDescription = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
|
|
13
|
+
export var HorizontalCardBodyTagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n"])));
|
|
14
14
|
export var HorizontalCardBody = function HorizontalCardBody(_ref) {
|
|
15
15
|
var title = _ref.title,
|
|
16
16
|
description = _ref.description,
|
|
17
17
|
progress = _ref.progress,
|
|
18
18
|
tags = _ref.tags;
|
|
19
|
-
return /*#__PURE__*/_jsxs(
|
|
20
|
-
children: [/*#__PURE__*/_jsx(
|
|
19
|
+
return /*#__PURE__*/_jsxs(HorizontalCardBodyContainer, {
|
|
20
|
+
children: [/*#__PURE__*/_jsx(HorizontalCardBodyTitle, {
|
|
21
21
|
children: title
|
|
22
|
-
}), description && /*#__PURE__*/_jsx(
|
|
22
|
+
}), description && /*#__PURE__*/_jsx(HorizontalCardBodyDescription, {
|
|
23
23
|
children: description
|
|
24
|
-
}), tags && /*#__PURE__*/_jsx(
|
|
24
|
+
}), tags && /*#__PURE__*/_jsx(HorizontalCardBodyTagsContainer, {
|
|
25
25
|
children: tags.map(function (tag, index) {
|
|
26
26
|
return /*#__PURE__*/_jsx(Tag, {
|
|
27
27
|
label: tag.label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","
|
|
1
|
+
{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","Bold","black","neutral_500","HorizontalCardBodyDescription","Regular","neutral_600","HorizontalCardBodyTagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nexport const HorizontalCardBodyContainer = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nexport const HorizontalCardBodyTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nexport const HorizontalCardBodyDescription = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const HorizontalCardBodyTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <HorizontalCardBodyContainer>\n <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\n {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\n {\n tags &&\n <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </HorizontalCardBodyTagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </HorizontalCardBodyContainer>\n )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC;AAAA;AAE9B,OAAO,IAAMC,2BAA2B,GAAGP,MAAM,CAACQ,GAAG,+JAMpD;AAED,OAAO,IAAMC,uBAAuB,GAAGT,MAAM,CAACQ,GAAG,0HAC7CN,iBAAiB,CAACC,kBAAkB,CAACO,IAAI,EAAET,MAAM,CAACU,KAAK,CAAC,EAE/CV,MAAM,CAACW,WAAW,CAE9B;AAED,OAAO,IAAMC,6BAA6B,GAAGb,MAAM,CAACQ,GAAG,kFACnDJ,kBAAkB,CAACD,kBAAkB,CAACW,OAAO,EAAEb,MAAM,CAACc,WAAW,CAAC,CACrE;AAED,OAAO,IAAMC,+BAA+B,GAAGhB,MAAM,CAACQ,GAAG,uKAMxD;AAID,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAkD,OAKU;EAAA,IAJJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;EAGvE,oBACE,MAAC,2BAA2B;IAAA,wBAC1B,KAAC,uBAAuB;MAAA,UAAEH;IAAK,EAA2B,EACzDC,WAAW,iBAAI,KAAC,6BAA6B;MAAA,UAAEA;IAAW,EAAiC,EAE1FE,IAAI,iBACJ,KAAC,+BAA+B;MAAA,UAAEA,IAAI,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBACpD,KAAC,GAAG;UAAa,KAAK,EAAED,GAAG,CAACE,KAAM;UAAC,OAAO,EAAEF,GAAG,CAACG,OAAQ;UAAC,IAAI,EAAEH,GAAG,CAACI;QAAK,GAA9DH,KAAK,CAA2D;MAAA,CAAC;IAAC,EAC5C,EAEnCJ,QAAQ,iBAAI,KAAC,cAAc;MAAC,KAAK,EAAEA,QAAQ,CAACQ,KAAM;MAAC,GAAG,EAAER,QAAQ,CAACS;IAAI,EAAE;EAAA,EAC5C;AAElC,CAAC"}
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.HorizontalCardThumbnail = void 0;
|
|
7
|
+
exports.HorizontalCardThumbnail = exports.HorizontalCardImageContainer = exports.HorizontalCardIconContainer = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
@@ -12,19 +12,21 @@ var _styles = require("../../styles");
|
|
|
12
12
|
var _Image = require("../../Image");
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
var _templateObject, _templateObject2;
|
|
15
|
-
var
|
|
16
|
-
|
|
15
|
+
var HorizontalCardIconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
|
|
16
|
+
exports.HorizontalCardIconContainer = HorizontalCardIconContainer;
|
|
17
|
+
var HorizontalCardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n"])));
|
|
18
|
+
exports.HorizontalCardImageContainer = HorizontalCardImageContainer;
|
|
17
19
|
var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
18
20
|
var _image$fallbackSrc, _image$loader;
|
|
19
21
|
var image = _ref.image,
|
|
20
22
|
icon = _ref.icon;
|
|
21
23
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
22
|
-
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
24
|
+
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardIconContainer, {
|
|
23
25
|
children: /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
24
26
|
width: 48,
|
|
25
27
|
height: 48
|
|
26
28
|
})
|
|
27
|
-
}), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
29
|
+
}), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(HorizontalCardImageContainer, {
|
|
28
30
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
|
|
29
31
|
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
30
32
|
src: image.src,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["
|
|
1
|
+
{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["HorizontalCardIconContainer","styled","div","COLORS","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport const HorizontalCardIconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nexport const HorizontalCardImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <HorizontalCardIconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </HorizontalCardIconContainer>\n }\n {\n image &&\n <HorizontalCardImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n loader={image.loader ?? false} width={image.width} height={image.height}/>\n </HorizontalCardImageContainer>\n }\n </>\n )\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAA+C;AAAA;AAExC,IAAMA,2BAA2B,GAAGC,yBAAM,CAACC,GAAG,yPAO1CC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAAC;AAGK,IAAMC,4BAA4B,GAAGL,yBAAM,CAACC,GAAG,2YAqBrD;AAAC;AAIK,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,2BAA2B;MAAA,uBACzBC,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCL,KAAK,iBACH,qBAAC,4BAA4B;MAAA,uBACzB,qBAAC,yBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACM,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QAAC,GAAG,EAAEP,KAAK,CAACQ,GAAI;QACnE,MAAM,mBAAER,KAAK,CAACS,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAET,KAAK,CAACI,KAAM;QAAC,MAAM,EAAEJ,KAAK,CAACK;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC;AAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HorizontalCardProps } from './types';
|
|
3
|
+
export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
5
|
type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
|
|
4
6
|
export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
|
|
5
7
|
export {};
|
|
@@ -7,19 +7,19 @@ import { ImageWithFallbacks } from "../../Image";
|
|
|
7
7
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
-
var
|
|
11
|
-
var
|
|
10
|
+
export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), COLORS.black, COLORS.neutral_500);
|
|
11
|
+
export var HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n"])));
|
|
12
12
|
export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
13
13
|
var _image$fallbackSrc, _image$loader;
|
|
14
14
|
var image = _ref.image,
|
|
15
15
|
icon = _ref.icon;
|
|
16
16
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
17
|
-
children: [icon && /*#__PURE__*/_jsx(
|
|
17
|
+
children: [icon && /*#__PURE__*/_jsx(HorizontalCardIconContainer, {
|
|
18
18
|
children: /*#__PURE__*/React.cloneElement(icon, {
|
|
19
19
|
width: 48,
|
|
20
20
|
height: 48
|
|
21
21
|
})
|
|
22
|
-
}), image && /*#__PURE__*/_jsx(
|
|
22
|
+
}), image && /*#__PURE__*/_jsx(HorizontalCardImageContainer, {
|
|
23
23
|
children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
|
|
24
24
|
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
25
25
|
src: image.src,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","
|
|
1
|
+
{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","HorizontalCardIconContainer","div","black","neutral_500","HorizontalCardImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport const HorizontalCardIconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nexport const HorizontalCardImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <HorizontalCardIconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </HorizontalCardIconContainer>\n }\n {\n image &&\n <HorizontalCardImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n loader={image.loader ?? false} width={image.width} height={image.height}/>\n </HorizontalCardImageContainer>\n }\n </>\n )\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAAA;AAE/C,OAAO,IAAMC,2BAA2B,GAAGH,MAAM,CAACI,GAAG,2OAO1CH,MAAM,CAACI,KAAK,EAGVJ,MAAM,CAACK,WAAW,CAE9B;AAGD,OAAO,IAAMC,4BAA4B,GAAGP,MAAM,CAACI,GAAG,6XAqBrD;AAID,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAAuD,OAGU;EAAA;EAAA,IAFJC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;EAG5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,2BAA2B;MAAA,uBACzBX,KAAK,CAACY,YAAY,CAACD,IAAI,EAAE;QAACE,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,EACtB,EAGhCJ,KAAK,iBACH,KAAC,4BAA4B;MAAA,uBACzB,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACK,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAEL,KAAK,CAACM,GAAI;QAAC,GAAG,EAAEN,KAAK,CAACO,GAAI;QACnE,MAAM,mBAAEP,KAAK,CAACQ,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAER,KAAK,CAACG,KAAM;QAAC,MAAM,EAAEH,KAAK,CAACI;MAAO;IAAE,EACnE;EAAA,EAElC;AAEP,CAAC"}
|
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
var _exportNames = {
|
|
8
|
-
HorizontalCard: true
|
|
9
|
-
};
|
|
10
|
-
Object.defineProperty(exports, "HorizontalCard", {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _HorizontalCard.default;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
6
|
var _types = require("./types");
|
|
17
7
|
Object.keys(_types).forEach(function (key) {
|
|
18
8
|
if (key === "default" || key === "__esModule") return;
|
|
19
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
20
9
|
if (key in exports && exports[key] === _types[key]) return;
|
|
21
10
|
Object.defineProperty(exports, key, {
|
|
22
11
|
enumerable: true,
|
|
@@ -25,5 +14,37 @@ Object.keys(_types).forEach(function (key) {
|
|
|
25
14
|
}
|
|
26
15
|
});
|
|
27
16
|
});
|
|
28
|
-
var _HorizontalCard =
|
|
17
|
+
var _HorizontalCard = require("./HorizontalCard");
|
|
18
|
+
Object.keys(_HorizontalCard).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _HorizontalCard[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _HorizontalCard[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
var _HorizontalCardBody = require("./HorizontalCardBody");
|
|
29
|
+
Object.keys(_HorizontalCardBody).forEach(function (key) {
|
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (key in exports && exports[key] === _HorizontalCardBody[key]) return;
|
|
32
|
+
Object.defineProperty(exports, key, {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _HorizontalCardBody[key];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
var _HorizontalCardThumbnail = require("./HorizontalCardThumbnail");
|
|
40
|
+
Object.keys(_HorizontalCardThumbnail).forEach(function (key) {
|
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (key in exports && exports[key] === _HorizontalCardThumbnail[key]) return;
|
|
43
|
+
Object.defineProperty(exports, key, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function get() {
|
|
46
|
+
return _HorizontalCardThumbnail[key];
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
});
|
|
29
50
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\nexport * from './HorizontalCard';\nexport * from './HorizontalCardBody';\nexport * from './HorizontalCardThumbnail';\n\n\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\nexport * from './HorizontalCard';\nexport * from './HorizontalCardBody';\nexport * from './HorizontalCardThumbnail';\n\n\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B"}
|