@mrshmllw/smores-react 2.1.1 → 2.1.2

package/dist/Text/__tests__/__snapshots__/Text.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+.c0 {
+  font-size: 14px;
+  line-height: 23px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  color: #112035;
+  text-align: left;
+  cursor: inherit;
+  -webkit-letter-spacing: 0.15px;
+  -moz-letter-spacing: 0.15px;
+  -ms-letter-spacing: 0.15px;
+  letter-spacing: 0.15px;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    font-size: 16px;
+    line-height: 26px;
+  }
+}
+
+<p
+  class="c0"
+  color="blue7"
+  cursor="inherit"
+  title=""
+>
+  The quick brown fox jumps over the lazy dog
+</p>
+`;

package/dist/TextInput/TextInput.js

@@ -8,7 +8,7 @@ export const TextInput = ({ id, className = '', type = 'text', placeholder, labe
     label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
         React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label))),
     React.createElement(Content, { value: value, outlined: outlined, error: error },
-        React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, autoComplete: "off", onChange: (e) => {
+        React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
                 onChange && onChange(e.currentTarget.value);
                 onInputChange && onInputChange(e);
             }, onBlur: (e) => {
@@ -24,6 +24,7 @@ const Container = styled.div `
 const Content = styled.div `
   border-bottom: 1px solid;
   border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
+  background-color: ${({ outlined }) => outlined ? 'transparent' : theme.colors['white']};
   display: flex;
   height: 32px;
 
@@ -36,7 +37,6 @@ const Content = styled.div `
     `
       border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
       border-radius: 8px;
-      padding: 16px 12px;
       height: auto;
     `}
 
