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

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/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -70,7 +70,7 @@ var ChoicesInput = _ref => {
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     key: choice.value,
     name: name,
-    id: "".concat(id, "-").concat(choice.value),
+    id: name,
     multiple: multiple,
     validate: validate,
     disabled: disabled

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -45,7 +45,8 @@ var TextareaInput = _ref => {
     description,
     disabled,
     placeholder,
-    autoComplete // ...otherProps
+    autoComplete,
+    resize // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -68,6 +69,9 @@ var TextareaInput = _ref => {
     id: textAreaId,
     className: "textarea"
   }, field, {
+    style: {
+      resize
+    },
     placeholder: placeholder,
     rows: rows,
     disabled: disabled,
@@ -153,12 +157,19 @@ TextareaInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: _propTypes.default.string
+  autoComplete: _propTypes.default.string,
+
+  /**
+   * Whether to disable or allow only a certain method of resizing the area
+   * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+   */
+  resize: _propTypes.default.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background2',
-  disabled: false
+  disabled: false,
+  resize: 'vertical'
 };
 
 var _default = /*#__PURE__*/(0, React.memo)(TextareaInput);

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/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -49,7 +49,7 @@ const ChoicesInput = ({
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
     key: choice.value,
     name: name,
-    id: `${id}-${choice.value}`,
+    id: name,
     multiple: multiple,
     validate: validate,
     disabled: disabled

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -29,7 +29,8 @@ const TextareaInput = ({
   description,
   disabled,
   placeholder,
-  autoComplete // ...otherProps
+  autoComplete,
+  resize // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -52,6 +53,9 @@ const TextareaInput = ({
     id: textAreaId,
     className: "textarea"
   }, field, {
+    style: {
+      resize
+    },
     placeholder: placeholder,
     rows: rows,
     disabled: disabled,
@@ -137,11 +141,18 @@ TextareaInput.propTypes = {
   /**
    * The autoComplete value that the browser should watch for the input
    */
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+
+  /**
+   * Whether to disable or allow only a certain method of resizing the area
+   * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+   */
+  resize: PropTypes.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background2',
-  disabled: false
+  disabled: false,
+  resize: 'vertical'
 };
 export default /*#__PURE__*/memo(TextareaInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.57",
+  "version": "2.0.0-alpha.59",
   "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
+  9 days ago
 </p>
 `;
 
@@ -10587,6 +10587,11 @@ exports[`Storyshots f/FormInput Base 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
     />
   </div>
   <div
@@ -10779,6 +10784,11 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
     />
   </div>
   <div
@@ -11285,6 +11295,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="#"
@@ -13842,6 +14021,55 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "none",
+        }
+      }
       value=""
     />
   </div>
@@ -13881,6 +14109,55 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "horizontal",
+        }
+      }
       value=""
     />
   </div>
@@ -13921,6 +14198,11 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
       onChange={[Function]}
       placeholder="Type your feedback here..."
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
       value=""
     />
   </div>
@@ -13960,6 +14242,55 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
       value=""
     />
   </div>

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/stories/f/TextareaInput.stories.jsx

@@ -73,3 +73,21 @@ Disabled.args = {
   ...Base.args,
   disabled:true,
 }
+
+export const VerticalResize = Template.bind({})
+VerticalResize.args = {
+  ...Base.args,
+  resize:'vertical',
+}
+
+export const HorizontalResize = Template.bind({})
+HorizontalResize.args = {
+  ...Base.args,
+  resize:'horizontal',
+}
+
+export const DisableResize = Template.bind({})
+DisableResize.args = {
+  ...Base.args,
+  resize:'none',
+}

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',
   ]),

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -72,7 +72,7 @@ const ChoicesInput = ({
           <Choice
             key={choice.value}
             name={name}
-            id={`${id}-${choice.value}`}
+            id={name}
             multiple={multiple}
             validate={validate}
             disabled={disabled}

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -36,6 +36,7 @@ const TextareaInput = ({
   disabled,
   placeholder,
   autoComplete,
+  resize,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -73,6 +74,7 @@ const TextareaInput = ({
         id={textAreaId}
         className="textarea"
         {...field}
+        style={{ resize }}
         placeholder={placeholder}
         rows={rows}
         disabled={disabled}
@@ -160,12 +162,19 @@ TextareaInput.propTypes = {
    * The autoComplete value that the browser should watch for the input
    */
   autoComplete:PropTypes.string,
+
+  /**
+   * Whether to disable or allow only a certain method of resizing the area
+   * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+   */
+  resize:PropTypes.string,
 }
 
 TextareaInput.defaultProps = {
   rows         :3,
   textAreaColor:'background2',
   disabled     :false,
+  resize       :'vertical',
 }
 
 export default memo(TextareaInput)