From e7ff7b1cd24c7cb79aee4e8a94bded1a7c9ef8fa Mon Sep 17 00:00:00 2001
From: Dag Frode Solberg <dag.solberg@sparebank1.no>
Date: Mon, 27 Jan 2025 15:10:16 +0100
Subject: [PATCH] chore oppdater dokumentasjon

---
 .storybook/colors.less                        |  9 +++
 .storybook/main.less                          |  1 +
 .storybook/main.ts                            |  3 +-
 .storybook/preview.tsx                        |  1 +
 .../ffe-core/documentation/AccentPage.mdx     |  7 +++
 .../documentation/AccentPage.stories.tsx      | 35 +++++++++++
 packages/ffe-core/documentation/Colors.mdx    | 60 +++++++++++++++++++
 packages/ffe-core/documentation/Index.mdx     |  6 ++
 packages/ffe-core/documentation/colors.tsx    | 39 ++++++++++++
 .../scripts/generate-semantic-colors.js       | 10 +++-
 10 files changed, 167 insertions(+), 4 deletions(-)
 create mode 100644 .storybook/colors.less
 create mode 100644 packages/ffe-core/documentation/AccentPage.mdx
 create mode 100644 packages/ffe-core/documentation/AccentPage.stories.tsx
 create mode 100644 packages/ffe-core/documentation/Colors.mdx
 create mode 100644 packages/ffe-core/documentation/Index.mdx
 create mode 100644 packages/ffe-core/documentation/colors.tsx

diff --git a/.storybook/colors.less b/.storybook/colors.less
new file mode 100644
index 0000000000..71868ce9bf
--- /dev/null
+++ b/.storybook/colors.less
@@ -0,0 +1,9 @@
+.ffe-color-table {
+    td {
+        &:first-child {
+            width: auto;
+        }
+        width: 100px;
+    }
+    border-collapse: collapse;
+}
diff --git a/.storybook/main.less b/.storybook/main.less
index 35f9ea538a..76a6e1472e 100644
--- a/.storybook/main.less
+++ b/.storybook/main.less
@@ -47,3 +47,4 @@
 @import '../packages/ffe-tables/less/tables';
 @import '../packages/ffe-tabs/less/tabs';
 @import '../packages/ffe-chips/less/chip';
+@import './colors';
diff --git a/.storybook/main.ts b/.storybook/main.ts
index e257c1d4d4..48366ee1b9 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { createRequire } from 'module';
+import { dirname, join } from 'path';
 const require = createRequire(import.meta.url);
-import { join, dirname } from 'path';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -13,6 +13,7 @@ function getAbsolutePath(value: string): any {
 
 const config: StorybookConfig = {
     stories: [
+        '../packages/ffe-core/documentation/Index.mdx',
         '../packages/**/*.@(mdx)',
         '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     ],
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index e4765553ad..5d56c284a7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -48,6 +48,7 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
+                order: ['Introduksjon', 'Design', 'Komponenter', 'Sider'],
             },
         },
     },
