@dxc-technology/halstack-react 0.0.0-099fc65 → 0.0.0-0a4df06

package/select/index.d.ts

@@ -1,131 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-
-type OptionGroup = {
-  /**
-   * Label of the group to be shown in the select's listbox.
-   */
-  label: string;
-  /**
-   * List of the grouped options.
-   */
-  options: Option[];
-};
-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;
-};
-
-type Props = {
-  /**
-   * 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;
-  /**
-   * Value of the select. If undefined, the component will be uncontrolled
-   * and the value will be managed internally by the component.
-   */
-  value?: string | 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 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?: boolean;
-  /**
-   * 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?: (value: string | string[]) => void;
-  /**
-   * This function will be called when the select loses the focus. An
-   * object including the value (or 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 | string[]; error: string }) => void;
-  /**
-   * 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 ('small' | 'medium' | 'large' | 'fillParent').
-   */
-  size?: "small" | "medium" | "large" | "fillParent";
-  /**
-   * Value of the tabindex attribute.
-   */
-  tabIndex?: number;
-  /**
-   * Reference to the component.
-   */
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-export default function DxcSelect(props: Props): JSX.Element;

package/sidenav/Sidenav.d.ts

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

@@ -1,136 +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.js"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
-
-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;
-  return /*#__PURE__*/_react["default"].createElement(SideNavMenuLink, {
-    tabIndex: tabIndex,
-    href: href,
-    onClick: onClick
-  }, children);
-};
-
-var SideNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  max-width: 300px;\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;
-}, 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,165 +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.
-          </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/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, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
-export default DxcSlider;