@dxc-technology/halstack-react 0.0.0-dfd09f9 → 0.0.0-e01c6f9

package/progress-bar/ProgressBar.stories.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import DxcProgressBar from "./ProgressBar";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
+
+export default {
+  title: "Progress Bar",
+  component: DxcProgressBar,
+};
+
+const opinionatedTheme = {
+  progressBar: {
+    accentColor: "#5f249f",
+    baseColor: "#e6e6e6",
+    fontColor: "#000000",
+    overlayColor: "#000000b3",
+    overlayFontColor: "#ffffff",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Without labels" theme="light" level={4} />
+      <DxcProgressBar value={50} showValue />
+      <Title title="With helperText" theme="light" level={4} />
+      <DxcProgressBar helperText="Helper text" value={24} showValue />
+      <Title title="Without default value" theme="light" level={4} />
+      <DxcProgressBar label="Loading..." showValue />
+      <Title title="With full value" theme="light" level={4} />
+      <DxcProgressBar label="Loading..." value={100} showValue />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin xxsmall" margin="xxsmall" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin xsmall" margin="xsmall" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin small" margin="small" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin medium" margin="medium" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin large" margin="large" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin xlarge" margin="xlarge" value={50} showValue />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Label and helper text" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcProgressBar label="Loading..." helperText="Helper text" value={24} showValue />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without default value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcProgressBar label="Loading..." helperText="Helper text" showValue />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+
+export const ProgressBarOverlay = () => (
+  <ExampleContainer>
+    <Title title="Overlay" theme="dark" level={4} />
+    <DxcProgressBar label="Overlay" helperText="Helper text" overlay showValue value={50} />
+  </ExampleContainer>
+);
+
+export const ProgressBarOverlayOpinionated = () => (
+  <ExampleContainer>
+    <Title title="Overlay" theme="dark" level={4} />
+    <HalstackProvider theme={opinionatedTheme}>
+      <DxcProgressBar label="Overlay" helperText="Helper text" overlay showValue value={50} />
+    </HalstackProvider>
+  </ExampleContainer>
+);

package/progress-bar/ProgressBar.test.js

@@ -1,65 +1,93 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
 describe("ProgressBar component tests", function () {
-  test("ProgressBar renders with label", function () {
+  test("ProgressBar renders with label and helperText", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      label: "test-label"
-    })),
-        getByText = _render.getByText;
-
+        label: "test-label",
+        helperText: "helper-text"
+      })),
+      getByText = _render.getByText;
     expect(getByText("test-label")).toBeTruthy();
+    expect(getByText("helper-text")).toBeTruthy();
   });
-  test("Overlay progressBar renders with label", function () {
+  test("ProgressBar renders with default value", function () {
+    var value = 0;
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      label: "test-label",
-      overlay: true
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("test-label")).toBeTruthy();
+        showValue: true
+      })),
+      getByText = _render2.getByText,
+      getByRole = _render2.getByRole;
+    var progressBar = getByRole("progressbar");
+    expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("ProgressBar renders with default value", function () {
+  test("ProgressBar renders with value", function () {
+    var value = 25;
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      showValue: true
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText("0 %")).toBeTruthy();
+        showValue: true,
+        value: value
+      })),
+      getByText = _render3.getByText,
+      getByRole = _render3.getByRole;
+    var progressBar = getByRole("progressbar");
+    expect(getByText("25 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("Overlay progressBar renders with default value", function () {
+  test("ProgressBar renders with negative value", function () {
+    var value = 0;
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      showValue: true,
-      overlay: true
-    })),
-        getByText = _render4.getByText;
-
+        showValue: true,
+        value: -20
+      })),
+      getByText = _render4.getByText,
+      getByRole = _render4.getByRole;
+    var progressBar = getByRole("progressbar");
     expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
