Skip to content

Commit 3eeea12

Browse files
authored
Merge pull request #2511 from SpareBank1/semantiske-farger
Semantiske farger
2 parents 8711516 + 893bd34 commit 3eeea12

File tree

126 files changed

+12511
-13309
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

126 files changed

+12511
-13309
lines changed

.env.example

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
PERSONAL_ACCESS_TOKEN=
2+
FILE_KEY=

.github/workflows/sync-figma-to-tokens.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
- name: Install Node.js
1818
uses: actions/setup-node@v3
1919
with:
20-
node-version: '18.16.0'
20+
node-version: 20
2121

2222
- name: Set NPM version
2323
run: npm install -g npm@9.5.1

.github/workflows/sync-tokens-to-figma.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313
- name: Install Node.js
1414
uses: actions/setup-node@v3
1515
with:
16-
node-version: '18.16.0'
16+
node-version: 20
1717

1818
- name: Set NPM version
1919
run: npm install -g npm@9.5.1

.github/workflows/test-ci.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ jobs:
1313
- uses: actions/checkout@v3
1414
- uses: actions/setup-node@v3
1515
with:
16-
node-version: 18
16+
node-version: 20
1717
- run: npm install
1818
- run: npm run lint
1919
- run: npm run build

.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

+3-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,8 +13,10 @@ 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)',
19+
'../documentation/**/*.@(mdx)',
1820
],
1921
addons: [
2022
getAbsolutePath('@storybook/addon-links'),

.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
},

