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

package/select/types.d.ts

@@ -1,213 +0,0 @@
-/// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type SVG = React.SVGProps<SVGSVGElement>;
-declare type OptionGroup = {
-    /**
-     * Label of the group to be shown in the select's listbox.
-     */
-    label: string;
-    /**
-     * List of the grouped options.
-     */
-    options: Option[];
-};
-declare type Option = {
-    /**
-     * Element used as the icon that will be placed before the option label.
-     * It can be a url of an image or an inline SVG. If the url option
-     * is the chosen one, take into account that the component's
-     * color styling tokens will not be applied to the image.
-     */
-    icon?: string | SVG;
-    /**
-     * Label of the option to be shown in the select's listbox.
-     */
-    label: string;
-    /**
-     * Value of the option. It should be unique and
-     * not an empty string, which is reserved to the empty option added
-     * by optional prop.
-     */
-    value: string;
-};
-declare type CommonProps = {
-    /**
-     * Text to be placed above the select.
-     */
-    label?: string;
-    /**
-     * Name attribute of the input element. This attribute will allow users
-     * to find the component's value during the submit event. In this event,
-     * the component's value will always be a regular string, for both single
-     * and multiple selection modes, been in the first one a single option
-     * value and in the multiple variant more than one option value,
-     * separated by commas.
-     */
-    name?: string;
-    /**
-     * An array of objects representing the selectable options.
-     */
-    options: Option[] | OptionGroup[];
-    /**
-     * Helper text to be placed above the select.
-     */
-    helperText?: string;
-    /**
-     * Text to be put as placeholder of the select.
-     */
-    placeholder?: string;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the select will be optional, showing '(Optional)'
-     * next to the label and adding a default first option with an empty string as value,
-     * been the placeholder (if defined) its label. Otherwise, the field will be
-     * considered required and an error will be passed as a parameter to the
-     * OnBlur and onChange functions if an option wasn't selected.
-     */
-    optional?: boolean;
-    /**
-     * If true, enables search functionality.
-     */
-    searchable?: boolean;
-    /**
-     * If it is a defined value and also a truthy string, the component will
-     * change its appearance, showing the error below the select component.
-     * If the defined value is an empty string, it will reserve a space below
-     * the component for a future error, but it would not change its look. In
-     * case of being undefined or null, both the appearance and the space for
-     * the error message would not be modified.
-     */
-    error?: string;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space | Margin;
-    /**
-     * Size of the component.
-     */
-    size?: "small" | "medium" | "large" | "fillParent";
-    /**
-     * Value of the tabindex attribute.
-     */
-    tabIndex?: number;
-};
-declare type SingleSelect = CommonProps & {
-    /**
-     * If true, the select component will support multiple selected options.
-     * In that case, value will be an array of strings with each selected
-     * option value.
-     */
-    multiple?: false;
-    /**
-     * Initial value of the select, only when it is uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the select. If undefined, the component will be uncontrolled
-     * and the value will be managed internally by the component.
-     */
-    value?: string;
-    /**
-     * This function will be called when the user selects an option.
-     * An object including the current value and the error (if the value entered is not valid)
-     * will be passed to this function. If there is no error, error will not be defined.
-     */
-    onChange?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
-    /**
-     * This function will be called when the select loses the focus. An
-     * object including the value and the error (if the value
-     * selected is not valid) will be passed to this function. If there is no error,
-     * error will not be defined.
-     */
-    onBlur?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
-};
-declare type MultipleSelect = CommonProps & {
-    /**
-     * If true, the select component will support multiple selected options.
-     * In that case, value will be an array of strings with each selected
-     * option value.
-     */
-    multiple: true;
-    /**
-     * Initial value of the select, only when it is uncontrolled.
-     */
-    defaultValue?: string[];
-    /**
-     * Value of the select. If undefined, the component will be uncontrolled
-     * and the value will be managed internally by the component.
-     */
-    value?: string[];
-    /**
-     * This function will be called when the user selects an option.
-     * An object including the current selected values and the error (if the value entered is not valid)
-     * will be passed to this function. If there is no error, error will be null.
-     */
-    onChange?: (val: {
-        value: string[];
-        error?: string;
-    }) => void;
-    /**
-     * This function will be called when the select loses the focus. An
-     * object including the selected values and the error (if the value
-     * selected is not valid) will be passed to this function. If there is no error,
-     * error will be null.
-     */
-    onBlur?: (val: {
-        value: string[];
-        error?: string;
-    }) => void;
-};
-declare type Props = SingleSelect | MultipleSelect;
-/**
- * Single option of the select component.
- */
-export declare type OptionProps = {
-    id: string;
-    option: Option;
-    onClick: (option: Option) => void;
-    multiple: boolean;
-    visualFocused: boolean;
-    isGroupedOption?: boolean;
-    isLastOption: boolean;
-    isSelected: boolean;
-};
-/**
- * Listbox from the select component.
- */
-export declare type ListboxProps = {
-    id: string;
-    currentValue: string | string[];
-    options: Option[] | OptionGroup[];
-    visualFocusIndex: number;
-    lastOptionIndex: number;
-    multiple: boolean;
-    optional: boolean;
-    optionalItem: Option;
-    searchable: boolean;
-    handleOptionOnClick: (option: Option) => void;
-};
-/**
- * Reference to the listbox component.
- */
-export declare type ListboxRefType = HTMLUListElement;
-/**
- * Reference to the select component.
- */
-export declare type RefType = HTMLDivElement;
-export default Props;

