carbon-react 119.10.1 → 119.11.0

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -7,9 +7,13 @@ exports.StyledTitleContent = exports.StyledTabTitleLink = exports.StyledTabTitle
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 var _validationIcon = _interopRequireDefault(require("../../../../__internal__/validations/validation-icon.style"));
+var _addFocusStyling = _interopRequireDefault(require("../../../../style/utils/add-focus-styling"));
 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; }
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledTitleContent = _styledComponents.default.span`
   outline: none;
   display: inline-block;
@@ -272,7 +276,7 @@ const tabTitleStyles = (0, _styledComponents.css)`
 
     ${position === "top" && (0, _styledComponents.css)`
       ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
-        &:nth-of-type(n + 1) {
+        &:nth-of-type(n + 1):not(:first-of-type) {
           margin-left: -1px;
         }
         &:first-child {
@@ -282,7 +286,7 @@ const tabTitleStyles = (0, _styledComponents.css)`
     `}
     ${position === "left" && (0, _styledComponents.css)`
       ${borders && (0, _styledComponents.css)`
-        &:nth-of-type(n + 1) {
+        &:nth-of-type(n + 1):not(:first-of-type) {
           margin-top: -1px;
         }
         &:first-child {
@@ -322,7 +326,9 @@ const tabTitleStyles = (0, _styledComponents.css)`
     `}
 
     &:focus {
-      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+      ${({
+  theme
+}) => `${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}`}
       z-index: 2;
 
       ${isInSidebar && (0, _styledComponents.css)`
@@ -463,18 +469,18 @@ const StyledSelectedIndicator = _styledComponents.default.div`
     ${position === "top" && (0, _styledComponents.css)`
       bottom: 0px;
       left: 0px;
+      right: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing025)) 0px
         var(--colorsActionMajor500);
-      width: 100%;
       height: var(--sizing025);
     `}
 
     ${position === "left" && (0, _styledComponents.css)`
       top: 0px;
+      bottom: 0px;
       right: 0px;
       box-shadow: inset calc(-1 * var(--sizing025)) 0px 0px 0px
         var(--colorsActionMajor500);
-      height: 100%;
       width: var(--sizing025);
     `}
   `}

package/lib/components/tabs/__internal__/tabs-header/tabs-header.component.js

@@ -64,7 +64,9 @@ const TabsHeader = ({
     rightScrollOpacity: rightScrollOpacity,
     isScrollable: isScrollable,
     ref: ref
-  }, position === "top" ? /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorderWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorder, null)), children) : children));
+  }, position === "top" ? /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorderWrapper, null, /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledTabsBottomBorder, null)), children) : /*#__PURE__*/_react.default.createElement(_tabsHeader.StyledVerticalTabsWrapper, {
+    isInSidebar: isInSidebar
+  }, children)));
 };
 var _default = TabsHeader;
 exports.default = _default;

package/lib/{src/components → components}/tabs/__internal__/tabs-header/tabs-header.style.d.ts

@@ -8,6 +8,8 @@ export interface StyledTabsHeaderListProps extends Pick<TabHeaderProps, "align"
 }
 declare const StyledTabsHeaderList: import("styled-components").StyledComponent<"div", any, StyledTabsHeaderListProps, never>;
 declare const StyledTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledVerticalTabsWrapperProps = Pick<TabHeaderProps, "isInSidebar">;
+declare const StyledVerticalTabsWrapper: import("styled-components").StyledComponent<"div", any, StyledVerticalTabsWrapperProps, never>;
 declare const StyledTabsBottomBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledTabsBottomBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, };
+export { StyledTabsHeaderWrapper, StyledTabsHeaderList, StyledTabsWrapper, StyledTabsBottomBorderWrapper, StyledTabsBottomBorder, StyledVerticalTabsWrapper, };

