@dxc-technology/halstack-react 0.0.0-ce0214d → 0.0.0-ce2382e

package/inset/Inset.stories.tsx

@@ -1,229 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import styled from "styled-components";
-import DxcStack from "./../stack/Stack";
-import DxcInset from "./Inset";
-
-export default {
-  title: "Inset",
-  component: DxcInset,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default" level={4} />
-    <Container>
-      <DxcInset>
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = none" level={4} />
-    <Container>
-      <DxcInset space="none">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxxsmall" level={4} />
-    <Container>
-      <DxcInset space="xxxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxsmall" level={4} />
-    <Container>
-      <DxcInset space="xxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xsmall" level={4} />
-    <Container>
-      <DxcInset space="xsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = small" level={4} />
-    <Container>
-      <DxcInset space="small">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = medium" level={4} />
-    <Container>
-      <DxcInset space="medium">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = large" level={4} />
-    <Container>
-      <DxcInset space="large">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xlarge" level={4} />
-    <Container>
-      <DxcInset space="xlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxlarge" level={4} />
-    <Container>
-      <DxcInset space="xxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="space = xxxlarge" level={4} />
-    <Container>
-      <DxcInset space="xxxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = none" level={4} />
-    <Container>
-      <DxcInset horizontal="none">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxxsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="xxxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="xxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xsmall" level={4} />
-    <Container>
-      <DxcInset horizontal="xsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = small" level={4} />
-    <Container>
-      <DxcInset horizontal="small">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = medium" level={4} />
-    <Container>
-      <DxcInset horizontal="medium">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = large" level={4} />
-    <Container>
-      <DxcInset horizontal="large">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="xlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="xxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="horizontal = xxxlarge" level={4} />
-    <Container>
-      <DxcInset horizontal="xxxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = none" level={4} />
-    <Container>
-      <DxcInset vertical="none">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxxsmall" level={4} />
-    <Container>
-      <DxcInset vertical="xxxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxsmall" level={4} />
-    <Container>
-      <DxcInset vertical="xxsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xsmall" level={4} />
-    <Container>
-      <DxcInset vertical="xsmall">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = small" level={4} />
-    <Container>
-      <DxcInset vertical="small">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = medium" level={4} />
-    <Container>
-      <DxcInset vertical="medium">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = large" level={4} />
-    <Container>
-      <DxcInset vertical="large">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xlarge" level={4} />
-    <Container>
-      <DxcInset vertical="xlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxlarge" level={4} />
-    <Container>
-      <DxcInset vertical="xxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="vertical = xxxlarge" level={4} />
-    <Container>
-      <DxcInset vertical="xxxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
-    <Container>
-      <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
-        <Placeholder></Placeholder>
-      </DxcInset>
-    </Container>
-    <Title title="Inside a stack" level={4} />
-    <Container>
-      <DxcStack gutter="medium" divider>
-        <Placeholder></Placeholder>
-        <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
-          <Placeholder></Placeholder>
-        </DxcInset>
-        <Placeholder></Placeholder>
-      </DxcStack>
-    </Container>
-  </>
-);
-
-const Container = styled.div`
-  background: #f2eafa;
-  margin: 2.5rem;
-`;
-
-const Placeholder = styled.div`
-  min-height: 40px;
-  min-width: 120px;
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;

package/inset/types.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
-declare type Props = {
-    /**
-     * Applies the spacing scale to all sides.
-     */
-    space?: Spacing;
-    /**
-     * Applies the spacing scale to the left and right sides.
-     */
-    horizontal?: Spacing;
-    /**
-     * Applies the spacing scale to the top and bottom sides.
-     */
-    vertical?: Spacing;
-    /**
-     * Applies the spacing scale to the top side.
-     */
-    top?: Spacing;
-    /**
-     * Applies the spacing scale to the right side.
-     */
-    right?: Spacing;
-    /**
-     * Applies the spacing scale to the bottom side.
-     */
-    bottom?: Spacing;
-    /**
-     * Applies the spacing scale to the left side.
-     */
-    left?: Spacing;
-    /**
-     * Custom content inside the inset.
-     */
-    children: React.ReactNode;
-};
-export default Props;

package/inset/types.js

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

package/layout/ApplicationLayout.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import AppLayoutPropsType, { AppLayoutSidenavPropsType, AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
-declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, children }: AppLayoutPropsType): JSX.Element;
-    Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
-    Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
-    SideNav: ({ ...childProps }: AppLayoutSidenavPropsType) => JSX.Element;
-    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
-};
-export default DxcApplicationLayout;

package/layout/ApplicationLayout.js

@@ -1,199 +0,0 @@
-"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Header = _interopRequireDefault(require("../header/Header"));
-
-var _Footer = _interopRequireDefault(require("../footer/Footer"));
-
-var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../common/variables.js");
-
-var _Icons = require("./Icons");
-
-var _uuid = require("uuid");
-
-var _SidenavContext = require("./SidenavContext");
-
-var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var year = new Date().getFullYear();
-
-var Header = function Header(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Main = function Main(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Footer = function Footer(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
-};
-
-var Sidenav = function Sidenav(_ref4) {
-  var childProps = (0, _extends2["default"])({}, _ref4);
-  return /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], childProps, childProps.children);
-};
-
-var defaultFooter = function defaultFooter() {
-  return /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-    copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
-    bottomLinks: [{
-      href: "https://www.linkedin.com/company/dxctechnology",
-      text: "Linkedin"
-    }, {
-      href: "https://twitter.com/dxctechnology",
-      text: "Twitter"
-    }, {
-      href: "https://www.facebook.com/DXCTechnology/",
-      text: "Facebook"
-    }],
-    socialLinks: [{
-      href: "https://www.linkedin.com/company/dxctechnology",
-      logo: _Icons.linkedinLogo
-    }, {
-      href: "https://twitter.com/dxctechnology",
-      logo: _Icons.twitterLogo
-    }, {
-      href: "https://www.facebook.com/DXCTechnology/",
-      logo: _Icons.facebookLogo
-    }]
-  });
-};
-
-var defaultHeader = function defaultHeader() {
-  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    underlined: true
-  });
-};
-
-var childTypeExists = function childTypeExists(children, childType) {
-  return children.find(function (child) {
-    return (child === null || child === void 0 ? void 0 : child.type) === childType;
-  });
-};
-
-var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
-  var _ref5$visibilityToggl = _ref5.visibilityToggleLabel,
-      visibilityToggleLabel = _ref5$visibilityToggl === void 0 ? "" : _ref5$visibilityToggl,
-      children = _ref5.children;
-
-  var _useState = (0, _react.useState)("appLayout-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      appLayoutId = _useState2[0];
-
-  var visibilityToggleLabelId = "label-".concat(appLayoutId);
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isSidenavVisibleResponsive = _useState4[0],
-      setIsSidenavVisibleResponsive = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isResponsive = _useState6[0],
-      setIsResponsive = _useState6[1];
-
-  var ref = (0, _react.useRef)(null);
-  var translatedLabels = (0, _useTranslatedLabels["default"])();
-
-  var childrenArray = _react["default"].Children.toArray(children);
-
-  var header = childTypeExists(childrenArray, _Header["default"]) || childTypeExists(childrenArray, Header) || defaultHeader();
-  var footer = childTypeExists(childrenArray, _Footer["default"]) || childTypeExists(childrenArray, Footer) || defaultFooter();
-  var sidenav = childTypeExists(childrenArray, Sidenav);
-  var main = childTypeExists(childrenArray, Main);
-
-  var handleResize = function handleResize() {
-    setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
-  };
-
-  var handleSidenavVisibility = function handleSidenavVisibility() {
-    setIsSidenavVisibleResponsive(function (isSidenavVisibleResponsive) {
-      return !isSidenavVisibleResponsive;
-    });
-  };
-
-  (0, _react.useEffect)(function () {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return function () {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [setIsResponsive]);
-  (0, _react.useEffect)(function () {
-    !isResponsive && setIsSidenavVisibleResponsive(false);
-  }, [isResponsive, setIsSidenavVisibleResponsive]);
-  return /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
-    hasSidenav: sidenav ? true : false,
-    isSidenavVisible: isSidenavVisibleResponsive,
-    ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
-    onClick: handleSidenavVisibility,
-    "aria-labelledby": visibilityToggleLabel ? visibilityToggleLabelId : undefined,
-    "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
-    title: translatedLabels.applicationLayout.visibilityToggleTitle
-  }, _Icons.hamburgerIcon), visibilityToggleLabel && /*#__PURE__*/_react["default"].createElement(VisibilityToggleLabel, {
-    id: visibilityToggleLabelId
-  }, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
-    value: setIsSidenavVisibleResponsive
-  }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footer)));
-};
-
-var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 64px;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  @media (max-width: ", "rem) {\n    ", ";\n    ", "\n  }\n"])), _variables.responsiveSizes.medium, function (props) {
-  return props.hasSidenav && "top: 112px";
-}, function (props) {
-  return props.isSidenavVisible && "overflow: hidden;";
-});
-
-var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n"])));
-
-var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  gap: 10px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
-
-var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  cursor: pointer;\n\n  :hover {\n    background-color: #e6e6e6;\n  }\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
-
-var VisibilityToggleLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
-
-var BodyContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
-
-var SidenavContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: fixed;\n    top: 112px;\n  }\n"])), _variables.responsiveSizes.medium);
-
-var MainContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-
-var MainContentContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
-
-DxcApplicationLayout.Header = Header;
-DxcApplicationLayout.Main = Main;
-DxcApplicationLayout.Footer = Footer;
-DxcApplicationLayout.SideNav = Sidenav;
-DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
-var _default = DxcApplicationLayout;
-exports["default"] = _default;

package/layout/ApplicationLayout.stories.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-import DxcApplicationLayout from "./ApplicationLayout";
-import DxcSidenav from "../sidenav/Sidenav";
-import Title from "../../.storybook/components/Title";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
-
-export default {
-  title: "Application Layout ",
-  component: DxcApplicationLayout,
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export const DefaultApplicationLayout = () => (
-  <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.Main>
-        <Title title="Default application layout" theme="light" level={4} />
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-      </DxcApplicationLayout.Main>
-    </DxcApplicationLayout>
-  </>
-);
-
-export const ApplicationLayoutWithDefaultSidenav = () => (
-  <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
-      <DxcApplicationLayout.Main>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-      </DxcApplicationLayout.Main>
-    </DxcApplicationLayout>
-  </>
-);
-
-export const ApplicationLayoutWithResponsiveSidenav = () => (
-  <>
-    <DxcApplicationLayout visibilityToggleLabel="Example">
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
-      <DxcApplicationLayout.Main>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-      </DxcApplicationLayout.Main>
-    </DxcApplicationLayout>
-  </>
-);
-
-ApplicationLayoutWithResponsiveSidenav.parameters = {
-  viewport: {
-    defaultViewport: "pixel",
-  },
-};
-
-export const ApplicationLayoutWithCustomHeader = () => (
-  <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.Header>
-        {" "}
-        <p>Custom Header</p>{" "}
-      </DxcApplicationLayout.Header>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom header</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
-      <DxcApplicationLayout.Main>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-      </DxcApplicationLayout.Main>
-    </DxcApplicationLayout>
-  </>
-);
-
-export const ApplicationLayoutWithCustomFooter = () => (
-  <>
-    <DxcApplicationLayout>
-      <DxcApplicationLayout.SideNav>
-        <DxcSidenav.Title>Application layout with custom footer</DxcSidenav.Title>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-        <p>SideNav Content</p>
-      </DxcApplicationLayout.SideNav>
-      <DxcApplicationLayout.Main>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-        <p>Main Content</p>
-      </DxcApplicationLayout.Main>
-      <DxcApplicationLayout.Footer>
-        <p>Custom Footer</p>
-      </DxcApplicationLayout.Footer>
-    </DxcApplicationLayout>
-  </>
-);

package/layout/Icons.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const facebookLogo: JSX.Element;
-export declare const twitterLogo: JSX.Element;
-export declare const linkedinLogo: JSX.Element;
-export declare const hamburgerIcon: JSX.Element;