carbon-react 120.1.0 → 120.2.0

package/esm/__spec_helper__/test-utils.js

@@ -105,10 +105,14 @@ export const getDefaultValue = value => {
 };
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = mount(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct margins", () => {
       let margin;
       let marginLeft;
@@ -153,10 +157,14 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 };
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = mount(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct paddings", () => {
       let padding;
       let paddingLeft;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -96,8 +96,10 @@ const ButtonToggleGroup = ({
       // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
       // get called with null when the component is about to be unmounted, and it has been unmounted by the time
       // the setTimeout completes
+      /* istanbul ignore else */
       if (button) {
         const innerButtons = getInnerButtons();
+        /* istanbul ignore if */
         if (!innerButtons) {
           setFirstButton(undefined);
         } else if (button === innerButtons[0]) {

package/esm/components/heading/heading.style.d.ts

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "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;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/typography/typography.component.d.ts

@@ -44,9 +44,12 @@ export interface TypographyProps extends SpaceProps, TagProps {
     opacity?: string | number;
     /** @private @ignore */
     className?: string;
+    /** Set whether it will be visually hidden
+     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
+    screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "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;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -27,6 +27,7 @@ export const Typography = ({
   opacity,
   children,
   className,
+  screenReaderOnly,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
@@ -48,7 +49,8 @@ export const Typography = ({
     backgroundColor: backgroundColor,
     bg: bg,
     opacity: opacity,
-    className: className
+    className: className,
+    screenReaderOnly: screenReaderOnly
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";

package/esm/components/typography/typography.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import styledColor from "../../style/utils/color";
 import baseTheme from "../../style/themes/base";
+import visuallyHidden from "../../style/utils/visually-hidden";
 const getAs = variant => {
   switch (variant) {
     case "h1-large":
@@ -149,7 +150,8 @@ const StyledTypography = styled.span.attrs(({
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
+  truncate,
+  screenReaderOnly
 }) => css`
     font-style: normal;
     font-size: ${size};
@@ -165,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
     ${truncate && css`
       overflow: hidden;
     `};
+    ${screenReaderOnly && visuallyHidden}
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};

package/lib/__spec_helper__/test-utils.js

@@ -133,10 +133,14 @@ const getDefaultValue = value => {
 exports.getDefaultValue = getDefaultValue;
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = (0, _enzyme.mount)(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct margins", () => {
       let margin;
       let marginLeft;
@@ -182,10 +186,14 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 exports.testStyledSystemMargin = testStyledSystemMargin;
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component({
-      ...defaults
-    }));
-    const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    let wrapper;
+    let StyleElement;
+    beforeAll(() => {
+      wrapper = (0, _enzyme.mount)(component({
+        ...defaults
+      }));
+      StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+    });
     it("should set the correct paddings", () => {
       let padding;
       let paddingLeft;

package/lib/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -106,8 +106,10 @@ const ButtonToggleGroup = ({
       // guard needed to avoid warnings about setting state on an unmounted component - the callback ref will
       // get called with null when the component is about to be unmounted, and it has been unmounted by the time
       // the setTimeout completes
+      /* istanbul ignore else */
       if (button) {
         const innerButtons = getInnerButtons();
+        /* istanbul ignore if */
         if (!innerButtons) {
           setFirstButton(undefined);
         } else if (button === innerButtons[0]) {

package/lib/components/heading/heading.style.d.ts

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "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;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/typography/typography.component.d.ts

@@ -44,9 +44,12 @@ export interface TypographyProps extends SpaceProps, TagProps {
     opacity?: string | number;
     /** @private @ignore */
     className?: string;
+    /** Set whether it will be visually hidden
+     * NOTE: This is for screen readers only and will make a lot of the other props redundant */
+    screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "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;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -34,6 +34,7 @@ const Typography = ({
   opacity,
   children,
   className,
+  screenReaderOnly,
   ...rest
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
@@ -55,7 +56,8 @@ const Typography = ({
     backgroundColor: backgroundColor,
     bg: bg,
     opacity: opacity,
-    className: className
+    className: className,
+    screenReaderOnly: screenReaderOnly
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
 };
 exports.Typography = Typography;

package/lib/components/typography/typography.style.js

@@ -8,6 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _color = _interopRequireDefault(require("../../style/utils/color"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -158,7 +159,8 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
+  truncate,
+  screenReaderOnly
 }) => (0, _styledComponents.css)`
     font-style: normal;
     font-size: ${size};
@@ -174,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     ${truncate && (0, _styledComponents.css)`
       overflow: hidden;
     `};
+    ${screenReaderOnly && _visuallyHidden.default}
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "120.1.0",
+  "version": "120.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -38,7 +38,8 @@
     "prepare": "husky install",
     "test:ct": "playwright test -c playwright-ct.config.ts",
     "test:ct:ui": "playwright test --ui -c playwright-ct.config.ts",
-    "test:ct:report": "npx playwright show-report"
+    "test:ct:report": "npx playwright show-report",
+    "clear-playwright-cache": "rimraf ./playwright/.cache"
   },
   "repository": {
     "type": "git",