@dxc-technology/halstack-react 0.0.0-9d82cb9 → 0.0.0-9e25510

package/typography/Typography.accessibility.test.js

@@ -0,0 +1,339 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.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, _axeHelper.axe)(container);
+        case 3:
+          results = _context11.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+});

package/typography/Typography.d.ts

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

package/typography/Typography.js

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,196 @@
+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/Typography.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Typography = _interopRequireDefault(require("./Typography"));
+describe("Typography component tests", function () {
+  test("Renders as the selected component", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        as: "h1"
+      }, "Test H1 Text")),
+      container = _render.container;
+    expect(container.querySelector('h1')).not.toBeNull();
+  });
+  test("Renders as span if it receives invalid tag", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        as: "br"
+      }, "Test BR Text")),
+      container = _render2.container;
+    expect(container.querySelector('br')).toBeNull();
+    expect(container.querySelector('span')).not.toBeNull();
+  });
+});

package/typography/types.d.ts

@@ -0,0 +1,18 @@
+/// <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

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