@artsy/palette 22.0.3 → 22.1.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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# v22.1.0 (Thu Jul 14 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- feat(banner): exports variants; ensures text stays centered when dismissible [#1193](https://github.com/artsy/palette/pull/1193) ([@dzucconi](https://github.com/dzucconi))
|
|
6
|
+
|
|
7
|
+
#### 🐛 Bug Fix
|
|
8
|
+
|
|
9
|
+
- feat(banner): exports variants; ensures text stays centered when dismissable ([@dzucconi](https://github.com/dzucconi))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Damon ([@dzucconi](https://github.com/dzucconi))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
1
17
|
# v22.0.3 (Fri Jul 08 2022)
|
|
2
18
|
|
|
3
19
|
#### 🐛 Bug Fix
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FlexProps } from "../Flex";
|
|
3
|
+
export declare type BannerVariant = keyof typeof BANNER_VARIANTS;
|
|
3
4
|
export interface BannerProps extends FlexProps {
|
|
4
|
-
variant?:
|
|
5
|
+
variant?: BannerVariant;
|
|
5
6
|
dismissable?: boolean;
|
|
6
7
|
}
|
|
7
8
|
/** A banner */
|
|
8
9
|
export declare const Banner: React.FC<BannerProps>;
|
|
9
|
-
declare const
|
|
10
|
+
export declare const BANNER_VARIANTS: {
|
|
10
11
|
defaultLight: {
|
|
11
12
|
backgroundColor: string;
|
|
12
13
|
color: string;
|
|
@@ -28,4 +29,3 @@ declare const VARIANTS: {
|
|
|
28
29
|
color: string;
|
|
29
30
|
};
|
|
30
31
|
};
|
|
31
|
-
export {};
|
|
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.Banner = void 0;
|
|
8
|
+
exports.Banner = exports.BANNER_VARIANTS = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
@@ -15,8 +15,6 @@ var _styledSystem = require("styled-system");
|
|
|
15
15
|
|
|
16
16
|
var _CloseIcon = require("../../svgs/CloseIcon");
|
|
17
17
|
|
|
18
|
-
var _Theme = require("../../Theme");
|
|
19
|
-
|
|
20
18
|
var _Clickable = require("../Clickable");
|
|
21
19
|
|
|
22
20
|
var _Flex = require("../Flex");
|
|
@@ -56,11 +54,6 @@ var Banner = function Banner(_ref) {
|
|
|
56
54
|
children = _ref.children,
|
|
57
55
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
56
|
|
|
59
|
-
var size = (0, _Theme.useThemeConfig)({
|
|
60
|
-
v2: "small",
|
|
61
|
-
v3: "xs"
|
|
62
|
-
});
|
|
63
|
-
|
|
64
57
|
var _useState = (0, _react.useState)(false),
|
|
65
58
|
_useState2 = _slicedToArray(_useState, 2),
|
|
66
59
|
dismissed = _useState2[0],
|
|
@@ -72,16 +65,22 @@ var Banner = function Banner(_ref) {
|
|
|
72
65
|
|
|
73
66
|
if (dismissed) return null;
|
|
74
67
|
return /*#__PURE__*/_react.default.createElement(Container, _extends({
|
|
75
|
-
|
|
68
|
+
position: "relative",
|
|
69
|
+
py: 1,
|
|
70
|
+
px: 4
|
|
76
71
|
}, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
77
|
-
variant:
|
|
72
|
+
variant: "xs",
|
|
78
73
|
display: "flex",
|
|
79
74
|
alignItems: "center",
|
|
80
75
|
justifyContent: "center",
|
|
81
76
|
textAlign: "center",
|
|
82
77
|
flex: 1
|
|
83
78
|
}, children), dismissable && /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
|
|
84
|
-
|
|
79
|
+
position: "absolute",
|
|
80
|
+
top: 0,
|
|
81
|
+
right: 0,
|
|
82
|
+
bottom: 0,
|
|
83
|
+
p: 1,
|
|
85
84
|
display: "flex",
|
|
86
85
|
alignItems: "center",
|
|
87
86
|
color: "currentColor",
|
|
@@ -98,7 +97,7 @@ Banner.displayName = "Banner";
|
|
|
98
97
|
Banner.defaultProps = {
|
|
99
98
|
variant: "defaultLight"
|
|
100
99
|
};
|
|
101
|
-
var
|
|
100
|
+
var BANNER_VARIANTS = {
|
|
102
101
|
defaultLight: {
|
|
103
102
|
backgroundColor: "black10",
|
|
104
103
|
color: "black100"
|
|
@@ -120,10 +119,11 @@ var VARIANTS = {
|
|
|
120
119
|
color: "white100"
|
|
121
120
|
}
|
|
122
121
|
};
|
|
122
|
+
exports.BANNER_VARIANTS = BANNER_VARIANTS;
|
|
123
123
|
var Container = (0, _styledComponents.default)(_Flex.Flex).withConfig({
|
|
124
124
|
displayName: "Banner__Container",
|
|
125
125
|
componentId: "sc-1bfmimv-0"
|
|
126
126
|
})(["", ""], (0, _styledSystem.variant)({
|
|
127
|
-
variants:
|
|
127
|
+
variants: BANNER_VARIANTS
|
|
128
128
|
}));
|
|
129
129
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Banner/Banner.tsx"],"names":["Banner","dismissable","children","rest","dismissed","setDismissed","handleClick","fill","defaultProps","variant","BANNER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","success","error","brand","Container","Flex","variants"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACO,IAAMA,MAA6B,GAAG,SAAhCA,MAAgC,OAIvC;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,kBAAkC,qBAAS,KAAT,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBD,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAFD;;AAIA,MAAID,SAAJ,EAAe,OAAO,IAAP;AAEf,sBACE,6BAAC,SAAD;AAAW,IAAA,QAAQ,EAAC,UAApB;AAA+B,IAAA,EAAE,EAAE,CAAnC;AAAsC,IAAA,EAAE,EAAE;AAA1C,KAAiDD,IAAjD,gBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,IADV;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,QAJjB;AAKE,IAAA,SAAS,EAAC,QALZ;AAME,IAAA,IAAI,EAAE;AANR,KAQGD,QARH,CADF,EAYGD,WAAW,iBACV,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAC,UADX;AAEE,IAAA,GAAG,EAAE,CAFP;AAGE,IAAA,KAAK,EAAE,CAHT;AAIE,IAAA,MAAM,EAAE,CAJV;AAKE,IAAA,CAAC,EAAE,CALL;AAME,IAAA,OAAO,EAAC,MANV;AAOE,IAAA,UAAU,EAAC,QAPb;AAQE,IAAA,KAAK,EAAC,cARR;AASE,IAAA,OAAO,EAAEK;AATX,kBAWE,6BAAC,oBAAD;AAAW,IAAA,KAAK,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAlB,IAXF,CAbJ,CADF;AA8BD,CA3CM;;;AAAMP,M;AA6CbA,MAAM,CAACQ,YAAP,GAAsB;AACpBC,EAAAA,OAAO,EAAE;AADW,CAAtB;AAIO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,YAAY,EAAE;AACZC,IAAAA,eAAe,EAAE,SADL;AAEZC,IAAAA,KAAK,EAAE;AAFK,GADe;AAK7BC,EAAAA,WAAW,EAAE;AACXF,IAAAA,eAAe,EAAE,UADN;AAEXC,IAAAA,KAAK,EAAE;AAFI,GALgB;AAS7BE,EAAAA,OAAO,EAAE;AACPH,IAAAA,eAAe,EAAE,UADV;AAEPC,IAAAA,KAAK,EAAE;AAFA,GAToB;AAa7BG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,eAAe,EAAE,QADZ;AAELC,IAAAA,KAAK,EAAE;AAFF,GAbsB;AAiB7BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,eAAe,EAAE,OADZ;AAELC,IAAAA,KAAK,EAAE;AAFF;AAjBsB,CAAxB;;AAuBP,IAAMK,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACX,2BAAQ;AAAEC,EAAAA,QAAQ,EAAEV;AAAZ,CAAR,CADW,CAAf","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport type BannerVariant = keyof typeof BANNER_VARIANTS\n\nexport interface BannerProps extends FlexProps {\n variant?: BannerVariant\n dismissable?: boolean\n}\n\n/** A banner */\nexport const Banner: React.FC<BannerProps> = ({\n dismissable = false,\n children,\n ...rest\n}) => {\n const [dismissed, setDismissed] = useState(false)\n\n const handleClick = () => {\n setDismissed(true)\n }\n\n if (dismissed) return null\n\n return (\n <Container position=\"relative\" py={1} px={4} {...rest}>\n <Text\n variant=\"xs\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n textAlign=\"center\"\n flex={1}\n >\n {children}\n </Text>\n\n {dismissable && (\n <Clickable\n position=\"absolute\"\n top={0}\n right={0}\n bottom={0}\n p={1}\n display=\"flex\"\n alignItems=\"center\"\n color=\"currentColor\"\n onClick={handleClick}\n >\n <CloseIcon style={{ fill: \"currentcolor\" }} />\n </Clickable>\n )}\n </Container>\n )\n}\n\nBanner.defaultProps = {\n variant: \"defaultLight\",\n}\n\nexport const BANNER_VARIANTS = {\n defaultLight: {\n backgroundColor: \"black10\",\n color: \"black100\",\n },\n defaultDark: {\n backgroundColor: \"black100\",\n color: \"white100\",\n },\n success: {\n backgroundColor: \"green100\",\n color: \"white100\",\n },\n error: {\n backgroundColor: \"red100\",\n color: \"white100\",\n },\n brand: {\n backgroundColor: \"brand\",\n color: \"white100\",\n },\n}\n\nconst Container = styled(Flex)`\n ${variant({ variants: BANNER_VARIANTS })}\n`\n"],"file":"Banner.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "22.0
|
|
3
|
+
"version": "22.1.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -177,5 +177,5 @@
|
|
|
177
177
|
"<rootDir>/www/"
|
|
178
178
|
]
|
|
179
179
|
},
|
|
180
|
-
"gitHead": "
|
|
180
|
+
"gitHead": "e2b3aecc040aa872f20a069092a5dba781ecde98"
|
|
181
181
|
}
|