-  test("ProgressBar renders with value", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      showValue: true,
-      value: 25
-    })),
-        getByText = _render5.getByText;
-
-    expect(getByText("25 %")).toBeTruthy();
+  test("ProgressBar renders as indeterminate", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], null)),
+      getByRole = _render5.getByRole;
+    var progressBar = getByRole("progressbar");
+    expect(progressBar.getAttribute("aria-valuenow")).toBe(null);
   });
-  test("Overlay progressBar renders with value", function () {
+  test("Overlay progressBar renders with label and helperText", function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-      showValue: true,
-      value: 25,
-      overlay: true
-    })),
-        getByText = _render6.getByText;
-
+        label: "test-label",
+        helperText: "helper-text",
+        overlay: true
+      })),
+      getByText = _render6.getByText;
+    expect(getByText("test-label")).toBeTruthy();
+    expect(getByText("helper-text")).toBeTruthy();
+  });
+  test("Overlay progressBar renders with default value", function () {
+    var value = 0;
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+        showValue: true,
+        overlay: true
+      })),
+      getByText = _render7.getByText,
+      getByRole = _render7.getByRole;
+    var progressBar = getByRole("progressbar");
+    expect(getByText("0 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
+  });
+  test("Overlay progressBar renders with value", function () {
+    var value = 25;
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+        showValue: true,
+        value: value,
+        overlay: true
+      })),
+      getByText = _render8.getByText,
+      getByRole = _render8.getByRole;
+    var progressBar = getByRole("progressbar");
     expect(getByText("25 %")).toBeTruthy();
+    expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
   });
 });

package/progress-bar/types.d.ts

@@ -1,11 +1,11 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Size = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Size = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+type Props = {
     /**
      * Text to be placed above the progress bar.
      */

package/quick-nav/QuickNav.js

@@ -1,64 +1,94 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _slugify = _interopRequireDefault(require("slugify"));
-
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Heading = _interopRequireDefault(require("../heading/Heading"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _Inset = _interopRequireDefault(require("../inset/Inset"));
-
-var _List = _interopRequireDefault(require("../list/List"));
-
-var _Text = _interopRequireDefault(require("../text/Text"));
-
-var _templateObject, _templateObject2;
-
+var _Typography = _interopRequireDefault(require("../typography/Typography"));
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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" != _typeof(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 DxcQuickNav = function DxcQuickNav(_ref) {
   var title = _ref.title,
-      links = _ref.links;
-  return /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "small"
+    links = _ref.links;
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var colorsTheme = (0, _useTheme["default"])();
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.quickNav
+  }, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    direction: "column",
+    gap: "0.5rem"
   }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
     level: 4,
-    text: title
-  }), /*#__PURE__*/_react["default"].createElement(_List["default"], null, links.map(function (link) {
+    text: title || translatedLabels.quickNav.contentTitle
+  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, links.map(function (link) {
     var _link$links;
-
-    return /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-      space: "xxsmall"
-    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: link.label
+    }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+      space: "0.25rem"
+    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
       href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
         lower: true
       }))
-    }, link === null || link === void 0 ? void 0 : link.label), (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
-      return /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
-        horizontal: "xsmall"
-      }, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
-        href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
+    }, link === null || link === void 0 ? void 0 : link.label), /*#__PURE__*/_react["default"].createElement(ListSecondColumn, null, (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: sublink.label
+      }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+        horizontal: "0.5rem"
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
+        href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
+          lower: true
+        }), "-").concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true
         }))
-      }, sublink === null || sublink === void 0 ? void 0 : sublink.label)));
-    })));
-  }))));
+      }, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
+    })))));
+  })))));
 };
