@artsy/palette 27.1.0 → 28.0.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/Link/Link.d.ts +2 -1
- package/dist/elements/Link/Link.js +2 -1
- package/dist/elements/Link/Link.js.map +1 -1
- package/dist/elements/Pointer/Pointer.d.ts +21 -0
- package/dist/elements/Pointer/Pointer.js +161 -0
- package/dist/elements/Pointer/Pointer.js.map +1 -0
- package/dist/elements/Pointer/index.d.ts +1 -0
- package/dist/elements/Pointer/index.js +19 -0
- package/dist/elements/Pointer/index.js.map +1 -0
- package/dist/elements/Popover/Popover.d.ts +18 -5
- package/dist/elements/Popover/Popover.js +58 -40
- package/dist/elements/Popover/Popover.js.map +1 -1
- package/dist/elements/Popover/Popover.story.js +29 -4
- package/dist/elements/Popover/Popover.story.js.map +1 -1
- package/dist/elements/Tooltip/Tooltip.d.ts +18 -4
- package/dist/elements/Tooltip/Tooltip.js +44 -23
- package/dist/elements/Tooltip/Tooltip.js.map +1 -1
- package/dist/elements/Tooltip/Tooltip.story.js +8 -3
- package/dist/elements/Tooltip/Tooltip.story.js.map +1 -1
- package/dist/helpers/index.d.ts +1 -0
- package/dist/helpers/index.js +13 -0
- package/dist/helpers/index.js.map +1 -1
- package/package.json +2 -2
- package/CHANGELOG.md +0 -5634
|
@@ -5,18 +5,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.Tooltip = void 0;
|
|
8
|
+
exports.Tooltip = exports.TOOLTIP_VARIANTS = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
13
|
|
|
14
|
+
var _styledSystem = require("styled-system");
|
|
15
|
+
|
|
14
16
|
var _helpers = require("../../helpers");
|
|
15
17
|
|
|
16
18
|
var _usePosition2 = require("../../utils/usePosition");
|
|
17
19
|
|
|
18
20
|
var _Box = require("../Box");
|
|
19
21
|
|
|
22
|
+
var _Pointer = require("../Pointer");
|
|
23
|
+
|
|
20
24
|
var _Text = require("../Text");
|
|
21
25
|
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -39,6 +43,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
39
43
|
|
|
40
44
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
45
|
|
|
46
|
+
var TOOLTIP_VARIANTS = {
|
|
47
|
+
defaultLight: {
|
|
48
|
+
backgroundColor: "white100",
|
|
49
|
+
color: "black100"
|
|
50
|
+
},
|
|
51
|
+
defaultDark: {
|
|
52
|
+
backgroundColor: "black100",
|
|
53
|
+
color: "white100"
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
exports.TOOLTIP_VARIANTS = TOOLTIP_VARIANTS;
|
|
57
|
+
|
|
42
58
|
/**
|
|
43
59
|
* A tooltip
|
|
44
60
|
*/
|
|
@@ -46,13 +62,15 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
46
62
|
var _children$props, _children$props2, _children$props3, _children$props4, _children$props5;
|
|
47
63
|
|
|
48
64
|
var children = _ref.children,
|
|
49
|
-
|
|
50
|
-
_ref$size = _ref.size,
|
|
51
|
-
size = _ref$size === void 0 ? "lg" : _ref$size,
|
|
65
|
+
content = _ref.content,
|
|
52
66
|
_ref$width = _ref.width,
|
|
53
67
|
width = _ref$width === void 0 ? 230 : _ref$width,
|
|
54
68
|
_ref$placement = _ref.placement,
|
|
55
69
|
placement = _ref$placement === void 0 ? "top" : _ref$placement,
|
|
70
|
+
_ref$pointer = _ref.pointer,
|
|
71
|
+
pointer = _ref$pointer === void 0 ? false : _ref$pointer,
|
|
72
|
+
_ref$variant = _ref.variant,
|
|
73
|
+
variant = _ref$variant === void 0 ? "defaultLight" : _ref$variant,
|
|
56
74
|
visible = _ref.visible;
|
|
57
75
|
|
|
58
76
|
var _useState = (0, _react.useState)(false),
|
|
@@ -74,15 +92,14 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
74
92
|
setActive(false);
|
|
75
93
|
};
|
|
76
94
|
|
|
77
|
-
var content = typeof _content === "string" ? truncate(_content) : _content;
|
|
78
|
-
|
|
79
95
|
var _usePosition = (0, _usePosition2.usePosition)({
|
|
80
96
|
position: placement,
|
|
81
97
|
offset: 10,
|
|
82
98
|
active: visible !== null && visible !== void 0 ? visible : active
|
|
83
99
|
}),
|
|
84
100
|
anchorRef = _usePosition.anchorRef,
|
|
85
|
-
tooltipRef = _usePosition.tooltipRef
|
|
101
|
+
tooltipRef = _usePosition.tooltipRef,
|
|
102
|
+
isFlipped = _usePosition.state.isFlipped;
|
|
86
103
|
|
|
87
104
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(children, {
|
|
88
105
|
ref: anchorRef,
|
|
@@ -93,10 +110,9 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
93
110
|
onFocus: compose(activate, (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.onFocus),
|
|
94
111
|
onBlur: compose(deactivate, (_children$props5 = children.props) === null || _children$props5 === void 0 ? void 0 : _children$props5.onBlur)
|
|
95
112
|
}), /*#__PURE__*/_react.default.createElement(Tip, _extends({
|
|
96
|
-
p: size === "sm" ? 0.5 : 2,
|
|
97
|
-
width: width,
|
|
98
|
-
bg: "white100",
|
|
99
113
|
ref: tooltipRef,
|
|
114
|
+
variant: variant,
|
|
115
|
+
width: width,
|
|
100
116
|
zIndex: 1
|
|
101
117
|
}, visible ? // If there's a visible prop being passed; use that
|
|
102
118
|
{
|
|
@@ -104,26 +120,31 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
104
120
|
} : // Otherwise use the active state
|
|
105
121
|
{
|
|
106
122
|
opacity: active ? 1 : 0
|
|
107
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
123
|
+
}), pointer && /*#__PURE__*/_react.default.createElement(_Pointer.Pointer, {
|
|
124
|
+
variant: variant,
|
|
125
|
+
placement: placement,
|
|
126
|
+
isFlipped: isFlipped
|
|
127
|
+
}), /*#__PURE__*/_react.default.createElement(Panel, {
|
|
128
|
+
variant: variant,
|
|
129
|
+
p: 1
|
|
130
|
+
}, (0, _helpers.isText)(content) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
108
131
|
variant: "xs"
|
|
109
|
-
}, content)));
|
|
132
|
+
}, content) : content)));
|
|
110
133
|
};
|
|
111
134
|
|
|
112
135
|
exports.Tooltip = Tooltip;
|
|
113
136
|
var Tip = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
114
137
|
displayName: "Tooltip__Tip",
|
|
115
138
|
componentId: "ymkaxc-0"
|
|
116
|
-
})(["position:absolute;z-index:1;transition:opacity 250ms ease-out;text-align:left;box-shadow:", ";cursor:default;pointer-events:none;"], _helpers.DROP_SHADOW)
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
return substring;
|
|
126
|
-
};
|
|
139
|
+
})(["position:absolute;z-index:1;transition:opacity 250ms ease-out;text-align:left;box-shadow:", ";cursor:default;pointer-events:none;", ""], _helpers.DROP_SHADOW, (0, _styledSystem.variant)({
|
|
140
|
+
variants: TOOLTIP_VARIANTS
|
|
141
|
+
}));
|
|
142
|
+
var Panel = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
143
|
+
displayName: "Tooltip__Panel",
|
|
144
|
+
componentId: "ymkaxc-1"
|
|
145
|
+
})(["", ""], (0, _styledSystem.variant)({
|
|
146
|
+
variants: TOOLTIP_VARIANTS
|
|
147
|
+
}));
|
|
127
148
|
|
|
128
149
|
var compose = function compose(a, b) {
|
|
129
150
|
return function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.tsx"],"names":["TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","children","content","width","placement","pointer","variant","visible","active","setActive","handleClick","prevActive","activate","deactivate","position","offset","anchorRef","tooltipRef","isFlipped","state","React","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","opacity","Tip","Box","DROP_SHADOW","variants","Panel","a","b","args"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { DROP_SHADOW, isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\n\nexport const TOOLTIP_VARIANTS = {\n defaultLight: {\n backgroundColor: \"white100\",\n color: \"black100\",\n },\n defaultDark: {\n backgroundColor: \"black100\",\n color: \"white100\",\n },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n /** Anchor element to attach to tooltip */\n children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n /** Content of tooltip */\n content: React.ReactNode\n placement?: Position\n pointer?: boolean\n variant?: TooltipVariant\n visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n children,\n content,\n width = 230,\n placement = \"top\",\n pointer = false,\n variant = \"defaultLight\",\n visible,\n}) => {\n const [active, setActive] = useState(false)\n\n const handleClick = () => {\n setActive((prevActive) => !prevActive)\n }\n\n const activate = () => {\n setActive(true)\n }\n\n const deactivate = () => {\n setActive(false)\n }\n\n const {\n anchorRef,\n tooltipRef,\n state: { isFlipped },\n } = usePosition({\n position: placement,\n offset: 10,\n active: visible ?? active,\n })\n\n return (\n <>\n {React.cloneElement(children, {\n ref: anchorRef,\n tabIndex: 0,\n onClick: compose(handleClick, children.props?.onClick),\n onMouseOver: compose(activate, children.props?.onMouseOver),\n onMouseOut: compose(deactivate, children.props?.onMouseOut),\n onFocus: compose(activate, children.props?.onFocus),\n onBlur: compose(deactivate, children.props?.onBlur),\n })}\n\n <Tip\n ref={tooltipRef as any}\n variant={variant}\n width={width}\n zIndex={1}\n {...(visible\n ? // If there's a visible prop being passed; use that\n { opacity: visible ? 1 : 0 }\n : // Otherwise use the active state\n { opacity: active ? 1 : 0 })}\n >\n {pointer && (\n <Pointer\n variant={variant}\n placement={placement}\n isFlipped={isFlipped}\n />\n )}\n\n <Panel variant={variant} p={1}>\n {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n </Panel>\n </Tip>\n </>\n )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n position: absolute;\n z-index: 1;\n transition: opacity 250ms ease-out;\n text-align: left;\n box-shadow: ${DROP_SHADOW};\n cursor: default;\n pointer-events: none;\n ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n return (...args) => {\n a?.(...args)\n b?.(...args)\n }\n}\n"],"file":"Tooltip.js"}
|
|
@@ -27,7 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
27
27
|
|
|
28
28
|
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
29
|
|
|
30
|
-
var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit
|
|
30
|
+
var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit?";
|
|
31
31
|
var _default = {
|
|
32
32
|
title: "Components/Tooltip"
|
|
33
33
|
};
|
|
@@ -43,6 +43,10 @@ var Default = function Default() {
|
|
|
43
43
|
}, {
|
|
44
44
|
placement: "bottom",
|
|
45
45
|
visible: true
|
|
46
|
+
}, {
|
|
47
|
+
variant: "defaultDark",
|
|
48
|
+
placement: "bottom",
|
|
49
|
+
visible: true
|
|
46
50
|
}]
|
|
47
51
|
}, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
48
52
|
content: CONTENT
|
|
@@ -94,6 +98,8 @@ var Placement = function Placement() {
|
|
|
94
98
|
}, function (props) {
|
|
95
99
|
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, _extends({
|
|
96
100
|
content: JSON.stringify(props),
|
|
101
|
+
variant: "defaultDark",
|
|
102
|
+
pointer: true,
|
|
97
103
|
visible: true
|
|
98
104
|
}, props), /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
99
105
|
variant: "xs",
|
|
@@ -101,8 +107,7 @@ var Placement = function Placement() {
|
|
|
101
107
|
p: 1,
|
|
102
108
|
maxWidth: "50%",
|
|
103
109
|
mx: "auto",
|
|
104
|
-
bg: "
|
|
105
|
-
color: "white100"
|
|
110
|
+
bg: "black10"
|
|
106
111
|
}, JSON.stringify(props)));
|
|
107
112
|
});
|
|
108
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"names":["CONTENT","title","Default","placement","width","visible","variant","_Clickable","story","parameters","chromatic","disable","Placement","Object","keys","POSITION","map","props","JSON","stringify","IconExample","lineHeight"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAG,0DAAhB;eAEe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,SAAS,EAAE;AAAb,KADM,EAEN;AAAEA,MAAAA,SAAS,EAAE,QAAb;AAAuBC,MAAAA,KAAK,EAAE;AAA9B,KAFM,EAGN;AAAED,MAAAA,SAAS,EAAE,QAAb;AAAuBE,MAAAA,OAAO,EAAE;AAAhC,KAHM,EAIN;AAAEC,MAAAA,OAAO,EAAE,aAAX;AAA0BH,MAAAA,SAAS,EAAE,QAArC;AAA+CE,MAAAA,OAAO,EAAE;AAAxD,KAJM;AADV,kBAQE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEL;AAAlB,kBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,SAAS,EAAC,QAFZ;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAC,UAJL;AAKE,IAAA,KAAK,EAAC;AALR,+BADF,CARF,CADF;AAsBD,CAvBM;;;AAAME,O;;AAyBN,IAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,6BAAC,uBAAD;AAA+B,IAAA,MAAM,EAAE,CAAC,EAAD;AAAvC,kBACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEP;AAAlB,kBACE,6BAAC,qBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,kBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,SAAS,EAAC,QAFZ;AAGE,IAAA,CAAC,EAAE,CAHL;AAIE,IAAA,EAAE,EAAC,UAJL;AAKE,IAAA,KAAK,EAAC;AALR,gDADF,CADF,CADF,CADF;AAiBD,CAlBM;;;AAAMO,U;AAoBbA,UAAU,CAACC,KAAX,GAAmB;AACjBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADK,CAAnB;;AAIO,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAEC,MAAM,CAACC,IAAP,CAAYC,qBAAZ,EAAsBC,GAAtB,CAA0B,UAACb,SAAD;AAAA,aAAgB;AAChDA,QAAAA,SAAS,EAAEA;AADqC,OAAhB;AAAA,KAA1B;AADV,KAKG,UAACc,KAAD,EAAW;AACV,wBACE,6BAAC,gBAAD;AACE,MAAA,OAAO,EAAEC,IAAI,CAACC,SAAL,CAAeF,KAAf,CADX;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,OAAO,MAHT;AAIE,MAAA,OAAO;AAJT,OAKMA,KALN,gBAOE,6BAAC,UAAD;AACE,MAAA,OAAO,EAAC,IADV;AAEE,MAAA,SAAS,EAAC,QAFZ;AAGE,MAAA,CAAC,EAAE,CAHL;AAIE,MAAA,QAAQ,EAAC,KAJX;AAKE,MAAA,EAAE,EAAC,MALL;AAME,MAAA,EAAE,EAAC;AANL,OAQGC,IAAI,CAACC,SAAL,CAAeF,KAAf,CARH,CAPF,CADF;AAoBD,GA1BH,CADF;AA8BD,CA/BM;;;AAAML,S;;AAiCN,IAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,OAAO,EAAC,MAA3B;AAAkC,IAAA,UAAU,EAAC,QAA7C;AAAsD,IAAA,UAAU,EAAE;AAAlE,0DACoD,GADpD,eAEE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEpB,OAAlB;AAA2B,IAAA,SAAS,EAAC;AAArC,kBAEE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,MAAR;AAAe,IAAA,KAAK,EAAE;AAAEqB,MAAAA,UAAU,EAAE;AAAd;AAAtB,kBACE,6BAAC,cAAD;AAAU,IAAA,EAAE,EAAE;AAAd,IADF,CAFF,CAFF,CADF;AAWD,CAZM;;;AAAMD,W","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { HelpIcon } from \"../../svgs\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\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 },\n { variant: \"defaultDark\", placement: \"bottom\", visible: true },\n ]}\n >\n <Tooltip content={CONTENT}>\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n bg=\"black100\"\n color=\"white100\"\n >\n This text has a tooltip\n </Text>\n </Tooltip>\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"],"file":"Tooltip.story.js"}
|
package/dist/helpers/index.d.ts
CHANGED
package/dist/helpers/index.js
CHANGED
|
@@ -4,6 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
+
var _isText = require("./isText");
|
|
8
|
+
|
|
9
|
+
Object.keys(_isText).forEach(function (key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
if (key in exports && exports[key] === _isText[key]) return;
|
|
12
|
+
Object.defineProperty(exports, key, {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _isText[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
7
20
|
var _color = require("./color");
|
|
8
21
|
|
|
9
22
|
Object.keys(_color).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./color\"\nexport * from \"./injectGlobalStyles\"\nexport * from \"./media\"\nexport * from \"./shadow\"\nexport * from \"./space\"\nexport * from \"./visuallyDisableScrollbar\"\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./isText\"\nexport * from \"./color\"\nexport * from \"./injectGlobalStyles\"\nexport * from \"./media\"\nexport * from \"./shadow\"\nexport * from \"./space\"\nexport * from \"./visuallyDisableScrollbar\"\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "28.0.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"<rootDir>/www/"
|
|
177
177
|
]
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "1ebdbfef6782b7329c6d68da2395692f63241680"
|
|
180
180
|
}
|