@@ -48,12 +48,14 @@ const Content = styled.div `
 `;
 const Input = styled.input `
   border: none;
+  background-color: transparent;
   color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
   font-size: 16px;
   width: 100%;
   outline: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  padding: ${({ outlined }) => (outlined ? '17px 14px' : '1px 2px')};
 
   &::placeholder {
     color: ${theme.colors.subtext};

package/dist/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}

package/dist/TextInput/__tests__/__snapshots__/TextInput.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+}
+
+.c1 {
+  border-bottom: 1px solid;
+  border-color: #D2D2D2;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 32px;
+}
+
+.c1:hover,
+.c1:focus-within {
+  border-color: #9E9E9E;
+}
+
+.c2 {
+  border: none;
+  color: #000000;
+  font-size: 16px;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  opacity: 1;
+}
+
+.c2::-webkit-input-placeholder {
+  color: #D2D2D2;
+}
+
+.c2::-moz-placeholder {
+  color: #D2D2D2;
+}
+
+.c2:-ms-input-placeholder {
+  color: #D2D2D2;
+}
+
+.c2::placeholder {
+  color: #D2D2D2;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+    value=""
+  >
+    <input
+      autocomplete="off"
+      class="c2"
+      id="textInput"
+      name="textInput"
+      placeholder="Placeholder"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;

package/dist/Textarea/__tests__/__snapshots__/Textarea.js.snap

@@ -0,0 +1,271 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disabled 1`] = `
+.c1 {
+  font-size: 8px;
+  line-height: 100%;
+  font-weight: 700;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.75px;
+  -moz-letter-spacing: 0.75px;
+  -ms-letter-spacing: 0.75px;
+  letter-spacing: 0.75px;
+  margin: 0;
+  padding: 0;
+  color: #AEAEAE;
+  text-align: left;
+  cursor: inherit;
+  -webkit-letter-spacing: 0.15px;
+  -moz-letter-spacing: 0.15px;
+  -ms-letter-spacing: 0.15px;
+  letter-spacing: 0.15px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2 {
+  font-size: 16px;
+  line-height: 20px;
+  background: #ffffff;
+  border: 1px solid #E5E5E5;
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 100%;
+  padding: 16px;
+  color: #112035;
+  resize: both;
+  cursor: not-allowed;
+  opacity: 0.5;
+  border-color: #D2D2D2;
+}
+
+.c2:hover {
+  border-color: #9E9E9E;
+}
+
+.c2:focus {
+  border-color: #545E7E;
+}
+
+@media (min-width:768px) {
+  .c1 {
+    font-size: 10px;
+  }
+}
+
+<div
+  class="c0"
+  direction="column"
+>
+  <label
+    class="c1"
+    color="grey5"
+    cursor="inherit"
+    title=""
+  >
+    Textarea label
+  </label>
+  <div
+    class="c0"
+    direction="column"
+  >
+    <textarea
+      class="c2"
+      disabled=""
+      id="textarea_id"
+      placeholder="Placeholder text!"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders 1`] = `
+.c1 {
+  font-size: 8px;
+  line-height: 100%;
+  font-weight: 700;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.75px;
+  -moz-letter-spacing: 0.75px;
+  -ms-letter-spacing: 0.75px;
+  letter-spacing: 0.75px;
+  margin: 0;
+  padding: 0;
+  color: #AEAEAE;
+  text-align: left;
+  cursor: inherit;
+  -webkit-letter-spacing: 0.15px;
+  -moz-letter-spacing: 0.15px;
+  -ms-letter-spacing: 0.15px;
+  letter-spacing: 0.15px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2 {
+  font-size: 16px;
+  line-height: 20px;
+  background: #ffffff;
+  border: 1px solid #E5E5E5;
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 100%;
+  padding: 16px;
+  color: #112035;
+  resize: both;
+  cursor: pointer;
+  opacity: 1;
+  border-color: #D2D2D2;
+}
+
+.c2:hover {
+  border-color: #9E9E9E;
+}
+
+.c2:focus {
+  border-color: #545E7E;
+}
+
+@media (min-width:768px) {
+  .c1 {
+    font-size: 10px;
+  }
+}
+
+<div
+  class="c0 Textarea"
+  direction="column"
+>
+  <label
+    class="c1"
+    color="grey5"
+    cursor="inherit"
+    title=""
+  >
+    Textarea label
+  </label>
+  <div
+    class="c0"
+    direction="column"
+  >
+    <textarea
+      class="c2"
+      id="textarea_id"
+      placeholder="Placeholder text!"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders with error 1`] = `
+.c1 {
+  font-size: 8px;
+  line-height: 100%;
+  font-weight: 700;
+  text-transform: uppercase;
+  -webkit-letter-spacing: 0.75px;
+  -moz-letter-spacing: 0.75px;
+  -ms-letter-spacing: 0.75px;
+  letter-spacing: 0.75px;
+  margin: 0;
+  padding: 0;
+  color: #AEAEAE;
+  text-align: left;
+  cursor: inherit;
+  -webkit-letter-spacing: 0.15px;
+  -moz-letter-spacing: 0.15px;
+  -ms-letter-spacing: 0.15px;
+  letter-spacing: 0.15px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2 {
+  font-size: 16px;
+  line-height: 20px;
+  background: #ffffff;
+  border: 1px solid #E5E5E5;
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 100%;
+  padding: 16px;
+  color: #112035;
+  resize: both;
+  cursor: pointer;
+  opacity: 1;
+  border-color: #B52525;
+}
+
+.c2:hover {
+  border-color: #B52525;
+}
+
+.c2:focus {
+  border-color: #B52525;
+}
+
+.c3 {
+  margin-top: 7px;
+  font-size: 12px;
+  color: #B52525;
+}
+
+@media (min-width:768px) {
+  .c1 {
+    font-size: 10px;
+  }
+}
+
+<div
+  class="c0"
+  direction="column"
+>
+  <label
+    class="c1"
+    color="grey5"
+    cursor="inherit"
+    title=""
+  >
+    Textarea label
+  </label>
+  <div
+    class="c0"
+    direction="column"
+  >
+    <textarea
+      class="c2"
+      id="textarea_id"
+      placeholder="Placeholder text!"
+    />
+  </div>
+  <span
+    class="c3"
+  >
+    Something really quite terrible has gone wrong here!
+  </span>
+</div>
+`;

package/dist/Toggle/__tests__/__snapshots__/Toggle.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 32px;
+}
+
+.c0 input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.c3 {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #E5E5E5;
+  border: 1px solid;
+  border-color: #D2D2D2;
+  border-radius: 28px;
+  -webkit-transition: 0.2s background-color border-color;
+  transition: 0.2s background-color border-color;
+  outline: none;
+}
+
+.c3:before {
+  position: absolute;
+  content: '';
+  height: 24px;
+  width: 24px;
+  left: 3px;
+  bottom: 3px;
+  background-color: #ffffff;
+  -webkit-transition: 0.2s -webkit-transform;
+  -webkit-transition: 0.2s transform;
+  transition: 0.2s transform;
+  border-radius: 50%;
+}
+
+.c1:checked + .c2 {
+  background-color: #4CB99F;
+  border: 1px solid;
+  border-color: #469389;
+}
+
+.c1:checked + .c2:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+<label
+  class="c0"
+>
+  <input
+    class="c1"
+    type="checkbox"
+  />
+  <span
+    class="c2 c3"
+  />
+</label>
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [