@artsy/palette 18.7.0 → 18.7.1
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,16 @@
|
|
|
1
|
+
# v18.7.1 (Fri Nov 12 2021)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- feat(pill): supports pill with icons [#1073](https://github.com/artsy/palette/pull/1073) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- feat(pill): supports pill with icons ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### Authors: 1
|
|
9
|
+
|
|
10
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v18.7.0 (Thu Nov 11 2021)
|
|
2
15
|
|
|
3
16
|
#### 🚀 Enhancement
|
|
@@ -69,11 +69,17 @@ var Pill = function Pill(_ref) {
|
|
|
69
69
|
} : {}, {
|
|
70
70
|
// Intentionally empty string
|
|
71
71
|
alt: ""
|
|
72
|
-
})), /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
72
|
+
})), /*#__PURE__*/_react.default.createElement(_Text.Text, _extends({
|
|
73
73
|
variant: "xs",
|
|
74
|
-
lineHeight: 1
|
|
74
|
+
lineHeight: 1
|
|
75
|
+
}, typeof children === "string" ? // Simple label — handle the text overflow
|
|
76
|
+
{
|
|
75
77
|
overflowEllipsis: true
|
|
76
|
-
}
|
|
78
|
+
} : // Otherwise use the children as-is and center align them
|
|
79
|
+
{
|
|
80
|
+
display: "flex",
|
|
81
|
+
alignItems: "center"
|
|
82
|
+
}), children));
|
|
77
83
|
};
|
|
78
84
|
|
|
79
85
|
exports.Pill = Pill;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8OAMO,wBAAS,gBAAT,CANP,EAUX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA7BY,CAAf;;AAgCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Container","Clickable","props","states","PILL_VARIANTS","variant","css","default","hover","focus","active","Thumbnail","styled","img","Pill","children","rest","src","srcSet","overflowEllipsis","display","alignItems","defaultProps"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,WADgC,EAEhC,YAFgC,EAGhC,QAHgC,EAIhC,QAJgC,CAA3B;;AAkCP,IAAMC,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,8OAMO,wBAAS,gBAAT,CANP,EAUX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACG,OAApB,2DAA+B,WAA/B,CAAf;AAEA,aAAOC,qBAAP,qEACIH,MAAM,CAACI,OADX,EAEIL,KAAK,CAACM,KAAN,IAAeL,MAAM,CAACK,KAF1B,EAGIN,KAAK,CAACO,KAAN,IAAeN,MAAM,CAACM,KAH1B,EAII,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAJhD,EAOMP,MAAM,CAACK,KAPb,EAYML,MAAM,CAACM,KAZb,EAaM,YAAYP,KAAZ,IAAqBA,KAAK,CAACQ,MAA3B,IAAqCP,MAAM,CAACO,MAblD;AAgBD,CA7BY,CAAf;;AAgCA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGAKG,wBAAS,SAAT,CALH,EAMO,wBAAS,gBAAT,CANP,CAAf;AASA;AACA;AACA;AACA;AACA;;;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAA2B;AAAA,MAAxBC,QAAwB,QAAxBA,QAAwB;AAAA,MAAXC,IAAW;;AAClE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACG,YAAYA,IAAZ,IAAoBA,IAAI,CAACN,MAAzB,IAAmCM,IAAI,CAACX,OAAL,KAAiB,QAApD,iBACC,6BAAC,eAAD;AAAW,IAAA,EAAE,EAAE;AAAf,IAFJ,EAKGW,IAAI,CAACX,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOW,IAAI,CAACC,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAApB,GAA+BD,IAAI,CAACC,GAApC,GAA0CD,IAAI,CAACC,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOD,IAAI,CAACC,GAAL,IAAY,OAAOD,IAAI,CAACC,GAAZ,KAAoB,QAAhC,IAA4CD,IAAI,CAACC,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKF,IAAI,CAACC,GAAL,CAAS,CAAT,CAAL,kBAAwBD,IAAI,CAACC,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KANJ,eAkBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,UAAU,EAAE;AAFd,KAGO,OAAOF,QAAP,KAAoB,QAApB,GACD;AACA;AAAEI,IAAAA,gBAAgB,EAAE;AAApB,GAFC,GAGD;AACA;AAAEC,IAAAA,OAAO,EAAE,MAAX;AAAmBC,IAAAA,UAAU,EAAE;AAA/B,GAPN,GASGN,QATH,CAlBF,CADF;AAgCD,CAjCM;;;AAAMD,I;AAmCbA,IAAI,CAACQ,YAAL,GAAoB;AAClBjB,EAAAA,OAAO,EAAE;AADS,CAApB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CheckIcon } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n \"textRound\",\n \"textSquare\",\n \"filter\",\n \"artist\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\nexport type PillState = \"default\" | \"focus\" | \"hover\" | \"active\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n as?: keyof JSX.IntrinsicElements | React.ComponentType\n /** Forces focus state */\n focus?: boolean\n /** Forces hover state */\n hover?: boolean\n} & (\n | {\n variant?: Extract<PillVariant, \"textRound\" | \"textSquare\" | \"filter\">\n /** Forces active state */\n active?: boolean\n }\n | {\n /** `\"artist\"` pills do not have an `active` state */\n variant?: Extract<PillVariant, \"artist\">\n /**\n * Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n */\n src?: string | [string, string]\n }\n )\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n border: 1px solid ${themeGet(\"colors.black15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"textRound\"]\n\n return css`\n ${states.default}\n ${props.hover && states.hover}\n ${props.focus && states.focus}\n ${\"active\" in props && props.active && states.active}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${\"active\" in props && props.active && states.active}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.black30\")};\n`\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, ...rest }) => {\n return (\n <Container {...rest}>\n {\"active\" in rest && rest.active && rest.variant === \"filter\" && (\n <CheckIcon mr={0.5} />\n )}\n\n {rest.variant === \"artist\" && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n <Text\n variant=\"xs\"\n lineHeight={1}\n {...(typeof children === \"string\"\n ? // Simple label — handle the text overflow\n { overflowEllipsis: true }\n : // Otherwise use the children as-is and center align them\n { display: \"flex\", alignItems: \"center\" })}\n >\n {children}\n </Text>\n </Container>\n )\n}\n\nPill.defaultProps = {\n variant: \"textRound\",\n}\n"],"file":"Pill.js"}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.LongExample = exports.LinkExample = exports.Variants = exports._States = exports.default = void 0;
|
|
6
|
+
exports.IconExample = exports.LongExample = exports.LinkExample = exports.Variants = exports._States = exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
7
9
|
|
|
8
10
|
var _react = _interopRequireDefault(require("react"));
|
|
9
11
|
|
|
@@ -11,6 +13,10 @@ var _storybookStates = require("storybook-states");
|
|
|
11
13
|
|
|
12
14
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
15
|
|
|
16
|
+
var _Clickable = require("../Clickable");
|
|
17
|
+
|
|
18
|
+
var _CloseIcon = require("../../svgs/CloseIcon");
|
|
19
|
+
|
|
14
20
|
var _Flex = require("../Flex");
|
|
15
21
|
|
|
16
22
|
var _Spacer = require("../Spacer");
|
|
@@ -113,4 +119,21 @@ var LongExample = function LongExample() {
|
|
|
113
119
|
|
|
114
120
|
exports.LongExample = LongExample;
|
|
115
121
|
LongExample.displayName = "LongExample";
|
|
122
|
+
|
|
123
|
+
var IconExample = function IconExample() {
|
|
124
|
+
return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
|
|
125
|
+
variant: "textSquare",
|
|
126
|
+
as: _Clickable.Clickable,
|
|
127
|
+
onClick: (0, _addonActions.action)("onClick"),
|
|
128
|
+
"aria-label": "Remove Painting"
|
|
129
|
+
}, "Painting ", /*#__PURE__*/_react.default.createElement(_CloseIcon.CloseIcon, {
|
|
130
|
+
fill: "currentColor",
|
|
131
|
+
ml: 0.5,
|
|
132
|
+
width: 15,
|
|
133
|
+
height: 15
|
|
134
|
+
}));
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
exports.IconExample = IconExample;
|
|
138
|
+
IconExample.displayName = "IconExample";
|
|
116
139
|
//# sourceMappingURL=Pill.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","_States","hover","focus","story","name","_Demo","Flex","displayName","Variants","variant","children","src","props","LinkExample","LongExample"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AAAmB,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAAL,EAAsB;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAAtB;AAA3B,kBACE,6BAAC,UAAD,eADF,CADF;AAKD,CANM;;;AAAMF,O;AAQbA,OAAO,CAACG,KAAR,GAAgB;AACdC,EAAAA,IAAI,EAAE;AADQ,CAAhB;;AAIA,IAAMC,KAAK,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,QAAX;;AACAD,KAAK,CAACE,WAAN,GAAoB,MAApB;;AAEO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,OAAO,EAAE,WAAX;AAAwBC,MAAAA,QAAQ,EAAE;AAAlC,KAFM,EAGN;AAAED,MAAAA,OAAO,EAAE,YAAX;AAAyBC,MAAAA,QAAQ,EAAE;AAAnC,KAHM,EAIN;AAAED,MAAAA,OAAO,EAAE,QAAX;AAAqBC,MAAAA,QAAQ,EAAE;AAA/B,KAJM,EAKN;AACED,MAAAA,OAAO,EAAE,QADX;AAEEC,MAAAA,QAAQ,EAAE,kBAFZ;AAGEC,MAAAA,GAAG,EAAE,CACH,uCADG,EAEH,uCAFG;AAHP,KALM,EAaN;AACEF,MAAAA,OAAO,EAAE,QADX;AAEEC,MAAAA,QAAQ,EAAE;AAFZ,KAbM,EAiBN;AACED,MAAAA,OAAO,EAAE,QADX;AAEEC,MAAAA,QAAQ,EAAE,kBAFZ;AAGEC,MAAAA,GAAG,EAAE;AAHP,KAjBM;AADV,KAyBG,UAACC,KAAD,EAAW;AACV,wBACE,6BAAC,KAAD,qBACE,6BAAC,UAAD,EAAUA,KAAV,SADF,eAGE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MAHF,eAKE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,KAAK;AAAtB,eALF,eASE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MATF,eAWE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,KAAK;AAAtB,eAXF,EAeGA,KAAK,CAACH,OAAN,KAAkB,QAAlB,iBACC,yEACE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MADF,eAGE,6BAAC,UAAD,eAAWG,KAAX;AAA0B,MAAA,MAAM;AAAhC,eAHF,CAhBJ,CADF;AA2BD,GArDH,CADF;AAyDD,CA1DM;;;AAAMJ,Q;;AA4DN,IAAMK,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,sBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,EAAE,EAAC,GAFL,CAGE;AACA;AAJF;AAKE,IAAA,IAAI,EAAC;AALP,mBADF;AAWD,CAZM;;;AAAMA,W;;AAcN,IAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,sBACE,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAE;AAAhB,iEADF;AAKD,CANM;;;AAAMA,W","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps } from \"./Pill\"\n\nexport default {\n title: \"Components/Pill\",\n}\n\nexport const _States = () => {\n return (\n <States<PillProps> states={[{}, { hover: true }, { focus: true }]}>\n <Pill>Pill</Pill>\n </States>\n )\n}\n\n_States.story = {\n name: \"States\",\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Pill\"\n\nexport const Variants = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { variant: \"textRound\", children: \"Text Pill\" },\n { variant: \"textSquare\", children: \"Text Pill\" },\n { variant: \"filter\", children: \"Filter Pill\" },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n src: [\n \"https://picsum.photos/seed/user/30/30\",\n \"https://picsum.photos/seed/user/60/60\",\n ],\n },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n src: \"https://picsum.photos/seed/user/30/30\",\n },\n ]}\n >\n {(props) => {\n return (\n <_Demo>\n <Pill {...props}>Pill</Pill>\n\n <Spacer mx={0.5} />\n\n <Pill {...props} focus>\n Pill\n </Pill>\n\n <Spacer mx={0.5} />\n\n <Pill {...props} hover>\n Pill\n </Pill>\n\n {props.variant !== \"artist\" && (\n <>\n <Spacer mx={0.5} />\n\n <Pill {...(props as any)} active>\n Pill\n </Pill>\n </>\n )}\n </_Demo>\n )\n }}\n </States>\n )\n}\n\nexport const LinkExample = () => {\n return (\n <Pill\n variant=\"artist\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n )\n}\n\nexport const LongExample = () => {\n return (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n )\n}\n"],"file":"Pill.story.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","_States","hover","focus","story","name","_Demo","Flex","displayName","Variants","variant","children","src","props","LinkExample","LongExample","IconExample","Clickable"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps } from \"./Pill\"\n\nexport default {\n title: \"Components/Pill\",\n}\n\nexport const _States = () => {\n return (\n <States<PillProps> states={[{}, { hover: true }, { focus: true }]}>\n <Pill>Pill</Pill>\n </States>\n )\n}\n\n_States.story = {\n name: \"States\",\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Pill\"\n\nexport const Variants = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { variant: \"textRound\", children: \"Text Pill\" },\n { variant: \"textSquare\", children: \"Text Pill\" },\n { variant: \"filter\", children: \"Filter Pill\" },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n src: [\n \"https://picsum.photos/seed/user/30/30\",\n \"https://picsum.photos/seed/user/60/60\",\n ],\n },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n },\n {\n variant: \"artist\",\n children: \"Artist Name Pill\",\n src: \"https://picsum.photos/seed/user/30/30\",\n },\n ]}\n >\n {(props) => {\n return (\n <_Demo>\n <Pill {...props}>Pill</Pill>\n\n <Spacer mx={0.5} />\n\n <Pill {...props} focus>\n Pill\n </Pill>\n\n <Spacer mx={0.5} />\n\n <Pill {...props} hover>\n Pill\n </Pill>\n\n {props.variant !== \"artist\" && (\n <>\n <Spacer mx={0.5} />\n\n <Pill {...(props as any)} active>\n Pill\n </Pill>\n </>\n )}\n </_Demo>\n )\n }}\n </States>\n )\n}\n\nexport const LinkExample = () => {\n return (\n <Pill\n variant=\"artist\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n )\n}\n\nexport const LongExample = () => {\n return (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n )\n}\n\nexport const IconExample = () => {\n return (\n <Pill\n variant=\"textSquare\"\n as={Clickable}\n onClick={action(\"onClick\")}\n aria-label=\"Remove Painting\"\n >\n Painting <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n </Pill>\n )\n}\n"],"file":"Pill.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "18.7.
|
|
3
|
+
"version": "18.7.1",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -175,5 +175,5 @@
|
|
|
175
175
|
"<rootDir>/www/"
|
|
176
176
|
]
|
|
177
177
|
},
|
|
178
|
-
"gitHead": "
|
|
178
|
+
"gitHead": "01b94eed4561e6ddbb5ed2bfffea4bcb7ea6a676"
|
|
179
179
|
}
|