akeneo-design-system 0.1.199 → 0.1.201
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/lib/components/Table/TableActionCell/TableActionCell.js +1 -1
- package/lib/components/Table/TableActionCell/TableActionCell.js.map +1 -1
- package/lib/icons/HelpIcon.js +3 -4
- package/lib/icons/HelpIcon.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Table/Table.stories.mdx +59 -0
- package/src/components/Table/TableActionCell/TableActionCell.tsx +2 -0
- package/src/icons/HelpIcon.tsx +13 -8
|
@@ -35,7 +35,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
35
35
|
var __1 = require("../../");
|
|
36
36
|
var theme_1 = require("../../../theme");
|
|
37
37
|
var TableActionCellContainer = styled_components_1.default.td(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n border-bottom: 1px solid ", ";\n padding: 0 10px;\n max-width: 15vw;\n min-width: 0;\n"], ["\n color: ", ";\n border-bottom: 1px solid ", ";\n padding: 0 10px;\n max-width: 15vw;\n min-width: 0;\n"])), (0, theme_1.getColor)('grey', 140), (0, theme_1.getColor)('grey', 60));
|
|
38
|
-
var InnerTableActionCellContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0;\n"], ["\n opacity: 0;\n"])));
|
|
38
|
+
var InnerTableActionCellContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0;\n display: flex;\n gap: 10px;\n"], ["\n opacity: 0;\n display: flex;\n gap: 10px;\n"])));
|
|
39
39
|
var TableActionCell = react_1.default.forwardRef(function (_a, forwardedRef) {
|
|
40
40
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
41
41
|
var decoratedChildren = react_1.default.Children.map(children, function (child) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActionCell.js","sourceRoot":"","sources":["../../../../src/components/Table/TableActionCell/TableActionCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAAuC;AACvC,gDAA4D;AAC5D,4BAAuD;AACvD,wCAAwC;AAGxC,IAAM,wBAAwB,GAAG,2BAAM,CAAC,EAAE,kLAAA,aAC/B,EAAqB,gCACH,EAAoB,8DAIhD,KALU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EACH,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAIhD,CAAC;AAEF,IAAM,6BAA6B,GAAG,2BAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"TableActionCell.js","sourceRoot":"","sources":["../../../../src/components/Table/TableActionCell/TableActionCell.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAAuC;AACvC,gDAA4D;AAC5D,4BAAuD;AACvD,wCAAwC;AAGxC,IAAM,wBAAwB,GAAG,2BAAM,CAAC,EAAE,kLAAA,aAC/B,EAAqB,gCACH,EAAoB,8DAIhD,KALU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EACH,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAIhD,CAAC;AAEF,IAAM,6BAA6B,GAAG,2BAAM,CAAC,GAAG,sHAAA,mDAI/C,IAAA,CAAC;AAYF,IAAM,eAAe,GAAG,eAAK,CAAC,UAAU,CACtC,UAAC,EAAoC,EAAE,YAAuC;IAA5E,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACjB,IAAM,iBAAiB,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC1D,IAAI,eAAK,CAAC,cAAc,CAAc,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,UAAM,IAAI,KAAK,CAAC,IAAI,KAAK,cAAU,CAAC,EAAE;YACpG,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,OAAO,EAAE,UAAC,CAAiB;oBACzB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAChD,CAAC;aACF,CAAC,CAAC;SACJ;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,wBAAwB,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI;QACnD,8BAAC,6BAA6B,QAAE,iBAAiB,CAAiC,CACzD,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,0CAAe"}
|
package/lib/icons/HelpIcon.js
CHANGED
|
@@ -29,11 +29,10 @@ exports.HelpIcon = void 0;
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var HelpIcon = function (_a) {
|
|
31
31
|
var title = _a.title, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c, props = __rest(_a, ["title", "size", "color"]);
|
|
32
|
-
return (react_1.default.createElement("svg", __assign({ viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: size, height: size }, props),
|
|
32
|
+
return (react_1.default.createElement("svg", __assign({ viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none" }, props),
|
|
33
33
|
title && react_1.default.createElement("title", null, title),
|
|
34
|
-
react_1.default.createElement("
|
|
35
|
-
|
|
36
|
-
react_1.default.createElement("circle", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", cx: 10, cy: 10, r: 10 }))));
|
|
34
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M11.972 16.465a.748.748 0 1 1-.002 1.496.748.748 0 0 1 .002-1.496ZM11.986 6a3.498 3.498 0 0 1 3.486 3.487c.01 1.507-.883 2.44-1.641 3.159-.38.36-.733.684-.973 1.014-.24.33-.374.649-.374 1.076v.25a.5.5 0 0 1-.749.438.5.5 0 0 1-.247-.438v-.25c0-.658.244-1.215.568-1.661.324-.446.72-.804 1.09-1.154.74-.702 1.34-1.305 1.33-2.426a2.486 2.486 0 0 0-2.49-2.497 2.486 2.486 0 0 0-2.49 2.497.5.5 0 0 1-.749.438.5.5 0 0 1-.247-.438A3.498 3.498 0 0 1 11.986 6Z", clipRule: "evenodd" }),
|
|
35
|
+
react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", d: "M12 21.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Z" })));
|
|
37
36
|
};
|
|
38
37
|
exports.HelpIcon = HelpIcon;
|
|
39
38
|
//# sourceMappingURL=HelpIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpIcon.js","sourceRoot":"","sources":["../../src/icons/HelpIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,QAAQ,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACpF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"HelpIcon.js","sourceRoot":"","sources":["../../src/icons/HelpIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,QAAQ,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACpF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,IAAK,KAAK;QACzG,KAAK,IAAI,6CAAQ,KAAK,CAAS;QAChC,wCACE,IAAI,EAAE,KAAK,EACX,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ocAAoc,EACtc,QAAQ,EAAC,SAAS,GAClB;QACF,wCACE,MAAM,EAAE,KAAK,EACb,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,iDAAiD,GACnD,CACE,CACP,CAAA;CAAA,CAAC;AACM,4BAAQ"}
|
package/package.json
CHANGED
|
@@ -528,3 +528,62 @@ If you want your `Table.Header` to stay on top when scrolling in the Table, just
|
|
|
528
528
|
}}
|
|
529
529
|
</Story>
|
|
530
530
|
</Canvas>
|
|
531
|
+
|
|
532
|
+
## Table with multiple actions
|
|
533
|
+
|
|
534
|
+
<Canvas>
|
|
535
|
+
<Story name="Multiple actions">
|
|
536
|
+
{args => {
|
|
537
|
+
return (
|
|
538
|
+
<Scrollable height={250}>
|
|
539
|
+
<Table hasWarningRows={true}>
|
|
540
|
+
<Table.Header sticky={0}>
|
|
541
|
+
<Table.HeaderCell>Name</Table.HeaderCell>
|
|
542
|
+
<Table.HeaderCell>Family</Table.HeaderCell>
|
|
543
|
+
<Table.HeaderCell>Order</Table.HeaderCell>
|
|
544
|
+
<Table.HeaderCell>Genus</Table.HeaderCell>
|
|
545
|
+
<Table.HeaderCell>Conservation status</Table.HeaderCell>
|
|
546
|
+
<Table.HeaderCell>Actions</Table.HeaderCell>
|
|
547
|
+
</Table.Header>
|
|
548
|
+
<Table.Body>
|
|
549
|
+
<Table.Row level="warning">
|
|
550
|
+
<Table.Cell rowTitle={args.displayRowTitle}>Giant panda</Table.Cell>
|
|
551
|
+
<Table.Cell>Ursidae</Table.Cell>
|
|
552
|
+
<Table.Cell>Carnivora</Table.Cell>
|
|
553
|
+
<Table.Cell>Ursus</Table.Cell>
|
|
554
|
+
<Table.Cell>
|
|
555
|
+
<Badge level="warning">vu</Badge>
|
|
556
|
+
</Table.Cell>
|
|
557
|
+
<Table.ActionCell>
|
|
558
|
+
<Button level="primary" ghost>
|
|
559
|
+
View
|
|
560
|
+
</Button>
|
|
561
|
+
<Button level="danger" ghost>
|
|
562
|
+
Delete
|
|
563
|
+
</Button>
|
|
564
|
+
</Table.ActionCell>
|
|
565
|
+
</Table.Row>
|
|
566
|
+
<Table.Row>
|
|
567
|
+
<Table.Cell rowTitle={args.displayRowTitle}>Red panda</Table.Cell>
|
|
568
|
+
<Table.Cell>Ailuridae</Table.Cell>
|
|
569
|
+
<Table.Cell>Carnivora</Table.Cell>
|
|
570
|
+
<Table.Cell>Ailurus</Table.Cell>
|
|
571
|
+
<Table.Cell>
|
|
572
|
+
<Badge level="warning">vu</Badge>
|
|
573
|
+
</Table.Cell>
|
|
574
|
+
<Table.ActionCell>
|
|
575
|
+
<Button level="primary" ghost>
|
|
576
|
+
View
|
|
577
|
+
</Button>
|
|
578
|
+
<Button level="danger" ghost>
|
|
579
|
+
Delete
|
|
580
|
+
</Button>
|
|
581
|
+
</Table.ActionCell>
|
|
582
|
+
</Table.Row>
|
|
583
|
+
</Table.Body>
|
|
584
|
+
</Table>
|
|
585
|
+
</Scrollable>
|
|
586
|
+
);
|
|
587
|
+
}}
|
|
588
|
+
</Story>
|
|
589
|
+
</Canvas>
|
package/src/icons/HelpIcon.tsx
CHANGED
|
@@ -2,15 +2,20 @@ import React from 'react';
|
|
|
2
2
|
import {IconProps} from './IconProps';
|
|
3
3
|
|
|
4
4
|
const HelpIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => (
|
|
5
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width={size} height={size} {...props}>
|
|
5
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="none" {...props}>
|
|
6
6
|
{title && <title>{title}</title>}
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
<path
|
|
8
|
+
fill={color}
|
|
9
|
+
fillRule="evenodd"
|
|
10
|
+
d="M11.972 16.465a.748.748 0 1 1-.002 1.496.748.748 0 0 1 .002-1.496ZM11.986 6a3.498 3.498 0 0 1 3.486 3.487c.01 1.507-.883 2.44-1.641 3.159-.38.36-.733.684-.973 1.014-.24.33-.374.649-.374 1.076v.25a.5.5 0 0 1-.749.438.5.5 0 0 1-.247-.438v-.25c0-.658.244-1.215.568-1.661.324-.446.72-.804 1.09-1.154.74-.702 1.34-1.305 1.33-2.426a2.486 2.486 0 0 0-2.49-2.497 2.486 2.486 0 0 0-2.49 2.497.5.5 0 0 1-.749.438.5.5 0 0 1-.247-.438A3.498 3.498 0 0 1 11.986 6Z"
|
|
11
|
+
clipRule="evenodd"
|
|
12
|
+
/>
|
|
13
|
+
<path
|
|
14
|
+
stroke={color}
|
|
15
|
+
strokeLinecap="round"
|
|
16
|
+
strokeLinejoin="round"
|
|
17
|
+
d="M12 21.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Z"
|
|
18
|
+
/>
|
|
14
19
|
</svg>
|
|
15
20
|
);
|
|
16
21
|
export {HelpIcon};
|