@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c04360

package/translatedLabelsType.d.ts

@@ -1,82 +0,0 @@
-type TranslatedLabelsContextTypes = {
-    formFields: {
-        optionalLabel: string;
-        requiredSelectionErrorMessage: string;
-        requiredValueErrorMessage: string;
-        formatRequestedErrorMessage: string;
-        lengthErrorMessage: (minLength: number, maxLength: number) => string;
-        logoAlternativeText: string;
-    };
-    applicationLayout: {
-        visibilityToggleTitle: string;
-    };
-    alert: {
-        infoTitleText: string;
-        successTitleText: string;
-        warningTitleText: string;
-        errorTitleText: string;
-    };
-    dateInput: {
-        invalidDateErrorMessage: string;
-    };
-    fileInput: {
-        fileSizeGreaterThanErrorMessage: string;
-        fileSizeLessThanErrorMessage: string;
-        multipleButtonLabelDefault: string;
-        singleButtonLabelDefault: string;
-        dropAreaButtonLabelDefault: string;
-        multipleDropAreaLabelDefault: string;
-        singleDropAreaLabelDefault: string;
-        deleteFileActionTitle: string;
-    };
-    footer: {
-        copyrightText: (year: number) => string;
-    };
-    header: {
-        closeIcon: string;
-        hamburguerTitle: string;
-    };
-    numberInput: {
-        valueGreaterThanOrEqualToErrorMessage: (minLength: number) => string;
-        valueLessThanOrEqualToErrorMessage: (maxLength: number) => string;
-        decrementValueTitle: string;
-        incrementValueTitle: string;
-    };
-    paginator: {
-        itemsPerPageText: string;
-        minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
-        goToPageText: string;
-        pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
-    };
-    passwordInput: {
-        inputShowPasswordTitle: string;
-        inputHidePasswordTitle: string;
-    };
-    quickNav: {
-        contentTitle: string;
-    };
-    radioGroup: {
-        optionalItemLabelDefault: string;
-    };
-    select: {
-        noMatchesErrorMessage: string;
-        actionClearSelectionTitle: string;
-        actionClearSearchTitle: string;
-    };
-    tabs: {
-        scrollLeft: string;
-        scrollRight: string;
-    };
-    textInput: {
-        clearFieldActionTitle: string;
-        searchingMessage: string;
-        fetchingDataErrorMessage: string;
-    };
-    calendar: {
-        daysShort: string[];
-        months: string[];
-        previousMonthTitle: string;
-        nextMonthTitle: string;
-    };
-};
-export default TranslatedLabelsContextTypes;

package/translatedLabelsType.js

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

package/typography/Typography.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import TypographyPropsTypes from "./types";
-declare const Typography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: TypographyPropsTypes) => JSX.Element;
-export default Typography;

package/typography/Typography.js

@@ -1,119 +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 = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-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 TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
-var Typography = function Typography(_ref) {
-  var as = _ref.as,
-    display = _ref.display,
-    fontFamily = _ref.fontFamily,
-    fontSize = _ref.fontSize,
-    fontStyle = _ref.fontStyle,
-    fontWeight = _ref.fontWeight,
-    letterSpacing = _ref.letterSpacing,
-    lineHeight = _ref.lineHeight,
-    textAlign = _ref.textAlign,
-    color = _ref.color,
-    textDecoration = _ref.textDecoration,
-    textOverflow = _ref.textOverflow,
-    whiteSpace = _ref.whiteSpace,
-    children = _ref.children;
-  var componentContext = (0, _react.useContext)(TypographyContext);
-  var asValue = as !== null && as !== void 0 ? as : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) || "span";
-  var displayValue = display !== null && display !== void 0 ? display : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) || "inline";
-  var fontFamilyValue = fontFamily !== null && fontFamily !== void 0 ? fontFamily : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) || "Open Sans, sans-serif";
-  var fontSizeValue = fontSize !== null && fontSize !== void 0 ? fontSize : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) || "1rem";
-  var fontStyleValue = fontStyle !== null && fontStyle !== void 0 ? fontStyle : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) || "normal";
-  var fontWeightValue = fontWeight !== null && fontWeight !== void 0 ? fontWeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) || "400";
-  var letterSpacingValue = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) || "0em";
-  var lineHeightValue = lineHeight !== null && lineHeight !== void 0 ? lineHeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) || "1.5em";
-  var textAlignValue = textAlign !== null && textAlign !== void 0 ? textAlign : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) || "left";
-  var colorValue = color !== null && color !== void 0 ? color : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) || "#000000";
-  var textDecorationValue = textDecoration !== null && textDecoration !== void 0 ? textDecoration : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) || "none";
-  var textOverflowValue = textOverflow !== null && textOverflow !== void 0 ? textOverflow : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) || "unset";
-  var whiteSpaceValue = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) || "normal";
-  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
-    value: {
-      as: asValue,
-      display: displayValue,
-      fontFamily: fontFamilyValue,
-      fontSize: fontSizeValue,
-      fontStyle: fontStyleValue,
-      fontWeight: fontWeightValue,
-      letterSpacing: letterSpacingValue,
-      lineHeight: lineHeightValue,
-      textAlign: textAlignValue,
-      color: colorValue,
-      textDecoration: textDecorationValue,
-      textOverflow: textOverflowValue,
-      whiteSpace: whiteSpaceValue
-    }
-  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, {
-    as: asValue,
-    display: displayValue,
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    fontStyle: fontStyleValue,
-    fontWeight: fontWeightValue,
-    letterSpacing: letterSpacingValue,
-    lineHeight: lineHeightValue,
-    textAlign: textAlignValue,
-    color: colorValue,
-    textDecoration: textDecorationValue,
-    textOverflow: textOverflowValue,
-    whiteSpace: whiteSpaceValue
-  }, children));
-};
-var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-align: ", ";\n  line-height: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n"])), function (_ref2) {
-  var display = _ref2.display;
-  return display;
-}, function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, function (_ref4) {
-  var fontFamily = _ref4.fontFamily;
-  return fontFamily;
-}, function (_ref5) {
-  var fontSize = _ref5.fontSize;
-  return fontSize;
-}, function (_ref6) {
-  var fontStyle = _ref6.fontStyle;
-  return fontStyle;
-}, function (_ref7) {
-  var fontWeight = _ref7.fontWeight;
-  return fontWeight;
-}, function (_ref8) {
-  var letterSpacing = _ref8.letterSpacing;
-  return letterSpacing;
-}, function (_ref9) {
-  var textAlign = _ref9.textAlign;
-  return textAlign;
-}, function (_ref10) {
-  var lineHeight = _ref10.lineHeight;
-  return lineHeight;
-}, function (_ref11) {
-  var textDecoration = _ref11.textDecoration;
-  return textDecoration;
-}, function (_ref12) {
-  var textOverflow = _ref12.textOverflow;
-  return textOverflow;
-}, function (_ref13) {
-  var whiteSpace = _ref13.whiteSpace,
-    textOverflow = _ref13.textOverflow;
-  return whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal";
-}, function (_ref14) {
-  var textOverflow = _ref14.textOverflow;
-  return textOverflow !== "unset" ? "hidden" : "visible";
-});
-var _default = Typography;
-exports["default"] = _default;