diff --git a/packages/ffe-core/documentation/AccentPage.mdx b/packages/ffe-core/documentation/AccentPage.mdx
new file mode 100644
index 0000000000..c42280d504
--- /dev/null
+++ b/packages/ffe-core/documentation/AccentPage.mdx
@@ -0,0 +1,7 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as AccentPageStories from './AccentPage.stories.tsx';
+
+<Meta title="Sider/Accent" />
+
+<Canvas of={AccentPageStories.Standard} />
\ No newline at end of file
diff --git a/packages/ffe-core/documentation/AccentPage.stories.tsx b/packages/ffe-core/documentation/AccentPage.stories.tsx
new file mode 100644
index 0000000000..27e49952d8
--- /dev/null
+++ b/packages/ffe-core/documentation/AccentPage.stories.tsx
@@ -0,0 +1,35 @@
+import { PrimaryButton } from '@sb1/ffe-buttons-react';
+import { Heading1 } from '@sb1/ffe-core-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+    title: 'Pages/Accent',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Standard: Story = {
+    render: () => (
+        <div>
+            <div>
+                <Heading1>Test</Heading1>
+                <PrimaryButton>Knapp</PrimaryButton>
+            </div>
+            <div
+                className="ffe-accent-mode"
+                style={{
+                    backgroundColor: 'var(--ffe-color-background-default)',
+                }}
+            >
+                <Heading1>Test</Heading1>
+                <PrimaryButton>Knapp</PrimaryButton>
+            </div>
+            <div>
+                <Heading1>Test</Heading1>
+                <PrimaryButton>Knapp</PrimaryButton>
+            </div>
+        </div>
+    ),
+};
diff --git a/packages/ffe-core/documentation/Colors.mdx b/packages/ffe-core/documentation/Colors.mdx
new file mode 100644
index 0000000000..ae381671f7
--- /dev/null
+++ b/packages/ffe-core/documentation/Colors.mdx
@@ -0,0 +1,60 @@
+import { Meta } from '@storybook/blocks';
+import { colors } from '../gen-src/semantic-color-names.json';
+
+<Meta title="Design/Farger" />
+
+# Farger
+
+I designsystemet bruker vi semantiske farger. Det vil si at vi bruker farger med navn som
+`--ffe-color-background-default` i stedet for fargekoder som `#000000`. Ved å bruke slike navn
+kan vi variere hvilke farge som vises på tvers av appen. Vi støtter 4 moduser i dag:
+
+- Light - default
+- Light accent - for å fremheve elementer
+- Dark - for mørk modus
+- Dark accent - for å fremheve elementer i mørk modus
+
+Dark mode aktiveres automatisk basert på brukerens systeminnstillinger.
+Accent mode aktiveres med å legge klassen `ffe-accent-mode` på elementet eller på
+containeren til elementet.
+
+Bruken av accent er der en har en blokk på side med en annen bakgrunnsfarge enn resten.
+
+Se eksempelet [på en slik side med en accent section]() WIP
+
+
+## Liste over de semantiske fargene
+
+ 
+ <table class="ffe-color-table">
+    <thead>
+        <tr>
+            <th>Farge navn</th>
+            <th>Light</th>
+            <th>Light accent</th>
+            <th>Dark</th>
+            <th>Dark accent</th>
+        </tr>
+    </thead>
+    <tbody>
+        {colors.map(color => (
+            <tr key={color}>
+                <td>{color}</td>
+                <td style={{ backgroundColor: `var(${color})` }}></td>
+                <td
+                    class="ffe-accent-mode"
+                    style={{ backgroundColor: `var(${color})` }}
+                ></td>
+                <td
+                    class="dark-mode"
+                    style={{ backgroundColor: `var(${color})` }}
+                ></td>
+                <td
+                    class="dark-mode ffe-accent-color"
+                    style={{ backgroundColor: `var(${color})` }}
+                ></td>
+            </tr>
+        ))}
+    </tbody>
+</table>
+
diff --git a/packages/ffe-core/documentation/Index.mdx b/packages/ffe-core/documentation/Index.mdx
new file mode 100644
index 0000000000..06169764ab
--- /dev/null
+++ b/packages/ffe-core/documentation/Index.mdx
@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/blocks';
+import { colors } from '../gen-src/semantic-color-names.json';
+
+<Meta title="Introduksjon/Velkommen" />
+
+# Velkommen til Sparebank 1 Designsystem
\ No newline at end of file
diff --git a/packages/ffe-core/documentation/colors.tsx b/packages/ffe-core/documentation/colors.tsx
new file mode 100644
index 0000000000..ee6cbcafc8
--- /dev/null
+++ b/packages/ffe-core/documentation/colors.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+// import {colors} from '../gen-src/semantic-color-names.js;
+
+export const ColorsComponent = () => {
+    const colors = ['derp'];
+    return (
+        <table>
+            <thead>
+                <tr>
+                    <th>Farge navn</th>
+                    <th>Light</th>
+                    <th>Light accent</th>
+                    <th>Dark</th>
+                    <th>Dark accent</th>
+                </tr>
+            </thead>
+            <tbody>
+                {colors.map(color => (
+                    <tr key={color}>
+                        <td>{color}</td>
+                        <td style={{ backgroundColor: `var(${color})` }}></td>
+                        <td
+                            class="ffe-accent-mode"
+                            style={{ backgroundColor: `var(${color})` }}
+                        ></td>
+                        <td
+                            class="dark-mode"
+                            style={{ backgroundColor: `var(${color})` }}
+                        ></td>
+                        <td
+                            class="dark-mode ffe-accent-color"
+                            style={{ backgroundColor: `var(${color})` }}
+                        ></td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};
diff --git a/packages/ffe-core/scripts/generate-semantic-colors.js b/packages/ffe-core/scripts/generate-semantic-colors.js
index f600d9b1c2..ad191e3dc6 100755
--- a/packages/ffe-core/scripts/generate-semantic-colors.js
+++ b/packages/ffe-core/scripts/generate-semantic-colors.js
@@ -5,6 +5,7 @@ const writeToFile = require('./lib/writeToFile');
 
 const usedPrimitive = {};
 const usedSemantic = {};
+const semanticColorNames = [];
 
 const files = {
     primitive: '01 Primitive.value.json',
@@ -46,6 +47,7 @@ const convertPrimitivesJsonToCss = jsonFile => {
 const convertContextJsonToCss = jsonFile => {
     const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
     const cssLines = [];
+    const saveColors = semanticColorNames.length === 0;
 
     const processColorTokens = (obj, prefix = '') => {
         for (const [key, value] of Object.entries(obj)) {
@@ -64,6 +66,7 @@ const convertContextJsonToCss = jsonFile => {
                     : value.$value;
                 cssLines.push(`${cssVarName}: ${cssVarValue};`);
                 usedSemantic[cssVarValue] = true;
+                if (saveColors) semanticColorNames.push(cssVarName);
             } else if (typeof value === 'object') {
                 processColorTokens(value, `${prefix}${key}-`);
             }
@@ -80,7 +83,6 @@ const convertContextJsonToCss = jsonFile => {
 const convertSemanticJsonToCss = (
     jsonFile,
     contextJsonFile,
-    contextAccentJsonFile,
     isStorybook = false,
 ) => {
     const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
@@ -141,16 +143,18 @@ function generateSemanticColors() {
     cssContent += `\n\n// Context accent \n.ffe-accent-mode {\n${convertContextJsonToCss(filePath(files.contextAccent)).join('\n')}}\n`;
     cssContent += `\n\n// Context \n:root,\n:host {\n${convertContextJsonToCss(filePath(files.context)).join('\n')}}\n`;
     cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticLight))}`;
-    cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context), filePath(files.contextAccent))}`;
+    cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context))}`;
     cssContent += `\n\n${convertPrimitivesJsonToCss(filePath(files.primitive))}`;
 
     writeToFile('less/colors-semantic.less')(cssContent);
     writeToFile('css/colors-semantic.css')(cssContent);
+    writeToFile('gen-src/semantic-color-names.json')(
+        JSON.stringify({ colors: semanticColorNames }),
+    );
 
     const storybookCssContent = convertSemanticJsonToCss(
         filePath(files.semanticDark),
         filePath(files.context),
-        filePath(files.contextAccent),
         true,
     );
     writeToFile('less/colors-semantic-storybook.less')(storybookCssContent);