@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2aa807

package/header/Header.stories.tsx

@@ -1,251 +0,0 @@
-import React from "react";
-import DxcHeader from "./Header";
-import DxcButton from "../button/Button";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, waitFor, within } from "@storybook/testing-library";
-import DxcFlex from "../flex/Flex";
-import DxcLink from "../link/Link";
-import { HalstackProvider } from "../HalstackContext";
-
-export default {
-  title: "Header",
-  component: DxcHeader,
-};
-
-const options: any = [
-  {
-    value: 1,
-    label: "Amazon",
-  },
-];
-
-const options2: any = [
-  {
-    value: 1,
-    label: "Home",
-  },
-  {
-    value: 2,
-    label: "Release notes",
-  },
-  {
-    value: 3,
-    label: "Sign out",
-  },
-];
-
-const opinionatedTheme = {
-  header: {
-    baseColor: "#ffffff",
-    accentColor: "#000000",
-    fontColor: "#000000",
-    menuBaseColor: "#ffffff",
-    hamburguerColor: "#000000",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
-    logoResponsive:
-      "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
-    contentColor: "#000000",
-    overlayColor: "#000000b3",
-  },
-};
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default with dropdown" theme="light" level={4} />
-      <DxcHeader
-        content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Underlined with text" theme="light" level={4} />
-      <DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Underlined, dropdown and links" theme="light" level={4} />
-      <DxcHeader
-        content={
-          <DxcFlex alignItems="center" gap="4rem">
-            <DxcLink>Link 1</DxcLink>
-            <DxcLink>Link 2</DxcLink>
-            <DxcLink>Link 3</DxcLink>
-            <DxcHeader.Dropdown options={options2} label="Label" onSelectOption={() => {}} />
-          </DxcFlex>
-        }
-        underlined
-      />
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xxsmall" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xsmall" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small margin" theme="light" level={4} />
-      <DxcHeader underlined margin="small" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium margin" theme="light" level={4} />
-      <DxcHeader underlined margin="medium" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large margin" theme="light" level={4} />
-      <DxcHeader underlined margin="large" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xlarge" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xxlarge" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <Title title="Opinionated theme" theme="light" level={2} />
-    <ExampleContainer>
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcHeader
-          underlined
-          content={<DxcButton label={"Custom Button"} />}
-          responsiveContent={(closeHandler) => (
-            <>
-              <DxcButton label={"Custom Button"} onClick={closeHandler} />
-              Custom content
-            </>
-          )}
-        />
-      </HalstackProvider>
-    </ExampleContainer>
-  </>
-);
-
-export const ResponsiveHeader = () => (
-  <ExampleContainer>
-    <Title title="Responsive" theme="light" level={4} />
-    <DxcHeader
-      content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
-      responsiveContent={(closeHandler) => (
-        <DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />
-      )}
-      underlined
-    />
-  </ExampleContainer>
-);
-
-const RespHeaderFocus = () => (
-  <ExampleContainer pseudoState="pseudo-focus">
-    <Title title="Responsive focus" theme="light" level={4} />
-    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
-  </ExampleContainer>
-);
-
-const RespHeaderHover = () => (
-  <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Responsive hover" theme="light" level={4} />
-    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
-  </ExampleContainer>
-);
-
-const RespHeaderMenuMobile = () => (
-  <ExampleContainer>
-    <Title title="Responsive menu" theme="light" level={4} />
-    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
-  </ExampleContainer>
-);
-
-const RespHeaderMenuTablet = () => (
-  <ExampleContainer>
-    <Title title="Responsive menu" theme="light" level={4} />
-    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
-  </ExampleContainer>
-);
-
-const RespHeaderMenuOpinionated = () => (
-  <ExampleContainer>
-    <Title title="Responsive menu" theme="light" level={4} />
-    <HalstackProvider theme={opinionatedTheme}>
-      <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
-    </HalstackProvider>
-  </ExampleContainer>
-);
-
-ResponsiveHeader.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};
-
-export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
-ResponsiveHeaderFocus.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};
-ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-};
-
-export const ResponsiveHeaderHover = RespHeaderHover.bind({});
-ResponsiveHeaderHover.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};
-ResponsiveHeaderHover.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-};
-
-export const ResponsiveHeaderMenuMobile = RespHeaderMenuMobile.bind({});
-ResponsiveHeaderMenuMobile.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};
-ResponsiveHeaderMenuMobile.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-  await userEvent.click(canvas.getByText("Menu"));
-};
-
-export const ResponsiveHeaderMenuTablet = RespHeaderMenuTablet.bind({});
-ResponsiveHeaderMenuTablet.parameters = {
-  viewport: {
-    defaultViewport: "pixelxl",
-  },
-  chromatic: { viewports: [720] },
-};
-ResponsiveHeaderMenuTablet.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-  await userEvent.click(canvas.getByText("Menu"));
-};
-
-export const ResponsiveHeaderMenuOpinionated = RespHeaderMenuOpinionated.bind({});
-ResponsiveHeaderMenuOpinionated.parameters = {
-  viewport: {
-    defaultViewport: "pixelxl",
-  },
-  chromatic: { viewports: [720] },
-};
-ResponsiveHeaderMenuOpinionated.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-  await userEvent.click(canvas.getByText("Menu"));
-};

