@pareto-engineering/design-system 2.0.0-alpha.17 → 2.0.0-alpha.20

package/dist/cjs/a/Conversation/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/dist/cjs/a/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "OvalIllustration", {
     return _OvalIllustration.OvalIllustration;
   }
 });
+Object.defineProperty(exports, "SnapScroller", {
+  enumerable: true,
+  get: function get() {
+    return _SnapScroller.SnapScroller;
+  }
+});
 Object.defineProperty(exports, "BackgroundGradient", {
   enumerable: true,
   get: function get() {
@@ -204,4 +210,6 @@ var _Shapes = require("./Shapes");
 
 var _OvalIllustration = require("./OvalIllustration");
 
+var _SnapScroller = require("./SnapScroller");
+
 var _BackgroundGradient = require("./BackgroundGradient");

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

@@ -59,7 +59,7 @@ var TextInput = _ref => {
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
     color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({

package/dist/cjs/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

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

@@ -43,7 +43,8 @@ var TextareaInput = _ref => {
     textAreaColor,
     labelColor,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -55,16 +56,18 @@ var TextareaInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
@@ -137,12 +140,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: _propTypes.default.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main2',
   disabled: false
 };
 

package/dist/es/a/Conversation/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/dist/es/a/index.js

@@ -20,4 +20,5 @@ export { DotInfo } from "./DotInfo";
 export { Timestamp } from "./Timestamp";
 export { Shapes } from "./Shapes";
 export { OvalIllustration } from "./OvalIllustration";
+export { SnapScroller } from "./SnapScroller";
 export { BackgroundGradient } from "./BackgroundGradient";

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

@@ -42,7 +42,7 @@ const TextInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
     color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({

package/dist/es/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

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

@@ -27,7 +27,8 @@ const TextareaInput = ({
   textAreaColor,
   labelColor,
   description,
-  disabled // ...otherProps
+  disabled,
+  placeholder // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -39,16 +40,18 @@ const TextareaInput = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`, `y-${labelColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: `textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
@@ -121,12 +124,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: PropTypes.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextareaInput);

package/package.json

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

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

@@ -1871,6 +1871,160 @@ exports[`Storyshots a/Shapes Triangle 1`] = `
 
 exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
 
+exports[`Storyshots a/SnapScroller Base 1`] = `
+<div
+  className="base snap-scroller u1 pv-u"
+  style={
+    Object {
+      "background": "var(--background4)",
+    }
+  }
+>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Some content here
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus. Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh non euismod condimentum. Aenean non neque sem.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus pretium feugiat lorem nec varius.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "minWidth": "330px",
+        "padding": "var(--u)",
+      }
+    }
+  >
+    Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
+<div
+  className="base snap-scroller u1 pv-u desktop-no-scroll"
+  style={
+    Object {
+      "background": "var(--background4)",
+    }
+  }
+>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Some content here
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus. Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh non euismod condimentum. Aenean non neque sem.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus pretium feugiat lorem nec varius.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+  </div>
+  <div
+    className="card"
+    style={
+      Object {
+        "background": "var(--background1)",
+        "height": "400px",
+        "padding": "var(--u)",
+        "width": "330px",
+      }
+    }
+  >
+    Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Spinner Base 1`] = `
 <div
   className="y-background1 b-y"
@@ -9130,7 +9284,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9150,7 +9304,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9166,10 +9320,10 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main2"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9319,7 +9473,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9339,7 +9493,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9355,10 +9509,10 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main2"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9508,7 +9662,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -11483,7 +11637,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11527,7 +11681,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -11547,7 +11701,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -11591,7 +11745,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11624,7 +11778,7 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11655,18 +11809,18 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main2"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main2"
-        htmlFor="feedBack"
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
       >
         What can we improve on?
       </label>
       <textarea
         className="textarea v50 pv-v input-border"
         disabled={false}
-        name="feedBack"
+        name="feedback"
         onBlur={[Function]}
         onChange={[Function]}
         rows={3}
@@ -11689,7 +11843,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
+exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -11699,20 +11853,110 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main2"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main2"
-        htmlFor="feedBack"
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
       >
         What can we improve on?
       </label>
       <textarea
         className="textarea v50 pv-v input-border"
         disabled={true}
-        name="feedBack"
+        name="feedback"
+        onBlur={[Function]}
+        onChange={[Function]}
+        rows={3}
+        value=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y"
+  >
+    <div
+      className="base text-area-input x-background1"
+    >
+      <label
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
+      >
+        What can we improve on?
+      </label>
+      <textarea
+        className="textarea v50 pv-v input-border"
+        disabled={false}
+        name="feedback"
+        onBlur={[Function]}
+        onChange={[Function]}
+        placeholder="Type your feedback here..."
+        rows={3}
+        value=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y"
+  >
+    <div
+      className="base text-area-input x-background1"
+    >
+      <label
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
+      >
+        What can we improve on?
+      </label>
+      <textarea
+        className="textarea v50 pv-v input-border"
+        disabled={false}
+        name="feedback"
         onBlur={[Function]}
         onChange={[Function]}
+        placeholder="Type your feedback here..."
         rows={3}
         value=""
       />

package/src/stories/a/SnapScroller.stories.jsx

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { SnapScroller } from 'ui'
+
+export default {
+  title        :'a/SnapScroller',
+  component    :SnapScroller,
+  subcomponents:{
+    // Item:SnapScroller.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', minWidth:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u">
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi.
+        Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum,
+        sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}
+
+export const NoScrollOnDesktop = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', width:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u" noScrollOnDesktop>
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque
+        euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis
+        nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}

package/src/stories/f/TextareaInput.stories.jsx

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedBack: '' }}
+        initialValues={{ feedback: '' }}
       >
         <Form>
 
@@ -31,16 +31,52 @@ export default {
 export const Base = () => (
   <div className="y-background1 b-dark-y">
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
     />
     <FormDebugger />
   </div>
 )
-export const DisabledTextareaInput = () => (
+
+export const Placeholder = () => (
+  <div className="y-background1 b-dark-y">
+    <TextareaInput
+      name="feedback"
+      label="What can we improve on?"
+      placeholder="Type your feedback here..."
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Validation = () => {
+  const validate = (value) => {
+    let errorMessage = ''
+    const isValid = value.length > 3
+
+    if (!isValid) {
+      errorMessage = 'Value should be greater than 3 characters'
+    }
+    return errorMessage
+  }
+
+  return (
+    <div className="y-background1 b-dark-y">
+      <TextareaInput
+        name="feedback"
+        label="What can we improve on?"
+        placeholder="Type your feedback here..."
+        validate={validate}
+      />
+      <FormDebugger />
+    </div>
+  )
+}
+
+export const Disabled = () => (
   <div className="y-background1 b-dark-y">
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
       disabled
     />

package/src/ui/a/Conversation/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -0,0 +1,83 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'snap-scroller'
+
+/**
+ * This is the component description.
+ */
+const SnapScroller = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  noScrollOnDesktop,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        noScrollOnDesktop && 'desktop-no-scroll',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+SnapScroller.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop:PropTypes.bool,
+}
+
+SnapScroller.defaultProps = {
+  noScrollOnDesktop:false,
+}
+
+export default SnapScroller

package/src/ui/a/SnapScroller/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SnapScroller } from './SnapScroller'

package/src/ui/a/SnapScroller/styles.scss

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-spacing:var(--spacing, var(--u));
+
+.#{bem.$base}.snap-scroller {
+  display: flex;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  overflow-x: auto;
+  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+
+  > * {
+    &:first-child {
+      margin-left: $default-spacing;
+    }
+    display: inline-block;
+    margin-right: $default-spacing;
+    scroll-snap-align: start;
+  }
+
+
+  @include mixins.media($from:$sm-md) {
+    &.desktop-no-scroll {
+      overflow: auto;
+      -ms-overflow-style: unset; /* for Internet Explorer, Edge */
+      scroll-snap-type: none;
+      scrollbar-width: unset;
+    }
+  }
+}
+
+

package/src/ui/a/index.js

@@ -25,4 +25,5 @@ export { DotInfo } from './DotInfo'
 export { Timestamp } from './Timestamp'
 export { Shapes } from './Shapes'
 export { OvalIllustration } from './OvalIllustration'
+export { SnapScroller } from './SnapScroller'
 export { BackgroundGradient } from './BackgroundGradient'

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

@@ -55,8 +55,7 @@ const TextInput = ({
       // {...otherProps}
     >
       <FormLabel
-        className={[
-          'input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+        className={[oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
           .filter((e) => e)
           .join(' ')}
         name={name}

package/src/ui/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

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

@@ -34,6 +34,7 @@ const TextareaInput = ({
   labelColor,
   description,
   disabled,
+  placeholder,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -52,7 +53,6 @@ const TextareaInput = ({
         componentClassName,
         userClassName,
         `x-${textAreaColor}`,
-        `y-${labelColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -60,11 +60,11 @@ const TextareaInput = ({
       // {...otherProps}
     >
       <FormLabel
-        className={[
-          'c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+        className={[labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
           .filter((e) => e)
           .join(' ')}
         name={name}
+        color={labelColor}
       >
         { label }
       </FormLabel>
@@ -72,6 +72,7 @@ const TextareaInput = ({
         id={textAreaId}
         className={`textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`}
         {...field}
+        placeholder={placeholder}
         rows={rows}
         disabled={disabled}
       >
@@ -123,36 +124,46 @@ TextareaInput.propTypes = {
    * If the text area depends on it's label's text as the default description
    */
   labelAsDescription:PropTypes.bool,
+
   /**
    * The textarea id
   */
-  textAreaId        :PropTypes.string,
+  textAreaId:PropTypes.string,
+
   /**
    * The number of rows int the text area
    */
-  rows              :PropTypes.number,
+  rows:PropTypes.number,
+
   /**
    * Text area base color
    */
-  textAreaColor     :PropTypes.string,
+  textAreaColor:PropTypes.string,
+
   /**
    * Label base color
    */
-  labelColor        :PropTypes.string,
+  labelColor:PropTypes.string,
+
   /**
    * Text area description
    */
-  description       :PropTypes.string,
+  description:PropTypes.string,
+
   /**
    * Whether the text area should be disabled
    */
-  disabled          :PropTypes.bool,
+  disabled:PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder:PropTypes.string,
 }
 
 TextareaInput.defaultProps = {
   rows         :3,
   textAreaColor:'background1',
-  labelColor   :'main2',
   disabled     :false,
 }