@pareto-engineering/design-system 2.0.0-alpha.57 → 2.0.0-alpha.58

package/dist/cjs/f/FormInput/FormInput.js

@@ -81,6 +81,12 @@ var FormInput = _ref => {
     }, otherProps));
   }
 
+  if (type === 'rating') {
+    return /*#__PURE__*/React.createElement(_fields.RatingsInput, _extends({
+      className: newClassName
+    }, otherProps));
+  }
+
   if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
     var Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({
@@ -105,7 +111,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', // to be removed
+  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', 'rating', // to be removed
   'extendedTypeInput']),
 
   /**

package/dist/es/f/FormInput/FormInput.js

@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import { memo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect } from "../fields"; // Local Definitions
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput } from "../fields"; // Local Definitions
 // const baseClassName = styleNames.base
 
 const componentClassName = 'form-input';
@@ -59,6 +59,12 @@ const FormInput = ({
     }, otherProps));
   }
 
+  if (type === 'rating') {
+    return /*#__PURE__*/React.createElement(RatingsInput, _extends({
+      className: newClassName
+    }, otherProps));
+  }
+
   if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({
@@ -83,7 +89,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', // to be removed
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', 'rating', // to be removed
   'extendedTypeInput']),
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.57",
+  "version": "2.0.0-alpha.58",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -2950,7 +2950,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in about 1 month
+  in 1 day
 </p>
 `;
 
@@ -11285,6 +11285,175 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Ratings Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base ratings-input form-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+    </label>
+    <div
+      className="stars"
+    >
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-1"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={1}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-2"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={2}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-3"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={3}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-4"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={4}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-5"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={5}
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/common/Description Base 1`] = `
 <form
   action="#"

package/src/stories/f/FormInput.stories.jsx

@@ -332,6 +332,32 @@ export const WithPrefetchedQuerySelect = () => {
   )
 }
 
+export const WithRatingsInput = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type       :'rating',
+      ratingCount:5,
+      name       :'ratings',
+      label      :'Your Rating',
+    },
+  ]
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
 export const ExtensibleFormInput = () => {
   const ExtendedTextInput = (props) => (
     <TextInput

package/src/ui/f/FormInput/FormInput.jsx

@@ -12,6 +12,7 @@ import {
   SelectInput,
   QueryCombobox,
   QuerySelect,
+  RatingsInput,
 } from '../fields'
 
 // Local Definitions
@@ -84,6 +85,15 @@ const FormInput = ({
       />
     )
   }
+
+  if (type === 'rating') {
+    return (
+      <RatingsInput
+        className={newClassName}
+        {...otherProps}
+      />
+    )
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (
@@ -128,6 +138,7 @@ FormInput.propTypes = {
     'textarea',
     'query-combobox',
     'url',
+    'rating',
     // to be removed
     'extendedTypeInput',
   ]),