@dxc-technology/halstack-react 0.0.0-a7970fd → 0.0.0-a799608

package/quick-nav-container/HeadingLink.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type HeadingLinkProps = {
-    children: string;
-    level?: 1 | 2 | 3 | 4 | 5;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5";
-};
-declare function HeadingLink({ children, level, as }: HeadingLinkProps): JSX.Element;
-export default HeadingLink;

package/quick-nav-container/HeadingLink.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _slugify = _interopRequireDefault(require("slugify"));
-
-var _Heading = _interopRequireDefault(require("../heading/Heading"));
-
-var _templateObject, _templateObject2;
-
-function HeadingLink(_ref) {
-  var children = _ref.children,
-      level = _ref.level,
-      as = _ref.as;
-  var elementId = (0, _slugify["default"])(children, {
-    lower: true
-  });
-  return /*#__PURE__*/_react["default"].createElement(HeadingLinkContainer, {
-    id: elementId
-  }, /*#__PURE__*/_react["default"].createElement(HeadingAnchor, {
-    href: "#".concat(elementId)
-  }, linkIcon), /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-    weight: "bold",
-    text: children,
-    level: level,
-    as: as
-  }));
-}
-
-var linkIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  "aria-hidden": "true",
-  role: "img",
-  viewBox: "0 0 16 16",
-  width: "16",
-  height: "16",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  fillRule: "evenodd",
-  d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"
-}));
-
-var HeadingLinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  scroll-margin-top: 64px;\n  &:hover svg {\n    opacity: 0.5;\n  }\n"])));
-
-var HeadingAnchor = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: inherit;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 8px;\n  margin-left: -32px;\n  & svg {\n    width: 16px;\n    height: 16px;\n    opacity: 0;\n  }\n  &:focus {\n    outline-color: #0095ff;\n    outline-offset: -0.25rem;\n    svg {\n      opacity: 0.5;\n    }\n  }\n"])));
-
-var _default = HeadingLink;
-exports["default"] = _default;

package/quick-nav-container/QuickNavContainer.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import QuickNavContainerTypes from "./types";
-declare const DxcQuickNavContainer: ({ title, sections, startHeadingLevel }: QuickNavContainerTypes) => JSX.Element;
-export default DxcQuickNavContainer;

package/quick-nav-container/QuickNavContainer.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _QuickNav = _interopRequireDefault(require("../quick-nav/QuickNav"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _Section = _interopRequireDefault(require("./Section"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
-var DxcQuickNavContainer = function DxcQuickNavContainer(_ref) {
-  var title = _ref.title,
-      sections = _ref.sections,
-      _ref$startHeadingLeve = _ref.startHeadingLevel,
-      startHeadingLevel = _ref$startHeadingLeve === void 0 ? 1 : _ref$startHeadingLeve;
-
-  var getSubSectionsLinks = function getSubSectionsLinks(sections) {
-    var linksList = [];
-    sections.map(function (section) {
-      if (section.subSections) {
-        linksList.push({
-          label: section.title,
-          links: getSubSectionsLinks(section.subSections)
-        });
-      } else {
-        linksList.push({
-          label: section.title
-        });
-      }
-    });
-    return linksList;
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xlarge"
-  }, sections.map(function (section) {
-    return /*#__PURE__*/_react["default"].createElement(_Section["default"], {
-      title: section.title,
-      subSections: section.subSections,
-      level: startHeadingLevel,
-      key: "section-".concat(section.title)
-    }, section.content);
-  }))), /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_QuickNav["default"], {
-    title: title,
-    links: getSubSectionsLinks(sections)
-  })));
-};
-
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"])));
-
-var ContentContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-
-var QuickNavContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: calc(100vh - 150px);\n  position: sticky;\n  width: 300px;\n"])));
-
-var _default = DxcQuickNavContainer;
-exports["default"] = _default;

package/quick-nav-container/Section.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-declare type SectionType = {
-    title: string;
-    level?: 1 | 2 | 3 | 4 | 5;
-    subSections?: SectionType[];
-    children?: React.ReactNode;
-};
-declare const Section: ({ title, subSections, level, children }: SectionType) => JSX.Element;
-export default Section;

