@dxc-technology/halstack-react 0.0.0-d20b360 → 0.0.0-d3554d7

package/select/types.d.ts

@@ -0,0 +1,170 @@
+/// <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 defined, the component will change its appearance, showing
+     * the error below the select component. If it is not defined, the error
+     * messages will be managed internally, but never displayed on its own.
+     */
+    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;
+    /**
+     * 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 be null.
+     */
+    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 be null.
+     */
+    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;
+    /**
+     * 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;
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/select/types.js

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

package/sidenav/Sidenav.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import SidenavPropsType, { SidenavTitlePropsType, SidenavSubtitlePropsType, SidenavLinkPropsType } from "./types.js";
+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

@@ -9,21 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -55,10 +51,13 @@ var Subtitle = function Subtitle(_ref3) {
 };
 
 var Link = function Link(_ref4) {
-  var href = _ref4.href,
+  var _ref4$tabIndex = _ref4.tabIndex,
+      tabIndex = _ref4$tabIndex === void 0 ? 0 : _ref4$tabIndex,
+      href = _ref4.href,
       onClick = _ref4.onClick,
       children = _ref4.children;
   return /*#__PURE__*/_react["default"].createElement(SideNavMenuLink, {
+    tabIndex: tabIndex,
     href: href,
     onClick: onClick
   }, children);
@@ -130,14 +129,6 @@ var SideNavMenuLink = _styledComponents["default"].a(_templateObject4 || (_templ
   return props.theme.linkFocusColor;
 });
 
-DxcSidenav.propTypes = {
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
 DxcSidenav.Title = Title;
 DxcSidenav.Subtitle = Subtitle;
 DxcSidenav.Link = Link;

package/sidenav/Sidenav.stories.tsx

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

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

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

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

package/slider/Slider.d.ts

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