@artsy/palette 31.0.0 → 31.1.0
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/elements/Expandable/Expandable.js +5 -2
- package/dist/elements/Expandable/Expandable.js.map +1 -1
- package/dist/elements/Expandable/Expandable.story.d.ts +1 -0
- package/dist/elements/Expandable/Expandable.story.js +21 -1
- package/dist/elements/Expandable/Expandable.story.js.map +1 -1
- package/package.json +2 -2
|
@@ -21,7 +21,7 @@ var _Flex = require("../Flex");
|
|
|
21
21
|
|
|
22
22
|
var _Text = require("../Text");
|
|
23
23
|
|
|
24
|
-
var _excluded = ["label", "expanded", "children", "disabled", "onClick"];
|
|
24
|
+
var _excluded = ["label", "expanded", "children", "disabled", "onClick", "borderColor"];
|
|
25
25
|
|
|
26
26
|
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); }
|
|
27
27
|
|
|
@@ -54,6 +54,8 @@ var Expandable = function Expandable(_ref) {
|
|
|
54
54
|
children = _ref.children,
|
|
55
55
|
disabled = _ref.disabled,
|
|
56
56
|
onClick = _ref.onClick,
|
|
57
|
+
_ref$borderColor = _ref.borderColor,
|
|
58
|
+
borderColor = _ref$borderColor === void 0 ? "black60" : _ref$borderColor,
|
|
57
59
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
60
|
|
|
59
61
|
var _useState = (0, _react.useState)(defaultExpanded),
|
|
@@ -79,7 +81,7 @@ var Expandable = function Expandable(_ref) {
|
|
|
79
81
|
alignItems: "center",
|
|
80
82
|
justifyContent: "space-between",
|
|
81
83
|
borderTop: "1px solid",
|
|
82
|
-
borderColor:
|
|
84
|
+
borderColor: borderColor,
|
|
83
85
|
pt: 1,
|
|
84
86
|
disabled: disabled,
|
|
85
87
|
"aria-expanded": expanded,
|
|
@@ -97,6 +99,7 @@ var Expandable = function Expandable(_ref) {
|
|
|
97
99
|
height: 14,
|
|
98
100
|
ml: 1,
|
|
99
101
|
mr: 1,
|
|
102
|
+
fill: "currentColor",
|
|
100
103
|
"aria-hidden": "true"
|
|
101
104
|
})), expanded && (typeof children === "function" ? children({
|
|
102
105
|
setExpanded: setExpanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAQ/C;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANMC,eAMN,QANJC,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASN,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBM,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD;AAAA,aAAkB,CAACA,YAAnB;AAAA,KAAD,CAAX;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GALD;;AAOA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEF,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAES;AAVX,KAWMD,cAXN,gBAaE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,SAAS,EAAE,EAA1B;AAA8B,IAAA,OAAO,EAAC,MAAtC;AAA6C,IAAA,UAAU,EAAC;AAAxD,KACG,oBAAOV,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAE,EAFT;AAGE,IAAA,MAAM,EAAE,EAHV;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAE,CALN;AAME,IAAA,IAAI,EAAC,cANP;AAOE,mBAAY;AAPd,IAlBJ,CADF,EA+BGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEK,IAAAA,WAAW,EAAXA,WAAF;AAAeN,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA/BX,CADF;AAsCD,CA1DM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n label?: string | JSX.Element\n expanded?: boolean\n children: React.ReactNode\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n label,\n expanded: defaultExpanded,\n children,\n disabled,\n onClick,\n borderColor = \"black60\",\n ...rest\n}) => {\n const [expanded, setExpanded] = useState(defaultExpanded)\n\n const [boxProps, clickableProps] = splitBoxProps(rest)\n\n const handleClick = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => {\n setExpanded((prevExpanded) => !prevExpanded)\n onClick && onClick(event)\n }\n\n return (\n <Box {...boxProps}>\n <Clickable\n width=\"100%\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n borderTop=\"1px solid\"\n borderColor={borderColor}\n pt={1}\n disabled={disabled}\n aria-expanded={expanded}\n onClick={handleClick}\n {...clickableProps}\n >\n <Flex flex={1} minHeight={40} display=\"flex\" alignItems=\"center\">\n {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n </Flex>\n\n {!disabled && (\n <ChevronIcon\n direction={expanded ? \"up\" : \"down\"}\n width={14}\n height={14}\n ml={1}\n mr={1}\n fill=\"currentColor\"\n aria-hidden=\"true\"\n />\n )}\n </Clickable>\n\n {expanded &&\n (typeof children === \"function\"\n ? children({ setExpanded, expanded })\n : children)}\n </Box>\n )\n}\n"],"file":"Expandable.js"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.Default = exports.ConfigurableColors = void 0;
|
|
7
7
|
|
|
8
8
|
var _addonActions = require("@storybook/addon-actions");
|
|
9
9
|
|
|
@@ -21,6 +21,8 @@ var _Expandable = require("./Expandable");
|
|
|
21
21
|
|
|
22
22
|
var _Button = require("../Button");
|
|
23
23
|
|
|
24
|
+
var _Box = require("../Box");
|
|
25
|
+
|
|
24
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
27
|
|
|
26
28
|
var _default = {
|
|
@@ -77,4 +79,22 @@ var Default = function Default() {
|
|
|
77
79
|
|
|
78
80
|
exports.Default = Default;
|
|
79
81
|
Default.displayName = "Default";
|
|
82
|
+
|
|
83
|
+
var ConfigurableColors = function ConfigurableColors() {
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
85
|
+
color: "white100",
|
|
86
|
+
bg: "black100"
|
|
87
|
+
}, /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
88
|
+
states: [{}, {
|
|
89
|
+
expanded: true
|
|
90
|
+
}]
|
|
91
|
+
}, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
|
|
92
|
+
label: "Example",
|
|
93
|
+
maxWidth: 350,
|
|
94
|
+
borderColor: "black30"
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content"))));
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
exports.ConfigurableColors = ConfigurableColors;
|
|
99
|
+
ConfigurableColors.displayName = "ConfigurableColors";
|
|
80
100
|
//# sourceMappingURL=Expandable.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\n\nexport default {\n title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ExpandableProps>>\n states={[\n {},\n { expanded: true },\n { expanded: false, disabled: true },\n { expanded: true, disabled: true },\n {\n label: (\n <Flex flex={1} justifyContent=\"space-between\">\n <Text variant=\"sm-display\">Heading</Text>\n <Clickable\n textDecoration=\"underline\"\n onClick={(e) => {\n e.stopPropagation()\n action(\"Secondary action\")\n }}\n >\n <Text variant=\"sm-display\">Reset</Text>\n </Clickable>\n </Flex>\n ),\n },\n { mb: 6 },\n { expanded: true, mb: 6 },\n {\n expanded: true,\n children: ({ setExpanded }) => (\n <div>\n <Text>Expanded content</Text>\n <Button onClick={() => setExpanded(false)}>Close</Button>\n </div>\n ),\n },\n ]}\n >\n <Expandable label=\"Example\" maxWidth={350}>\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n )\n}\n"],"file":"Expandable.story.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM;AADV,kBAmCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;AAAtC,kBACE,6BAAC,UAAD,2BADF,CAnCF,CADF;AAyCD,CA1CM;;;AAAMR,O;;AA4CN,IAAMS,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC,UAAX;AAAsB,IAAA,EAAE,EAAC;AAAzB,kBACE,6BAAC,uBAAD;AAAkC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAER,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAA1C,kBACE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,WAAW,EAAC;AAAvD,kBACE,6BAAC,UAAD,2BADF,CADF,CADF,CADF;AASD,CAVM;;;AAAMQ,kB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\n\nexport default {\n title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ExpandableProps>>\n states={[\n {},\n { expanded: true },\n { expanded: false, disabled: true },\n { expanded: true, disabled: true },\n {\n label: (\n <Flex flex={1} justifyContent=\"space-between\">\n <Text variant=\"sm-display\">Heading</Text>\n <Clickable\n textDecoration=\"underline\"\n onClick={(e) => {\n e.stopPropagation()\n action(\"Secondary action\")\n }}\n >\n <Text variant=\"sm-display\">Reset</Text>\n </Clickable>\n </Flex>\n ),\n },\n { mb: 6 },\n { expanded: true, mb: 6 },\n {\n expanded: true,\n children: ({ setExpanded }) => (\n <div>\n <Text>Expanded content</Text>\n <Button onClick={() => setExpanded(false)}>Close</Button>\n </div>\n ),\n },\n ]}\n >\n <Expandable label=\"Example\" maxWidth={350}>\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n )\n}\n\nexport const ConfigurableColors = () => {\n return (\n <Box color=\"white100\" bg=\"black100\">\n <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>\n <Expandable label=\"Example\" maxWidth={350} borderColor=\"black30\">\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n </Box>\n )\n}\n"],"file":"Expandable.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "31.
|
|
3
|
+
"version": "31.1.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"<rootDir>/www/"
|
|
175
175
|
]
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "2f94a86cf74ba0226616d0474224245bb829eec2"
|
|
178
178
|
}
|