@zendeskgarden/react-typography 9.0.0-next.8 → 9.0.0-next.9
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/esm/elements/span/StartIcon.js +1 -1
- package/dist/esm/styled/StyledBlockquote.js +1 -1
- package/dist/esm/styled/StyledCode.js +1 -1
- package/dist/esm/styled/StyledCodeBlock.js +1 -1
- package/dist/esm/styled/StyledCodeBlockContainer.js +1 -1
- package/dist/esm/styled/StyledCodeBlockLine.js +1 -1
- package/dist/esm/styled/StyledCodeBlockToken.js +1 -1
- package/dist/esm/styled/StyledEllipsis.js +1 -1
- package/dist/esm/styled/StyledFont.js +1 -1
- package/dist/esm/styled/StyledIcon.js +4 -12
- package/dist/esm/styled/StyledList.js +2 -2
- package/dist/esm/styled/StyledListItem.js +2 -2
- package/dist/esm/styled/StyledParagraph.js +1 -1
- package/dist/index.cjs.js +17 -24
- package/dist/typings/styled/StyledIcon.d.ts +3 -3
- package/package.json +3 -3
|
@@ -19,7 +19,7 @@ import '../../styled/StyledListItem.js';
|
|
|
19
19
|
import '../../styled/StyledParagraph.js';
|
|
20
20
|
|
|
21
21
|
const StartIconComponent = props => React.createElement(StyledIcon, Object.assign({
|
|
22
|
-
isStart: true
|
|
22
|
+
$isStart: true
|
|
23
23
|
}, props));
|
|
24
24
|
StartIconComponent.displayName = 'Span.StartIcon';
|
|
25
25
|
const StartIcon = StartIconComponent;
|
|
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
|
|
|
11
11
|
const COMPONENT_ID = 'typography.blockquote';
|
|
12
12
|
const StyledBlockquote = styled.blockquote.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledBlockquote",
|
|
17
17
|
componentId: "sc-1tt3ye0-0"
|
|
@@ -18,7 +18,7 @@ const colorStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledCode = styled(StyledFont).attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.9',
|
|
22
22
|
as: 'code'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledCode",
|
|
@@ -15,7 +15,7 @@ const colorStyles = props => {
|
|
|
15
15
|
};
|
|
16
16
|
const StyledCodeBlock = styled.pre.attrs({
|
|
17
17
|
'data-garden-id': COMPONENT_ID,
|
|
18
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.9'
|
|
19
19
|
}).withConfig({
|
|
20
20
|
displayName: "StyledCodeBlock",
|
|
21
21
|
componentId: "sc-5wky57-0"
|
|
@@ -10,7 +10,7 @@ import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgar
|
|
|
10
10
|
const COMPONENT_ID = 'typography.codeblock_container';
|
|
11
11
|
const StyledCodeBlockContainer = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCodeBlockContainer",
|
|
16
16
|
componentId: "sc-14zgbfw-0"
|
|
@@ -60,7 +60,7 @@ const lineNumberStyles = props => {
|
|
|
60
60
|
};
|
|
61
61
|
const StyledCodeBlockLine = styled(StyledFont).attrs({
|
|
62
62
|
'data-garden-id': COMPONENT_ID,
|
|
63
|
-
'data-garden-version': '9.0.0-next.
|
|
63
|
+
'data-garden-version': '9.0.0-next.9',
|
|
64
64
|
as: 'code',
|
|
65
65
|
isMonospace: true
|
|
66
66
|
}).withConfig({
|
|
@@ -32,7 +32,7 @@ const colorStyles = props => {
|
|
|
32
32
|
};
|
|
33
33
|
const StyledCodeBlockToken = styled.span.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.9'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledCodeBlockToken",
|
|
38
38
|
componentId: "sc-1hkshdq-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'typography.ellipsis';
|
|
11
11
|
const StyledEllipsis = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledEllipsis",
|
|
16
16
|
componentId: "sc-1u4uqmy-0"
|
|
@@ -54,7 +54,7 @@ const fontStyles = props => {
|
|
|
54
54
|
};
|
|
55
55
|
const StyledFont = styled.div.attrs({
|
|
56
56
|
'data-garden-id': COMPONENT_ID,
|
|
57
|
-
'data-garden-version': '9.0.0-next.
|
|
57
|
+
'data-garden-version': '9.0.0-next.9'
|
|
58
58
|
}).withConfig({
|
|
59
59
|
displayName: "StyledFont",
|
|
60
60
|
componentId: "sc-1iildbo-0"
|
|
@@ -5,25 +5,17 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import
|
|
9
|
-
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
9
|
|
|
11
10
|
const COMPONENT_ID = 'typography.icon';
|
|
12
11
|
const sizeStyles = props => {
|
|
13
|
-
const margin = props
|
|
12
|
+
const margin = props.$isStart && `${props.theme.space.base * 2}px`;
|
|
14
13
|
const size = props.theme.iconSizes.md;
|
|
15
14
|
return css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
|
|
16
15
|
};
|
|
17
|
-
const StyledIcon = styled(
|
|
18
|
-
let {
|
|
19
|
-
children,
|
|
20
|
-
isStart,
|
|
21
|
-
...props
|
|
22
|
-
} = _ref;
|
|
23
|
-
return React.cloneElement(Children.only(children), props);
|
|
24
|
-
}).attrs({
|
|
16
|
+
const StyledIcon = styled(StyledBaseIcon).attrs({
|
|
25
17
|
'data-garden-id': COMPONENT_ID,
|
|
26
|
-
'data-garden-version': '9.0.0-next.
|
|
18
|
+
'data-garden-version': '9.0.0-next.9'
|
|
27
19
|
}).withConfig({
|
|
28
20
|
displayName: "StyledIcon",
|
|
29
21
|
componentId: "sc-10rfb5b-0"
|
|
@@ -14,7 +14,7 @@ const listStyles = props => {
|
|
|
14
14
|
const ORDERED_ID = 'typography.ordered_list';
|
|
15
15
|
const StyledOrderedList = styled.ol.attrs({
|
|
16
16
|
'data-garden-id': ORDERED_ID,
|
|
17
|
-
'data-garden-version': '9.0.0-next.
|
|
17
|
+
'data-garden-version': '9.0.0-next.9'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledList__StyledOrderedList",
|
|
20
20
|
componentId: "sc-jdbsfi-0"
|
|
@@ -25,7 +25,7 @@ StyledOrderedList.defaultProps = {
|
|
|
25
25
|
const UNORDERED_ID = 'typography.unordered_list';
|
|
26
26
|
const StyledUnorderedList = styled.ul.attrs({
|
|
27
27
|
'data-garden-id': UNORDERED_ID,
|
|
28
|
-
'data-garden-version': '9.0.0-next.
|
|
28
|
+
'data-garden-version': '9.0.0-next.9'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledList__StyledUnorderedList",
|
|
31
31
|
componentId: "sc-jdbsfi-1"
|
|
@@ -21,7 +21,7 @@ const listItemStyles = props => {
|
|
|
21
21
|
const ORDERED_ID = 'typography.ordered_list_item';
|
|
22
22
|
const StyledOrderedListItem = styled(StyledFont).attrs({
|
|
23
23
|
'data-garden-id': ORDERED_ID,
|
|
24
|
-
'data-garden-version': '9.0.0-next.
|
|
24
|
+
'data-garden-version': '9.0.0-next.9',
|
|
25
25
|
as: 'li'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledListItem__StyledOrderedListItem",
|
|
@@ -34,7 +34,7 @@ StyledOrderedListItem.defaultProps = {
|
|
|
34
34
|
const UNORDERED_ID = 'typography.unordered_list_item';
|
|
35
35
|
const StyledUnorderedListItem = styled(StyledFont).attrs({
|
|
36
36
|
'data-garden-id': UNORDERED_ID,
|
|
37
|
-
'data-garden-version': '9.0.0-next.
|
|
37
|
+
'data-garden-version': '9.0.0-next.9',
|
|
38
38
|
as: 'li'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledListItem__StyledUnorderedListItem",
|
|
@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
|
|
|
11
11
|
const COMPONENT_ID = 'typography.paragraph';
|
|
12
12
|
const StyledParagraph = styled.p.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.9'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledParagraph",
|
|
17
17
|
componentId: "sc-zkuftz-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -73,7 +73,7 @@ const fontStyles = props => {
|
|
|
73
73
|
};
|
|
74
74
|
const StyledFont = styled__default.default.div.attrs({
|
|
75
75
|
'data-garden-id': COMPONENT_ID$9,
|
|
76
|
-
'data-garden-version': '9.0.0-next.
|
|
76
|
+
'data-garden-version': '9.0.0-next.9'
|
|
77
77
|
}).withConfig({
|
|
78
78
|
displayName: "StyledFont",
|
|
79
79
|
componentId: "sc-1iildbo-0"
|
|
@@ -86,7 +86,7 @@ StyledFont.defaultProps = {
|
|
|
86
86
|
const COMPONENT_ID$8 = 'typography.blockquote';
|
|
87
87
|
const StyledBlockquote = styled__default.default.blockquote.attrs({
|
|
88
88
|
'data-garden-id': COMPONENT_ID$8,
|
|
89
|
-
'data-garden-version': '9.0.0-next.
|
|
89
|
+
'data-garden-version': '9.0.0-next.9'
|
|
90
90
|
}).withConfig({
|
|
91
91
|
displayName: "StyledBlockquote",
|
|
92
92
|
componentId: "sc-1tt3ye0-0"
|
|
@@ -105,7 +105,7 @@ const colorStyles$3 = props => {
|
|
|
105
105
|
};
|
|
106
106
|
const StyledCode = styled__default.default(StyledFont).attrs({
|
|
107
107
|
'data-garden-id': COMPONENT_ID$7,
|
|
108
|
-
'data-garden-version': '9.0.0-next.
|
|
108
|
+
'data-garden-version': '9.0.0-next.9',
|
|
109
109
|
as: 'code'
|
|
110
110
|
}).withConfig({
|
|
111
111
|
displayName: "StyledCode",
|
|
@@ -126,7 +126,7 @@ const colorStyles$2 = props => {
|
|
|
126
126
|
};
|
|
127
127
|
const StyledCodeBlock = styled__default.default.pre.attrs({
|
|
128
128
|
'data-garden-id': COMPONENT_ID$6,
|
|
129
|
-
'data-garden-version': '9.0.0-next.
|
|
129
|
+
'data-garden-version': '9.0.0-next.9'
|
|
130
130
|
}).withConfig({
|
|
131
131
|
displayName: "StyledCodeBlock",
|
|
132
132
|
componentId: "sc-5wky57-0"
|
|
@@ -138,7 +138,7 @@ StyledCodeBlock.defaultProps = {
|
|
|
138
138
|
const COMPONENT_ID$5 = 'typography.codeblock_container';
|
|
139
139
|
const StyledCodeBlockContainer = styled__default.default.div.attrs({
|
|
140
140
|
'data-garden-id': COMPONENT_ID$5,
|
|
141
|
-
'data-garden-version': '9.0.0-next.
|
|
141
|
+
'data-garden-version': '9.0.0-next.9'
|
|
142
142
|
}).withConfig({
|
|
143
143
|
displayName: "StyledCodeBlockContainer",
|
|
144
144
|
componentId: "sc-14zgbfw-0"
|
|
@@ -201,7 +201,7 @@ const lineNumberStyles = props => {
|
|
|
201
201
|
};
|
|
202
202
|
const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
|
|
203
203
|
'data-garden-id': COMPONENT_ID$4,
|
|
204
|
-
'data-garden-version': '9.0.0-next.
|
|
204
|
+
'data-garden-version': '9.0.0-next.9',
|
|
205
205
|
as: 'code',
|
|
206
206
|
isMonospace: true
|
|
207
207
|
}).withConfig({
|
|
@@ -236,7 +236,7 @@ const colorStyles = props => {
|
|
|
236
236
|
};
|
|
237
237
|
const StyledCodeBlockToken = styled__default.default.span.attrs({
|
|
238
238
|
'data-garden-id': COMPONENT_ID$3,
|
|
239
|
-
'data-garden-version': '9.0.0-next.
|
|
239
|
+
'data-garden-version': '9.0.0-next.9'
|
|
240
240
|
}).withConfig({
|
|
241
241
|
displayName: "StyledCodeBlockToken",
|
|
242
242
|
componentId: "sc-1hkshdq-0"
|
|
@@ -248,7 +248,7 @@ StyledCodeBlockToken.defaultProps = {
|
|
|
248
248
|
const COMPONENT_ID$2 = 'typography.ellipsis';
|
|
249
249
|
const StyledEllipsis = styled__default.default.div.attrs({
|
|
250
250
|
'data-garden-id': COMPONENT_ID$2,
|
|
251
|
-
'data-garden-version': '9.0.0-next.
|
|
251
|
+
'data-garden-version': '9.0.0-next.9'
|
|
252
252
|
}).withConfig({
|
|
253
253
|
displayName: "StyledEllipsis",
|
|
254
254
|
componentId: "sc-1u4uqmy-0"
|
|
@@ -259,20 +259,13 @@ StyledEllipsis.defaultProps = {
|
|
|
259
259
|
|
|
260
260
|
const COMPONENT_ID$1 = 'typography.icon';
|
|
261
261
|
const sizeStyles = props => {
|
|
262
|
-
const margin = props
|
|
262
|
+
const margin = props.$isStart && `${props.theme.space.base * 2}px`;
|
|
263
263
|
const size = props.theme.iconSizes.md;
|
|
264
264
|
return styled.css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
|
|
265
265
|
};
|
|
266
|
-
const StyledIcon = styled__default.default(
|
|
267
|
-
let {
|
|
268
|
-
children,
|
|
269
|
-
isStart,
|
|
270
|
-
...props
|
|
271
|
-
} = _ref;
|
|
272
|
-
return React__default.default.cloneElement(React.Children.only(children), props);
|
|
273
|
-
}).attrs({
|
|
266
|
+
const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
274
267
|
'data-garden-id': COMPONENT_ID$1,
|
|
275
|
-
'data-garden-version': '9.0.0-next.
|
|
268
|
+
'data-garden-version': '9.0.0-next.9'
|
|
276
269
|
}).withConfig({
|
|
277
270
|
displayName: "StyledIcon",
|
|
278
271
|
componentId: "sc-10rfb5b-0"
|
|
@@ -288,7 +281,7 @@ const listStyles = props => {
|
|
|
288
281
|
const ORDERED_ID$1 = 'typography.ordered_list';
|
|
289
282
|
const StyledOrderedList = styled__default.default.ol.attrs({
|
|
290
283
|
'data-garden-id': ORDERED_ID$1,
|
|
291
|
-
'data-garden-version': '9.0.0-next.
|
|
284
|
+
'data-garden-version': '9.0.0-next.9'
|
|
292
285
|
}).withConfig({
|
|
293
286
|
displayName: "StyledList__StyledOrderedList",
|
|
294
287
|
componentId: "sc-jdbsfi-0"
|
|
@@ -299,7 +292,7 @@ StyledOrderedList.defaultProps = {
|
|
|
299
292
|
const UNORDERED_ID$1 = 'typography.unordered_list';
|
|
300
293
|
const StyledUnorderedList = styled__default.default.ul.attrs({
|
|
301
294
|
'data-garden-id': UNORDERED_ID$1,
|
|
302
|
-
'data-garden-version': '9.0.0-next.
|
|
295
|
+
'data-garden-version': '9.0.0-next.9'
|
|
303
296
|
}).withConfig({
|
|
304
297
|
displayName: "StyledList__StyledUnorderedList",
|
|
305
298
|
componentId: "sc-jdbsfi-1"
|
|
@@ -319,7 +312,7 @@ const listItemStyles = props => {
|
|
|
319
312
|
const ORDERED_ID = 'typography.ordered_list_item';
|
|
320
313
|
const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
|
|
321
314
|
'data-garden-id': ORDERED_ID,
|
|
322
|
-
'data-garden-version': '9.0.0-next.
|
|
315
|
+
'data-garden-version': '9.0.0-next.9',
|
|
323
316
|
as: 'li'
|
|
324
317
|
}).withConfig({
|
|
325
318
|
displayName: "StyledListItem__StyledOrderedListItem",
|
|
@@ -332,7 +325,7 @@ StyledOrderedListItem.defaultProps = {
|
|
|
332
325
|
const UNORDERED_ID = 'typography.unordered_list_item';
|
|
333
326
|
const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
|
|
334
327
|
'data-garden-id': UNORDERED_ID,
|
|
335
|
-
'data-garden-version': '9.0.0-next.
|
|
328
|
+
'data-garden-version': '9.0.0-next.9',
|
|
336
329
|
as: 'li'
|
|
337
330
|
}).withConfig({
|
|
338
331
|
displayName: "StyledListItem__StyledUnorderedListItem",
|
|
@@ -346,7 +339,7 @@ StyledUnorderedListItem.defaultProps = {
|
|
|
346
339
|
const COMPONENT_ID = 'typography.paragraph';
|
|
347
340
|
const StyledParagraph = styled__default.default.p.attrs({
|
|
348
341
|
'data-garden-id': COMPONENT_ID,
|
|
349
|
-
'data-garden-version': '9.0.0-next.
|
|
342
|
+
'data-garden-version': '9.0.0-next.9'
|
|
350
343
|
}).withConfig({
|
|
351
344
|
displayName: "StyledParagraph",
|
|
352
345
|
componentId: "sc-zkuftz-0"
|
|
@@ -725,7 +718,7 @@ const UnorderedList = UnorderedListComponent;
|
|
|
725
718
|
UnorderedList.Item = Item;
|
|
726
719
|
|
|
727
720
|
const StartIconComponent = props => React__default.default.createElement(StyledIcon, Object.assign({
|
|
728
|
-
isStart: true
|
|
721
|
+
$isStart: true
|
|
729
722
|
}, props));
|
|
730
723
|
StartIconComponent.displayName = 'Span.StartIcon';
|
|
731
724
|
const StartIcon = StartIconComponent;
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
+
/// <reference types="react" />
|
|
7
8
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import React from 'react';
|
|
9
9
|
interface IStyledIconProps {
|
|
10
|
-
isStart?: boolean;
|
|
10
|
+
$isStart?: boolean;
|
|
11
11
|
}
|
|
12
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<({ children,
|
|
12
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
|
|
13
13
|
'data-garden-id': string;
|
|
14
14
|
'data-garden-version': string;
|
|
15
15
|
} & IStyledIconProps, "data-garden-id" | "data-garden-version">;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-typography",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Components relating to typography in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"styled-components": "^5.3.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
36
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9"
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
39
39
|
"components",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
49
49
|
}
|