Refactor/demo package

apps/web-twig-demo/assets/styles/app.scss

@@ -1 +1,2 @@
-@forward '@lmc-eu/spirit-web/src/scss/';
+@forward '@lmc-eu/spirit-web/src/scss';
+@forward '@lmc-eu/spirit-demo/scss';

apps/web-twig-demo/docker/docker-compose.override.yml

@@ -30,6 +30,7 @@ services:
     volumes:
       - ./../:/srv/spirit-web-twig-demo/:delegated
       - ./../../../packages/web:/srv/spirit-web/:delegated
+      - ./../../../packages/demo:/srv/spirit-demo/:delegated
       - ./../../../packages/form-validations:/srv/spirit-form-validations/:delegated
       # If you develop on Mac or Windows you can remove the node_modules/ directory
       #  from the bind-mount for better performance by enabling the next line:

apps/web-twig-demo/package.json

@@ -11,6 +11,7 @@
     "@hotwired/stimulus": "3.2.2",
     "@lmc-eu/spirit-web": "1.2.0",
     "@lmc-eu/spirit-form-validations": "1.0.2",
+    "@lmc-eu/spirit-demo": "0.0.1",
     "@symfony/stimulus-bridge": "3.2.2",
     "@symfony/webpack-encore": "4.4.0",
     "core-js": "3.32.1",

apps/web-twig-demo/templates/layout/base.html.twig

@@ -14,8 +14,6 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
     {{ encore_entry_link_tags('app') }}
-    <link rel="stylesheet" href="{{ asset('css/demo.css') }}">
-
     {{ encore_entry_script_tags('app') }}
 
   </head>

apps/web-twig-demo/yarn.lock

@@ -1207,6 +1207,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@lmc-eu/[email protected]":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-demo/-/spirit-demo-0.0.1.tgz#1ef098fc45d99cc64c9655b7760946d888465212"
+  integrity sha512-ZX6Z/mS7K6VLFRjDoACzUKkNyDdO5xNiRgOqA3MztVMGL5Ahg7kom//8AqQkM1DW4UVSkrtsHzkx9gRuYy0J4A==
+
 "@lmc-eu/spirit-design-tokens@^0.25.5":
   version "0.25.5"
   resolved "https://registry.yarnpkg.com/@lmc-eu/spirit-design-tokens/-/spirit-design-tokens-0.25.5.tgz#1663518f3e07572d5c228dc72aebce3a6caa8058"

packages/demo/README.md

@@ -0,0 +1,10 @@
+# @lmc-eu/spirit-demo
+
+> Scripts, Styles and Partials for showcase apps of Spirit Design System.
+
+## Install
+
+This package is already a part of the affected packages as development dependency.
+No need to install it separately.
+
+Dependency is maintained by workspace package manager.

packages/demo/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@lmc-eu/spirit-demo",
+  "version": "0.0.1",
+  "description": "Showcase tooling for demo of Spirit Design System",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lmc-eu/spirit-design-system.git",
+    "directory": "packages/demo"
+  }
+}

packages/demo/scss/index.scss

@@ -0,0 +1,92 @@
+.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 {
+    border-color: #dbdbdb;
+}
+
+.docs-TileLink:active {
+    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-Stack {
+    display: grid;
+    row-gap: 1rem;
+}
+
+.docs-Stack--start {
+    justify-items: start;
+}
+
+.docs-Stack--stretch {
+    justify-items: stretch;
+}
+
+.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;
+    }
+}

packages/form-validations/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';

packages/form-validations/package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@lmc-eu/browserslist-config": "1.0.4",
+    "@lmc-eu/spirit-demo": "^0.0.1",
     "@lmc-eu/spirit-design-tokens": "^0.25.5",
     "@lmc-eu/spirit-web": "^1.2.1",
     "@swc/core": "1.3.80",

packages/form-validations/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">
 
   </head>
   <body>