-
-var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 5px 15px;\n  border-left: 2px solid #bfbfbf;\n  li {\n    div:first-child {\n      display: none;\n    }\n  }\n"])));
-
-var Link = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: 14px;\n  color: #666666;\n  &:hover {\n    color: #ab63cf;\n  }\n  &:focus {\n    border-radius: 2px;\n    border-color: #0095ff;\n  }\n"])));
-
-var _default = DxcQuickNav;
-exports["default"] = _default;
+var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  border-left: 2px solid ", ";\n"])), function (props) {
+  return props.theme.paddingTop;
+}, function (props) {
+  return props.theme.paddingBottom;
+}, function (props) {
+  return props.theme.paddingLeft;
+}, function (props) {
+  return props.theme.paddingRight;
+}, function (props) {
+  return props.theme.dividerBorderColor;
+});
+var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n"])));
+var ListSecondColumn = _styledComponents["default"].ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n"])));
+var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  display: block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  width: fit-content;\n  max-width: 100%;\n\n  &:hover {\n    color: ", ";\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-style: ", ";\n    outline-width: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
+  return props.theme.fontSize;
+}, function (props) {
+  return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.fontStyle;
+}, function (props) {
+  return props.theme.fontWeight;
+}, function (props) {
+  return props.theme.fontColor;
+}, function (props) {
+  return props.theme.hoverFontColor;
+}, function (props) {
+  return props.theme.focusBorderColor;
+}, function (props) {
+  return props.theme.focusBorderStyle;
+}, function (props) {
+  return props.theme.focusBorderThickness;
+}, function (props) {
+  return props.theme.focusBorderRadius;
+});
+var _default = exports["default"] = DxcQuickNav;

package/quick-nav/QuickNav.stories.tsx

@@ -2,33 +2,78 @@ import React from "react";
 import styled from "styled-components";
 import DxcQuickNav from "./QuickNav";
 import DxcHeading from "../heading/Heading";
-import DxcText from "../text/Text";
+import DxcParagraph from "../paragraph/Paragraph";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
-  title: "QuickNav",
+  title: "Quick Nav",
   component: DxcQuickNav,
 };
 