package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTabsWrapper = exports.StyledTabsHeaderWrapper = exports.StyledTabsHeaderList = exports.StyledTabsBottomBorderWrapper = exports.StyledTabsBottomBorder = void 0;
+exports.StyledVerticalTabsWrapper = exports.StyledTabsWrapper = exports.StyledTabsHeaderWrapper = exports.StyledTabsHeaderList = exports.StyledTabsBottomBorderWrapper = exports.StyledTabsBottomBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,7 +15,6 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
   position,
   isInSidebar
 }) => position === "left" && (0, _styledComponents.css)`
-      overflow-y: auto;
       box-sizing: border-box;
       padding: 3px;
 
@@ -26,6 +25,7 @@ const StyledTabsHeaderWrapper = _styledComponents.default.div`
 
       ${!isInSidebar && (0, _styledComponents.css)`
         min-width: 20%;
+        overflow-y: auto;
       `}
 
       ${isInSidebar && (0, _styledComponents.css)`
@@ -139,12 +139,25 @@ StyledTabsHeaderList.defaultProps = {
   theme: _base.default
 };
 const StyledTabsWrapper = _styledComponents.default.div`
+  margin: 3px;
   position: relative;
   min-width: max-content;
   width: 100%;
   height: 100%;
 `;
 exports.StyledTabsWrapper = StyledTabsWrapper;
+const StyledVerticalTabsWrapper = _styledComponents.default.div`
+  margin: 3px;
+  ${({
+  isInSidebar
+}) => isInSidebar && (0, _styledComponents.css)`
+      margin-left: 6px;
+      margin-top: 6px;
+    `}
+  display: flex;
+  flex-direction: column;
+`;
+exports.StyledVerticalTabsWrapper = StyledVerticalTabsWrapper;
 const StyledTabsBottomBorderWrapper = _styledComponents.default.div`
   position: absolute;
   width: 100%;

package/lib/components/tabs/tabs.style.js

@@ -33,9 +33,12 @@ const StyledTabs = _styledComponents.default.div`
 
       ${!isInSidebar && (0, _styledComponents.css)`
         display: flex;
+        width: 100%;
       `}
 
-      width: 100%;
+      ${isInSidebar && (0, _styledComponents.css)`
+        width: 99%;
+      `}
     `}
   `}
 

package/lib/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _icon = _interopRequireDefault(require("../../../../icon/icon.style"));
+var _themes = require("../../../../../style/themes");
+var _addFocusStyling = _interopRequireDefault(require("../../../../../style/utils/add-focus-styling"));
 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; }
@@ -25,12 +27,22 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
   }
 
   ${({
-  isActive
+  isActive,
+  theme
 }) => (0, _styledComponents.css)`
     :focus,
     :active {
-      outline: 2px solid var(--colorsSemanticFocus500);
-      outline-offset: -2px;
+      z-index: 1;
+      postion: relative;
+      ${theme.focusRedesignOptOut && /* istanbul ignore next */
+(0, _styledComponents.css)`
+        outline: 2px solid var(--colorsSemanticFocus500);
+        outline-offset: -2px;
+      `}
+
+      ${!theme.focusRedesignOptOut && (0, _styledComponents.css)`
+        ${(0, _addFocusStyling.default)()}
+      `}
       border-radius: var(--borderRadius050);
     }
 
@@ -44,5 +56,8 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
     `}
   `}
 `;
+StyledToolbarButton.defaultProps = {
+  theme: _themes.baseTheme
+};
 var _default = StyledToolbarButton;
 exports.default = _default;

package/lib/components/text-editor/text-editor.style.js

@@ -8,6 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _browserTypeCheck = require("../../__internal__/utils/helpers/browser-type-check");
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 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; }
@@ -70,15 +71,18 @@ exports.StyledEditorContainer = StyledEditorContainer;
 const StyledEditorOutline = _styledComponents.default.div`
   ${({
   isFocused,
-  hasError
+  hasError,
+  theme
 }) => (0, _styledComponents.css)`
     border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 
     ${isFocused && (0, _styledComponents.css)`
-      outline: 3px solid var(--colorsSemanticFocus500);
-      outline-offset: ${hasError ? "2px;" : "1px;"};
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : `
+        outline: 3px solid var(--colorsSemanticFocus500);
+        outline-offset: ${hasError ? "2px" : "1px"};
+      `}
     `}
   `}
 `;

package/lib/components/tile-select/tile-select.style.js

@@ -11,6 +11,7 @@ var _input = require("../../__internal__/input");
 var _fieldset2 = require("../fieldset/fieldset.style");
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _themes = require("../../style/themes");
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 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; }
@@ -68,10 +69,14 @@ const StyledTileSelect = _styledComponents.default.div`
     `}
 `;
 exports.StyledTileSelect = StyledTileSelect;
