From e2826effc44e2ed593385b7951db786bf7ad2f30 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 18 Sep 2023 15:06:22 +0200
Subject: [PATCH] Refactor(web-react): Use demo package css instead of own

---
 packages/web-react/assets/demo.css          | 81 ---------------------
 packages/web-react/assets/index.scss        |  6 +-
 packages/web-react/package.json             |  1 +
 packages/web-react/partials/layout/base.hbs |  1 -
 4 files changed, 3 insertions(+), 86 deletions(-)
 delete mode 100644 packages/web-react/assets/demo.css

diff --git a/packages/web-react/assets/demo.css b/packages/web-react/assets/demo.css
deleted file mode 100644
index 714ace22f2..0000000000
--- a/packages/web-react/assets/demo.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.docs-TileLink {
-  display: block;
-  padding: 1rem;
-  border: 2px solid #e9e9e9;
-  border-radius: 8px;
-  font-size: 1.125rem; /* Based on the `body-large-text-regular` style. */
-  font-weight: 600;
-  line-height: 1.55;
-}
-
-.docs-TileLink:hover,
-.docs-TileLink:focus {
-  text-decoration: none;
-  border-color: #dbdbdb;
-}
-
-.docs-TileLink:active {
-  text-decoration: none;
-  border-color: #d4d4d4;
-}
-
-.docs-Section:not(:last-child) {
-  margin-bottom: 2.5rem;
-}
-
-.docs-Heading {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 0.75rem;
-  align-items: baseline;
-  margin-bottom: 1.5rem;
-  font-size: 1.125rem; /* Based on the `heading-small-text` style. */
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.docs-Box {
-  min-height: 2rem;
-  padding: 1rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: #fff;
-  background: #0b1c21;
-}
-
-.docs-Box--small {
-  font-size: 0.75rem;
-  text-align: center;
-  white-space: normal;
-}
-
-.docs-FormFieldGrid {
-  display: grid;
-  grid-template-columns: 25rem;
-  gap: 1.5rem;
-}
-
-@media (min-width: 768px) {
-  .docs-TileLink {
-    padding: 1.5rem;
-  }
-
-  .docs-Section:not(:last-child) {
-    margin-bottom: 4rem;
-  }
-
-  .docs-Heading {
-    font-size: 1.5rem;
-  }
-
-  .docs-Box--small {
-    font-size: 0.875rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .docs-Box--small {
-    font-size: 1rem;
-  }
-}
diff --git a/packages/web-react/assets/index.scss b/packages/web-react/assets/index.scss
index 52ae521c1d..95cf3c2770 100644
--- a/packages/web-react/assets/index.scss
+++ b/packages/web-react/assets/index.scss
@@ -1,4 +1,2 @@
-@forward '@lmc-eu/spirit-web/src/scss/foundation';
-@forward '@lmc-eu/spirit-web/src/scss/components';
-@forward '@lmc-eu/spirit-web/src/scss/helpers';
-@forward '@lmc-eu/spirit-web/src/scss/utilities';
+@forward '@lmc-eu/spirit-web/src/scss';
+@forward '@lmc-eu/spirit-demo/scss';
diff --git a/packages/web-react/package.json b/packages/web-react/package.json
index ba08a7f10d..3731f6711e 100644
--- a/packages/web-react/package.json
+++ b/packages/web-react/package.json
@@ -29,6 +29,7 @@
     "@lmc-eu/eslint-config-base": "1.1.6",
     "@lmc-eu/eslint-config-jest": "2.1.0",
     "@lmc-eu/eslint-config-react": "1.1.1",
+    "@lmc-eu/spirit-demo": "^0.0.1",
     "@lmc-eu/spirit-design-tokens": "^0.25.5",
     "@lmc-eu/spirit-web": "^1.2.1",
     "@rollup/plugin-node-resolve": "15.2.1",
diff --git a/packages/web-react/partials/layout/base.hbs b/packages/web-react/partials/layout/base.hbs
index a4421ac7bf..29e46a977f 100644
--- a/packages/web-react/partials/layout/base.hbs
+++ b/packages/web-react/partials/layout/base.hbs
@@ -14,7 +14,6 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
     <link rel="stylesheet" href="/assets/index.scss">
-    <link rel="stylesheet" href="/assets/demo.css">
 
     <script src="/src/index.ts" type="module"></script>