carbon-react 121.1.0 → 121.2.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.
Files changed (9) hide show
  1. package/esm/components/heading/heading.style.d.ts +1 -1
  2. package/esm/components/typography/typography.component.d.ts +4 -2
  3. package/esm/components/typography/typography.component.js +3 -1
  4. package/esm/components/typography/typography.style.js +5 -0
  5. package/lib/components/heading/heading.style.d.ts +1 -1
  6. package/lib/components/typography/typography.component.d.ts +4 -2
  7. package/lib/components/typography/typography.component.js +3 -1
  8. package/lib/components/typography/typography.style.js +5 -0
  9. package/package.json +1 -1
package/esm/components/heading/heading.style.d.ts CHANGED
@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
12
12
  withMargin?: boolean;
13
13
  };
14
14
  declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
15
- ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
15
+ ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
16
16
  displayName: string;
17
17
  }, any, StyledHeadingTitleProps, never>;
18
18
  declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
package/esm/components/typography/typography.component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
4
+ declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
5
5
  export declare type VariantTypes = typeof VARIANT_TYPES[number];
6
6
  export interface TypographyProps extends SpaceProps, TagProps {
7
7
  /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
30
30
  whiteSpace?: string;
31
31
  /** Override the word-wrap */
32
32
  wordWrap?: string;
33
+ /** Override the text-align */
34
+ textAlign?: string;
33
35
  /** Override the text-overflow */
34
36
  textOverflow?: string;
35
37
  /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
49
51
  screenReaderOnly?: boolean;
50
52
  }
51
53
  export declare const Typography: {
52
- ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
54
+ ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
53
55
  displayName: string;
54
56
  };
55
57
  export default Typography;
package/esm/components/typography/typography.component.js CHANGED
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
4
4
  import tagComponent from "../../__internal__/utils/helpers/tags";
5
5
  import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
6
6
  import StyledTypography from "./typography.style";
