@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e78f5f5

package/switch/Switch.stories.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcSwitch from "./Switch";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DarkContainer from "../../.storybook/components/DarkSection";
+
+export default {
+  title: "Switch",
+  component: DxcSwitch,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="With label after" theme="light" level={4} />
+      <DxcSwitch label="Switch" labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcSwitch />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Checked" theme="light" level={4} />
+      <DxcSwitch label="Switch" checked />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Required" theme="light" level={4} />
+      <DxcSwitch label="Switch" required />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcSwitch label="Switch" disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled required" theme="light" level={4} />
+      <DxcSwitch label="Switch" disabled required labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled checked" theme="light" level={4} />
+      <DxcSwitch label="Switch" disabled checked labelPosition="after" />
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <ExampleContainer>
+          <Title title="With label" theme="dark" level={4} />
+          <DxcSwitch label="Switch" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Checked" theme="dark" level={4} />
+          <DxcSwitch label="Switch" checked />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Required" theme="dark" level={4} />
+          <DxcSwitch label="Switch" required />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled" theme="dark" level={4} />
+          <DxcSwitch label="Switch" disabled />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled required" theme="dark" level={4} />
+          <DxcSwitch label="Switch" disabled required labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled checked" theme="dark" level={4} />
+          <DxcSwitch label="Switch" disabled checked labelPosition="after" />
+        </ExampleContainer>
+      </DarkContainer>
+    </BackgroundColorProvider>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcSwitch label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcSwitch label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcSwitch label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcSwitch label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcSwitch label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcSwitch label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcSwitch label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small size" theme="light" level={4} />
+      <DxcSwitch label="Small" size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size (with large label)" theme="light" level={4} />
+      <DxcSwitch label="Very very very large label or even huge" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size (with long label)" theme="light" level={4} />
+      <DxcSwitch
+        label="Large texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        labelPosition="after"
+        size="medium"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcSwitch label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent size" theme="light" level={4} />
+      <DxcSwitch label="FillParent" size="fillParent" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FitContent size" theme="light" level={4} />
+      <DxcSwitch label="FitContent" size="fitContent" />
+    </ExampleContainer>
+  </>
+);
+
+const Switch = () => (
+  <ExampleContainer>
+    <Title title="Focused" theme="light" level={4} />
+    <DxcSwitch label="Switch" />
+  </ExampleContainer>
+);
+export const FocusedSwitch = Switch.bind({});
+FocusedSwitch.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  canvas.getByRole("checkbox").focus();
+};
+
+const DarkSwitch = () => (
+  <BackgroundColorProvider color="#333333">
+    <DarkContainer>
+      <ExampleContainer>
+        <Title title="Focused" theme="dark" level={4} />
+        <DxcSwitch label="Switch" />
+      </ExampleContainer>
+    </DarkContainer>
+  </BackgroundColorProvider>
+);
+
+export const FocusedSwitchOnDark = DarkSwitch.bind({});
+FocusedSwitchOnDark.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  canvas.getByRole("checkbox").focus();
+};

package/switch/Switch.test.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Switch = _interopRequireDefault(require("./Switch"));
+
+describe("Switch component tests", function () {
+  test("Switch renders with correct text", function () {
+    var onChange = jest.fn(function (returnedValue) {
+      expect(returnedValue).toBe(true);
+    });
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("SwitchComponent")).toBeTruthy();
+  });
+  test("Calls correct function on click", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    _react2.fireEvent.click(getByText("SwitchComponent"));
+
+    expect(onChange).toHaveBeenCalled();
+  });
+  test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render3.getByText;
+
+    _react2.fireEvent.click(getByText("SwitchComponent"));
+
+    _react2.fireEvent.click(getByText("SwitchComponent"));
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(true);
+  });
+  test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      onChange: onChange
+    })),
+        getByText = _render4.getByText;
+
+    _react2.fireEvent.click(getByText("SwitchComponent"));
+
+    _react2.fireEvent.click(getByText("SwitchComponent"));
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(false);
+  });
+});

