@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.
@@ -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.8'
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.8',
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.8'
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.8'
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.8',
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.8'
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.8'
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.8'
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 React, { Children } from 'react';
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.isStart && `${props.theme.space.base * 2}px`;
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(_ref => {
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.8'
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.8'
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.8'
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.8',
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.8',
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.8'
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.8'
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.8'
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.8',
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.8'
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.8'
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.8',
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.8'
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.8'
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.isStart && `${props.theme.space.base * 2}px`;
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(_ref => {
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.8'
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.8'
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.8'
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.8',
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.8',
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.8'
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, isStart, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
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.8",
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.8"
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": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
48
+ "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
49
49
  }