@automattic/vip-design-system 1.3.0 → 1.3.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/build/system/Form/Input.styles.d.ts +1 -1
- package/build/system/Form/Input.styles.js +1 -1
- package/build/system/Notice/Notice.js +6 -4
- package/build/system/Notice/Notice.stories.js +15 -0
- package/build/system/Tabs/TabsTrigger.js +1 -1
- package/package.json +1 -1
- package/src/system/Form/Input.styles.ts +1 -1
- package/src/system/Notice/Notice.stories.tsx +11 -0
- package/src/system/Notice/Notice.tsx +5 -4
- package/src/system/Tabs/TabsTrigger.js +1 -1
|
@@ -33,7 +33,7 @@ var baseControlStyle = exports.baseControlStyle = _extends({}, baseControlBorder
|
|
|
33
33
|
'&:disabled': {
|
|
34
34
|
borderColor: 'input.border.disabled'
|
|
35
35
|
},
|
|
36
|
-
'
|
|
36
|
+
'&[readonly]': {
|
|
37
37
|
borderColor: 'input.border.disabled',
|
|
38
38
|
backgroundColor: 'input.background.read-only'
|
|
39
39
|
},
|
|
@@ -23,7 +23,8 @@ var NoticeIcon = function NoticeIcon(_ref) {
|
|
|
23
23
|
variant = _ref.variant;
|
|
24
24
|
var sx = {
|
|
25
25
|
color: color,
|
|
26
|
-
flex: '0 0 auto'
|
|
26
|
+
flex: '0 0 auto',
|
|
27
|
+
mt: 0
|
|
27
28
|
};
|
|
28
29
|
var size = 20;
|
|
29
30
|
switch (variant) {
|
|
@@ -98,11 +99,12 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
|
|
|
98
99
|
sx: {
|
|
99
100
|
alignItems: 'start'
|
|
100
101
|
},
|
|
101
|
-
children: [(0, _jsxRuntime.jsx)(_.
|
|
102
|
+
children: [(0, _jsxRuntime.jsx)(_.Flex, {
|
|
102
103
|
sx: {
|
|
103
104
|
mr: 3,
|
|
104
|
-
mt:
|
|
105
|
-
flexShrink: 0
|
|
105
|
+
mt: 0,
|
|
106
|
+
flexShrink: 0,
|
|
107
|
+
alignSelf: 'center'
|
|
106
108
|
},
|
|
107
109
|
children: (0, _jsxRuntime.jsx)(NoticeIcon, {
|
|
108
110
|
color: "notice.icon." + variant,
|
|
@@ -105,6 +105,21 @@ var Default = exports.Default = function Default() {
|
|
|
105
105
|
})
|
|
106
106
|
})]
|
|
107
107
|
})
|
|
108
|
+
}), (0, _jsxRuntime.jsxs)(_.Notice, {
|
|
109
|
+
variant: "alert",
|
|
110
|
+
sx: {
|
|
111
|
+
mb: 4
|
|
112
|
+
},
|
|
113
|
+
children: ["Bucket names in Amazon S3 are globally unique, external link \u2197. To ensure that shipped data is delivered to the correct location, the Bucket Name and Bucket Region entered below must match the details used to set up your S3 bucket, external link \u2197.", (0, _jsxRuntime.jsx)(_.Link, {
|
|
114
|
+
href: "/?path=/story/avatar--default",
|
|
115
|
+
children: "A link to Avatar"
|
|
116
|
+
})]
|
|
117
|
+
}), (0, _jsxRuntime.jsx)(_.Notice, {
|
|
118
|
+
variant: "info",
|
|
119
|
+
sx: {
|
|
120
|
+
mb: 4
|
|
121
|
+
},
|
|
122
|
+
children: "Bucket names in Amazon S3 are globally unique."
|
|
108
123
|
})]
|
|
109
124
|
});
|
|
110
125
|
};
|
package/package.json
CHANGED
|
@@ -68,5 +68,16 @@ export const Default = () => (
|
|
|
68
68
|
</li>
|
|
69
69
|
</ul>
|
|
70
70
|
</Notice>
|
|
71
|
+
|
|
72
|
+
<Notice variant="alert" sx={ { mb: 4 } }>
|
|
73
|
+
Bucket names in Amazon S3 are globally unique, external link ↗. To ensure that shipped data is
|
|
74
|
+
delivered to the correct location, the Bucket Name and Bucket Region entered below must match
|
|
75
|
+
the details used to set up your S3 bucket, external link ↗.
|
|
76
|
+
<Link href="/?path=/story/avatar--default">A link to Avatar</Link>
|
|
77
|
+
</Notice>
|
|
78
|
+
|
|
79
|
+
<Notice variant="info" sx={ { mb: 4 } }>
|
|
80
|
+
Bucket names in Amazon S3 are globally unique.
|
|
81
|
+
</Notice>
|
|
71
82
|
</React.Fragment>
|
|
72
83
|
);
|
|
@@ -30,7 +30,7 @@ export interface NoticeProps {
|
|
|
30
30
|
type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
|
|
31
31
|
|
|
32
32
|
const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
|
|
33
|
-
const sx = { color, flex: '0 0 auto' };
|
|
33
|
+
const sx = { color, flex: '0 0 auto', mt: 0 };
|
|
34
34
|
const size = 20;
|
|
35
35
|
|
|
36
36
|
switch ( variant ) {
|
|
@@ -94,15 +94,16 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
|
|
|
94
94
|
alignItems: 'start',
|
|
95
95
|
} }
|
|
96
96
|
>
|
|
97
|
-
<
|
|
97
|
+
<Flex
|
|
98
98
|
sx={ {
|
|
99
99
|
mr: 3,
|
|
100
|
-
mt:
|
|
100
|
+
mt: 0,
|
|
101
101
|
flexShrink: 0,
|
|
102
|
+
alignSelf: 'center',
|
|
102
103
|
} }
|
|
103
104
|
>
|
|
104
105
|
<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
|
|
105
|
-
</
|
|
106
|
+
</Flex>
|
|
106
107
|
|
|
107
108
|
<Box>
|
|
108
109
|
{ title && (
|