From 943824a271afb2f74d4ca0a931302016e9b3dca5 Mon Sep 17 00:00:00 2001
From: Jernej Pregelj <jernej.pregelj88@gmail.com>
Date: Thu, 2 May 2019 18:16:59 +0200
Subject: [PATCH] ui grid

---
 .../components/atoms/AreaButton.module.scss   | 30 +++++++++++++++++++
 .../src/components/atoms/AreaButton.test.tsx  |  0
 client/src/components/atoms/AreaButton.tsx    | 16 ++++++++++
 client/src/routes/Publish/index.module.scss   | 23 ++++++++++++++
 client/src/routes/Publish/index.tsx           | 22 +++++++-------
 5 files changed, 80 insertions(+), 11 deletions(-)
 create mode 100644 client/src/components/atoms/AreaButton.module.scss
 create mode 100644 client/src/components/atoms/AreaButton.test.tsx
 create mode 100644 client/src/components/atoms/AreaButton.tsx
 create mode 100644 client/src/routes/Publish/index.module.scss

diff --git a/client/src/components/atoms/AreaButton.module.scss b/client/src/components/atoms/AreaButton.module.scss
new file mode 100644
index 0000000..3efbb63
--- /dev/null
+++ b/client/src/components/atoms/AreaButton.module.scss
@@ -0,0 +1,30 @@
+@import '../../styles/variables';
+
+.areaButton {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    > a {
+        display: block;
+        height: 100%;
+        padding: $spacer;
+        border: 1px solid $brand-grey-lighter;
+        border-radius: $border-radius;
+        background: $brand-white;
+        color: inherit;
+        position: relative;
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            border-color: $brand-pink;
+            transform: none;
+        }
+    }
+
+    h1 {
+        font-size: $font-size-large;
+        margin-top: 0;
+    }
+}
diff --git a/client/src/components/atoms/AreaButton.test.tsx b/client/src/components/atoms/AreaButton.test.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/atoms/AreaButton.tsx b/client/src/components/atoms/AreaButton.tsx
new file mode 100644
index 0000000..1c2b7c3
--- /dev/null
+++ b/client/src/components/atoms/AreaButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './AreaButton.module.scss'
+
+const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => {
+
+    return (
+        <article className={styles.areaButton}>
+            <a href="#" onClick={action}>
+                <h1>{title}</h1>
+                <p>{description}</p>
+            </a>
+        </article>
+    )
+}
+
+export default AreaButton
diff --git a/client/src/routes/Publish/index.module.scss b/client/src/routes/Publish/index.module.scss
new file mode 100644
index 0000000..c38536a
--- /dev/null
+++ b/client/src/routes/Publish/index.module.scss
@@ -0,0 +1,23 @@
+@import '../../styles/variables';
+
+/*
+
+.small{
+
+}
+*/
+
+.typeGrid {
+    display: grid;
+    grid-template-rows: 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $spacer/4;
+
+    @media (min-width: $break-point--small) {
+        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    }
+}
+
+.typeGrid > article:first-child {
+    grid-column: 1 / span 2;
+}
diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx
index 51a0dbe..276b34b 100644
--- a/client/src/routes/Publish/index.tsx
+++ b/client/src/routes/Publish/index.tsx
@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import Route from '../../components/templates/Route'
+import AreaButton from '../../components/atoms/AreaButton'
 import { User } from '../../context'
 import Loader from './loader'
+import styles from './index.module.scss'
 
 interface PublishState {
     type: string
@@ -17,12 +19,12 @@ class Publish extends Component<{}, PublishState> {
     public publishContainer = () => {
         this.setState({ type: 'container' })
     }
-    public publishAlgorithm = () => {
-        this.setState({ type: 'algorithm' })
-    }
     public publishWorkflow = () => {
         this.setState({ type: 'workflow' })
     }
+    public publishAlgorithm = () => {
+        this.setState({ type: 'algorithm' })
+    }
     public render() {
         return (
             <div>
@@ -34,14 +36,12 @@ class Publish extends Component<{}, PublishState> {
                         title="Publish"
                         description="What do you want to publish?"
                     >
-                        <button onClick={this.publishDataset}>Dataset</button>
-                        <button onClick={this.publishContainer}>
-                            Container
-                        </button>
-                        <button onClick={this.publishWorkflow}>Workflow</button>
-                        <button onClick={this.publishAlgorithm}>
-                            Algorithm
-                        </button>
+                        <div className={styles.typeGrid}>
+                            <AreaButton title={'Dataset'} description={'Datasets are xxx'} action={this.publishDataset}/>
+                            <AreaButton title={'Container'} description={'Container are xxx'} action={this.publishContainer}/>
+                            <AreaButton title={'Workflow'} description={'Workflow are xxx'} action={this.publishWorkflow}/>
+                            <AreaButton title={'Algorithm'} description={'Algorithm are xxx'} action={this.publishAlgorithm}/>
+                        </div>
                     </Route>
                 )}
             </div>