Staging (#16)

Staging
zapify-ui · Aug 7, 2019 · 023d80e · 023d80e
2 parents 9ca2b8b + 067da61
commit 023d80e
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 67 deletions.
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,17 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.parent !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to parent frame for connecting dev tools');
+  }</script></head><body><div id="root"></div><script src="runtime~main.ba735fcc62253c47f409.bundle.js"></script><script src="vendors~main.9edb3e4cf074f31f48db.bundle.js"></script><script src="main.e0cc436793cbe7021b6b.bundle.js"></script></body></html>
diff --git a/docs/main.e0cc436793cbe7021b6b.bundle.js b/docs/main.e0cc436793cbe7021b6b.bundle.js
diff --git a/docs/runtime~main.ba735fcc62253c47f409.bundle.js b/docs/runtime~main.ba735fcc62253c47f409.bundle.js
diff --git a/docs/sb_dll/storybook_ui-manifest.json b/docs/sb_dll/storybook_ui-manifest.json
diff --git a/docs/sb_dll/storybook_ui_dll.LICENCE b/docs/sb_dll/storybook_ui_dll.LICENCE
@@ -0,0 +1,115 @@
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.15.0
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/*!
+ * https://github.com/es-shims/es5-shim
+ * @license es5-shim Copyright 2009-2015 by contributors, MIT License
+ * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
+ */
+
+/*!
+ * isobject <https://github.com/jonschlinkert/isobject>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/** @license React v16.8.6
+ * react-dom-server.browser.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*!
+ * https://github.com/paulmillr/es6-shim
+ * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
+ *   and contributors,  MIT License
+ * es6-shim: v0.35.4
+ * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
+ * Details and documentation:
+ * https://github.com/paulmillr/es6-shim/
+ */
+
+/** @license React v16.8.6
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.8.6
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v0.13.6
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*! scrollbarWidth.js v0.1.3 | felixexter | MIT | https://github.com/felixexter/scrollbarWidth */
+
+/*!
+ * Fuse.js v3.4.4 - Lightweight fuzzy-search (http://fusejs.io)
+ * 
+ * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+/** @license React v16.8.6
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*!
+	  Copyright (c) 2016 Jed Watson.
+	  Licensed under the MIT License (MIT), see
+	  http://jedwatson.github.io/classnames
+	*/
diff --git a/docs/sb_dll/storybook_ui_dll.js b/docs/sb_dll/storybook_ui_dll.js
diff --git a/docs/vendors~main.9edb3e4cf074f31f48db.bundle.js b/docs/vendors~main.9edb3e4cf074f31f48db.bundle.js
diff --git a/src/components/Container/index.js b/src/components/Container/index.js
@@ -28,4 +28,4 @@ Container.propType = {
   maxWidth: Proptypes.string
 };
 
-export default Container;
+export default Container;
diff --git a/src/components/Media/index.js b/src/components/Media/index.js
@@ -1,43 +1,58 @@
-import React,{Component} from 'react';
+import React, { Component } from "react";
 import Proptypes from "prop-types";
 
