@artsy/palette 21.1.1 → 21.1.2
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 +18 -0
- package/dist/elements/Pill/Pill.d.ts +2 -2
- package/dist/elements/Pill/Pill.js +1 -1
- package/dist/elements/Pill/Pill.js.map +1 -1
- package/dist/elements/Pill/Pill.story.d.ts +1 -0
- package/dist/elements/Pill/Pill.story.js +39 -2
- package/dist/elements/Pill/Pill.story.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
# v21.1.2 (Thu Jun 23 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(pills): fixes hover on selected pills [#1185](https://github.com/artsy/palette/pull/1185) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
- fix(pills): fixes hover on selected pills ([@dzucconi](https://github.com/dzucconi))
|
|
7
|
+
|
|
8
|
+
#### 🏠 Internal
|
|
9
|
+
|
|
10
|
+
- chore(deps): update dep typescript from 4.7.3 to v4.7.4 [#1184](https://github.com/artsy/palette/pull/1184) ([@renovate[bot]](https://github.com/renovate[bot]))
|
|
11
|
+
|
|
12
|
+
#### Authors: 2
|
|
13
|
+
|
|
14
|
+
- [@renovate[bot]](https://github.com/renovate[bot])
|
|
15
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
1
19
|
# v21.1.1 (Wed Jun 15 2022)
|
|
2
20
|
|
|
3
21
|
#### 🐛 Bug Fix
|
|
@@ -11,9 +11,9 @@ export declare type PillProps = ClickableProps & {
|
|
|
11
11
|
focus?: boolean;
|
|
12
12
|
/** Forces hover state */
|
|
13
13
|
hover?: boolean;
|
|
14
|
-
/** Forces active state */
|
|
14
|
+
/** Forces active state. This is for working with :active; not denoting a selected state */
|
|
15
15
|
active?: boolean;
|
|
16
|
-
/** Forces selected state */
|
|
16
|
+
/** Forces selected state. Use this state to denote the selected state */
|
|
17
17
|
selected?: boolean;
|
|
18
18
|
/** Optional icon slot */
|
|
19
19
|
Icon?: React.FunctionComponent<IconProps>;
|
|
@@ -84,7 +84,7 @@ var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig(
|
|
|
84
84
|
var _props$variant;
|
|
85
85
|
|
|
86
86
|
var states = _tokens.PILL_VARIANTS[(_props$variant = props.variant) !== null && _props$variant !== void 0 ? _props$variant : "search"];
|
|
87
|
-
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:0;", " ", "}&:active{", "}&:disabled{pointer-events:none;", "}"], states.default, props.
|
|
87
|
+
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:0;", " ", "}&:active{", " ", "}&:disabled{pointer-events:none;", "}"], states.default, props.focus && states.focus, props.hover && states.hover, props.selected && states.selected, props.active && states.active, props.disabled && states.disabled, states.hover, states.focus, props.selected && states.selected, states.active, props.selected && states.selected, states.disabled);
|
|
88
88
|
});
|
|
89
89
|
|
|
90
90
|
var Thumbnail = _styledComponents.default.img.withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,kBAAkB,GAAG,CAChC,SADgC,EAEhC,QAFgC,EAGhC,QAHgC,EAIhC,QAJgC,EAKhC,OALgC,CAA3B;;;AAuDP;AACA;AACA;AACA;AACA;AACO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,IAAoB,QAApBA,IAAoB;AAAA,MAAXC,IAAW;;AACxE,sBACE,6BAAC,SAAD,EAAeA,IAAf,EACGA,IAAI,CAACC,OAAL,KAAiB,QAAjB,iBACC,6BAAC,SAAD,eACOD,IAAI,CAACE,GAAL,GACD;AAAEA,IAAAA,GAAG,EAAE,OAAOF,IAAI,CAACE,GAAZ,KAAoB,QAApB,GAA+BF,IAAI,CAACE,GAApC,GAA0CF,IAAI,CAACE,GAAL,CAAS,CAAT;AAAjD,GADC,GAED,EAHN,EAIOF,IAAI,CAACE,GAAL,IAAY,OAAOF,IAAI,CAACE,GAAZ,KAAoB,QAAhC,IAA4CF,IAAI,CAACE,GAAL,CAAS,CAAT,CAA5C,GACD;AAAEC,IAAAA,MAAM,YAAKH,IAAI,CAACE,GAAL,CAAS,CAAT,CAAL,kBAAwBF,IAAI,CAACE,GAAL,CAAS,CAAT,CAAxB;AAAR,GADC,GAED,EANN;AAOE;AACA,IAAA,GAAG,EAAC;AARN,KAFJ,EAcGH,IAAI,iBAAI,6BAAC,IAAD;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,EAAE,EAAE,CAAC,GAA/B;AAAoC,IAAA,EAAE,EAAE;AAAxC,IAdX,eAgBE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEC,IAAI,CAACC,OAAL,KAAiB,QAAjB,GAA4B,CAAC,IAAD,EAAO,YAAP,CAA5B,GAAmD,IAD9D;AAEE,IAAA,gBAAgB;AAFlB,kBAIE,2CAAOH,QAAP,CAJF,EAMGE,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6B,WAAWD,IAAxC,iBACC,4DACG,GADH,eAEE,6BAAC,QAAD,QAAMA,IAAI,CAACI,KAAX,CAFF,CAPJ,CAhBF,EA8BG,CAAEJ,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6B,CAACD,IAAI,CAACK,QAApC,IACCL,IAAI,CAACC,OAAL,KAAiB,QAAjB,IAA6BD,IAAI,CAACM,QADpC,kBAEC,6BAAC,eAAD;AAAW,IAAA,IAAI,EAAC,cAAhB;AAA+B,IAAA,EAAE,EAAE,GAAnC;AAAwC,IAAA,KAAK,EAAE,EAA/C;AAAmD,IAAA,MAAM,EAAE;AAA3D,IAhCJ,CADF;AAqCD,CAtCM;;;AAAMT,I;AAwCbA,IAAI,CAACU,YAAL,GAAoB;AAClBN,EAAAA,OAAO,EAAE;AADS,CAApB;AAIA,IAAMO,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,iQAOO,wBAAS,gBAAT,CAPP,EAWX,UAACC,KAAD,EAAW;AAAA;;AACX,MAAMC,MAAM,GAAGC,wCAAcF,KAAK,CAACT,OAApB,2DAA+B,QAA/B,CAAf;AAEA,aAAOY,qBAAP,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CloseIcon, IconProps } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n \"default\",\n \"search\",\n \"filter\",\n \"artist\",\n \"badge\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n | \"default\"\n | \"hover\"\n | \"focus\"\n | \"active\"\n | \"selected\"\n | \"disabled\"\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 /** Forces active state. This is for working with :active; not denoting a selected state */\n active?: boolean\n /** Forces selected state. Use this state to denote the selected state */\n selected?: boolean\n /** Optional icon slot */\n Icon?: React.FunctionComponent<IconProps>\n} & (\n | {\n variant?: Extract<\n PillVariant,\n \"default\" | \"search\" | \"badge\" | \"filter\"\n >\n }\n | {\n /** `\"artist\"` pills have an optional `src` */\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 /** `search` pills have an optional `count` */\n variant?: Extract<PillVariant, \"search\">\n /** Optional count */\n count?: number\n }\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, Icon, ...rest }) => {\n return (\n <Container {...rest}>\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 {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n <Text\n variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n overflowEllipsis\n >\n <span>{children}</span>\n\n {rest.variant === \"search\" && \"count\" in rest && (\n <>\n {\" \"}\n <Sup>{rest.count}</Sup>\n </>\n )}\n </Text>\n\n {((rest.variant === \"filter\" && !rest.disabled) ||\n (rest.variant === \"artist\" && rest.selected)) && (\n <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n )}\n </Container>\n )\n}\n\nPill.defaultProps = {\n variant: \"default\",\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 white-space: nowrap;\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 ?? \"search\"]\n\n return css`\n ${states.default}\n ${props.focus && states.focus}\n ${props.hover && states.hover}\n ${props.selected && states.selected}\n ${props.active && states.active}\n ${props.disabled && states.disabled}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${props.selected && states.selected}\n }\n\n &:active {\n ${states.active}\n ${props.selected && states.selected}\n }\n\n &:disabled {\n pointer-events: none;\n ${states.disabled}\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"],"file":"Pill.js"}
|
|
@@ -8,3 +8,4 @@ export declare const LongExampleWithTruncation: () => JSX.Element;
|
|
|
8
8
|
export declare const SearchWithCount: () => JSX.Element;
|
|
9
9
|
export declare const ArtistWithImage: () => JSX.Element;
|
|
10
10
|
export declare const PillWithIcon: () => JSX.Element;
|
|
11
|
+
export declare const Demo: () => JSX.Element;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
|
-
exports.default = exports.Variants = exports.SearchWithCount = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.ArtistWithImage = void 0;
|
|
8
|
+
exports.default = exports.Variants = exports.SearchWithCount = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.Demo = exports.ArtistWithImage = void 0;
|
|
7
9
|
|
|
8
|
-
var _react =
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
11
|
|
|
10
12
|
var _storybookStates = require("storybook-states");
|
|
11
13
|
|
|
@@ -25,6 +27,22 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
25
27
|
|
|
26
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
29
|
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
|
+
|
|
34
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
35
|
+
|
|
36
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
37
|
+
|
|
38
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
39
|
+
|
|
40
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
41
|
+
|
|
42
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
43
|
+
|
|
44
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
45
|
+
|
|
28
46
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
47
|
|
|
30
48
|
var _default = {
|
|
@@ -196,4 +214,23 @@ var PillWithIcon = function PillWithIcon() {
|
|
|
196
214
|
|
|
197
215
|
exports.PillWithIcon = PillWithIcon;
|
|
198
216
|
PillWithIcon.displayName = "PillWithIcon";
|
|
217
|
+
|
|
218
|
+
var Demo = function Demo() {
|
|
219
|
+
var _useState = (0, _react.useState)(false),
|
|
220
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
221
|
+
selected = _useState2[0],
|
|
222
|
+
setSelected = _useState2[1];
|
|
223
|
+
|
|
224
|
+
return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
|
|
225
|
+
selected: selected,
|
|
226
|
+
onClick: function onClick() {
|
|
227
|
+
return setSelected(function (prevActive) {
|
|
228
|
+
return !prevActive;
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
}, "Example");
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
exports.Demo = Demo;
|
|
235
|
+
Demo.displayName = "Demo";
|
|
199
236
|
//# sourceMappingURL=Pill.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon","Demo","setSelected","prevActive"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { GraphIcon } from \"../../svgs\"\nimport styled from \"styled-components\"\n\nexport default {\n title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n return (\n <States<PillProps>\n states={PILL_VARIANT_NAMES.map((variant) => ({\n variant: variant as PillVariant,\n }))}\n >\n {(props) => (\n <Display\n p={1}\n overflowX=\"auto\"\n {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n ? { bg: \"black100\", color: \"white100\" }\n : { bg: \"white100\", color: \"black100\" })}\n >\n <Flex>\n <Join separator={<Spacer ml={2} />}>\n <Pill {...props}>Default</Pill>\n\n <Pill {...props} focus>\n Focus\n </Pill>\n\n <Pill {...props} hover>\n Hover\n </Pill>\n\n <Pill {...props} active>\n Active\n </Pill>\n\n <Pill {...props} selected>\n Selected\n </Pill>\n\n <Pill {...props} disabled>\n Disabled\n </Pill>\n </Join>\n </Flex>\n </Display>\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 LongExampleWithTruncation = () => {\n return (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n )\n}\n\nexport const SearchWithCount = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill variant=\"search\" count={123}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const ArtistWithImage = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill\n variant=\"artist\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n >\n Isa Genzken\n </Pill>\n </States>\n )\n}\n\nexport const PillWithIcon = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n { variant: \"search\" },\n { variant: \"search\", focus: true },\n { variant: \"search\", hover: true },\n { variant: \"search\", active: true },\n { variant: \"search\", selected: true },\n { variant: \"search\", disabled: true },\n { variant: \"filter\" },\n { variant: \"filter\", focus: true },\n { variant: \"filter\", hover: true },\n { variant: \"filter\", active: true },\n { variant: \"filter\", selected: true },\n { variant: \"filter\", disabled: true },\n ]}\n >\n <Pill variant=\"badge\" Icon={GraphIcon}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const Demo = () => {\n const [selected, setSelected] = useState(false)\n return (\n <Pill\n selected={selected}\n onClick={() => setSelected((prevActive) => !prevActive)}\n >\n Example\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": "21.1.
|
|
3
|
+
"version": "21.1.2",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
"storybook-states": "1.2.0",
|
|
111
111
|
"styled-components": "4.3.2",
|
|
112
112
|
"ts-node": "8.1.0",
|
|
113
|
-
"typescript": "4.7.
|
|
113
|
+
"typescript": "4.7.4",
|
|
114
114
|
"typescript-styled-plugin": "0.10.0",
|
|
115
115
|
"webpack": "5"
|
|
116
116
|
},
|
|
@@ -177,5 +177,5 @@
|
|
|
177
177
|
"<rootDir>/www/"
|
|
178
178
|
]
|
|
179
179
|
},
|
|
180
|
-
"gitHead": "
|
|
180
|
+
"gitHead": "206b02b460be1ff6590927f827183c6c96843ecc"
|
|
181
181
|
}
|