7
- const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
7
+ const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
8
8
  export const Typography = ({
9
9
  "data-component": dataComponent,
10
10
  variant = "p",
@@ -19,6 +19,7 @@ export const Typography = ({
19
19
  listStyleType,
20
20
  whiteSpace,
21
21
  wordWrap,
22
+ textAlign,
22
23
  textOverflow,
23
24
  truncate,
24
25
  color = "blackOpacity90",
@@ -43,6 +44,7 @@ export const Typography = ({
43
44
  listStyleType: listStyleType,
44
45
  whiteSpace: whiteSpace,
45
46
  wordWrap: wordWrap,
47
+ textAlign: textAlign,
46
48
  textOverflow: textOverflow,
47
49
  truncate: truncate,
48
50
  color: color,
package/esm/components/typography/typography.style.js CHANGED
@@ -42,6 +42,7 @@ const getSize = variant => {
42
42
  return "13px";
43
43
  case "segment-subheader-alt":
44
44
  case "p":
45
+ case "span":
45
46
  case "b":
46
47
  case "strong":
47
48
  case "em":
@@ -73,6 +74,7 @@ const getLineHeight = variant => {
73
74
  case "h5":
74
75
  case "segment-subheader-alt":
75
76
  case "p":
77
+ case "span":
76
78
  case "b":
77
79
  case "strong":
78
80
  case "em":
@@ -98,6 +100,7 @@ const getWeight = variant => {
98
100
  case "h4":
99
101
  case "h5":
100
102
  case "p":
103
+ case "span":
101
104
  case "small":
102
105
  case "big":
103
106
  case "sub":
@@ -149,6 +152,7 @@ const StyledTypography = styled.span.attrs(({
149
152
  listStyleType,
150
153
  whiteSpace,
151
154
  wordWrap,
155
+ textAlign,
152
156
  textOverflow,
153
157
  truncate,
154
158
  screenReaderOnly
@@ -163,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
163
167
  padding: 0;
164
168
  white-space: ${truncate ? "nowrap" : whiteSpace};
165
169
  word-wrap: ${wordWrap};
170
+ text-align: ${textAlign};
166
171
  text-overflow: ${truncate ? "ellipsis" : textOverflow};
167
172
  ${truncate && css`
168
173
  overflow: hidden;
package/lib/components/heading/heading.style.d.ts CHANGED
@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
12
12
  withMargin?: boolean;
13
13
  };
14
14
  declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
15
- ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
15
+ ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
16
16
  displayName: string;
17
17
  }, any, StyledHeadingTitleProps, never>;
18
18
  declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
package/lib/components/typography/typography.component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { SpaceProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags";
4
- declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
4
+ declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
5
5
  export declare type VariantTypes = typeof VARIANT_TYPES[number];
6
6
  export interface TypographyProps extends SpaceProps, TagProps {
7
7
  /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
30
30
  whiteSpace?: string;
31
31
  /** Override the word-wrap */
32
32
  wordWrap?: string;
33
+ /** Override the text-align */
34
+ textAlign?: string;
33
35
  /** Override the text-overflow */
34
36
  textOverflow?: string;
35
37
  /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
49
51
  screenReaderOnly?: boolean;
50
52
  }
51
53
  export declare const Typography: {
52
- ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
54
+ ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
53
55
  displayName: string;
54
56
  };
55
57
  export default Typography;
package/lib/components/typography/typography.component.js CHANGED
@@ -11,7 +11,7 @@ var _utils = require("../../style/utils");
11
11
  var _typography = _interopRequireDefault(require("./typography.style"));
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
14
- const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
14
+ const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
15
15
  const Typography = ({
16
16
  "data-component": dataComponent,
17
17
  variant = "p",
@@ -26,6 +26,7 @@ const Typography = ({
26
26
  listStyleType,
27
27
  whiteSpace,
28
28
  wordWrap,
29
+ textAlign,
29
30
  textOverflow,
30
31
  truncate,
31
32
  color = "blackOpacity90",
@@ -50,6 +51,7 @@ const Typography = ({
50
51
  listStyleType: listStyleType,
51
52
  whiteSpace: whiteSpace,
52
53
  wordWrap: wordWrap,
54
+ textAlign: textAlign,
53
55
  textOverflow: textOverflow,
54
56
  truncate: truncate,
55
57
  color: color,
package/lib/components/typography/typography.style.js CHANGED
@@ -51,6 +51,7 @@ const getSize = variant => {
51
51
  return "13px";
52
52
  case "segment-subheader-alt":
53
53
  case "p":
54
+ case "span":
54
55
  case "b":
55
56
  case "strong":
56
57
  case "em":
@@ -82,6 +83,7 @@ const getLineHeight = variant => {
82
83
  case "h5":
83
84
  case "segment-subheader-alt":
84
85
  case "p":
86
+ case "span":
85
87
  case "b":
86
88
  case "strong":
87
89
  case "em":
@@ -107,6 +109,7 @@ const getWeight = variant => {
107
109
  case "h4":
108
110
  case "h5":
109
111
  case "p":
112
+ case "span":
110
113
  case "small":
111
114
  case "big":
112
115
  case "sub":
@@ -158,6 +161,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
158
161
  listStyleType,
159
162
  whiteSpace,
160
163
  wordWrap,
164
+ textAlign,
161
165
  textOverflow,
162
166
  truncate,
163
167
  screenReaderOnly
@@ -172,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
172
176
  padding: 0;
173
177
  white-space: ${truncate ? "nowrap" : whiteSpace};
174
178
  word-wrap: ${wordWrap};
179
+ text-align: ${textAlign};
175
180
  text-overflow: ${truncate ? "ellipsis" : textOverflow};
176
181
  ${truncate && (0, _styledComponents.css)`
177
182
  overflow: hidden;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "121.1.0",
3
+ "version": "121.2.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",