Prepared v.0.7.0

PayEx · Jul 3, 2018 · 05fa94a · 05fa94a
1 parent 52ae2e2
commit 05fa94a
Show file tree

Hide file tree

Showing 29 changed files with 92 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.7.0] - 2018-06-?
+## [0.7.0] - 2018-07-03
 
 ### Added
 

diff --git a/dist/0.6.0/scripts/app.js b/dist/0.6.0/scripts/app.js
diff --git a/dist/0.6.0/scripts/app.js.map b/dist/0.6.0/scripts/app.js.map
diff --git a/dist/0.6.0/styles/px.css.map b/dist/0.6.0/styles/px.css.map
diff --git a/dist/0.6.0/styles/templates/documentation.css.map b/dist/0.6.0/styles/templates/documentation.css.map
diff --git a/dist/0.7.0/scripts/app.js b/dist/0.7.0/scripts/app.js
diff --git a/dist/0.7.0/scripts/app.js.map b/dist/0.7.0/scripts/app.js.map
diff --git a/dist/0.6.0/scripts/core-libraries.js → dist/0.7.0/scripts/core-libraries.js b/dist/0.6.0/scripts/core-libraries.js → dist/0.7.0/scripts/core-libraries.js
diff --git a/dist/0.6.0/scripts/core-libraries.js.map → dist/0.7.0/scripts/core-libraries.js.map b/dist/0.6.0/scripts/core-libraries.js.map → dist/0.7.0/scripts/core-libraries.js.map
diff --git a/dist/0.6.0/scripts/polyfills.js → dist/0.7.0/scripts/polyfills.js b/dist/0.6.0/scripts/polyfills.js → dist/0.7.0/scripts/polyfills.js
diff --git a/dist/0.6.0/scripts/polyfills.js.map → dist/0.7.0/scripts/polyfills.js.map b/dist/0.6.0/scripts/polyfills.js.map → dist/0.7.0/scripts/polyfills.js.map
diff --git a/dist/0.6.0/scripts/px-script.js → dist/0.7.0/scripts/px-script.js b/dist/0.6.0/scripts/px-script.js → dist/0.7.0/scripts/px-script.js
diff --git a/dist/0.6.0/scripts/px-script.js.map → dist/0.7.0/scripts/px-script.js.map b/dist/0.6.0/scripts/px-script.js.map → dist/0.7.0/scripts/px-script.js.map
diff --git a/dist/0.6.0/scripts/react-libraries.js → dist/0.7.0/scripts/react-libraries.js b/dist/0.6.0/scripts/react-libraries.js → dist/0.7.0/scripts/react-libraries.js
diff --git a/dist/0.6.0/scripts/react-libraries.js.map → dist/0.7.0/scripts/react-libraries.js.map b/dist/0.6.0/scripts/react-libraries.js.map → dist/0.7.0/scripts/react-libraries.js.map
diff --git a/dist/0.6.0/styles/px.css → dist/0.7.0/styles/px.css b/dist/0.6.0/styles/px.css → dist/0.7.0/styles/px.css
diff --git a/dist/0.7.0/styles/px.css.map b/dist/0.7.0/styles/px.css.map
diff --git a/.../0.6.0/styles/templates/documentation.css → .../0.7.0/styles/templates/documentation.css b/.../0.6.0/styles/templates/documentation.css → .../0.7.0/styles/templates/documentation.css
diff --git a/dist/0.7.0/styles/templates/documentation.css.map b/dist/0.7.0/styles/templates/documentation.css.map
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>PayEx DesignGuide</title>
-<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"><link rel="shortcut icon" href="/icons/favicon.ico"><link href="/0.6.0/styles/px.css?71ad4bbc9b10dd9361b4" rel="stylesheet"><link href="/0.6.0/styles/templates/documentation.css?71ad4bbc9b10dd9361b4" rel="stylesheet"><link href="/styles/designguide.css?71ad4bbc9b10dd9361b4" rel="stylesheet"></head>
+<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"><link rel="shortcut icon" href="/icons/favicon.ico"><link href="/0.7.0/styles/px.css?349740000a5d6d84e2ca" rel="stylesheet"><link href="/0.7.0/styles/templates/documentation.css?349740000a5d6d84e2ca" rel="stylesheet"><link href="/styles/designguide.css?349740000a5d6d84e2ca" rel="stylesheet"></head>
 <body>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3440932-20"></script>
@@ -30,5 +30,5 @@ <h2>Welcome to the PayEx DesignGuide</h2>
     <div id="root"></div>
     <script>window.stopPx=true</script>
     <script src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="text/javascript" src="/0.6.0/scripts/px-script.js?71ad4bbc9b10dd9361b4&71ad4bbc9b10dd9361b4"></script><script type="text/javascript" src="/0.6.0/scripts/polyfills.js?71ad4bbc9b10dd9361b4&71ad4bbc9b10dd9361b4"></script><script type="text/javascript" src="/0.6.0/scripts/core-libraries.js?71ad4bbc9b10dd9361b4&71ad4bbc9b10dd9361b4"></script><script type="text/javascript" src="/0.6.0/scripts/react-libraries.js?71ad4bbc9b10dd9361b4&71ad4bbc9b10dd9361b4"></script><script type="text/javascript" src="/0.6.0/scripts/app.js?71ad4bbc9b10dd9361b4&71ad4bbc9b10dd9361b4"></script></body>
+<script type="text/javascript" src="/0.7.0/scripts/px-script.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/polyfills.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/core-libraries.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/react-libraries.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/app.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script></body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "design.payex.com",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "PayEx DesignGuide",
     "main": "index.js",
     "scripts": {

diff --git a/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap
@@ -72,8 +72,11 @@ exports[`Documentation: Card Overview renders 1`] = `
       <ul>
         <Card
           btnTxt="Button"
-          footerLinkTxt="Come see what we're all about."
+          footerLinkTxt="You wanna click this link?"
           footerTxt="This is some text that goes in the footer."
+          highlightSubTitle="Outstanding balance"
+          highlightTitle="725 NOK"
+          icon="account_balance"
           imgSrc="https://picsum.photos/300"
           smallText="And the small text"
           text="This is the cards text"
@@ -82,8 +85,11 @@ exports[`Documentation: Card Overview renders 1`] = `
         />
         <Card
           btnTxt="Button"
-          footerLinkTxt="Come see what we're all about."
+          footerLinkTxt="You wanna click this link?"
           footerTxt="This is some text that goes in the footer."
+          highlightSubTitle="[email protected]"
+          highlightTitle="Bob Corlsan"
+          icon="face"
           imgSrc="https://picsum.photos/300"
           smallText="And the small text"
           text="This is the cards text"
@@ -92,8 +98,11 @@ exports[`Documentation: Card Overview renders 1`] = `
         />
         <Card
           btnTxt="Button"
-          footerLinkTxt="Come see what we're all about."
+          footerLinkTxt="You wanna click this link?"
           footerTxt="This is some text that goes in the footer."
+          highlightSubTitle="Complete"
+          highlightTitle="75%"
+          icon="verified_user"
           imgSrc="https://picsum.photos/300"
           smallText="And the small text"
           text="This is the cards text"

diff --git a/src/App/Documentation/components/Card/index.js b/src/App/Documentation/components/Card/index.js
@@ -18,31 +18,40 @@ const Overview = () => (
                         type="default"
                         title="Card default"
                         imgSrc="https://picsum.photos/300"
+                        icon="account_balance"
+                        highlightTitle="725 NOK"
+                        highlightSubTitle="Outstanding balance"
                         text="This is the cards text"
                         smallText="And the small text"
                         btnTxt="Button"
                         footerTxt="This is some text that goes in the footer."
-                        footerLinkTxt="Come see what we're all about."
+                        footerLinkTxt="You wanna click this link?"
                     />
                     <CardComponent
                         type="brand"
                         title="Card brand"
                         imgSrc="https://picsum.photos/300"
+                        icon="face"
+                        highlightTitle="Bob Corlsan"
+                        highlightSubTitle="[email protected]"
                         text="This is the cards text"
                         smallText="And the small text"
                         btnTxt="Button"
                         footerTxt="This is some text that goes in the footer."
-                        footerLinkTxt="Come see what we're all about."
+                        footerLinkTxt="You wanna click this link?"
                     />
                     <CardComponent
                         type="light"
                         title="Card light"
                         imgSrc="https://picsum.photos/300"
+                        icon="verified_user"
+                        highlightTitle="75%"
+                        highlightSubTitle="Complete"
                         text="This is the cards text"
                         smallText="And the small text"
                         btnTxt="Button"
                         footerTxt="This is some text that goes in the footer."
-                        footerLinkTxt="Come see what we're all about."
+                        footerLinkTxt="You wanna click this link?"
                     />
                 </ul>
             </div>

diff --git a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap
@@ -29,7 +29,7 @@ exports[`GettingStarted: Introduction Css renders 1`] = `
     language="html"
   >
     <link
-      href="https://design.payex.com/0.6.0/styles/px.css"
+      href="https://design.payex.com/0.7.0/styles/px.css"
       rel="stylesheet"
     />
   </ComponentPreview>
@@ -80,7 +80,7 @@ exports[`GettingStarted: Introduction JavaScript renders 1`] = `
     language="html"
   >
     <script
-      src="https://design.payex.com/0.6.0/scripts/px-script.js"
+      src="https://design.payex.com/0.7.0/scripts/px-script.js"
     />
   </ComponentPreview>
 </React.Fragment>
@@ -125,7 +125,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = `
           name="viewport"
         />
         <link
-          href="https://design.payex.com/0.6.0/styles/px.css"
+          href="https://design.payex.com/0.7.0/styles/px.css"
           rel="stylesheet"
         />
         <title>
@@ -137,7 +137,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = `
           Hello, PayEx!
         </h1>
         <script
-          src="https://design.payex.com/0.6.0/scripts/px-script.js"
+          src="https://design.payex.com/0.7.0/scripts/px-script.js"
         />
       </body>
     </html>

diff --git a/src/App/__snapshots__/index.test.js.snap b/src/App/__snapshots__/index.test.js.snap
@@ -29,8 +29,14 @@ exports[`Main: App renders 1`] = `
     <withRouter(AppHeader) />
     <Switch>
       <Route
-        exact={false}
+        exact={true}
         key="0"
+        path="/"
+        render={[Function]}
+      />
+      <Route
+        exact={false}
+        key="1"
         path="/docs"
         render={[Function]}
       />

diff --git a/src/App/components/Card/index.js b/src/App/components/Card/index.js
@@ -1,24 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Card = ({ type, title, imgSrc, icon, text, smallText, btnTxt, footerTxt, footerLink, footerLinkTxt }) => (
+const Card = ({ type, title, imgSrc, icon, highlightTitle, highlightSubTitle, text, smallText, btnTxt, footerTxt, footerLink, footerLinkTxt }) => (
     <li className={`card${type ? ` card-${type}` : ""}`}>
         {title ? <header>
             <h3>
                 <a href="#">{title}</a>
             </h3>
         </header> : null}
-        {imgSrc ? <div className="img">{"\n"}
+        {imgSrc ? <div className="card-img">{"\n"}
             <img src={imgSrc} alt=""/>{"\n"}
         </div> : null}
         <div className="highlight">
-            <i className="material-icons">account_balance</i>
+            {icon ? <i className="material-icons">{icon}</i> : null}
             <div className="highlight-wrapper">
-                <h4 className="highlight-title">725 NOK</h4>
-                <p className="highlight-subtitle">Utestående balanse</p>
+                {highlightTitle ? <h4 className="highlight-title">{highlightTitle}</h4> : null}
+                {highlightSubTitle ? <p className="highlight-subtitle">{highlightSubTitle}</p> : null}
             </div>
         </div>
-        <div className="body">
+        <div className="card-body">
             <p>{text}</p>
             <small>{smallText}</small>
         </div>
@@ -35,6 +35,8 @@ Card.propTypes = {
     title: PropTypes.string,
     imgSrc: PropTypes.string,
     icon: PropTypes.string,
+    highlightTitle: PropTypes.string,
+    highlightSubTitle: PropTypes.string,
     text: PropTypes.string,
     smallText: PropTypes.string,
     btnTxt: PropTypes.string,

diff --git a/src/App/routes/root.js b/src/App/routes/root.js
@@ -1,10 +1,10 @@
 export default [
-    // {
-    //     title: "Home",
-    //     path: "/",
-    //     component: require("../Home"),
-    //     exact: true
-    // },
+    {
+        title: "Home",
+        path: "/",
+        component: require("../Home"),
+        exact: true
+    },
     {
         title: "Documentation",
         path: "/docs",

diff --git a/src/App/routes/root.test.js b/src/App/routes/root.test.js
@@ -18,11 +18,11 @@ describe("Routes: root", () => {
         });
     });
 
-    // it("first route is home, has path '/' and is exact", () => {
-    //     const { title, path, exact } = rootRoutes[0];
+    it("first route is home, has path '/' and is exact", () => {
+        const { title, path, exact } = rootRoutes[0];
 
-    //     expect(title).toEqual("Home");
-    //     expect(path).toEqual("/");
-    //     expect(exact).toEqual(true);
-    // });
+        expect(title).toEqual("Home");
+        expect(path).toEqual("/");
+        expect(exact).toEqual(true);
+    });
 });
diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -2,10 +2,13 @@
     > ul {
         list-style: none;
         padding-left: 0;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-        -ms-grid-columns: repeat(18rem 1fr), repeat(18rem 1fr);
-        grid-gap: 1.5rem;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        @media (max-width: @screen-md-min) {
+            display: block;
+        }
 
         .card + .card {
             margin-top: 0;
@@ -15,6 +18,10 @@
     .card {
         background-color: @white;
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+        min-width: 18rem;
+        max-width: 18rem;
+        flex: 1;
+        margin: 0 2rem 1rem;
 
         header {
             padding: 0 1rem;
@@ -92,7 +99,7 @@
             }
         }
 
-        .body {
+        .card-body {
             padding: 1rem;
         }
 
@@ -113,7 +120,7 @@
             }
         }
 
-        .img {
+        .card-img {
             height: 10rem;
 
             img {