package/header/Header.test.js

@@ -1,66 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Header = _interopRequireDefault(require("./Header.tsx"));
-describe("Header component tests", function () {
-  beforeAll(function () {
-    Object.defineProperty(window, "matchMedia", {
-      writable: true,
-      value: jest.fn().mockImplementation(function () {
-        return {
-          matches: false
-        };
-      })
-    });
-  });
-  test("Header renders with default logo", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], null)),
-      getByTitle = _render.getByTitle;
-    expect(getByTitle("DXC Logo")).toBeTruthy();
-  });
-  test("Call correct function on logo click", function () {
-    var onClick = jest.fn();
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-        onClick: onClick
-      })),
-      getByTitle = _render2.getByTitle;
-    var logo = getByTitle("DXC Logo");
-    _react2.fireEvent.click(logo);
-    expect(onClick).toHaveBeenCalled();
-  });
-  test("Header renders with correct children", function () {
-    // We need to force the offsetWidth value
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 1024
-    });
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-        content: /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text")
-      })),
-      getByText = _render3.getByText;
-    expect(getByText("header-child-text")).toBeTruthy();
-  });
-  test("Header renders menu button in mobile", function () {
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 425
-    });
-    Object.defineProperty(window, "matchMedia", {
-      writable: true,
-      value: jest.fn().mockImplementation(function () {
-        return {
-          matches: true
-        };
-      })
-    });
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-        responsiveContent: function responsiveContent() {
-          return /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text");
-        }
-      })),
-      getByText = _render4.getByText;
-    expect(getByText("Menu")).toBeTruthy();
-  });
-});

package/header/Icons.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const dxcLogo: React.JSX.Element;

package/header/Icons.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dxcLogo = void 0;
-var _react = _interopRequireDefault(require("react"));
-var dxcLogo = exports.dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "73",
-  height: "40",
-  viewBox: "0 0 73 40"
-}, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
-  id: "g10",
-  transform: "translate(0)"
-}, /*#__PURE__*/_react["default"].createElement("g", {
-  id: "g12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "path14",
-  d: "M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322",
-  transform: "translate(-21.028 65.555)",
-  fill: "#010101"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  id: "path16",
-  d: "M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978",
-  transform: "translate(-21.049 88.739)",
-  fill: "#603494"
-}))));

package/header/types.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Props = {
-    /**
-     * Whether a contrast line should appear at the bottom of the header.
-     */
-    underlined?: boolean;
-    /**
-     * Content shown in the header. Take into account that the component applies styles
-     * for the first child in the content, so we recommend the use of React.Fragment
-     * to be applied correctly. Otherwise, the styles can be modified.
-     */
-    content?: React.ReactNode;
-    /**
-     * Content shown in responsive version. It receives the close menu handler that can
-     * be used to add that functionality when a element is clicked.
-     */
-    responsiveContent?: (closeHandler: () => void) => React.ReactNode;
-    /**
-     * This function will be called when the user clicks the header logo.
-     */
-    onClick?: () => void;
-    /**
-     * Size of the bottom margin to be applied to the header.
-     */
-    margin?: Space;
-    /**
-     * Value of the tabindex for all interactive elements, except those inside the
-     * custom area.
-     */
-    tabIndex?: number;
-};
-export default Props;

package/header/types.js

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

package/heading/Heading.accessibility.test.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Heading = _interopRequireDefault(require("./Heading.tsx"));
-describe("Heading component accessibility tests", function () {
-  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render, container, results;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-            text: "my-heading-test",
-            level: 1,
-            margin: "medium",
-            weight: "bold"
-          })), container = _render.container;
-          _context.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-});

package/heading/Heading.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import HeadingPropsType from "./types";
-declare const DxcHeading: ({ level, text, as, weight, margin }: HeadingPropsType) => JSX.Element;
-export default DxcHeading;

package/heading/Heading.js

@@ -1,137 +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 _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _variables = require("../common/variables");
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var DxcHeading = function DxcHeading(_ref) {
-  var _ref$level = _ref.level,
-    level = _ref$level === void 0 ? 1 : _ref$level,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? "" : _ref$text,
-    as = _ref.as,
-    weight = _ref.weight,
-    margin = _ref.margin;
-  var colorsTheme = (0, _useTheme["default"])();
-  var checkValidAs = function checkValidAs() {
-    if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
-  };
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.heading
-  }, /*#__PURE__*/_react["default"].createElement(HeadingContainer, {
-    margin: margin
-  }, level === 1 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel1, {
-    as: checkValidAs(),
-    weight: weight
-  }, text) : level === 2 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel2, {
-    as: checkValidAs(),
-    weight: weight
-  }, text) : level === 3 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel3, {
-    as: checkValidAs(),
-    weight: weight
-  }, text) : level === 4 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel4, {
-    as: checkValidAs(),
-    weight: weight
-  }, text) : /*#__PURE__*/_react["default"].createElement(HeadingLevel5, {
-    as: checkValidAs(),
-    weight: weight
-  }, text)));
-};
-var HeadingContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), 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] : "";
-});
-var HeadingLevel1 = _styledComponents["default"].h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  color: ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.level1FontFamily;
-}, function (props) {
-  return props.theme.level1FontStyle;
-}, function (props) {
-  return props.theme.level1FontSize;
-}, function (props) {
-  return props.theme.level1LineHeight;
-}, function (props) {
-  return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level1FontWeight;
-}, function (props) {
-  return props.theme.level1LetterSpacing;
-}, function (props) {
-  return props.theme.level1FontColor;
-});
-var HeadingLevel2 = _styledComponents["default"].h2(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  color: ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.level2FontFamily;
-}, function (props) {
-  return props.theme.level2FontStyle;
-}, function (props) {
-  return props.theme.level2FontSize;
-}, function (props) {
-  return props.theme.level2LineHeight;
-}, function (props) {
-  return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level2FontWeight;
-}, function (props) {
-  return props.theme.level2LetterSpacing;
-}, function (props) {
-  return props.theme.level2FontColor;
-});
-var HeadingLevel3 = _styledComponents["default"].h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  color: ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.level3FontFamily;
-}, function (props) {
-  return props.theme.level3FontStyle;
-}, function (props) {
-  return props.theme.level3FontSize;
-}, function (props) {
-  return props.theme.level3LineHeight;
-}, function (props) {
-  return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level3FontWeight;
-}, function (props) {
-  return props.theme.level3LetterSpacing;
-}, function (props) {
-  return props.theme.level3FontColor;
-});
-var HeadingLevel4 = _styledComponents["default"].h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  color: ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.level4FontFamily;
-}, function (props) {
-  return props.theme.level4FontStyle;
-}, function (props) {
-  return props.theme.level4FontSize;
-}, function (props) {
-  return props.theme.level4LineHeight;
-}, function (props) {
-  return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level4FontWeight;
-}, function (props) {
-  return props.theme.level4LetterSpacing;
-}, function (props) {
-  return props.theme.level4FontColor;
-});
-var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  color: ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.level5FontFamily;
-}, function (props) {
-  return props.theme.level5FontStyle;
-}, function (props) {
-  return props.theme.level5FontSize;
-}, function (props) {
-  return props.theme.level5LineHeight;
-}, function (props) {
-  return props.weight === "normal" ? "400" : props.weight === "light" ? "300" : props.weight === "bold" ? "600" : props.theme.level5FontWeight;
-}, function (props) {
-  return props.theme.level5LetterSpacing;
-}, function (props) {
-  return props.theme.level5FontColor;
-});
-var _default = exports["default"] = DxcHeading;

package/heading/Heading.stories.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import DxcHeading from "./Heading";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-
-export default {
-  title: "Heading",
-  component: DxcHeading,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Levels" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Level 1" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" />
-      <Title title="Level 2" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={2} />
-      <Title title="Level 3" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={3} />
-      <Title title="Level 4" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={4} />
-      <Title title="Level 5" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={5} />
-    </ExampleContainer>
-    <Title title="Weights" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="'light' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={2} weight="light" />
-      <Title title="'normal' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={2} weight="normal" />
-      <Title title="'bold' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={2} weight="bold" />
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall" theme="light" level={4} />
-      <DxcHeading text="Xxsmall" margin="xxsmall" />
-      <Title title="Xsmall" theme="light" level={4} />
-      <DxcHeading text="Xsmall" margin="xsmall" />
-      <Title title="Small" theme="light" level={4} />
-      <DxcHeading text="Small" margin="small" />
-      <Title title="Medium" theme="light" level={4} />
-      <DxcHeading text="Medium" margin="medium" />
-      <Title title="Large" theme="light" level={4} />
-      <DxcHeading text="Large" margin="large" />
-      <Title title="Xlarge" theme="light" level={4} />
-      <DxcHeading text="Xlarge" margin="xlarge" />
-      <Title title="Xxlarge" theme="light" level={4} />
-      <DxcHeading text="Xxlarge" margin="xxlarge" />
-      <hr />
-    </ExampleContainer>
-  </>
-);