Skip to content

Commit 5c6628a

Browse files
dagfrodedagfrode
authored
Merge pull request #2503 from SpareBank1/semantiske-farger-storybook
chore: oppdater dokumentasjon
2 parents 0e78fdb + e7ff7b1 commit 5c6628a

File tree

10 files changed

+167
-4
lines changed

10 files changed

+167
-4
lines changed

‎.storybook/colors.less

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.ffe-color-table {
2+
td {
3+
&:first-child {
4+
width: auto;
5+
}
6+
width: 100px;
7+
}
8+
border-collapse: collapse;
9+
}

‎.storybook/main.less

+1
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,4 @@
4747
@import '../packages/ffe-tables/less/tables';
4848
@import '../packages/ffe-tabs/less/tabs';
4949
@import '../packages/ffe-chips/less/chip';
50+
@import './colors';

‎.storybook/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { StorybookConfig } from '@storybook/react-vite';
22
import { createRequire } from 'module';
3+
import { dirname, join } from 'path';
34
const require = createRequire(import.meta.url);
4-
import { join, dirname } from 'path';
55

66
/**
77
* This function is used to resolve the absolute path of a package.
@@ -13,6 +13,7 @@ function getAbsolutePath(value: string): any {
1313

1414
const config: StorybookConfig = {
1515
stories: [
16+
'../packages/ffe-core/documentation/Index.mdx',
1617
'../packages/**/*.@(mdx)',
1718
'../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
1819
],

‎.storybook/preview.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const preview: Preview = {
4848
options: {
4949
storySort: {
5050
method: 'alphabetical',
51+
order: ['Introduksjon', 'Design', 'Komponenter', 'Sider'],
5152
},
5253
},
5354
},

‎packages/ffe-core/documentation/AccentPage.mdx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Canvas, Meta } from '@storybook/blocks';
2+
3+
import * as AccentPageStories from './AccentPage.stories.tsx';
4+
5+
<Meta title="Sider/Accent" />
6+
7+
<Canvas of={AccentPageStories.Standard} />

‎packages/ffe-core/documentation/AccentPage.stories.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { PrimaryButton } from '@sb1/ffe-buttons-react';
2+
import { Heading1 } from '@sb1/ffe-core-react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import React from 'react';
5+
6+
const meta: Meta = {
7+
title: 'Pages/Accent',
8+
};
9+
export default meta;
10+
11+
type Story = StoryObj;
12+
13+
export const Standard: Story = {
14+
render: () => (
15+
<div>
16+
<div>
17+
<Heading1>Test</Heading1>
18+
<PrimaryButton>Knapp</PrimaryButton>
19+
</div>
20+
<div
21+
className="ffe-accent-mode"
22+
style={{
23+
backgroundColor: 'var(--ffe-color-background-default)',
24+
}}
25+
>
26+
<Heading1>Test</Heading1>
27+
<PrimaryButton>Knapp</PrimaryButton>
28+
</div>
29+
<div>
30+
<Heading1>Test</Heading1>
31+
<PrimaryButton>Knapp</PrimaryButton>
32+
</div>
33+
</div>
34+
),
35+
};

‎packages/ffe-core/documentation/Colors.mdx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Meta } from '@storybook/blocks';
2+
import { colors } from '../gen-src/semantic-color-names.json';
3+
4+
<Meta title="Design/Farger" />
5+
6+
# Farger
7+
8+
I designsystemet bruker vi semantiske farger. Det vil si at vi bruker farger med navn som
9+
`--ffe-color-background-default` i stedet for fargekoder som `#000000`. Ved å bruke slike navn
10+
kan vi variere hvilke farge som vises på tvers av appen. Vi støtter 4 moduser i dag:
11+
12+
- Light - default
13+
- Light accent - for å fremheve elementer
14+
- Dark - for mørk modus
15+
- Dark accent - for å fremheve elementer i mørk modus
16+
17+
Dark mode aktiveres automatisk basert på brukerens systeminnstillinger.
18+
Accent mode aktiveres med å legge klassen `ffe-accent-mode` på elementet eller på
19+
containeren til elementet.
20+
21+
Bruken av accent er der en har en blokk på side med en annen bakgrunnsfarge enn resten.
22+
23+
Se eksempelet [på en slik side med en accent section]() WIP
24+
25+
26+
## Liste over de semantiske fargene
27+
28+
29+
<table class="ffe-color-table">
30+
<thead>
31+
<tr>
32+
<th>Farge navn</th>
33+
<th>Light</th>
34+
<th>Light accent</th>
35+
<th>Dark</th>
36+
<th>Dark accent</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
{colors.map(color => (
41+
<tr key={color}>
42+
<td>{color}</td>
43+
<td style={{ backgroundColor: `var(${color})` }}></td>
44+
<td
45+
class="ffe-accent-mode"
46+
style={{ backgroundColor: `var(${color})` }}
47+
></td>
48+
<td
49+
class="dark-mode"
50+
style={{ backgroundColor: `var(${color})` }}
51+
></td>
52+
<td
53+
class="dark-mode ffe-accent-color"
54+
style={{ backgroundColor: `var(${color})` }}
55+
></td>
56+
</tr>
57+
))}
58+
</tbody>
59+
</table>
60+

‎packages/ffe-core/documentation/Index.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { Meta } from '@storybook/blocks';
2+
import { colors } from '../gen-src/semantic-color-names.json';
3+
4+
<Meta title="Introduksjon/Velkommen" />
5+
6+
# Velkommen til Sparebank 1 Designsystem

‎packages/ffe-core/documentation/colors.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
// import {colors} from '../gen-src/semantic-color-names.js;
3+
4+
export const ColorsComponent = () => {
5+
const colors = ['derp'];
6+
return (
7+
<table>
8+
<thead>
9+
<tr>
10+
<th>Farge navn</th>
11+
<th>Light</th>
12+
<th>Light accent</th>
13+
<th>Dark</th>
14+
<th>Dark accent</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
{colors.map(color => (
19+
<tr key={color}>
20+
<td>{color}</td>
21+
<td style={{ backgroundColor: `var(${color})` }}></td>
22+
<td
23+
class="ffe-accent-mode"
24+
style={{ backgroundColor: `var(${color})` }}
25+
></td>
26+
<td
27+
class="dark-mode"
28+
style={{ backgroundColor: `var(${color})` }}
29+
></td>
30+
<td
31+
class="dark-mode ffe-accent-color"
32+
style={{ backgroundColor: `var(${color})` }}
33+
></td>
34+
</tr>
35+
))}
36+
</tbody>
37+
</table>
38+
);
39+
};

‎packages/ffe-core/scripts/generate-semantic-colors.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const writeToFile = require('./lib/writeToFile');
55

66
const usedPrimitive = {};
77
const usedSemantic = {};
8+
const semanticColorNames = [];
89

910
const files = {
1011
primitive: '01 Primitive.value.json',
@@ -46,6 +47,7 @@ const convertPrimitivesJsonToCss = jsonFile => {
4647
const convertContextJsonToCss = jsonFile => {
4748
const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
4849
const cssLines = [];
50+
const saveColors = semanticColorNames.length === 0;
4951

5052
const processColorTokens = (obj, prefix = '') => {
5153
for (const [key, value] of Object.entries(obj)) {
@@ -64,6 +66,7 @@ const convertContextJsonToCss = jsonFile => {
6466
: value.$value;
6567
cssLines.push(`${cssVarName}: ${cssVarValue};`);
6668
usedSemantic[cssVarValue] = true;
69+
if (saveColors) semanticColorNames.push(cssVarName);
6770
} else if (typeof value === 'object') {
6871
processColorTokens(value, `${prefix}${key}-`);
6972
}
@@ -80,7 +83,6 @@ const convertContextJsonToCss = jsonFile => {
8083
const convertSemanticJsonToCss = (
8184
jsonFile,
8285
contextJsonFile,
83-
contextAccentJsonFile,
8486
isStorybook = false,
8587
) => {
8688
const jsonContent = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));
@@ -141,16 +143,18 @@ function generateSemanticColors() {
141143
cssContent += `\n\n// Context accent \n.ffe-accent-mode {\n${convertContextJsonToCss(filePath(files.contextAccent)).join('\n')}}\n`;
142144
cssContent += `\n\n// Context \n:root,\n:host {\n${convertContextJsonToCss(filePath(files.context)).join('\n')}}\n`;
143145
cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticLight))}`;
144-
cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context), filePath(files.contextAccent))}`;
146+
cssContent += `\n\n${convertSemanticJsonToCss(filePath(files.semanticDark), filePath(files.context))}`;
145147
cssContent += `\n\n${convertPrimitivesJsonToCss(filePath(files.primitive))}`;
146148

147149
writeToFile('less/colors-semantic.less')(cssContent);
148150
writeToFile('css/colors-semantic.css')(cssContent);
151+
writeToFile('gen-src/semantic-color-names.json')(
152+
JSON.stringify({ colors: semanticColorNames }),
153+
);
149154

150155
const storybookCssContent = convertSemanticJsonToCss(
151156
filePath(files.semanticDark),
152157
filePath(files.context),
153-
filePath(files.contextAccent),
154158
true,
155159
);
156160
writeToFile('less/colors-semantic-storybook.less')(storybookCssContent);

0 commit comments

Comments
 (0)