feat(limel-grid): add new limel-grid component

BREAKING CHANGE: The scss-mixin grid-fullscreen has been removed. It is replaced by the new
limel-grid component.

fix #289
fix Lundalogik/crm-feature#758

src/components/grid/grid.mdx

@@ -0,0 +1,27 @@
+---
+name: Grid
+route: /grid
+menu: Components
+---
+
+# Grid
+
+The `limel-grid` component creates a grid which can be used to control the layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) to enable easy configuration of its child-elements.
+
+<limel-props name="limel-grid" />
+
+## Example
+
+<limel-example name="limel-example-grid" />
+
+## Example explanation
+
+We use the `grid-area` property to give each component a unique name, and then use this name to "draw" our grid layout.
+
+You can name each component anything you want, like `salespipe`, or `infotile-active-support-tickets`, but keeping the names to a fixed number of characters makes the "drawing" of the grid look more like the actual grid. One to three characters is probably a good number for most cases.
+
+Any "name" that doesn't match a named element will create empty cells. In our case, we use a dot (`.`) to mark empty cells. Empty cells can be put anywhere in the grid, not just at the end.
+
+Note that we can add some extra spaces after the dot marking an empty cell, in order to align the next cell in our config-string. This can also be used if your elements have named of differing lengths. The extra whitespace is ignored when the CSS is parsed.
+
+If the name of an element does not appear in the grid-configuration, it will not be displayed at all. This might be useful if you wish to show a specific component only under certain circumstances, like if the viewport is large enough to accomodate it.

src/components/grid/grid.scss

@@ -0,0 +1,20 @@
+/**
+ * @prop --lime-grid-area: Grid layout
+ * @prop --lime-grid-columns: Number of columns in the grid, defaults to 8
+ * @prop --lime-grid-cell-height: Height of grid cells, defaults to 15rem
+ * @prop --lime-grid-cell-width: Minimum width of grid cells, defaults to 15rem
+ */
+
+slot {
+    display: grid;
+    grid-template-areas: var(--lime-grid-area, '');
+    grid-template-columns: repeat(
+        var(--lime-grid-columns, 8),
+        minmax(var(--lime-grid-cell-width, 15rem), 1fr)
+    );
+    grid-gap: 1.5rem;
+    grid-auto-flow: dense;
+    grid-auto-rows: var(--lime-grid-cell-height, 15rem);
+    grid-auto-columns: minmax(var(--lime-grid-cell-width, 15rem), auto);
+    margin: 0 auto;
+}

src/components/grid/grid.tsx

@@ -0,0 +1,12 @@
+import { Component } from '@stencil/core';
+
+@Component({
+    tag: 'limel-grid',
+    shadow: true,
+    styleUrl: 'grid.scss',
+})
+export class Grid {
+    public render() {
+        return <slot />;
+    }
+}

src/examples/grid/grid.scss

@@ -0,0 +1,40 @@
+my-deep-red-component { grid-area: drd; }
+my-red-component { grid-area: red; }
+my-orange-component { grid-area: ora; }
+my-yellow-component { grid-area: yel; }
+my-green-component { grid-area: grn; }
+my-turquoise-component { grid-area: trq; }
+my-blue-component { grid-area: blu; }
+my-dark-blue-component { grid-area: dbl; }
+my-magenta-component { grid-area: mag; }
+my-light-grey-component { grid-area: lgr; }
+my-dark-grey-component { grid-area: dgr; }
+
+limel-grid {
+    --lime-grid-columns: 4;
+
+    --lime-grid-area:
+        "drd drd blu dbl"
+        "trq trq blu dbl"
+        "red red red red"
+        "dgr mag mag lgr"
+        "ora ora yel yel"
+        "grn grn .   .  "
+        "grn grn .   .  ";
+}
+
+// Below is stuff that's only here for the boxes in the grid
+// to look nice in this example. You wouldn't use any of this
+// when placing real components into a grid.
+
+my-deep-red-component { background-color: var(--lime-deep-red); }
+my-red-component { background-color: var(--lime-red); }
+my-orange-component { background-color: var(--lime-orange); }
+my-yellow-component { background-color: var(--lime-yellow); }
+my-green-component { background-color: var(--lime-green); }
+my-turquoise-component { background-color: var(--lime-turquoise); }
+my-blue-component { background-color: var(--lime-blue); }
+my-dark-blue-component { background-color: var(--lime-dark-blue); }
+my-magenta-component { background-color: var(--lime-magenta); }
+my-light-grey-component { background-color: var(--lime-light-grey); }
+my-dark-grey-component { background-color: var(--lime-dark-grey); }

src/examples/grid/grid.tsx

@@ -0,0 +1,26 @@
+import { Component } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-grid',
+    shadow: true,
+    styleUrl: 'grid.scss',
+})
+export class GridExample {
+    public render() {
+        return (
+            <limel-grid>
+                <my-deep-red-component />
+                <my-red-component />
+                <my-orange-component />
+                <my-yellow-component />
+                <my-green-component />
+                <my-turquoise-component />
+                <my-blue-component />
+                <my-dark-blue-component />
+                <my-magenta-component />
+                <my-light-grey-component />
+                <my-dark-grey-component />
+            </limel-grid>
+        );
+    }
+}

stencil.config.dist.ts

@@ -7,12 +7,6 @@ const targetDist: OutputTargetDist = {
 };
 
 export const config: Config = {
-    copy: [
-        {
-            src: 'mixins.scss',
-            dest: '../mixins.scss',
-        },
-    ],
     namespace: 'lime-elements',
     outputTargets: [targetDist],
     plugins: [