@artsy/palette 19.4.0 → 19.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v19.4.1 (Tue Apr 12 2022)
+
+#### 🐛  Bug Fix
+
+- fix: add white-space: nowrap to pill component [#1153](https://github.com/artsy/palette/pull/1153) ([@gkartalis](https://github.com/gkartalis))
+- chore: add story for pill with children ([@gkartalis](https://github.com/gkartalis))
+- fix: add white-space: nowrap to pill component ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George Kartalis ([@gkartalis](https://github.com/gkartalis))
+
+---
+
 # v19.4.0 (Tue Apr 05 2022)
 
 #### 🚀  Enhancement

package/dist/elements/Pill/Pill.js

@@ -40,7 +40,7 @@ exports.PILL_VARIANT_NAMES = PILL_VARIANT_NAMES;
 var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "Pill__Container",
   componentId: "sc-1r2gnzt-0"
-})(["display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border:1px solid ", ";transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;", ""], (0, _themeGet.themeGet)("colors.black15"), function (props) {
+})(["display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;white-space:nowrap;border:1px solid ", ";transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;", ""], (0, _themeGet.themeGet)("colors.black15"), function (props) {
   var _props$variant;
 
   var states = _tokens.PILL_VARIANTS[(_props$variant = props.variant) !== null && _props$variant !== void 0 ? _props$variant : "textRound"];

package/dist/elements/Pill/Pill.js.map

@@ -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","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;AADV,KAEO,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,GANN,GAQGN,QARH,CAlBF,CADF;AA+BD,CAhCM;;;AAAMD,I;AAkCbA,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 & border-color to black60 */\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        {...(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"}
+{"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,iQAOO,wBAAS,gBAAT,CAPP,EAWX,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,CA9BY,CAAf;;AAiCA,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;AADV,KAEO,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,GANN,GAQGN,QARH,CAlBF,CADF;AA+BD,CAhCM;;;AAAMD,I;AAkCbA,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 & border-color to black60 */\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  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 ?? \"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        {...(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"}

package/dist/elements/Pill/Pill.story.d.ts

@@ -11,4 +11,5 @@ export declare const _States: {
 export declare const Variants: () => JSX.Element;
 export declare const LinkExample: () => JSX.Element;
 export declare const LongExample: () => JSX.Element;
+export declare const LongExampleWithChildren: () => JSX.Element;
 export declare const IconExample: () => JSX.Element;

package/dist/elements/Pill/Pill.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._States = exports.Variants = exports.LongExample = exports.LinkExample = exports.IconExample = void 0;
+exports.default = exports._States = exports.Variants = exports.LongExampleWithChildren = exports.LongExample = exports.LinkExample = exports.IconExample = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -23,6 +23,8 @@ var _Spacer = require("../Spacer");
 
 var _Pill = require("./Pill");
 
+var _Sup = require("../Sup");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -120,6 +122,17 @@ var LongExample = function LongExample() {
 exports.LongExample = LongExample;
 LongExample.displayName = "LongExample";
 
+var LongExampleWithChildren = function LongExampleWithChildren() {
+  return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
+    maxWidth: 200
+  }, "Artist Series ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, {
+    pl: 0.5
+  }, "130"));
+};
+
+exports.LongExampleWithChildren = LongExampleWithChildren;
+LongExampleWithChildren.displayName = "LongExampleWithChildren";
+
 var IconExample = function IconExample() {
   return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
     variant: "textSquare",

package/dist/elements/Pill/Pill.story.js.map

@@ -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","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"}
+{"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","LongExampleWithChildren","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\"\nimport { Sup } from \"../Sup\"\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 LongExampleWithChildren = () => {\n  return (\n    <Pill maxWidth={200}>\n      Artist Series <Sup pl={0.5}>130</Sup>\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

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.4.0",
+  "version": "19.4.1",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "f959a4846a1d79e20cec681624c7c2bc4ac0499d"
+  "gitHead": "8ec6c09e127c1b47cd3c6b0e6e19dccb308007d5"
 }