buildtool/config/stylelint.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@ module.exports = {
4545
ignoreAtRules: ['media'],
4646
},
4747
],
48+
'declaration-empty-line-before': [
49+
'always',
50+
{
51+
except: ['first-nested'],
52+
ignore: ['after-comment', 'after-declaration'],
53+
severity: 'warning',
54+
},
55+
],
4856
'media-feature-name-no-vendor-prefix': true,
4957
'property-no-vendor-prefix': null,
5058
'selector-max-specificity': [

count-stories.js

+222
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
function countStoryFiles(directoryPath) {
5+
const storyFiles = [];
6+
const excludedStoryFiles = [];
7+
const errors = [];
8+
9+
// Folders to exclude
10+
const excludeFolders = [
11+
'ffe-buttons-react',
12+
'ffe-messages-react',
13+
'ffe-feedback-react',
14+
'ffe-chips-react',
15+
'ffe-core',
16+
'ffe-accordion-react',
17+
'ffe-datepicker-react',
18+
'ffe-form-react',
19+
'ffe-cards-react',
20+
'ffe-collapse-react',
21+
'ffe-datepicker-react',
22+
'ffe-grid-react',
23+
'ffe-icons-react',
24+
'ffe-lists-react',
25+
'ffe-pagination-react',
26+
'ffe-searchable-dropdown-react',
27+
'ffe-spinner-react',
28+
];
29+
30+
const colors = {
31+
pink: '\x1b[38;5;218m',
32+
blue: '\x1b[38;5;153m',
33+
green: '\x1b[38;5;151m',
34+
yellow: '\x1b[38;5;222m',
35+
purple: '\x1b[38;5;183m',
36+
cyan: '\x1b[38;5;159m',
37+
reset: '\x1b[0m',
38+
dim: '\x1b[2m',
39+
bold: '\x1b[1m',
40+
red: '\x1b[38;5;203m',
41+
};
42+
43+
// Function to get color based on progress
44+
function getProgressColor(progress) {
45+
// Define color stops from red to yellow to green
46+
const colorStops = [
47+
{ percent: 0, color: '203' }, // Light red
48+
{ percent: 50, color: '222' }, // Light yellow
49+
{ percent: 100, color: '151' }, // Light green
50+
];
51+
52+
// Find the two color stops we're between
53+
let start = colorStops[0];
54+
let end = colorStops[1];
55+
56+
for (let i = 0; i < colorStops.length - 1; i++) {
57+
if (
58+
progress >= colorStops[i].percent &&
59+
progress <= colorStops[i + 1].percent
60+
) {
61+
start = colorStops[i];
62+
end = colorStops[i + 1];
63+
break;
64+
}
65+
}
66+
67+
// Calculate the color number based on progress between stops
68+
const range = end.percent - start.percent;
69+
const progressInRange = progress - start.percent;
70+
const percentage = progressInRange / range;
71+
72+
const startColor = parseInt(start.color);
73+
const endColor = parseInt(end.color);
74+
const color = Math.round(
75+
startColor + (endColor - startColor) * percentage,
76+
);
77+
78+
return `\x1b[38;5;${color}m`;
79+
}
80+
81+
function traverseExcludedDirectory(currentPath) {
82+
try {
83+
const files = fs.readdirSync(currentPath);
84+
85+
for (const file of files) {
86+
const filePath = path.join(currentPath, file);
87+
const stats = fs.statSync(filePath);
88+
89+
if (stats.isDirectory() && !file.startsWith('.')) {
90+
traverseExcludedDirectory(filePath);
91+
} else if (stats.isFile()) {
92+
if (file.match(/\.stories\.(tsx|jsx)$/)) {
93+
excludedStoryFiles.push({
94+
name: file,
95+
path: filePath,
96+
});
97+
}
98+
}
99+
}
100+
} catch (error) {
101+
errors.push(`Error accessing ${currentPath}: ${error.message}`);
102+
}
103+
}
104+
105+
function traverseDirectory(currentPath) {
106+
try {
107+
const files = fs.readdirSync(currentPath);
108+
109+
for (const file of files) {
110+
const filePath = path.join(currentPath, file);
111+
const stats = fs.statSync(filePath);
112+
113+
if (stats.isDirectory()) {
114+
// Check if it's an excluded folder at the root level
115+
const isExcludedFolder = excludeFolders.includes(file);
116+
117+
// Skip node_modules and hidden directories
118+
if (file !== 'node_modules' && !file.startsWith('.')) {
119+
// If it's an excluded folder, store its stories separately
120+
if (isExcludedFolder) {
121+
traverseExcludedDirectory(filePath);
122+
} else {
123+
traverseDirectory(filePath);
124+
}
125+
}
126+
} else if (stats.isFile()) {
127+
// Check if file matches story file pattern
128+
if (file.match(/\.stories\.(tsx|jsx)$/)) {
129+
storyFiles.push({
130+
name: file,
131+
path: filePath,
132+
});
133+
}
134+
}
135+
}
136+
} catch (error) {
137+
errors.push(`Error accessing ${currentPath}: ${error.message}`);
138+
}
139+
}
140+
141+
traverseDirectory(directoryPath);
142+
143+
// Calculate statistics
144+
const totalStories = storyFiles.length + excludedStoryFiles.length;
145+
const progressPercentage = (
146+
(excludedStoryFiles.length / totalStories) *
147+
100
148+
).toFixed(1);
149+
150+
// Print results
151+
console.log(
152+
`\n${colors.purple}${colors.bold} Storybook Story Files Analysis${colors.reset}`,
153+
);
154+
console.log(
155+
`${colors.dim}═══════════════════════════════${colors.reset}\n`,
156+
);
157+
158+
console.log(`${colors.blue} Regular Story Files:${colors.reset}`);
159+
storyFiles.forEach(file => {
160+
console.log(
161+
` ${colors.dim}└─${colors.reset} ${colors.cyan}${file.name}${colors.reset} ${colors.dim}(${file.path})${colors.reset}`,
162+
);
163+
});
164+
165+
console.log(
166+
`\n${colors.pink} Progress on "Semantiske farger":${colors.reset}`,
167+
);
168+
console.log(`${colors.dim}──────────────────────────────${colors.reset}`);
169+
console.log(
170+
` ${colors.yellow}Stories in excluded folders: ${excludedStoryFiles.length}${colors.reset}`,
171+
);
172+
console.log(
173+
` ${colors.yellow}Stories remaining: ${storyFiles.length}${colors.reset}`,
174+
);
175+
console.log(
176+
` ${colors.green}Progress: ${progressPercentage}% complete${colors.reset}`,
177+
);
178+
179+
// Create progress bar with gradient color
180+
const progressColor = getProgressColor(parseFloat(progressPercentage));
181+
const progressBlocks = Math.floor(progressPercentage / 5);
182+
const emptyBlocks = 20 - progressBlocks;
183+
184+
console.log(
185+
` ${colors.bold}[${progressColor}${Array(progressBlocks)
186+
.fill('█')
187+
.join('')}${colors.dim}${Array(emptyBlocks)
188+
.fill('░')
189+
.join('')}${colors.reset}]`,
190+
);
191+
192+
console.log(`\n${colors.purple} Summary:${colors.reset}`);
193+
console.log(`${colors.dim}──────────────${colors.reset}`);
194+
console.log(
195+
` ${colors.cyan}Total story files: ${totalStories}${colors.reset}`,
196+
);
197+
console.log(
198+
` ${colors.cyan}Excluded folders: ${colors.dim}${excludeFolders.join(', ')}${colors.reset}`,
199+
);
200+
201+
if (errors.length > 0) {
202+
console.log(`\n${colors.yellow}⚠️ Errors encountered:${colors.reset}`);
203+
errors.forEach(error =>
204+
console.log(` ${colors.red}${error}${colors.reset}`),
205+
);
206+
}
207+
208+
return {
209+
totalFiles: storyFiles.length,
210+
excludedFilesCount: excludedStoryFiles.length,
211+
progressPercentage,
212+
files: storyFiles,
213+
excludedFiles: excludedStoryFiles,
214+
errors,
215+
};
216+
}
217+
218+
// Get the directory path from command line argument, or use current directory
219+
const targetDirectory = process.argv[2] || process.cwd();
220+
221+
// Run the counter
222+
countStoryFiles(targetDirectory);

documentation/Changelog.mdx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Canvas, Meta } from '@storybook/blocks';
2+
3+
<Meta title="Introduksjon/Changelog" />
4+
5+
# Changelog
6+
7+
Denne siden lister breaking changes og større endringer i designsystemet. For alle oppdateringer på en komponent kan en se historikken i hver enkelt komponent.
8+
9+
Feks: https://github.com/SpareBank1/designsystem/blob/develop/packages/ffe-core/CHANGELOG.md
10+
11+
## 2025 - februar - Semantiske Farger
12+
13+
Vi har nå implementert semantiske farger i designsystemet. Vi oppsummerer derfor endringene på tvers av komponentene.
14+
15+
### Breaking changes
16+
17+
Det er et sett med parametere som ikke lenger er i bruk da det løses med semantiske farger. Dette innebærer:
18+
19+
- `bgDarkmodeColor` - blir nå løst med semantiske farger
20+
- `onColoredBg` - erstattes med å sette klassen `ffe-accent-color` på komponenten eller containeren til komponenten
21+
22+
Flere av dagens komponenter støtter at en kan sette bakgrunnsfargen selv. Disse er oppdatert slik at det er nå mulig å velge mellom default + 2 farger, altså 3 farger totalt som fungerer på tvers av light, dark og accent modes.
23+
24+
- `bgColor` - endres fra `'sand-30' | 'sand-70' | 'frost-30' | 'syrin-30' | 'syrin-70'` til `'primary' | 'seccondary' | 'tertiery'`
25+
26+
Variablene som var i komponentene av formen `--ffe-v-` fases ut. Disse var for å legge til rette for ekstern teaming ev systemet som ikke lenger er et behov. Grunnen for utfasing er primært tekniske begresninger med semantiskefarger
27+
det ble rett og slett farger som ikke ble oppdatert riktig i enkelte kontekster og vi fant ikke noen annen vei rundt enn å redusere nivået på variabler brukt.
28+
Bruken av `--ffe-v-` har og sklidd ut i senere tid generelt i systemet.
29+
30+
Fargene på format `--ffe-farge` er fremdeles tilgjengelig, men vi anbefaler å bytte ut med passende farger som funnet på fargesiden på formatet `--ffe-color-` da disse er semantiske
31+
og vil fungere i alle kontekster.

documentation/semantic-colors.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Semantiske farger
2+
3+
For å oppdatere semantiske farger fra Figma:
4+
5+
1. Dupliser fila `.env.example` og rename den til `.env`
6+
- Fyll inn [`PERSONAL_ACCESS_TOKEN`](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
7+
- Tokenet du generer trenger lesetilgang til `Variables`
8+
- Fyll inn `FILE_KEY`
9+
- Det er segmentet etter `design/` i urlen til DS 2.0 Core fila.
10+
2. Kjør `npm run sync-figma-to-tokens`
11+
3. Kjør `npm run build` og se at alt bygger riktig og at filene `packags/ffe-core/less/colors-semantic.less` ser ok ut. At det er noe i den og at det ser ut som nogenlunde fornuftige css custom properties

packages/ffe-account-selector-react/less/ffe-account-selector-single.less

-20
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,16 @@
1-
@import 'theme';
2-
@import 'ffe-account-selector-single';
1+
.ffe-account-selector-single {
2+
position: relative;
3+
display: block;
4+
5+
&__details {
6+
padding: var(--ffe-spacing-2xs) var(--ffe-spacing-2xs) 0;
7+
color: var(--ffe-color-foreground-default);
8+
min-height: calc(1lh);
9+
display: flex;
10+
justify-content: space-between;
11+
}
12+
13+
&__details--invalid-empty {
14+
display: none;
15+
}
16+
}

0 commit comments

Comments
 (0)