feat(portal): use examples as documentation for all comp

affects: @fremtind/jkl-accordion-react, @fremtind/jkl-button-react, @fremtind/jkl-card-react,
@fremtind/jkl-checkbox-react, @fremtind/jkl-core, @fremtind/jkl-datepicker-react,
@fremtind/jkl-divider-line-react, @fremtind/jkl-field-group-react, @fremtind/jkl-hamburger-react,
@fremtind/jkl-list-react, @fremtind/jkl-loader-react, @fremtind/jkl-logo-react,
@fremtind/jkl-message-box-react, @fremtind/jkl-radio-button-react, @fremtind/jkl-react-hooks,
@fremtind/jkl-select-react, @fremtind/jkl-table-react, @fremtind/jkl-text-input-react,
@fremtind/jkl-toggle-switch-react, @fremtind/jkl-typography-react, @fremtind/jkl-webfonts

gulpfile.js

@@ -10,7 +10,7 @@ const importer = require("node-sass-tilde-importer");
 sass.compiler = require("dart-sass");
 /* eslint-enable @typescript-eslint/no-var-requires */
 
-const scssFiles = ["**/*.scss", "!example/*.scss"];
+const scssFiles = ["**/*.scss", "!example/*.scss", "!documentation/*.scss"];
 function throwSassError(e) {
     sass.logError(e);
     throw new Error("sass compilation failed");

packages/accordion-react/documentation/Example.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Accordion, AccordionItem } from "../src";
+import "@fremtind/jkl-core/core.min.css";
+import "@fremtind/jkl-accordion/accordion.min.css";
 
 export const Example = () => (
-    <div className="jkl-spacing--all-3">
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
         <Accordion>
             <AccordionItem title="Accordion First item">
                 Now let‘s use some more properties. Consider a list of 6 items, all with a fixed dimensions in a matter
@@ -15,5 +17,5 @@ export const Example = () => (
                 horizontal axis so that when we resize the browser, everything is fine (without media queries!).
             </AccordionItem>
         </Accordion>
-    </div>
+    </section>
 );

packages/accordion-react/documentation/index.tsx

@@ -1,9 +1,7 @@
 import { initTabListener } from "@fremtind/jkl-core/src";
 import React from "react";
 import ReactDOM from "react-dom";
-
-import "@fremtind/jkl-core/core.min.css";
-import "@fremtind/jkl-accordion/accordion.min.css";
+import "../../webfonts/documentation/internal.scss";
 
 import { Example } from "./Example";
 

packages/button-react/documentation/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { initTabListener } from "@fremtind/jkl-core";
 import Example from "./Example";
+import "../../webfonts/documentation/internal.scss";
 
 initTabListener();
 

packages/card-react/example/index.tsx → packages/card-react/documentation/Example.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { Card } from "../src";
 import car from "./img/car.jpg";
 import grass from "./img/grass.jpg";
+import "@fremtind/jkl-core/core.min.css";
+import "@fremtind/jkl-card/card.min.css";
+import "@fremtind/jkl-button/button.min.css";
 
 function handleClick() {
     console.log("This is working");
 }
 
 const CardDemo = () => (
-    <>
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
         <Card title="Basic Card" clickable={{ href: "https://fremtind.github.io/jokul/" }} className="test-class">
             <h2 className="jkl-h4">Clickable</h2>
             <p className="jkl-p">
@@ -68,7 +70,7 @@ const CardDemo = () => (
                 <li>Hvis vi dekker skaden, reparerer vi telefonen eller nettbrettet.</li>
             </ul>
         </Card>
-    </>
+    </section>
 );
 
-ReactDOM.render(<CardDemo />, document.getElementById("app"));
+export default CardDemo;

packages/card-react/documentation/card.mdx

@@ -0,0 +1,9 @@
+---
+title: Card
+react: card-react
+scss: card
+---
+
+import Example from "./Example";
+
+<Example />

packages/card-react/example/index.html → packages/card-react/documentation/index.html

@@ -5,7 +5,6 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <title>Jøkul Card Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="index.scss" />
     </head>
     <body style="height:100%;display:flex;align-items:center;justify-content:center;">
         <div id="app"></div>

packages/loader-react/example/index.tsx → packages/card-react/documentation/index.tsx

@@ -1,6 +1,6 @@
-import "@fremtind/jkl-loader/loader.min.css";
 import React from "react";
 import ReactDOM from "react-dom";
-import { Example } from "./Example";
+import Example from "./Example";
+import "../../webfonts/documentation/internal.scss";
 
 ReactDOM.render(<Example />, document.getElementById("app"));

packages/card-react/package.json

@@ -27,7 +27,7 @@
         "build": "run-s build:*",
         "test": "echo \"Error: run tests from root\" && exit 1",
         "dev:style": "lerna exec --scope=@fremtind/jkl-card yarn build:watch",
-        "dev:js": "parcel example/index.html",
+        "dev:js": "parcel documentation/index.html",
         "dev": "run-p dev:*"
     },
     "dependencies": {

packages/checkbox-react/documentation/Checkbox.mdx

@@ -0,0 +1,9 @@
+---
+title: Checkbox
+react: checkbox-react
+scss: checkbox
+---
+
+import Example from "./Example";
+
+<Example />

packages/checkbox-react/example/index.tsx → packages/checkbox-react/documentation/Example.tsx

@@ -1,17 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { Checkbox } from "../src";
-import { initTabListener } from "@fremtind/jkl-core";
 import "@fremtind/jkl-core/core.css";
 import "@fremtind/jkl-checkbox/checkbox.min.css";
 import "@fremtind/jkl-field-group/field-group.min.css";
 
-initTabListener();
-
-const App = () => {
+const Example = () => {
     const [isCool, changeCoolness] = React.useState(false);
     return (
-        <>
+        <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
             <Checkbox
                 name="checklist"
                 value="checkbox"
@@ -31,8 +27,8 @@ const App = () => {
             <Checkbox name="checklist" value="controlled" checked={isCool} onChange={() => changeCoolness(!isCool)}>
                 I am {isCool ? "cool" : "not cool"}{" "}
             </Checkbox>
-        </>
+        </section>
     );
 };
 
-ReactDOM.render(<App />, document.getElementById("app"));
+export default Example;

packages/checkbox-react/documentation/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { initTabListener } from "@fremtind/jkl-core";
+import Example from "./Example";
+import "../../webfonts/documentation/internal.scss";
+
+initTabListener();
+
+ReactDOM.render(<Example />, document.getElementById("app"));

packages/checkbox-react/package.json

@@ -30,7 +30,7 @@
         "build": "run-s build:*",
         "test": "echo \"Error: run tests from root\" && exit 1",
         "dev:style": "lerna exec --scope=@fremtind/jkl-checkbox yarn build:watch",
-        "dev:js": "parcel example/index.html",
+        "dev:js": "parcel documentation/index.html",
         "dev": "run-p dev:*"
     },
     "dependencies": {

packages/core/documentation/Example.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "../core.scss";
+import "./style.scss";
+
+interface BoxProps {
+    type: "color" | "component" | "layout";
+    number: number;
+}
+
+const Box = ({ type, number }: BoxProps) => <div className={`demo-${type}--${number + 1}`} />;
+
+Box.propTypes = {
+    type: PropTypes.string,
+    number: PropTypes.number,
+};
+
+export const Colors = () => (
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
+        <h1 className="jkl-h1">Colors</h1>
+        <div className="demo-wrapper">
+            {[...Array(14)].map((_, idx) => (
+                <Box key={idx} type="color" number={idx} />
+            ))}
+        </div>
+    </section>
+);
+
+export const Typo = () => (
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
+        <h1 className="jkl-h1">Heading1</h1>
+        <h2 className="jkl-h2">Heading2</h2>
+        <h3 className="jkl-h3">Heading3</h3>
+        <h4 className="jkl-h4">Heading4</h4>
+        <p className="jkl-lead">Lead paragraph</p>
+        <p className="jkl-body">Paragraph</p>
+        <p className="jkl-small-text">Small paragraph</p>
+    </section>
+);
+
+export const Spacing = () => (
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
+        <h1 className="jkl-h1">Spacing</h1>
+        <h2 className="jkl-h2">Layout spacing</h2>
+        <div className="demo-wrapper">
+            {[...Array(7)].map((_, idx) => (
+                <Box key={idx} type="layout" number={idx} />
+            ))}
+        </div>
+        <h2 className="jkl-h2">Component spacing</h2>
+        <div className="demo-wrapper">
+            {[...Array(9)].map((_, idx) => (
+                <Box key={idx} type="component" number={idx} />
+            ))}
+        </div>
+    </section>
+);
+
+const Example = () => (
+    <section className="jkl-spacing--top-3 jkl-spacing--bottom-3">
+        <Colors />
+        <Typo />
+        <Spacing />
+    </section>
+);
+
+export default Example;

packages/core/documentation/core.mdx

@@ -0,0 +1,11 @@
+---
+title: Core
+scss: core
+react: core
+---
+
+import { Colors, Typo, Spacing } from "./Example";
+
+<Colors />
+<Typo />
+<Spacing />

packages/core/documentation/index.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Example from "./Example";
+import "../../webfonts/documentation/internal.scss";
+
+ReactDOM.render(<Example />, document.getElementById("app"));

packages/core/package.json

@@ -38,7 +38,7 @@
         "build:scripts": "rollup --config ../../rollup.config.js",
         "test": "echo \"Error: run tests from root\" && exit 1",
         "dev:style": "gulp build:watch",
-        "dev:js": "parcel example/index.html",
+        "dev:js": "parcel documentation/index.html",
         "dev": "run-p dev:*"
     },
     "devDependencies": {

packages/datepicker-react/documentation/Datepicker.mdx

@@ -0,0 +1,9 @@
+---
+title: Datepicker
+react: datepicker-react
+scss: datepicker
+---
+
+import Example from "./Example";
+
+<Example />

packages/datepicker-react/example/index.tsx → packages/datepicker-react/documentation/Example.tsx

@@ -1,13 +1,9 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { DatePicker } from "../src";
-import { initTabListener } from "@fremtind/jkl-core";
 import "@fremtind/jkl-core/core.scss";
 import "@fremtind/jkl-datepicker/datepicker.min.css";
 import "@fremtind/jkl-core/normalize.css";
 
-initTabListener();
-
 const englishMonthNames = [
     "January",
     "February",
@@ -24,7 +20,7 @@ const englishMonthNames = [
 ];
 const englishDayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
-const App = () => (
+const Example = () => (
     <>
         <div className="jkl-spacing--all-3">
             <DatePicker extended />
@@ -61,4 +57,4 @@ const App = () => (
     </>
 );
 
-ReactDOM.render(<App />, document.getElementById("app"));
+export default Example;

packages/datepicker-react/documentation/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { initTabListener } from "@fremtind/jkl-core";
+import Example from "./Example";
+import "../../webfonts/documentation/internal.scss";
+
+initTabListener();
+
+ReactDOM.render(<Example />, document.getElementById("app"));

packages/datepicker-react/package.json

@@ -29,7 +29,7 @@
         "build": "run-s build:*",
         "test": "echo \"Error: run tests from root\" && exit 1",
         "dev:style": "lerna exec --scope=@fremtind/jkl-datepicker yarn build:watch",
-        "dev:js": "parcel example/index.html",
+        "dev:js": "parcel documentation/index.html",
         "dev": "run-p dev:*"
     },
     "dependencies": {

packages/divider-line-react/documentation/Dividerline.mdx

@@ -0,0 +1,9 @@
+---
+title: Divider line
+react: divider-line-react
+scss: divider-line
+---
+
+import Example from "./Example";
+
+<Example />