@artsy/palette 31.1.0 → 31.3.0

package/dist/elements/Tooltip/Tooltip.story.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _svgs = require("../../svgs");
+var _HelpIcon = _interopRequireDefault(require("@artsy/icons/HelpIcon"));
 
 var _usePosition = require("../../utils/usePosition");
 
@@ -33,6 +33,8 @@ var _Tooltip = require("./Tooltip");
 
 var _excluded = ["children"];
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
 
 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; }
@@ -174,7 +176,7 @@ var IconExample = function IconExample() {
     style: {
       lineHeight: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_svgs.HelpIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_HelpIcon.default, {
     ml: 0.5
   }))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","pointer","variant","children","textAlign","offset","rest","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight","ExternalControl","setVisible","PointerCentering","setPlacement","size","setSize","e","parseInt","target","value"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { HelpIcon } from \"../../svgs\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true, pointer: true },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n        },\n        {\n          visible: false,\n          children: <>This text has a tooltip that never displays</>,\n        },\n        {\n          visible: true,\n          textAlign: \"center\",\n        },\n        {\n          visible: true,\n          pointer: true,\n          offset: -10,\n        },\n      ]}\n    >\n      {({ children, ...rest }) => (\n        <Tooltip content={CONTENT} {...rest}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            {children ?? \"This text has a tooltip\"}\n          </Text>\n        </Tooltip>\n      )}\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\n_Clickable.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Tooltip\n            content={JSON.stringify(props)}\n            variant=\"defaultDark\"\n            pointer\n            visible\n            {...props}\n          >\n            <Text\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"black10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n      Hover (or focus) the icon to display the tooltip.{\" \"}\n      <Tooltip content={CONTENT} placement=\"bottom\">\n        {/* Icons don't forwardRefs so we have to wrap in a span */}\n        <Box as=\"span\" style={{ lineHeight: 0 }}>\n          <HelpIcon ml={0.5} />\n        </Box>\n      </Tooltip>\n    </Text>\n  )\n}\n\nexport const ExternalControl = () => {\n  const [visible, setVisible] = useState(false)\n\n  return (\n    <>\n      <Tooltip\n        content={CONTENT}\n        visible={visible}\n        pointer\n        variant=\"defaultDark\"\n      >\n        <Button\n          variant=\"secondaryBlack\"\n          onClick={() => {\n            setVisible((visible) => !visible)\n          }}\n        >\n          {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n        </Button>\n      </Tooltip>\n    </>\n  )\n}\n\nexport const PointerCentering = () => {\n  const [placement, setPlacement] = useState<Position>(\"top\")\n  const [size, setSize] = useState(50)\n\n  return (\n    <>\n      {Object.keys(POSITION).map((placement) => {\n        return (\n          <Button\n            key={placement}\n            mr={1}\n            mb={1}\n            variant=\"secondaryBlack\"\n            size=\"small\"\n            onMouseOver={() => {\n              setPlacement(placement as Position)\n            }}\n          >\n            {placement}\n          </Button>\n        )\n      })}\n\n      <Input\n        type=\"range\"\n        min={0}\n        max={200}\n        value={size}\n        onChange={(e) => {\n          setSize(parseInt(e.target.value))\n        }}\n      />\n\n      <Spacer y={12} />\n\n      <Tooltip\n        content={CONTENT}\n        pointer\n        visible\n        variant=\"defaultDark\"\n        placement={placement}\n      >\n        <Box\n          bg=\"black10\"\n          width={size}\n          height={size}\n          mx=\"auto\"\n          position=\"relative\"\n        >\n          <Box\n            height=\"1px\"\n            bg=\"red100\"\n            width=\"100%\"\n            position=\"absolute\"\n            top=\"50%\"\n            mt=\"-0.5px\"\n          />\n\n          <Box\n            height=\"100%\"\n            width=\"1px\"\n            bg=\"red100\"\n            position=\"absolute\"\n            left=\"50%\"\n            ml=\"-0.5px\"\n          />\n        </Box>\n      </Tooltip>\n    </>\n  )\n}\n"],"file":"Tooltip.story.js"}
+{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","pointer","variant","children","textAlign","offset","rest","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight","ExternalControl","setVisible","PointerCentering","setPlacement","size","setSize","e","parseInt","target","value"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={[\n        { placement: \"top-start\" },\n        { placement: \"bottom\", width: 600 },\n        { placement: \"bottom\", visible: true, pointer: true },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n        },\n        {\n          visible: false,\n          children: <>This text has a tooltip that never displays</>,\n        },\n        {\n          visible: true,\n          textAlign: \"center\",\n        },\n        {\n          visible: true,\n          pointer: true,\n          offset: -10,\n        },\n      ]}\n    >\n      {({ children, ...rest }) => (\n        <Tooltip content={CONTENT} {...rest}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            {children ?? \"This text has a tooltip\"}\n          </Text>\n        </Tooltip>\n      )}\n    </States>\n  )\n}\n\nexport const _Clickable = () => {\n  return (\n    <States<Partial<TooltipProps>> states={[{}]}>\n      <Tooltip content={CONTENT}>\n        <Clickable onClick={action(\"onClick\")}>\n          <Text\n            variant=\"xs\"\n            textAlign=\"center\"\n            p={1}\n            bg=\"black100\"\n            color=\"white100\"\n          >\n            This text has a tooltip and is clickable\n          </Text>\n        </Clickable>\n      </Tooltip>\n    </States>\n  )\n}\n\n_Clickable.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<TooltipProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Tooltip\n            content={JSON.stringify(props)}\n            variant=\"defaultDark\"\n            pointer\n            visible\n            {...props}\n          >\n            <Text\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"black10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          </Tooltip>\n        )\n      }}\n    </States>\n  )\n}\n\nexport const IconExample = () => {\n  return (\n    <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n      Hover (or focus) the icon to display the tooltip.{\" \"}\n      <Tooltip content={CONTENT} placement=\"bottom\">\n        {/* Icons don't forwardRefs so we have to wrap in a span */}\n        <Box as=\"span\" style={{ lineHeight: 0 }}>\n          <HelpIcon ml={0.5} />\n        </Box>\n      </Tooltip>\n    </Text>\n  )\n}\n\nexport const ExternalControl = () => {\n  const [visible, setVisible] = useState(false)\n\n  return (\n    <>\n      <Tooltip\n        content={CONTENT}\n        visible={visible}\n        pointer\n        variant=\"defaultDark\"\n      >\n        <Button\n          variant=\"secondaryBlack\"\n          onClick={() => {\n            setVisible((visible) => !visible)\n          }}\n        >\n          {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n        </Button>\n      </Tooltip>\n    </>\n  )\n}\n\nexport const PointerCentering = () => {\n  const [placement, setPlacement] = useState<Position>(\"top\")\n  const [size, setSize] = useState(50)\n\n  return (\n    <>\n      {Object.keys(POSITION).map((placement) => {\n        return (\n          <Button\n            key={placement}\n            mr={1}\n            mb={1}\n            variant=\"secondaryBlack\"\n            size=\"small\"\n            onMouseOver={() => {\n              setPlacement(placement as Position)\n            }}\n          >\n            {placement}\n          </Button>\n        )\n      })}\n\n      <Input\n        type=\"range\"\n        min={0}\n        max={200}\n        value={size}\n        onChange={(e) => {\n          setSize(parseInt(e.target.value))\n        }}\n      />\n\n      <Spacer y={12} />\n\n      <Tooltip\n        content={CONTENT}\n        pointer\n        visible\n        variant=\"defaultDark\"\n        placement={placement}\n      >\n        <Box\n          bg=\"black10\"\n          width={size}\n          height={size}\n          mx=\"auto\"\n          position=\"relative\"\n        >\n          <Box\n            height=\"1px\"\n            bg=\"red100\"\n            width=\"100%\"\n            position=\"absolute\"\n            top=\"50%\"\n            mt=\"-0.5px\"\n          />\n\n          <Box\n            height=\"100%\"\n            width=\"1px\"\n            bg=\"red100\"\n            position=\"absolute\"\n            left=\"50%\"\n            ml=\"-0.5px\"\n          />\n        </Box>\n      </Tooltip>\n    </>\n  )\n}\n"],"file":"Tooltip.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "31.1.0",
+  "version": "31.3.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -63,7 +63,7 @@
     "@storybook/react": "6.5.12",
     "@types/debounce": "1.2.0",
     "@types/enzyme": "3.10.8",
-    "@types/jest": "26.0.20",
+    "@types/jest": "^28.0.0",
     "@types/node": "14.14.27",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
@@ -77,7 +77,7 @@
     "@typescript-eslint/parser": "^4.31.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.4.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "^28.0.0",
     "babel-loader": "8.2.2",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-module-resolver": "4.1.0",
@@ -94,7 +94,8 @@
     "fork-ts-checker-notifier-webpack-plugin": "1.0.0",
     "fork-ts-checker-webpack-plugin": "1.2.0",
     "husky": "2.1.0",
-    "jest": "26.6.3",
+    "jest": "^28.0.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "7.0.0-2",
     "lint-staged": "8.1.5",
     "mock-raf": "1.0.1",
@@ -114,6 +115,7 @@
     "webpack": "5"
   },
   "dependencies": {
+    "@artsy/icons": "^3.2.2",
     "@artsy/palette-tokens": "^4.0.1",
     "@seznam/compose-react-refs": "^1.0.6",
     "@styled-system/theme-get": "^5.1.2",
@@ -168,11 +170,15 @@
     "transform": {
       ".(ts|tsx)": "babel-jest"
     },
+    "testEnvironment": "jsdom",
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
     "testPathIgnorePatterns": [
       "<rootDir>/dist/",
       "<rootDir>/www/"
-    ]
+    ],
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
+    }
   },
-  "gitHead": "2f94a86cf74ba0226616d0474224245bb829eec2"
+  "gitHead": "8a27267a981e8b3d27da8b84538493e09749ceb0"
 }