@dxc-technology/halstack-react 0.0.0-0f1b72b → 0.0.0-100df21

package/number-input/NumberInput.js

@@ -1,47 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
+exports["default"] = exports.NumberInputContext = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
-
-var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext"));
-
 var _templateObject;
-
+var NumberInputContext = exports.NumberInputContext = /*#__PURE__*/_react["default"].createContext(null);
 var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
-      name = _ref.name,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      helperText = _ref.helperText,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      optional = _ref.optional,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      min = _ref.min,
-      max = _ref.max,
-      _ref$step = _ref.step,
-      step = _ref$step === void 0 ? 1 : _ref$step,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      error = _ref.error,
-      autocomplete = _ref.autocomplete,
-      margin = _ref.margin,
-      size = _ref.size,
-      tabIndex = _ref.tabIndex;
-  return /*#__PURE__*/_react["default"].createElement(_NumberInputContext["default"].Provider, {
+    name = _ref.name,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    optional = _ref.optional,
+    readOnly = _ref.readOnly,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    error = _ref.error,
+    autocomplete = _ref.autocomplete,
+    margin = _ref.margin,
+    size = _ref.size,
+    tabIndex = _ref.tabIndex;
+  return /*#__PURE__*/_react["default"].createElement(NumberInputContext.Provider, {
     value: {
       typeNumber: "number",
       minNumber: min,
@@ -57,6 +50,7 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
     placeholder: placeholder,
     disabled: disabled,
     optional: optional,
+    readOnly: readOnly,
     prefix: prefix,
     suffix: suffix,
     error: error,
@@ -69,8 +63,5 @@ var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, r
     ref: ref
   })));
 });
-
 var NumberInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  // Chrome, Safari, Edge, Opera\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  // Firefox\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n"])));
-
-var _default = DxcNumberInput;
-exports["default"] = _default;
+var _default = exports["default"] = DxcNumberInput;

package/number-input/NumberInput.stories.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
 import DxcNumberInput from "./NumberInput";
 
 export default {
-  title: "Number input ",
+  title: "Number Input",
   component: DxcNumberInput,
 };
 
@@ -32,6 +30,39 @@ export const Chromatic = () => (
       <Title title="Disabled, helper text, optional and value" theme="light" level={4} />
       <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="10" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Read only" theme="light" level={4} />
+      <DxcNumberInput
+        label="Example label"
+        helperText="Help message"
+        readOnly
+        optional
+        prefix="€"
+        defaultValue="33"
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered read only" theme="light" level={4} />
+      <DxcNumberInput
+        label="Example label"
+        helperText="Help message"
+        readOnly
+        optional
+        prefix="€"
+        defaultValue="1"
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active read only" theme="light" level={4} />
+      <DxcNumberInput
+        label="Example label"
+        helperText="Help message"
+        readOnly
+        optional
+        prefix="€"
+        placeholder="Placeholder"
+      />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Prefix" theme="light" level={4} />
       <DxcNumberInput label="With prefix" prefix="+34" />
@@ -42,29 +73,14 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Invalid" theme="light" level={4} />
-      <DxcNumberInput label="Error number input" helperText="Help message" error="Error message." defaultValue="23" optional />
-    </ExampleContainer>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <Title title="Dark" theme="dark" level={2} />
-        <ExampleContainer>
-          <Title title="Helper text, placeholder and optional" theme="dark" level={4} />
-          <DxcNumberInput label="Number input" helperText="Help message" placeholder="Placeholder" optional />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Helper text, value and error" theme="dark" level={4} />
-          <DxcNumberInput label="Number input" helperText="Help message" error="Error message." defaultValue="199" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled and placeholder" theme="dark" level={4} />
-          <DxcNumberInput label="Disabled number input" disabled placeholder="Placeholder" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled, helper text, optional and value" theme="dark" level={4} />
-          <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="1232454" />
-        </ExampleContainer>
-      </DarkContainer>
-    </BackgroundColorProvider>
+      <DxcNumberInput
+        label="Error number input"
+        helperText="Help message"
+        error="Error message."
+        defaultValue="23"
+        optional
+      />
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />