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

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/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.58",
+  "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 1 day
+  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
@@ -14011,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>
@@ -14050,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>
@@ -14090,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>
@@ -14129,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/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/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)