package/select/types.js

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

package/sidenav/Sidenav.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import SidenavPropsType, { SidenavTitlePropsType, SidenavSubtitlePropsType, SidenavLinkPropsType } from "./types";
-declare const DxcSidenav: {
-    ({ padding, children }: SidenavPropsType): JSX.Element;
-    Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
-    Subtitle: ({ children }: SidenavSubtitlePropsType) => JSX.Element;
-    Link: ({ tabIndex, href, onClick, children }: SidenavLinkPropsType) => JSX.Element;
-};
-export default DxcSidenav;

package/sidenav/Sidenav.js

@@ -1,147 +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 _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _variables = require("../common/variables.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext");
-
-var _SidenavContext = require("../layout/SidenavContext");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-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 DxcSidenav = function DxcSidenav(_ref) {
-  var padding = _ref.padding,
-      children = _ref.children;
-  var colorsTheme = (0, _useTheme["default"])();
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.sidenav
-  }, /*#__PURE__*/_react["default"].createElement(SidenavContainer, {
-    padding: padding
-  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.sidenav.backgroundColor
-  }, children)));
-};
-
-var Title = function Title(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(SidenavMenuTitle, null, children);
-};
-
-var Subtitle = function Subtitle(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement(SidenavMenuSubTitle, null, children);
-};
-
-var Link = function Link(_ref4) {
-  var _ref4$tabIndex = _ref4.tabIndex,
-      tabIndex = _ref4$tabIndex === void 0 ? 0 : _ref4$tabIndex,
-      href = _ref4.href,
-      onClick = _ref4.onClick,
-      children = _ref4.children;
-  var setIsSidenavVisibleResponsive = (0, _SidenavContext.useResponsiveSidenavVisibility)();
-
-  var handleClick = function handleClick() {
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-    setIsSidenavVisibleResponsive === null || setIsSidenavVisibleResponsive === void 0 ? void 0 : setIsSidenavVisibleResponsive(false);
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(SidenavMenuLink, {
-    tabIndex: tabIndex,
-    href: href,
-    onClick: handleClick
-  }, children);
-};
-
-var SidenavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n\n  @media (max-width: ", "rem) {\n    width: ", ";\n  }\n\n  width: ", ";\n  padding: ", ";\n\n  overflow-y: auto;\n  overflow-x: hidden;\n  ::-webkit-scrollbar {\n    width: 2px;\n  }\n  ::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n"])), function (props) {
-  return props.theme.backgroundColor;
-}, _variables.responsiveSizes.medium, function (props) {
-  return props.padding ? "calc(100vw - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "100vw";
-}, function (props) {
-  return props.padding ? "calc(300px - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "300px";
-}, function (props) {
-  return props.padding ? _variables.spaces[props.padding] : "";
-}, function (props) {
-  return props.theme.scrollBarTrackColor;
-}, function (props) {
-  return props.theme.scrollBarThumbColor;
-});
-
-var SidenavMenuTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
-  return props.theme.titleFontFamily;
-}, function (props) {
-  return props.theme.titleFontSize;
-}, function (props) {
-  return props.theme.titleFontStyle;
-}, function (props) {
-  return props.theme.titleFontWeight;
-}, function (props) {
-  return props.theme.titleFontColor;
-}, function (props) {
-  return props.theme.titleFontLetterSpacing;
-}, function (props) {
-  return props.theme.titleFontTextTransform;
-});
-
-var SidenavMenuSubTitle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 4px;\n"])), function (props) {
-  return props.theme.subtitleFontFamily;
-}, function (props) {
-  return props.theme.subtitleFontSize;
-}, function (props) {
-  return props.theme.subtitleFontStyle;
-}, function (props) {
-  return props.theme.subtitleFontWeight;
-}, function (props) {
-  return props.theme.subtitleFontColor;
-}, function (props) {
-  return props.theme.subtitleFontLetterSpacing;
-}, function (props) {
-  return props.theme.subtitleFontTextTransform;
-});
-
-var SidenavMenuLink = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  cursor: pointer;\n\n  :focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n"])), function (props) {
-  return props.theme.linkFontFamily;
-}, function (props) {
-  return props.theme.linkFontSize;
-}, function (props) {
-  return props.theme.linkFontStyle;
-}, function (props) {
-  return props.theme.linkFontWeight;
-}, function (props) {
-  return props.theme.linkFontColor;
-}, function (props) {
-  return props.theme.linkFontLetterSpacing;
-}, function (props) {
-  return props.theme.linkFontTextTransform;
-}, function (props) {
-  return props.theme.linkTextDecoration;
-}, function (props) {
-  return "".concat(props.theme.linkMarginTop, " ").concat(props.theme.linkMarginRight, " ").concat(props.theme.linkMarginBottom, " ").concat(props.theme.linkMarginLeft);
-}, function (props) {
-  return props.theme.linkFocusColor;
-});
-
-DxcSidenav.Title = Title;
-DxcSidenav.Subtitle = Subtitle;
-DxcSidenav.Link = Link;
-var _default = DxcSidenav;
-exports["default"] = _default;

