@artsy/palette 19.3.0 → 19.4.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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
# v19.4.0 (Tue Apr 05 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- feat(TX-255): ability to close expandable within expandable content [#1151](https://github.com/artsy/palette/pull/1151) ([@rquartararo](https://github.com/rquartararo))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- fix: bug fix ([@rquartararo](https://github.com/rquartararo))
|
|
10
|
+
- feat: add story option with close button ([@rquartararo](https://github.com/rquartararo))
|
|
11
|
+
- feat: pass setExpanded to children ([@rquartararo](https://github.com/rquartararo))
|
|
12
|
+
|
|
13
|
+
#### Authors: 1
|
|
14
|
+
|
|
15
|
+
- Rachel Quartararo ([@rquartararo](https://github.com/rquartararo))
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
1
19
|
# v19.3.0 (Thu Mar 31 2022)
|
|
2
20
|
|
|
3
21
|
#### 🚀 Enhancement
|
|
@@ -118,7 +118,10 @@ var Expandable = function Expandable(_ref) {
|
|
|
118
118
|
ml: 1,
|
|
119
119
|
mr: tokens.mr,
|
|
120
120
|
"aria-hidden": "true"
|
|
121
|
-
})), expanded && children
|
|
121
|
+
})), expanded && (typeof children === "function" ? children({
|
|
122
|
+
setExpanded: setExpanded,
|
|
123
|
+
expanded: expanded
|
|
124
|
+
}) : children));
|
|
122
125
|
};
|
|
123
126
|
|
|
124
127
|
exports.Expandable = Expandable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,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;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,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,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;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,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","rest","tokens","v2","borderColor","textProps","variant","fontWeight","chevronSize","mr","undefined","v3","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAO/C;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALMC,eAKN,QALJC,QAKI;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,MAAM,GAAG,2BAAe;AAC5BC,IAAAA,EAAE,EAAE;AACFC,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE,OAAX;AAAoBC,QAAAA,UAAU,EAAE;AAAhC,OAFT;AAGFC,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAEC;AAJF,KADwB;AAO5BC,IAAAA,EAAE,EAAE;AACFP,MAAAA,WAAW,EAAE,SADX;AAEFC,MAAAA,SAAS,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAFT;AAGFE,MAAAA,WAAW,EAAE,EAHX;AAIFC,MAAAA,EAAE,EAAE;AAJF;AAPwB,GAAf,CAAf;;AAeA,kBAAgC,qBAASb,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBe,WAAjB;;AAEA,uBAAmC,wBAAcX,IAAd,CAAnC;AAAA;AAAA,MAAOY,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;AACAjB,IAAAA,OAAO,IAAIA,OAAO,CAACgB,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,EAAEX,MAAM,CAACE,WANtB;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,QAAQ,EAAEL,QARZ;AASE,qBAAeF,QATjB;AAUE,IAAA,OAAO,EAAEkB;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,oBAAOnB,KAAP,iBAAgB,6BAAC,UAAD,EAAUO,MAAM,CAACG,SAAjB,EAA6BV,KAA7B,CAAhB,GAA6DA,KADhE,CAbF,EAiBG,CAACI,QAAD,iBACC,6BAAC,iBAAD;AACE,IAAA,SAAS,EAAEF,QAAQ,GAAG,IAAH,GAAU,MAD/B;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACM,WAFhB;AAGE,IAAA,MAAM,EAAEN,MAAM,CAACM,WAHjB;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,IAAA,EAAE,EAAEN,MAAM,CAACO,EALb;AAME,mBAAY;AANd,IAlBJ,CADF,EA8BGZ,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEc,IAAAA,WAAW,EAAXA,WAAF;AAAef,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA9BX,CADF;AAqCD,CAvEM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text, TextProps } 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 ...rest\n}) => {\n const tokens = useThemeConfig({\n v2: {\n borderColor: \"black10\",\n textProps: { variant: \"small\", fontWeight: \"bold\" } as TextProps,\n chevronSize: 12,\n mr: undefined,\n },\n v3: {\n borderColor: \"black60\",\n textProps: { variant: \"md\" } as TextProps,\n chevronSize: 14,\n mr: 1,\n },\n })\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={tokens.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 {...tokens.textProps}>{label}</Text> : label}\n </Flex>\n\n {!disabled && (\n <ChevronIcon\n direction={expanded ? \"up\" : \"down\"}\n width={tokens.chevronSize}\n height={tokens.chevronSize}\n ml={1}\n mr={tokens.mr}\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"}
|
|
@@ -19,6 +19,8 @@ var _Text = require("../Text");
|
|
|
19
19
|
|
|
20
20
|
var _Expandable = require("./Expandable");
|
|
21
21
|
|
|
22
|
+
var _Button = require("../Button");
|
|
23
|
+
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
25
|
|
|
24
26
|
var _default = {
|
|
@@ -56,6 +58,16 @@ var Default = function Default() {
|
|
|
56
58
|
}, {
|
|
57
59
|
expanded: true,
|
|
58
60
|
mb: 6
|
|
61
|
+
}, {
|
|
62
|
+
expanded: true,
|
|
63
|
+
children: function children(_ref) {
|
|
64
|
+
var setExpanded = _ref.setExpanded;
|
|
65
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
66
|
+
onClick: function onClick() {
|
|
67
|
+
return setExpanded(false);
|
|
68
|
+
}
|
|
69
|
+
}, "Close"));
|
|
70
|
+
}
|
|
59
71
|
}]
|
|
60
72
|
}, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
|
|
61
73
|
label: "Example",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb"],"mappings":";;;;;;;AAAA;;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,
|
|
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=\"md\">Heading</Text>\n <Clickable\n textDecoration=\"underline\"\n onClick={(e) => {\n e.stopPropagation()\n action(\"Secondary action\")\n }}\n >\n <Text variant=\"md\">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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.4.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"<rootDir>/www/"
|
|
179
179
|
]
|
|
180
180
|
},
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "f959a4846a1d79e20cec681624c7c2bc4ac0499d"
|
|
182
182
|
}
|