@dxc-technology/halstack-react 0.0.0-eff2879 → 0.0.0-f09618e

package/typography/Typography.accessibility.test.js

@@ -1,339 +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 _Typography = _interopRequireDefault(require("./Typography"));
-var _Flex = _interopRequireDefault(require("../flex/Flex"));
-describe("Typography component accessibility tests", function () {
-  it("Should not have basic accessibility issues for different font sizes", /*#__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(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "3.75rem"
-          }, "3.75rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "3rem"
-          }, "3rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "2rem"
-          }, "2rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "1.5rem"
-          }, "1.5rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "1.25rem"
-          }, "1.25rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "1rem"
-          }, "1rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "0.875rem"
-          }, "0.875rem."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontSize: "0.75rem"
-          }, "0.75rem."))), 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);
-  })));
-  it("Should not have basic accessibility issues for different letter spacings", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var _render2, container, results;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "-0.025em"
-          }, "-0.025em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "-0.0125em"
-          }, "-0.0125em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "0em"
-          }, "0em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "0.025em"
-          }, "0.025em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "0.05em"
-          }, "0.05em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            letterSpacing: "0.1em"
-          }, "0.1em."))), container = _render2.container;
-          _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context2.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-  it("Should not have basic accessibility issues for different line heights", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var _render3, container, results;
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "1em"
-          }, "1em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "1.25em"
-          }, "1.25em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "1.365em"
-          }, "1.365em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "1.5em"
-          }, "1.5em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "1.715em"
-          }, "1.715em."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            lineHeight: "2em"
-          }, "2em."))), container = _render3.container;
-          _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context3.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  })));
-  it("Should not have basic accessibility issues for different font weights", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var _render4, container, results;
-    return _regenerator["default"].wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontWeight: "300"
-          }, "300."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontWeight: "400"
-          }, "400."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontWeight: "600"
-          }, "600."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontWeight: "700"
-          }, "700."))), container = _render4.container;
-          _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context4.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  })));
-  it("Should not have basic accessibility issues for different text decorations", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var _render5, container, results;
-    return _regenerator["default"].wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textDecoration: "underline"
-          }, "Underline."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textDecoration: "line-through"
-          }, "Line-through."))), container = _render5.container;
-          _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context5.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context5.stop();
-      }
-    }, _callee5);
-  })));
-  it("Should not have basic accessibility issues for different font families", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var _render6, container, results;
-    return _regenerator["default"].wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontFamily: "Open Sans, sans-serif"
-          }, "Open Sans, sans-serif."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontFamily: "Source Code Pro, monospace"
-          }, "Source Code Pro, monospace."))), container = _render6.container;
-          _context6.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context6.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context6.stop();
-      }
-    }, _callee6);
-  })));
-  it("Should not have basic accessibility issues for different font styles", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var _render7, container, results;
-    return _regenerator["default"].wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontStyle: "italic"
-          }, "Italic."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            fontStyle: "normal"
-          }, "Normal."))), container = _render7.container;
-          _context7.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context7.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context7.stop();
-      }
-    }, _callee7);
-  })));
-  it("Should not have basic accessibility issues for different text alignments", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-    var _render8, container, results;
-    return _regenerator["default"].wrap(function _callee8$(_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
-        case 0:
-          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textAlign: "left"
-          }, "Left."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textAlign: "center"
-          }, "Center."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textAlign: "right"
-          }, "Right."))), container = _render8.container;
-          _context8.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context8.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context8.stop();
-      }
-    }, _callee8);
-  })));
-  it("Should not have basic accessibility issues for different white-spaces", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
-    var _render9, container, results;
-    return _regenerator["default"].wrap(function _callee9$(_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
-        case 0:
-          _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            fontSize: "2rem"
-          }, "                  ", " Normal: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            whiteSpace: "nowrap",
-            fontSize: "2rem"
-          }, "                  ", "No-wrap: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            whiteSpace: "pre",
-            fontSize: "2rem"
-          }, "                  ", " pre: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            whiteSpace: "pre-line",
-            fontSize: "2rem"
-          }, "                  ", "pre-line: A bunch of words you see."), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            whiteSpace: "pre-wrap",
-            fontSize: "2rem"
-          }, "                  ", " pre-wrap: A bunch of words you see."))), container = _render9.container;
-          _context9.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context9.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context9.stop();
-      }
-    }, _callee9);
-  })));
-  it("Should not have basic accessibility issues for different displays", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
-    var _render10, container, results;
-    return _regenerator["default"].wrap(function _callee10$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
-        case 0:
-          _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textAlign: "left"
-          }, "Display Block.", /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "A different text.")), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "inline",
-            textAlign: "left"
-          }, "Display Inline.", /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "A different text.")))), container = _render10.container;
-          _context10.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context10.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context10.stop();
-      }
-    }, _callee10);
-  })));
-  it("Should not have basic accessibility issues for different text overflows", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
-    var _render11, container, results;
-    return _regenerator["default"].wrap(function _callee11$(_context11) {
-      while (1) switch (_context11.prev = _context11.next) {
-        case 0:
-          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              width: "75px"
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textOverflow: "clip"
-          }, "Overflow clip.")), /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              width: "75px"
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textOverflow: "ellipsis"
-          }, "Overflow ellipsis.")), /*#__PURE__*/_react["default"].createElement("div", {
-            style: {
-              width: "75px"
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-            display: "block",
-            textOverflow: "unset"
-          }, "Overflow unset.")))), container = _render11.container;
-          _context11.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context11.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context11.stop();
-      }
-    }, _callee11);
-  })));
-});