package/quick-nav-container/Section.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _HeadingLink = _interopRequireDefault(require("./HeadingLink"));
-
-// @ts-nocheck
-var Section = function Section(_ref) {
-  var title = _ref.title,
-      subSections = _ref.subSections,
-      level = _ref.level,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: level === 1 ? "xlarge" : level === 2 ? "large" : "medium"
-  }, /*#__PURE__*/_react["default"].createElement(_HeadingLink["default"], {
-    level: level
-  }, title), children, subSections === null || subSections === void 0 ? void 0 : subSections.map(function (subSection) {
-    return /*#__PURE__*/_react["default"].createElement(Section, {
-      key: "subSection-".concat(subSection.title),
-      title: subSection.title,
-      subSections: subSection.subSections,
-      level: level + 1 <= 5 ? level + 1 : 5
-    }, subSection.content);
-  }));
-};
-
-var _default = Section;
-exports["default"] = _default;

package/quick-nav-container/types.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Title of the quick nav component.
-     */
-    title: string;
-    /**
-     * Sections to be shown as the content of the quick nav container.
-     */
-    sections: SectionType[];
-    /**
-     * The level of the first heading of the content.
-     */
-    startHeadingLevel?: 1 | 2 | 3 | 4 | 5;
-};
-declare type SectionType = {
-    /**
-     * Title of each section.
-     */
-    title: string;
-    /**
-     * Level of each section.
-     */
-    level?: 1 | 2 | 3 | 4 | 5;
-    /**
-     * Content of each section.
-     */
-    content?: React.ReactNode;
-    /**
-     * Subsections of each section.
-     */
-    subSections?: SectionType[];
-};
-export default Props;

package/radio/Radio.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import RadioPropsType from "./types";
-declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
-export default DxcRadio;

package/radio/Radio.js

@@ -1,173 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
-
-var _templateObject, _templateObject2;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
-
-var DxcRadio = function DxcRadio(_ref) {
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      value = _ref.value,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
-      name = _ref.name,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onClick = _ref.onClick,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerChecked = _useState2[0],
-      setInnerChecked = _useState2[1];
-
-  var colorsTheme = (0, _useTheme["default"])();
-  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
-
-  var handlerRadioChange = function handlerRadioChange() {
-    if (checked == null) {
-      setInnerChecked(true);
-    }
-
-    if (typeof onClick === "function") {
-      onClick(true);
-    }
-  };
-
-  var labelComponent = /*#__PURE__*/_react["default"].createElement(LabelContainer, {
-    checked: checked || innerChecked,
-    disabled: disabled,
-    onClick: !disabled && handlerRadioChange || null,
-    backgroundType: backgroundType
-  }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label);
-
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.radio
-  }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
-    id: name,
-    labelPosition: labelPosition,
-    disabled: disabled,
-    margin: margin,
-    size: size,
-    backgroundType: backgroundType
-  }, labelPosition === "before" && labelComponent, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-    checked: checked != null && checked || innerChecked,
-    name: name,
-    onClick: handlerRadioChange,
-    value: value,
-    disabled: disabled,
-    disableRipple: true
-  }), labelPosition === "after" && labelComponent));
-};
-
-var sizes = {
-  small: "120px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%",
-  fitContent: "unset"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  max-height: 42px;\n  position: relative;\n  vertical-align: top;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n  .MuiButtonBase-root {\n    width: auto;\n    height: auto;\n    padding: 10px;\n    margin: 2px;\n    ", ": ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    .MuiIconButton-label {\n      .MuiSvgIcon-root {\n        height: ", ";\n        width: ", ";\n      }\n      color: ", ";\n\n      > div > :nth-child(2) path {\n        color: ", ";\n      }\n    }\n\n    &.Mui-focusVisible {\n      background-color: transparent;\n      .MuiSvgIcon-root {\n        outline: ", "\n          auto 1px;\n      }\n    }\n    :hover {\n      background-color: transparent;\n    }\n    .MuiTouchRipple-ripple {\n      height: 40px !important;\n      width: 40px !important;\n      top: 0px !important;\n      left: 0px !important;\n    }\n  }\n  .MuiRadio-colorSecondary.Mui-checked {\n    color: ", ";\n    :hover {\n      background-color: transparent;\n    }\n  }\n"])), function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return props.disabled === true ? "not-allowed" : "default";
-}, function (props) {
-  return props.labelPosition === "after" ? "padding-right" : "padding-left";
-}, function (props) {
-  return props.theme.circleLabelSpacing;
-}, function (props) {
-  return props.labelPosition === "after" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "before" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "after" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "before" ? "0px" : "";
-}, function (props) {
-  return props.theme.circleSize;
-}, function (props) {
-  return props.theme.circleSize;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-});
-
-var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  color: ", ";\n  cursor: ", ";\n"])), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontStyle;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
-}, function (props) {
-  return props.disabled === true ? "not-allowed" : "pointer";
-});
-
-var _default = DxcRadio;
-exports["default"] = _default;