-export default class Media extends Component{
-    render() {
-        if(this.props.typeGet === "linear"){
-                   return( <div style={{display:'flex'}}>
-                    <div>
-                        <img height={64} width={64} src="https://tinyurl.com/yylsuh97" alt="Generic placeholder"/>
-                    </div>
-                    <div>
-                       <h3>Media Heading</h3>
-                       <p>{this.props.children}</p>
-                    </div>                   
-                   </div>   )
-        }else if(this.props.typeGet === "nested"){
-            return(
-            <div>
-                <img height={64} width={64} src="https://tinyurl.com/yylsuh97" alt="Generic placeholder"/>
-                <div>
-                    <h3>Hello</h3>
-                    <p>{this.props.children}</p>
-
-                    <div style={{paddingLeft:'10vw'}}>
-                        <img height={64} width={64} src="https://tinyurl.com/yylsuh97" alt="Generic placeholder"/>
-                         <div>
-                            <h3>Nested Hola</h3>
-                            <p>{this.props.children}</p>
-                        </div>    
-                    </div>
-                 </div>                
+export default class Media extends Component {
+  render() {
+    if (this.props.typeGet === "linear") {
+      return (
+        <div style={{ display: "flex" }}>
+          <div>
+            <img
+              height={64}
+              width={64}
+              src="https://tinyurl.com/yylsuh97"
+              alt="Generic placeholder"
+            />
+          </div>
+          <div>
+            <h3>Media Heading</h3>
+            <p>{this.props.children}</p>
+          </div>
+        </div>
+      );
+    } else if (this.props.typeGet === "nested") {
+      return (
+        <div>
+          <img
+            height={64}
+            width={64}
+            src="https://tinyurl.com/yylsuh97"
+            alt="Generic placeholder"
+          />
+          <div>
+            <h3>Hello</h3>
+            <p>{this.props.children}</p>
+
+            <div style={{ paddingLeft: "10vw" }}>
+              <img
+                height={64}
+                width={64}
+                src="https://tinyurl.com/yylsuh97"
+                alt="Generic placeholder"
+              />
+              <div>
+                <h3>Nested Hola</h3>
+                <p>{this.props.children}</p>
+              </div>
             </div>
-            );
-        }else{
-            console.log('Error');
-        }
-
-
+          </div>
+        </div>
+      );
+    } else {
+      console.log("Error");
     }
+  }
 }
 Media.propType = {
-    typeGet: Proptypes.oneOf(['linear','nested'])
-  }
+  typeGet: Proptypes.oneOf(["linear", "nested"])
+};
diff --git a/src/components/index.js b/src/components/index.js
@@ -5,4 +5,4 @@ export { default as Typography } from "./Typography";
 export { default as TextField } from "./TextField";
 export { default as Container } from "./Container";
 export { default as Grid } from "./Grid";
-export { default as Media } from "./Media"
+export { default as Media } from "./Media";
diff --git a/src/stories/textfield.stories.js b/src/stories/textfield.stories.js
@@ -4,5 +4,6 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import TextField from "../components/TextField";
 
-storiesOf("TextField", module)
-  .add("With label", () => <TextField >Hello</TextField>);
+storiesOf("TextField", module).add("With label", () => (
+  <TextField>Hello</TextField>
+));
diff --git a/src/styles/ColorSchema.js b/src/styles/ColorSchema.js
@@ -1,31 +1,31 @@
 export const COLORS = {
-  blue: '#1BADF8',
-  darkBlue: '#2B7DE5',
-  grey: '#A9A9A9',
-  darkGrey: '#6C6C6C',
-  green: '#63DA38',
-  darkGreen: '#00AB21',
-  orange: '#FF9500',
-  darkOrange: '#D75F00',
-  pink: '#FF2968',
-  darkPink: '#99195E',
-  purple: '#CC73E1',
-  darkPurple: '#7C1FA1',
-  red: '#FF3B30',
-  darkRed: '#C22518',
-  white: '#FFFFFF',
-  yellow: '#FFCC00',
-  darkYellow: '#D8AC21',
-  black: '#000000'
+  blue: "#1BADF8",
+  darkBlue: "#2B7DE5",
+  grey: "#A9A9A9",
+  darkGrey: "#6C6C6C",
+  green: "#63DA38",
+  darkGreen: "#00AB21",
+  orange: "#FF9500",
+  darkOrange: "#D75F00",
+  pink: "#FF2968",
+  darkPink: "#99195E",
+  purple: "#CC73E1",
+  darkPurple: "#7C1FA1",
+  red: "#FF3B30",
+  darkRed: "#C22518",
+  white: "#FFFFFF",
+  yellow: "#FFCC00",
+  darkYellow: "#D8AC21",
+  black: "#000000"
 };
 
 export const GRADIENTS = {
-  blue: 'linear-gradient(180deg, #1BADF8 0%, #2B7DE5 100%)',
-  grey: 'linear-gradient(180deg, #6C6C6C 0%, #434343 100%)',
-  green: 'linear-gradient(180deg, #63DA38 0%, #00AB21 100%)',
-  orange: 'linear-gradient(180deg, #FF9500 0%, #D75F00 100%)',
-  pink: 'linear-gradient(180deg, #FF2968 0%, #99195E 100%)',
-  purple: 'linear-gradient(180deg, #CC73E1 0%, #7C1FA1 100%)',
-  red: 'linear-gradient(180deg, #FF3B30 0%, #C22518 100%)',
-  yellow: 'linear-gradient(180deg, #FFCC00 0%, #D8AC21 100%)'
+  blue: "linear-gradient(180deg, #1BADF8 0%, #2B7DE5 100%)",
+  grey: "linear-gradient(180deg, #6C6C6C 0%, #434343 100%)",
+  green: "linear-gradient(180deg, #63DA38 0%, #00AB21 100%)",
+  orange: "linear-gradient(180deg, #FF9500 0%, #D75F00 100%)",
+  pink: "linear-gradient(180deg, #FF2968 0%, #99195E 100%)",
+  purple: "linear-gradient(180deg, #CC73E1 0%, #7C1FA1 100%)",
+  red: "linear-gradient(180deg, #FF3B30 0%, #C22518 100%)",
+  yellow: "linear-gradient(180deg, #FFCC00 0%, #D8AC21 100%)"
 };