package/switch/types.d.ts

@@ -0,0 +1,58 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * If true, the component is checked. If undefined, the component will be uncontrolled
+     * and the checked attribute will be managed internally by the component.
+     */
+    checked?: boolean;
+    /**
+     * Will be passed to the value attribute of the html input element. When inside a form,
+     * this value will be only submitted if the switch is checked.
+     */
+    value?: string;
+    /**
+     * Text to be placed next to the switch.
+     */
+    label?: string;
+    /**
+     * Whether the label should appear after or before the switch.
+     */
+    labelPosition?: "before" | "after";
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * This function will be called when the user changes the state of the switch.
+     * The new value of the checked attribute will be passed as a parameter.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * If true, the switch will change its appearence, showing that the value is required.
+     */
+    required?: boolean;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/switch/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/table/Table.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import TablePropsType from "./types";
+declare const DxcTable: ({ children, margin }: TablePropsType) => JSX.Element;
+export default DxcTable;

package/{dist/table → table}/Table.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,39 +21,25 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: ", ";\n  }\n  & td {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th:first-child {\n    border-top-left-radius: ", ";\n  }\n  & th:last-child {\n    border-top-right-radius: ", ";\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-  return data;
-}
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  overflow: hidden auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n"]);
+var _templateObject, _templateObject2;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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); }
 
-  return data;
-}
+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 DxcTable = function DxcTable(_ref) {
   var children = _ref.children,
       margin = _ref.margin;
   var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.table
-  }, _react["default"].createElement(DxcTableContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(DxcTableContainer, {
     margin: margin
-  }, _react["default"].createElement(DxcTableContent, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(DxcTableContent, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.table.dataBackgroundColor
   }, children))));
 };
@@ -62,7 +48,7 @@ var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
-var DxcTableContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var DxcTableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  overflow: auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n"])), function (props) {
   return calculateWidth(props.margin);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -80,7 +66,7 @@ var DxcTableContainer = _styledComponents["default"].div(_templateObject(), func
   return props.theme.scrollBarTrackColor;
 });
 
-var DxcTableContent = _styledComponents["default"].table(_templateObject2(), function (props) {
+var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: ", ";\n  }\n  & td {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th:first-child {\n    border-top-left-radius: ", ";\n  }\n  & th:last-child {\n    border-top-right-radius: ", ";\n  }\n"])), function (props) {
   return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
 }, function (props) {
   return props.theme.dataBackgroundColor;

package/table/Table.stories.jsx

@@ -0,0 +1,277 @@
+import React from "react";
+import DxcTable from "./Table";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Table",
+  component: DxcTable,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcTable>
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With scrollbar" theme="light" level={4} />
+      <div
+        style={{ height: 200 + "px", display: "flex", flexDirection: "row", width: 100 + "%", marginBottom: 50 + "px" }}
+      >
+        <DxcTable>
+          <tr>
+            <th>
+              header<br></br>subheader
+            </th>
+            <th>
+              header<br></br>subheader
+            </th>
+            <th>
+              header<br></br>subheader
+            </th>
+          </tr>
+          <tr>
+            <td>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </td>
+            <td>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat.
+            </td>
+            <td>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            </td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+        </DxcTable>
+      </div>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcTable margin="xxsmall">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcTable margin="xsmall">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcTable margin="small">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcTable margin="medium">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcTable margin="large">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcTable margin="xlarge">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcTable margin="xxlarge">
+        <tr>
+          <th>header 1</th>
+          <th>header 2</th>
+          <th>header 3</th>
+        </tr>
+        <tr>
+          <td>cell 1</td>
+          <td>cell 2</td>
+          <td>cell 3</td>
+        </tr>
+        <tr>
+          <td>cell 4</td>
+          <td>cell 5</td>
+          <td>cell 6</td>
+        </tr>
+        <tr>
+          <td>cell 7</td>
+          <td>cell 8</td>
+          <td>Cell 9</td>
+        </tr>
+      </DxcTable>
+      <hr />
+    </ExampleContainer>
+  </>
+);