@mrshmllw/smores-react 2.0.0 → 2.0.1

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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: #B52525;
+  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: inline-block;
+  border: 1px solid;
+  padding: 2px 13px 4px 13px;
+  border-radius: 8px;
+}
+
+.c2 {
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+@media (min-width:768px) {
+  .c1 {
+    font-size: 10px;
+  }
+}
+
+<div
+  class="c0"
+>
+  <span
+    class="c1 c2"
+    color="red7"
+    cursor="inherit"
+    title=""
+  >
+    Cancelled - Refunded Manually
+  </span>
+</div>
+`;

package/dist/Text/Text.stories.js

@@ -13,7 +13,7 @@ export const Label = Template.bind({});
 Label.args = {
     tag: 'label',
     typo: 'label',
-    color: 'blue7',
+    color: 'secondary',
 };
 export const WithTitle = Template.bind({});
 WithTitle.args = {

package/dist/Text/Text.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,IAAI,oBAAK,IAAI,iDAAoD,CACnE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,oBAAoB;CAC5B,CAAA"}
+{"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,eAAe;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,IAAI,oBAAK,IAAI,iDAAoD,CACnE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,WAAW;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,GAAG,EAAE,GAAG;IACR,KAAK,EAAE,oBAAoB;CAC5B,CAAA"}

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/__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.0.0",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "date-fns": "^2.16.1",
+    "polished": "^4.1.3",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^5.2.1",