From 1fd815203b8516da46a64027d31e926e0bb24f9a Mon Sep 17 00:00:00 2001
From: Nicolas Brousse <n.brousse@pantographe.studio>
Date: Wed, 20 Nov 2019 21:47:27 +0100
Subject: [PATCH 1/3] Improve styleguide css to use vanilla css

---
 .../container/komponent_container.css         | 12 ++---
 .../components/footer/komponent_footer.css    | 22 ++++-----
 .../components/sidebar/komponent_sidebar.css  | 46 +++++++++----------
 .../templates/styleguide/packs/komponent.js   |  4 +-
 4 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
index a41d825..105003f 100644
--- a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
+++ b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
@@ -5,13 +5,13 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   margin: 40px 60px 0 300px;
+}
 
-  .komponent-code {
-    background-color: #333;
-    color: #fff;
-    margin: 10px 0;
-    padding: 10px;
-  }
+.komponent-footer .komponent-code {
+  background-color: #333;
+  color: #fff;
+  margin: 10px 0;
+  padding: 10px;
 }
 
 /* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
index 95a03e4..1e517ad 100644
--- a/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
+++ b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css
@@ -8,20 +8,20 @@
   position: fixed;
   right: 30px;
   text-align: center;
+}
 
-  &,
-  a {
-    color: #999;
-  }
+.komponent-footer,
+.komponent-footer a {
+  color: #999;
+}
 
-  a {
-    text-decoration: none;
+.komponent-footer a {
+  text-decoration: none;
+}
 
-    &:hover,
-    &:focus {
-      color: #0038ea;
-    }
-  }
+.komponent-footer a:hover,
+.komponent-footer a:focus {
+  color: #0038ea;
 }
 
 /* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
index 3ac9e59..405b5ec 100644
--- a/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
+++ b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css
@@ -11,33 +11,33 @@
   position: absolute;
   top: 60px;
   width: 240px;
+}
 
-  &-title {
-    color: #0038ea;
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    margin: 0 0 20px;
-    text-transform: uppercase;
-  }
+.komponent-sidebar-title {
+  color: #0038ea;
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin: 0 0 20px;
+  text-transform: uppercase;
+}
 
-  &-items {
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 1.25;
-    list-style: none;
-    margin: 0 0 30px;
-    padding: 0;
-  }
+.komponent-sidebar-items {
+  font-size: 14px;
+  letter-spacing: 0;
+  line-height: 1.25;
+  list-style: none;
+  margin: 0 0 30px;
+  padding: 0;
+}
 
-  &-item {
-    margin: 0 0 5px;
-  }
+.komponent-sidebar-item {
+  margin: 0 0 5px;
+}
 
-  a {
-    color: #333;
-    text-decoration: none;
-  }
+.komponent-sidebar a {
+  color: #333;
+  text-decoration: none;
 }
 
 /* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/packs/komponent.js b/lib/generators/komponent/templates/styleguide/packs/komponent.js
index c31f602..df5b3a8 100644
--- a/lib/generators/komponent/templates/styleguide/packs/komponent.js
+++ b/lib/generators/komponent/templates/styleguide/packs/komponent.js
@@ -1,2 +1,2 @@
-import 'components';
-import 'components/komponent';
+import "components";
+import "components/komponent";

From dec7b1017716e6ebc3d98db72dadde62f69eddd4 Mon Sep 17 00:00:00 2001
From: Nicolas Brousse <n.brousse@pantographe.studio>
Date: Wed, 20 Nov 2019 21:48:11 +0100
Subject: [PATCH 2/3] Add link to styleguide logo header

---
 .../styleguide/components/header/_komponent_header.html.erb  | 4 +++-
 .../styleguide/components/header/komponent_header.css        | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb b/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
index e4feb12..20c20d3 100644
--- a/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
+++ b/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb
@@ -1,3 +1,5 @@
 <div class="komponent-header">
-  <div class="logo">Styleguide</div>
+  <div class="logo">
+    <%= link_to "Styleguide", styleguide_index_path %>
+  </div>
 </div>
diff --git a/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
index ac9f194..5fc10f3 100644
--- a/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
+++ b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css
@@ -12,4 +12,9 @@
   padding: 0 20px;
 }
 
+.komponent-header .logo a {
+  color: white;
+  text-decoration: none;
+}
+
 /* stylelint-enable */

From e29a33532ed3857194c8da1b463c885d6590d273 Mon Sep 17 00:00:00 2001
From: Nicolas Brousse <n.brousse@pantographe.studio>
Date: Wed, 20 Nov 2019 21:48:39 +0100
Subject: [PATCH 3/3] Create global css for styleguide with some css reset

---
 .../komponent/templates/styleguide/components/index.js         | 1 +
 .../komponent/templates/styleguide/components/style.css        | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 lib/generators/komponent/templates/styleguide/components/style.css

diff --git a/lib/generators/komponent/templates/styleguide/components/index.js b/lib/generators/komponent/templates/styleguide/components/index.js
index 878e312..495628c 100644
--- a/lib/generators/komponent/templates/styleguide/components/index.js
+++ b/lib/generators/komponent/templates/styleguide/components/index.js
@@ -1,3 +1,4 @@
+import "./style.css";
 import "components/komponent/container/komponent_container";
 import "components/komponent/footer/komponent_footer";
 import "components/komponent/header/komponent_header";
diff --git a/lib/generators/komponent/templates/styleguide/components/style.css b/lib/generators/komponent/templates/styleguide/components/style.css
new file mode 100644
index 0000000..293d3b1
--- /dev/null
+++ b/lib/generators/komponent/templates/styleguide/components/style.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}