+const oldFocusStyling = `
+  outline: solid 3px var(--colorsSemanticFocus500);
+`;
 const StyledFocusWrapper = _styledComponents.default.div`
   ${({
   checked,
-  hasFocus
+  hasFocus,
+  theme
 }) => (0, _styledComponents.css)`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
@@ -84,7 +89,7 @@ const StyledFocusWrapper = _styledComponents.default.div`
     `}
 
     ${hasFocus && (0, _styledComponents.css)`
-      outline: 3px solid var(--colorsSemanticFocus500);
+      ${!theme.focusRedesignOptOut ? (0, _addFocusStyling.default)() : /* istanbul ignore next */oldFocusStyling}
       z-index: 15;
     `}
   `}

package/lib/components/vertical-menu/vertical-menu.style.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledVerticalMenuItem = exports.StyledVerticalMenuFullScreen = exports.StyledVerticalMenu = exports.StyledTitleIcon = exports.StyledTitle = exports.StyledList = exports.StyledChevronIcon = exports.StyledAdornment = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _icon2 = _interopRequireDefault(require("../icon"));
 var _box = _interopRequireDefault(require("../box"));
@@ -18,6 +20,10 @@ const StyledList = _styledComponents.default.ul`
   padding: 0;
 `;
 exports.StyledList = StyledList;
+const oldFocusStyling = `
+  outline: 3px solid var(--colorsSemanticFocus500);
+  outline-offset: -3px;
+`;
 const StyledVerticalMenuItem = _styledComponents.default.div`
   min-height: ${({
   height
@@ -42,8 +48,9 @@ const StyledVerticalMenuItem = _styledComponents.default.div`
   }
 
   &:focus {
-    outline: 3px solid var(--colorsSemanticFocus500);
-    outline-offset: -3px;
+    ${({
+  theme
+}) => !theme.focusRedesignOptOut ? (0, _addFocusStyling.default)(true) : /* istanbul ignore next */oldFocusStyling}
   }
 
   ${({
@@ -73,6 +80,9 @@ const StyledVerticalMenuItem = _styledComponents.default.div`
   }
 `;
 exports.StyledVerticalMenuItem = StyledVerticalMenuItem;
+StyledVerticalMenuItem.defaultProps = {
+  theme: _base.default
+};
 const StyledTitle = _styledComponents.default.h3`
   font-weight: 600;
   font-size: 14px;

package/lib/{src/style → style}/design-tokens/generate-css-variables.util.d.ts

@@ -7,5 +7,5 @@ import { ThemeObject } from "../themes/base";
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOupt?: boolean) => string;
+declare const _default: (theme: ThemeObject | Record<string, string>, roundedCornersOptOut?: boolean) => string;
 export default _default;

package/lib/style/design-tokens/generate-css-variables.util.js

@@ -12,8 +12,8 @@ exports.default = void 0;
  * form of CSS variables along with styled-components ThemeProvider.
  *
  */
-var _default = (theme, roundedCornersOptOupt) => Object.entries(theme).map(([key, value]) => {
-  if (roundedCornersOptOupt && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
+var _default = (theme, roundedCornersOptOut) => Object.entries(theme).map(([key, value]) => {
+  if (roundedCornersOptOut && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
     return `--${key}: 0px;`;
   }
   return `--${key}: ${value};`;

package/lib/style/utils/add-focus-styling.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (inset?: boolean) => string;
+export default _default;

package/lib/style/utils/add-focus-styling.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = (inset = false) => {
+  let focusStyling = "0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090)";
+  if (inset) {
+    focusStyling = "inset 0px 0px 0px var(--borderWidth300) var(--colorsUtilityYin090), inset 0px 0px 0px var(--borderWidth600) var(--colorsSemanticFocus500)";
+  }
+  return `
+    -webkit-appearance: none;
+    -webkit-box-shadow: ${focusStyling};
+    box-shadow: ${focusStyling};
+
+    outline: transparent 3px solid;
+  `;
+};
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.10.1",
+  "version": "119.11.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/esm/playwright/components/badge/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const badge: (page: Page) => import("playwright-core").Locator;
-declare const badgeCounter: (page: Page) => import("playwright-core").Locator;
-declare const badgeCrossIcon: (page: Page) => import("playwright-core").Locator;
-export { badge, badgeCounter, badgeCrossIcon };

package/esm/playwright/components/badge/locators.d.ts

@@ -1,3 +0,0 @@
-export declare const BADGE = "[data-component=\"badge\"]";
-export declare const BADGE_COUNTER = "[data-element=\"badge-counter\"]";
-export declare const BADGE_CROSS_ICON = "[data-element=\"badge-cross-icon\"]";

package/esm/playwright/components/breadcrumbs/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const breadcrumbsComponent: (page: Page) => import("playwright-core").Locator;
-declare const allCrumbs: (page: Page) => import("playwright-core").Locator;
-declare const crumbAtIndex: (page: Page, index: number) => import("playwright-core").Locator;
-export { breadcrumbsComponent, allCrumbs, crumbAtIndex };

package/esm/playwright/components/breadcrumbs/locators.d.ts

@@ -1,2 +0,0 @@
-declare const BREADCRUMBS = "[data-component=\"breadcrumbs\"]";
-export default BREADCRUMBS;

package/esm/playwright/components/button/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const buttonDataComponent: (page: Page) => import("playwright-core").Locator;
-declare const buttonSubtextPreview: (page: Page) => import("playwright-core").Locator;
-declare const buttonMinorComponent: (page: Page, index?: number) => import("playwright-core").Locator;
-export { buttonDataComponent, buttonSubtextPreview, buttonMinorComponent };

package/esm/playwright/components/button/locators.d.ts

@@ -1,3 +0,0 @@
-export declare const BUTTON_SUBTEXT_PREVIEW = "[data-element=\"subtext\"]";
-export declare const BUTTON_DATA_COMPONENT_PREVIEW = "[data-component=\"button\"]";
-export declare const BUTTON_MINOR_COMPONENT = "[data-component=\"button-minor\"]";

package/esm/playwright/components/index.d.ts

@@ -1,3 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const icon: (page: Page) => import("playwright-core").Locator;
-export default icon;

package/esm/playwright/components/loader/index.d.ts

@@ -1,4 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const loader: (page: Page, index: number) => import("playwright-core").Locator;
-declare const loaderInsideButton: (page: Page) => import("playwright-core").Locator;
-export { loader, loaderInsideButton };

package/esm/playwright/components/loader/locators.d.ts

@@ -1,2 +0,0 @@
-declare const LOADER = "[data-component=\"loader\"]";
-export default LOADER;

package/esm/playwright/components/locators.d.ts

@@ -1,21 +0,0 @@
-export declare const CLOSE_ICON_BUTTON = "button[data-element=\"close\"]";
-export declare const HELP_ICON_PREVIEW = "[data-component=\"help\"]";
-export declare const TOOLTIP_PREVIEW = "[data-component=\"tooltip\"]";
-export declare const FIELD_HELP_PREVIEW = "span[data-element=\"help\"]";
-export declare const DLS_ROOT = "#root";
-export declare const BODY = "body";
-export declare const BACKGROUND_UI_LOCATOR = "div[data-element=\"modal-background\"]";
-export declare const LINK = "[data-component=\"link\"]";
-export declare const ICON = "[data-component=\"icon\"]";
-export declare const ERROR_ICON = "[data-element=\"error\"]";
-export declare const WARNING_ICON = "[data-component=\"icon\"][data-element=\"warning\"]";
-export declare const INFO_ICON = "[data-component=\"icon\"][data-element=\"info\"]";
-export declare const COMMMON_DATA_ELEMENT_INPUT = "input[data-element=\"input\"]";
-export declare const LABEL = "[data-element=\"label\"]";
-export declare const COMMON_INPUT = ".common-input__";
-export declare const BUTTON = "button[type=\"button\"]";
-export declare const COMMON_INPUT_PREFIX = "[data-element=\"textbox-prefix\"]";
-export declare const COMMON_INPUT_CHARACTER_LIMIT = "div[data-element=\"character-limit\"]";
-export declare const PORTAL = ".carbon-portal";
-export declare const LEGEND = "legend";
-export declare const STICKY_FOOTER = "[data-component=\"sticky-footer\"]";

package/esm/playwright/support/constants.d.ts

@@ -1,25 +0,0 @@
-export declare const SIZE: {
-    readonly EXTRASMALL: "extra-small";
-    readonly SMALL: "small";
-    readonly MEDIUMSMALL: "medium-small";
-    readonly MEDIUM: "medium";
-    readonly MEDIUMLARGE: "medium-large";
-    readonly LARGE: "large";
-    readonly EXTRALARGE: "extra-large";
-};
-export declare const VALIDATION: {
-    readonly ERROR: "rgb(203, 55, 74)";
-    readonly WARNING: "rgb(239, 103, 0)";
-    readonly INFO: "rgb(0, 96, 167)";
-};
-export declare const COLOR: {
-    readonly BLACK: "rgb(0, 0, 0)";
-    readonly RED: "rgb(205, 56, 75)";
-    readonly ORANGE: "rgb(255, 156, 75)";
-    readonly BROWN: "rgb(105, 61, 57)";
-};
-export declare const CHARACTERS: {
-    readonly DIACRITICS: "mp150ú¿¡üßä";
-    readonly SPECIALCHARACTERS: "!@#$%^*()_+-=~[];:.,?{}&\"'<>";
-    readonly STANDARD: "cypress_data";
-};

package/esm/playwright/support/helper.d.ts

@@ -1,25 +0,0 @@
-import type { Locator, Page } from "@playwright/test";
-/**
- * Retrieve a computed style for an element.
- * @param locator The Playwright locator to evaluate (see: https://playwright.dev/docs/locators)
- * @param cssProp The CSS property for the style to retrieve
- * @returns a Promise for the style value
- * @example await getStyle(locator, "width");
- */
-export declare const getStyle: (locator: Locator, cssProp: string) => Promise<string>;
-/**
- * Check the accessibility rules for an element.
- * @param {Page} page
- * @example await checkAccessibility(page);
- */
-export declare const checkAccessibility: (page: Page) => Promise<void>;
-declare type OutlineType = "outline" | "border" | "border-top" | "border-bottom" | "border-left" | "border-right";
-/**
- * Asserts if an element has the correct golden outline used as a focus indicator
- * @param element Target element as a Playwright locator
- * @param outlinePixelWidth
- * @param outline
- * @example await checkGoldenOutline(locator);
- */
-export declare const checkGoldenOutline: (element: Locator, outlinePixelWidth?: string, outline?: OutlineType) => Promise<void>;
-export {};

package/esm/src/components/badge/badge.pw.d.ts

@@ -1 +0,0 @@
-export {};

package/esm/src/components/badge/components.test-pw.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { BadgeProps } from "./badge.component";
-declare const BadgeComponent: (props: Partial<BadgeProps>) => React.JSX.Element;
-export default BadgeComponent;

package/esm/src/components/breadcrumbs/breadcrumbs.pw.d.ts

@@ -1 +0,0 @@
-export {};

package/esm/src/components/breadcrumbs/components.test-pw.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { BreadcrumbsProps } from ".";
-import { CrumbProps } from "./crumb";
-declare const Default: (props: Partial<BreadcrumbsProps>) => React.JSX.Element;
-declare const DefaultCrumb: (props: Partial<CrumbProps>) => React.JSX.Element;
-export { Default, DefaultCrumb };

package/esm/src/components/button-bar/button-bar.pw.d.ts

@@ -1 +0,0 @@
-export {};

package/esm/src/components/button-bar/components.test-pw.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { ButtonBarProps } from ".";
-declare const DefaultWithWrapper: (args: Partial<ButtonBarProps>) => React.JSX.Element;
-declare const ButtonBarWithMinorButtonChildren: () => React.JSX.Element;
-declare const Default: (args: Partial<ButtonBarProps>) => React.JSX.Element;
-declare const DefaultWithButtonMinor: (args: Partial<ButtonBarProps>) => React.JSX.Element;
-export { Default, DefaultWithWrapper, ButtonBarWithMinorButtonChildren, DefaultWithButtonMinor, };

package/esm/src/components/loader/components.test-pw.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { LoaderProps } from ".";
-declare const LoaderInsideButton: (props: LoaderProps) => React.JSX.Element;
-export default LoaderInsideButton;

package/esm/src/components/loader/loader.pw.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/playwright/components/badge/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const badge: (page: Page) => import("playwright-core").Locator;
-declare const badgeCounter: (page: Page) => import("playwright-core").Locator;
-declare const badgeCrossIcon: (page: Page) => import("playwright-core").Locator;
-export { badge, badgeCounter, badgeCrossIcon };

package/lib/playwright/components/badge/locators.d.ts

@@ -1,3 +0,0 @@
-export declare const BADGE = "[data-component=\"badge\"]";
-export declare const BADGE_COUNTER = "[data-element=\"badge-counter\"]";
-export declare const BADGE_CROSS_ICON = "[data-element=\"badge-cross-icon\"]";

package/lib/playwright/components/breadcrumbs/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const breadcrumbsComponent: (page: Page) => import("playwright-core").Locator;
-declare const allCrumbs: (page: Page) => import("playwright-core").Locator;
-declare const crumbAtIndex: (page: Page, index: number) => import("playwright-core").Locator;
-export { breadcrumbsComponent, allCrumbs, crumbAtIndex };

package/lib/playwright/components/breadcrumbs/locators.d.ts

@@ -1,2 +0,0 @@
-declare const BREADCRUMBS = "[data-component=\"breadcrumbs\"]";
-export default BREADCRUMBS;

package/lib/playwright/components/button/index.d.ts

@@ -1,5 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const buttonDataComponent: (page: Page) => import("playwright-core").Locator;
-declare const buttonSubtextPreview: (page: Page) => import("playwright-core").Locator;
-declare const buttonMinorComponent: (page: Page, index?: number) => import("playwright-core").Locator;
-export { buttonDataComponent, buttonSubtextPreview, buttonMinorComponent };

package/lib/playwright/components/button/locators.d.ts

@@ -1,3 +0,0 @@
-export declare const BUTTON_SUBTEXT_PREVIEW = "[data-element=\"subtext\"]";
-export declare const BUTTON_DATA_COMPONENT_PREVIEW = "[data-component=\"button\"]";
-export declare const BUTTON_MINOR_COMPONENT = "[data-component=\"button-minor\"]";

package/lib/playwright/components/index.d.ts

@@ -1,3 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const icon: (page: Page) => import("playwright-core").Locator;
-export default icon;

package/lib/playwright/components/loader/index.d.ts

@@ -1,4 +0,0 @@
-import type { Page } from "@playwright/test";
-declare const loader: (page: Page, index: number) => import("playwright-core").Locator;
-declare const loaderInsideButton: (page: Page) => import("playwright-core").Locator;
-export { loader, loaderInsideButton };

package/lib/playwright/components/loader/locators.d.ts

@@ -1,2 +0,0 @@
-declare const LOADER = "[data-component=\"loader\"]";
-export default LOADER;

package/lib/playwright/components/locators.d.ts

@@ -1,21 +0,0 @@
-export declare const CLOSE_ICON_BUTTON = "button[data-element=\"close\"]";
-export declare const HELP_ICON_PREVIEW = "[data-component=\"help\"]";
-export declare const TOOLTIP_PREVIEW = "[data-component=\"tooltip\"]";
-export declare const FIELD_HELP_PREVIEW = "span[data-element=\"help\"]";
-export declare const DLS_ROOT = "#root";
-export declare const BODY = "body";
-export declare const BACKGROUND_UI_LOCATOR = "div[data-element=\"modal-background\"]";
-export declare const LINK = "[data-component=\"link\"]";
-export declare const ICON = "[data-component=\"icon\"]";
-export declare const ERROR_ICON = "[data-element=\"error\"]";
-export declare const WARNING_ICON = "[data-component=\"icon\"][data-element=\"warning\"]";
-export declare const INFO_ICON = "[data-component=\"icon\"][data-element=\"info\"]";
-export declare const COMMMON_DATA_ELEMENT_INPUT = "input[data-element=\"input\"]";
-export declare const LABEL = "[data-element=\"label\"]";
-export declare const COMMON_INPUT = ".common-input__";
-export declare const BUTTON = "button[type=\"button\"]";
-export declare const COMMON_INPUT_PREFIX = "[data-element=\"textbox-prefix\"]";
-export declare const COMMON_INPUT_CHARACTER_LIMIT = "div[data-element=\"character-limit\"]";
-export declare const PORTAL = ".carbon-portal";
-export declare const LEGEND = "legend";
-export declare const STICKY_FOOTER = "[data-component=\"sticky-footer\"]";