package/sidenav/Sidenav.stories.tsx

@@ -1,182 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import DxcSidenav from "./Sidenav";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-
-export default {
-  title: "Sidenav",
-  component: DxcSidenav,
-};
-
-const linkClick = () => {
-  console.log("click");
-};
-
-const StyledContainer = styled["div"]`
-  display: flex;
-  flex-direction: row;
-  height: 500px;
-`;
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Deafult sidenav" theme="light" level={4} />
-      <DxcSidenav>
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xxsmall padding" theme="light" level={4} />
-      <DxcSidenav padding="xxsmall">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xsmall padding" theme="light" level={4} />
-      <DxcSidenav padding="xsmall">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with small padding" theme="light" level={4} />
-      <DxcSidenav padding="small">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with medium padding" theme="light" level={4} />
-      <DxcSidenav padding="medium">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with large padding" theme="light" level={4} />
-      <DxcSidenav padding="large">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xlarge padding" theme="light" level={4} />
-      <DxcSidenav padding="xlarge">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xxlarge padding" theme="light" level={4} />
-      <DxcSidenav padding="xxlarge">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav compound components" theme="light" level={4} />
-      <DxcSidenav>
-        <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
-        <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
-        <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
-        <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
-        <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
-        <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
-        <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with scroll" theme="light" level={4} />
-      <StyledContainer>
-        <DxcSidenav>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna, placerat sit amet felis
-            eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue
-            laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum
-            cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus eros aliquam erat, ut
-            efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus
-            aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris.
-            Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat
-            sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc dignissim, pharetra
-            neque molestie, molestie lectus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
-            luctus porttitor. Donec massa magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum
-            dolor sit amet, consectetur adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis.
-            Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna
-            ullamcorper facilisis Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
-            dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae.
-            Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum
-            purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id,
-            condimentum blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </p>
-        </DxcSidenav>
-      </StyledContainer>
-    </ExampleContainer>
-
-    <ExampleContainer pseudoState="pseudo-focus-visible">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcSidenav>
-        <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
-        <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
-        <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
-        <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
-        <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
-        <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
-        <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
-      </DxcSidenav>
-    </ExampleContainer>
-  </>
-);

package/sidenav/Sidenav.test.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _Sidenav = _interopRequireDefault(require("./Sidenav"));
-
-var navContent = /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test");
-
-describe("Sidenav component tests", function () {
-  test("Sidenav  renders nav  content", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, navContent)),
-        getByText = _render.getByText;
-
-    expect(getByText("nav-content-test")).toBeTruthy();
-  });
-  test("Sidenav renders nav and page content in mobile version", function () {
-    //425 is mobile width
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 425
-    });
-
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, navContent)),
-        getByText = _render2.getByText;
-
-    expect(getByText("nav-content-test")).toBeTruthy();
-  });
-  test("Sidenav renders compound components", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Title, null, "test-title"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Subtitle, null, "test-subtitle"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "test-link"))),
-        getByText = _render3.getByText;
-
-    expect(getByText("test-title")).toBeTruthy();
-    expect(getByText("test-subtitle")).toBeTruthy();
-    expect(getByText("test-link")).toBeTruthy();
-  });
-  test("Sidenav link onClick", function () {
-    var onClick = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      onClick: onClick
-    }, "test-link"))),
-        getByText = _render4.getByText;
-
-    var link = getByText("test-link");
-
-    _react2.fireEvent.click(link);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-});

package/sidenav/types.d.ts

@@ -1,50 +0,0 @@
-/// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-export declare type SidenavLinkPropsType = {
-    /**
-     * Value of the tabindex.
-     */
-    tabIndex?: number;
-    /**
-     * Page to be opened when the user clicks on the link.
-     */
-    href?: string;
-    /**
-     * This function will be called when the user clicks the link.
-     */
-    onClick?: () => void;
-    /**
-     * The area inside the sidenav link. This area can be used to render custom content.
-     */
-    children: React.ReactNode;
-};
-export declare type SidenavTitlePropsType = {
-    /**
-     * The area inside the sidenav title. This area can be used to render custom content.
-     */
-    children: React.ReactNode;
-};
-export declare type SidenavSubtitlePropsType = {
-    /**
-     * The area inside the sidenav subtitle. This area can be used to render custom content.
-     */
-    children: React.ReactNode;
-};
-declare type SidenavPropsType = {
-    /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
-     */
-    padding?: Space | Padding;
-    /**
-     * The area inside the sidenav. This area can be used to render custom content.
-     */
-    children: React.ReactNode;
-};
-export default SidenavPropsType;

package/sidenav/types.js

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

package/slider/Slider.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import SliderPropsType from "./types";
-declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
-export default DxcSlider;