package/typography/Typography.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import TypographyPropsTypes from "./types";
-declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
-export default DxcTypography;

package/typography/Typography.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-var _excluded = ["textOverflow", "whiteSpace", "children"];
-var DxcTypography = function DxcTypography(_ref) {
-  var textOverflow = _ref.textOverflow,
-    whiteSpace = _ref.whiteSpace,
-    children = _ref.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
-    textOverflow: textOverflow,
-    whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
-  }, props), children);
-};
-var _default = exports["default"] = DxcTypography;

package/typography/Typography.stories.tsx

@@ -1,198 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DxcTypography from "./Typography";
-
-export default {
-  title: "Typography",
-  component: DxcTypography,
-};
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default Typography" theme="light" level={4} />
-      <DxcTypography>Default typography.</DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font sizes" theme="light" level={4} />
-      <DxcTypography display="block" fontSize="3.75rem">
-        3.75rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="3rem">
-        3rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="2rem">
-        2rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.5rem">
-        1.5rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.25rem">
-        1.25rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1rem">
-        1rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.875rem">
-        0.875rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.75rem">
-        0.75rem.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography letter spacing" theme="light" level={4} />
-      <DxcTypography display="block" letterSpacing="-0.025em">
-        -0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="-0.0125em">
-        -0.0125em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0em">
-        0em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.025em">
-        0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.05em">
-        0.05em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.1em">
-        0.1em.
-      </DxcTypography>{" "}
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography line height" theme="light" level={4} />
-      <DxcTypography display="block" lineHeight="1em">
-        1em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.25em">
-        1.25em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.365em">
-        1.365em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.5em">
-        1.5em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.715em">
-        1.715em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="2em">
-        2em.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font weight" theme="light" level={4} />
-      <DxcTypography display="block" fontWeight="300">
-        300.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="400">
-        400.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="600">
-        600.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="700">
-        700.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography decoration" theme="light" level={4} />
-      <DxcTypography display="block" textDecoration="underline">
-        Underline.
-      </DxcTypography>
-      <DxcTypography display="block" textDecoration="line-through">
-        Line-through.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font family" theme="light" level={4} />
-      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
-        Open Sans, sans-serif.
-      </DxcTypography>
-      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
-        Source Code Pro, monospace.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font style" theme="light" level={4} />
-      <DxcTypography display="block" fontStyle="italic">
-        Italic.
-      </DxcTypography>
-      <DxcTypography display="block" fontStyle="normal">
-        Normal.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography align" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Left.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="center">
-        Center.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="right">
-        Right.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography whitespace" theme="light" level={4} />
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography fontSize="2rem">
-          {"                  "} Normal: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
-          {"                  "}No-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre" fontSize="2rem">
-          {"                  "} pre: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
-          {"                  "}pre-line: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
-          {"                  "} pre-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>{" "}
-    <ExampleContainer>
-      <Title title="Typography display" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Display Block.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-      <DxcTypography display="inline" textAlign="left">
-        Display Inline.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography text-overflow" theme="light" level={4} />
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="clip">
-          Overflow clip.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="ellipsis">
-          Overflow ellipsis.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="unset">
-          Overflow unset.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>
-  </>
-);

package/typography/types.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    as?: keyof HTMLElementTagNameMap;
-    display?: "inline" | "block";
-    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
-    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
-    fontStyle?: "italic" | "normal";
-    fontWeight?: "300" | "400" | "600" | "700";
-    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
-    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
-    textAlign?: "left" | "center" | "right";
-    color?: string;
-    textDecoration?: "none" | "underline" | "line-through";
-    textOverflow?: "clip" | "ellipsis" | "unset";
-    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
-    children: React.ReactNode;
-};
-export default Props;

package/typography/types.js

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