package/typography/Typography.stories.tsx

@@ -1,198 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DxcTypography from "./Typography";
-
-export default {
-  title: "Typography",
-  component: DxcTypography,
-};
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default Typography" theme="light" level={4} />
-      <DxcTypography>Default typography.</DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font sizes" theme="light" level={4} />
-      <DxcTypography display="block" fontSize="3.75rem">
-        3.75rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="3rem">
-        3rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="2rem">
-        2rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.5rem">
-        1.5rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.25rem">
-        1.25rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1rem">
-        1rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.875rem">
-        0.875rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.75rem">
-        0.75rem.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography letter spacing" theme="light" level={4} />
-      <DxcTypography display="block" letterSpacing="-0.025em">
-        -0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="-0.0125em">
-        -0.0125em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0em">
-        0em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.025em">
-        0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.05em">
-        0.05em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.1em">
-        0.1em.
-      </DxcTypography>{" "}
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography line height" theme="light" level={4} />
-      <DxcTypography display="block" lineHeight="1em">
-        1em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.25em">
-        1.25em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.365em">
-        1.365em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.5em">
-        1.5em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.715em">
-        1.715em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="2em">
-        2em.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font weight" theme="light" level={4} />
-      <DxcTypography display="block" fontWeight="300">
-        300.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="400">
-        400.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="600">
-        600.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="700">
-        700.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography decoration" theme="light" level={4} />
-      <DxcTypography display="block" textDecoration="underline">
-        Underline.
-      </DxcTypography>
-      <DxcTypography display="block" textDecoration="line-through">
-        Line-through.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font family" theme="light" level={4} />
-      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
-        Open Sans, sans-serif.
-      </DxcTypography>
-      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
-        Source Code Pro, monospace.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font style" theme="light" level={4} />
-      <DxcTypography display="block" fontStyle="italic">
-        Italic.
-      </DxcTypography>
-      <DxcTypography display="block" fontStyle="normal">
-        Normal.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography align" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Left.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="center">
-        Center.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="right">
-        Right.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography whitespace" theme="light" level={4} />
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="normal" fontSize="2rem">
-          {"                  "} Normal: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
-          {"                  "}No-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre" fontSize="2rem">
-          {"                  "} pre: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
-          {"                  "}pre-line: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
-          {"                  "} pre-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>{" "}
-    <ExampleContainer>
-      <Title title="Typography display" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Display Block.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-      <DxcTypography display="inline" textAlign="left">
-        Display Inline.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography text-overflow" theme="light" level={4} />
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="clip">
-          Overflow clip.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="ellipsis">
-          Overflow ellipsis.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="unset">
-          Overflow unset.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>
-  </>
-);

package/typography/types.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    as?: keyof HTMLElementTagNameMap;
-    display?: "inline" | "block";
-    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
-    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
-    fontStyle?: "italic" | "normal";
-    fontWeight?: "300" | "400" | "600" | "700";
-    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
-    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
-    textAlign?: "left" | "center" | "right";
-    color?: string;
-    textDecoration?: "none" | "underline" | "line-through";
-    textOverflow?: "clip" | "ellipsis" | "unset";
-    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
-    children: React.ReactNode;
-};
-export default Props;

package/typography/types.js

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

package/useTheme.d.ts

@@ -1,2 +0,0 @@
-declare const useTheme: () => object;
-export default useTheme;

package/useTheme.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-var _variables = require("./common/variables");
-var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
-var useTheme = function useTheme() {
-  var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
-  return colorsTheme || _variables.componentTokens;
-};
-var _default = useTheme;
-exports["default"] = _default;

package/useTranslatedLabels.d.ts

@@ -1,3 +0,0 @@
-import TranslatedLabelsContextTypes from "./translatedLabelsType";
-declare const useTranslatedLabels: () => TranslatedLabelsContextTypes;
-export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-var _variables = require("./common/variables");
-var _HalstackContext = require("./HalstackContext");
-var useTranslatedLabels = function useTranslatedLabels() {
-  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
-  return labels || _variables.defaultTranslatedComponentLabels;
-};
-var _default = useTranslatedLabels;
-exports["default"] = _default;

package/wizard/Wizard.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import WizardPropsType from "./types";
-declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
-export default DxcWizard;