package/radio/Radio.stories.tsx

@@ -1,192 +0,0 @@
-import React from "react";
-import DxcRadio from "./Radio";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
-import { userEvent, within } from "@storybook/testing-library";
-
-export default {
-  title: "Radio",
-  component: DxcRadio,
-};
-
-const Radio = () => (
-  <>
-    <>
-      <ExampleContainer>
-        <Title title="Default" theme="light" level={4} />
-        <DxcRadio label="Radio" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Focused" theme="light" level={4} />
-        <DxcRadio label="Focused" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Checked" theme="light" level={4} />
-        <DxcRadio label="Radio" checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Required" theme="light" level={4} />
-        <DxcRadio label="Radio" required />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and checked" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and required" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled required />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled, required and checked" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled required checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Label after" theme="light" level={4} />
-        <DxcRadio label="Radio" labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Checked with label after" theme="light" level={4} />
-        <DxcRadio label="Radio" checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Required with label after" theme="light" level={4} />
-        <DxcRadio label="Radio" required labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and checked with label after" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and required with label after" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled required labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled, required and checked with label after" theme="light" level={4} />
-        <DxcRadio label="Radio" disabled required checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered" theme="light" level={4} />
-        <DxcRadio label="Hovered" />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered and checked" theme="light" level={4} />
-        <DxcRadio label="Hovered" checked />
-      </ExampleContainer>
-    </>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <>
-          <ExampleContainer>
-            <Title title="Default" theme="dark" level={4} />
-            <DxcRadio label="Radio" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Checked" theme="dark" level={4} />
-            <DxcRadio label="Radio" checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Required" theme="dark" level={4} />
-            <DxcRadio label="Radio" required />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and checked" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and required" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled required />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled, required and checked" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled required checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Checked with label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Required with label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" required labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and checked with label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and required with label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled required labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
-            <DxcRadio label="Radio" disabled required checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer pseudoState="pseudo-hover">
-            <Title title="Hovered" theme="dark" level={4} />
-            <DxcRadio label="Hovered" />
-          </ExampleContainer>
-          <ExampleContainer pseudoState="pseudo-hover">
-            <Title title="Hovered and checked" theme="dark" level={4} />
-            <DxcRadio label="Hovered" checked />
-          </ExampleContainer>
-        </>
-      </DarkContainer>
-    </BackgroundColorProvider>
-    <Title title="Sizes" theme="light" level={2} />
-    <ExampleContainer>
-      <DxcRadio label="Small" size="small" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <DxcRadio label="Medium" size="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <DxcRadio label="Large" size="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <DxcRadio label="FitContent" size="fitContent" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <DxcRadio label="FillParent" size="fillParent" />
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall" theme="light" level={4} />
-      <DxcRadio label="Xxsmall" margin={"xxsmall"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall" theme="light" level={4} />
-      <DxcRadio label="Xsmall" margin={"xsmall"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small" theme="light" level={4} />
-      <DxcRadio label="Small" margin={"small"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcRadio label="Medium" margin={"medium"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcRadio label="Large" margin={"large"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge" theme="light" level={4} />
-      <DxcRadio label="Xlarge" margin={"xlarge"} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge" theme="light" level={4} />
-      <DxcRadio label="Xxlarge" margin={"xxlarge"} />
-    </ExampleContainer>
-  </>
-);
-
-export const Chromatic = Radio.bind({});
-Chromatic.play = async () => {
-  await userEvent.tab();
-  await userEvent.tab();
-};