+const opinionatedTheme = {
+  quickNav: {
+    fontColor: "#666666",
+    accentColor: "#9a6bb2",
+  },
+};
+
+const defaultLinks = [
+  {
+    label: "Overview",
+  },
+  {
+    label: "Principles",
+    links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Accordion",
+      },
+      {
+        label: "Button",
+      },
+    ],
+  },
+];
+
 const links = [
   {
     label: "Overview",
-    id: "overview",
     links: [
       {
         label: "Introduction",
-        id: "introduction",
       },
     ],
   },
   {
-    label: "Principles",
-    id: "principles",
+    label: "Components",
     links: [
-      { label: "Color", id: "color" },
-      { label: "Spacing", id: "spacing" },
-      { label: "Typography", id: "typography" },
+      {
+        label: "Introduction",
+      },
+      {
+        label: "Accordion",
+      },
+    ],
+  },
+  {
+    label: "Principles very very very very very very very very long",
+    links: [
+      { label: "Color very very very very very very very very long" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong" },
+      { label: "Typography" },
+    ],
+  },
+  {
+    label: "Componentsveryveryveryveryveryveryveryverylong",
+    links: [
+      {
+        label: "Accordion",
+      },
     ],
   },
 ];
@@ -38,13 +83,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={defaultLinks} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Text overflow" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -53,7 +110,7 @@ export const Chromatic = () => (
         <ContentContainer>
           <Content id="overview">
             <DxcHeading level={1} text="Overview" margin={{ bottom: "small" }} />
-            <DxcText>
+            <DxcParagraph>
               Halstack is the DXC Technology's open source design system for insurance products and digital experiences.
               Our system provides all the tools and resources needed to create superior, beautiful but above all,
               functional user experiences. Halstack is the DXC Technology's open source design system for insurance
@@ -70,10 +127,10 @@ export const Chromatic = () => (
               create superior, beautiful but above all, functional user experiences.Halstack is the DXC Technology's
               open source design system for insurance products and digital experiences. Our system provides all the
               tools and resources needed to create superior, beautiful but above all, functional user experiences.
-            </DxcText>
-            <Content id="introduction">
+            </DxcParagraph>
+            <Content id="overview-introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
                 provide guidance for development teams in order to deliver delightful and consistent user experiences to
                 our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
@@ -103,14 +160,59 @@ export const Chromatic = () => (
                 to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
                 design new features, or help us improve the project documentation. If you're interested, definitely
                 check out our contribution guidelines.
-              </DxcText>
+              </DxcParagraph>
             </Content>
           </Content>
-          <Content id="principles">
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="components-introduction">
+              <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
+                provide guidance for development teams in order to deliver delightful and consistent user experiences to
+                our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
+                guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
+                and engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
+                design new features, or help us improve the project documentation. If you're interested, definitely
+                check out our contribution guidelines.Design principles Halstack design principles are the fundamental
+                part of DXC Technology's approach to provide guidance for development teams in order to deliver
+                delightful and consistent user experiences to our customers: Balance Consistency Visual hierarchy All
+                our components, design tokens, accessibility guidelines, responsive design techniques, and layout
+                proposals have been carefully curated by DXC design and engineering teams with the objective of creating
+                a unique visual language and ecosystem for our applications. This is the DXC way of creating User
+                Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
+                Technology bussines needs, but it is open for anyone to use and contribute back to. We are charmed to
+                receive external contributions to help us find bugs, design new features, or help us improve the project
+                documentation. If you're interested, definitely check out our contribution guidelines.Design principles
+                Halstack design principles are the fundamental part of DXC Technology's approach to provide guidance for
+                development teams in order to deliver delightful and consistent user experiences to our customers:
+                Balance Consistency Visual hierarchy All our components, design tokens, accessibility guidelines,
+                responsive design techniques, and layout proposals have been carefully curated by DXC design and
+                engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
+                design new features, or help us improve the project documentation. If you're interested, definitely
+                check out our contribution guidelines.
+              </DxcParagraph>
+            </Content>
+            <Content id="components-accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="principles-very-very-very-very-very-very-very-very-long">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="color">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
                 palette brings a unified consistency and helps in guiding the user's perception order. Our color palette
                 is based in the HSL model . All our color families are calculated using the lightness value of the
@@ -143,11 +245,11 @@ export const Chromatic = () => (
                 tokens to manage color. Appart from a multi-purpose greyscale family, purple and blue are the core color
                 families used in our set of components. Additional families as red, green and yellow help as feedback
                 role-based color palettes and must not be used outside this context.
-              </DxcText>
+              </DxcParagraph>
             </Content>
-            <Content id="spacing">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
                 values of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent,
                 yet distinct enough, steps between them.In the search of consistent alignment between the elements we
@@ -165,11 +267,11 @@ export const Chromatic = () => (
                 consistent, yet distinct enough, steps between them.In the search of consistent alignment between the
                 elements we provide a spacing scale based on a root values of 8px and 4px. The numbers 4 and 8 are
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
-              </DxcText>
+              </DxcParagraph>
             </Content>
-            <Content id="typography">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
                 has on the user interface content. It defines what is the first noticeable piece of information or data
                 based on the font shape, size, color, or type and it highlights some pieces of text over the rest. Some
@@ -201,15 +303,32 @@ export const Chromatic = () => (
                 Halstack Design System include headers, body, taglines, captions, and labels. Make sure you include all
                 the different typographic variants in order to enhance the application's content structure, including
                 the Heading component which defines different levels of page and section titles.
-              </DxcText>
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="componentsveryveryveryveryveryveryveryverylong">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="componentsveryveryveryveryveryveryveryverylong-accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
             </Content>
           </Content>
         </ContentContainer>
         <QuickNavContainer>
-          <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+          <DxcQuickNav title="Sections" links={links} />
         </QuickNavContainer>
       </Container>
     </ExampleContainer>
+    <Title title="Opinionated theme" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcQuickNav links={defaultLinks} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );