@artsy/palette 31.4.2 → 31.5.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.d.ts +1 -0
- package/dist/elements/Expandable/Expandable.js +7 -4
- package/dist/elements/Expandable/Expandable.js.map +1 -1
- package/dist/elements/Expandable/Expandable.story.js +4 -1
- package/dist/elements/Expandable/Expandable.story.js.map +1 -1
- package/package.json +2 -2
|
@@ -23,7 +23,7 @@ var _Flex = require("../Flex");
|
|
|
23
23
|
|
|
24
24
|
var _Text = require("../Text");
|
|
25
25
|
|
|
26
|
-
var _excluded = ["label", "expanded", "children", "disabled", "onClick", "borderColor"];
|
|
26
|
+
var _excluded = ["label", "expanded", "children", "disabled", "onClick", "onToggle", "borderColor"];
|
|
27
27
|
|
|
28
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
29
|
|
|
@@ -58,6 +58,7 @@ var Expandable = function Expandable(_ref) {
|
|
|
58
58
|
children = _ref.children,
|
|
59
59
|
disabled = _ref.disabled,
|
|
60
60
|
onClick = _ref.onClick,
|
|
61
|
+
onToggle = _ref.onToggle,
|
|
61
62
|
_ref$borderColor = _ref.borderColor,
|
|
62
63
|
borderColor = _ref$borderColor === void 0 ? "black60" : _ref$borderColor,
|
|
63
64
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -74,7 +75,9 @@ var Expandable = function Expandable(_ref) {
|
|
|
74
75
|
|
|
75
76
|
var handleClick = function handleClick(event) {
|
|
76
77
|
setExpanded(function (prevExpanded) {
|
|
77
|
-
|
|
78
|
+
var isExpanded = !prevExpanded;
|
|
79
|
+
onToggle && onToggle(isExpanded);
|
|
80
|
+
return isExpanded;
|
|
78
81
|
});
|
|
79
82
|
onClick && onClick(event);
|
|
80
83
|
};
|
|
@@ -86,13 +89,13 @@ var Expandable = function Expandable(_ref) {
|
|
|
86
89
|
justifyContent: "space-between",
|
|
87
90
|
borderTop: "1px solid",
|
|
88
91
|
borderColor: borderColor,
|
|
89
|
-
pt:
|
|
92
|
+
pt: 2,
|
|
93
|
+
pb: 1,
|
|
90
94
|
disabled: disabled,
|
|
91
95
|
"aria-expanded": expanded,
|
|
92
96
|
onClick: handleClick
|
|
93
97
|
}, clickableProps), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
|
|
94
98
|
flex: 1,
|
|
95
|
-
minHeight: 40,
|
|
96
99
|
display: "flex",
|
|
97
100
|
alignItems: "center"
|
|
98
101
|
}, (0, _isText.isText)(label) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
@@ -1 +1 @@
|
|
|
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;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","onToggle","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded","isExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAS/C;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPMC,eAON,QAPJC,QAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASP,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBO,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,EAAkB;AAC5B,UAAMC,UAAU,GAAG,CAACD,YAApB;AACAR,MAAAA,QAAQ,IAAIA,QAAQ,CAACS,UAAD,CAApB;AACA,aAAOA,UAAP;AACD,KAJU,CAAX;AAMAV,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAVD;;AAYA,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,EAAE,EAAE,CARN;AASE,IAAA,QAAQ,EAAEH,QATZ;AAUE,qBAAeF,QAVjB;AAWE,IAAA,OAAO,EAAEU;AAXX,KAYMD,cAZN,gBAcE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,OAAO,EAAC,MAAvB;AAA8B,IAAA,UAAU,EAAC;AAAzC,KACG,oBAAOX,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAdF,EAkBG,CAACI,QAAD,iBACC,4DACGF,QAAQ,gBACP,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IADO,gBASP,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IAVJ,CAnBJ,CADF,EA0CGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEM,IAAAA,WAAW,EAAXA,WAAF;AAAeP,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA1CX,CADF;AAiDD,CA3EM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\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 onToggle?: (isExpanded: boolean) => void\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 onToggle,\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) => {\n const isExpanded = !prevExpanded\n onToggle && onToggle(isExpanded)\n return isExpanded\n })\n\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={2}\n pb={1}\n disabled={disabled}\n aria-expanded={expanded}\n onClick={handleClick}\n {...clickableProps}\n >\n <Flex flex={1} display=\"flex\" alignItems=\"center\">\n {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n </Flex>\n\n {!disabled && (\n <>\n {expanded ? (\n <ChevronUpIcon\n width={14}\n height={14}\n ml={1}\n mr={1}\n aria-hidden=\"true\"\n />\n ) : (\n <ChevronDownIcon\n width={14}\n height={14}\n ml={1}\n mr={1}\n aria-hidden=\"true\"\n />\n )}\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"}
|
|
@@ -70,10 +70,13 @@ var Default = function Default() {
|
|
|
70
70
|
}
|
|
71
71
|
}, "Close"));
|
|
72
72
|
}
|
|
73
|
+
}, {
|
|
74
|
+
label: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
|
|
73
75
|
}]
|
|
74
76
|
}, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
|
|
75
77
|
label: "Example",
|
|
76
|
-
maxWidth: 350
|
|
78
|
+
maxWidth: 350,
|
|
79
|
+
onToggle: (0, _addonActions.action)("onToggle")
|
|
77
80
|
}, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content")));
|
|
78
81
|
};
|
|
79
82
|
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,EAgCN;AAAEL,MAAAA,KAAK,EAAE;AAAT,KAhCM;AADV,kBAoCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAArD,kBACE,6BAAC,UAAD,2BADF,CApCF,CADF;AA0CD,CA3CM;;;AAAMH,O;;AA6CN,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 { label: \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\" },\n ]}\n >\n <Expandable label=\"Example\" maxWidth={350} onToggle={action(\"onToggle\")}>\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.5.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -180,5 +180,5 @@
|
|
|
180
180
|
"url": "http://localhost"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
|
-
"gitHead": "
|
|
183
|
+
"gitHead": "33fd5d214b1e4fd089464b177dd5b0ee5d85771a"
|
|
184
184
|
}
|