From fa4578e4945ff37f6927075e84977b15d179ec55 Mon Sep 17 00:00:00 2001 From: Pio Rasch-Halvorsen Date: Fri, 28 Feb 2025 12:14:15 +0100 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20legg=20til=20mulighet=20for=20?= =?UTF-8?q?=C3=A5=20velge=20fargetema=20i=20Storybook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Legger til muligheten for å velge fargetema i Storybook-eksemplene. Legger også til mulighet for å velge bakgrunnsfarge på siden, hvor man kan velge blant fargerollene våre for bakgrunner. --- .storybook/main.ts | 1 - .storybook/preview-body.html | 3 --- .storybook/preview.tsx | 30 +++++++++++++++++++++++++ .storybook/theme.tsx | 43 ++++++++++++++++++++++++++++++++++++ 4 files changed, 73 insertions(+), 4 deletions(-) delete mode 100644 .storybook/preview-body.html create mode 100644 .storybook/theme.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index f49c78ea53e..24cde9d633f 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,7 +5,6 @@ const config: StorybookConfig = { stories: ["../packages/jokul/**/*.stories.@(ts|tsx)"], staticDirs: ["../storybook-public"], addons: [ - "@storybook/addon-onboarding", "@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions", diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html deleted file mode 100644 index 959344e0795..00000000000 --- a/.storybook/preview-body.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 65fbfd03b10..51234628e42 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -4,9 +4,39 @@ import React from "react"; import "../packages/jokul/src/components/card/styles/_index.scss"; import { PropDocs } from "./docs/props/PropDocs.js"; import "./global.scss"; +import { themeDecorator, themeGlobal, themes } from "./theme.js"; const preview: Preview = { + globalTypes: { + theme: themeGlobal, + }, + initialGlobals: { + theme: themes[0], + }, + decorators: [themeDecorator], parameters: { + backgrounds: { + values: [ + { name: "Page", value: "var(--jkl-color-background-page)" }, + { + name: "Page variant", + value: "var(--jkl-color-background-page-variant)", + }, + { + name: "Container", + value: "var(--jkl-color-background-container)", + }, + { + name: "Container low", + value: "var(--jkl-color-background-container-low)", + }, + { + name: "Container high", + value: "var(--jkl-color-background-container-high)", + }, + ], + default: "Page", + }, options: { storySort: (a, b) => { let compareBy = "name"; diff --git a/.storybook/theme.tsx b/.storybook/theme.tsx new file mode 100644 index 00000000000..3e226c75621 --- /dev/null +++ b/.storybook/theme.tsx @@ -0,0 +1,43 @@ +import { ReactRenderer } from "@storybook/react"; +import React, { useEffect } from "react"; +import { DecoratorFunction } from "storybook/internal/types"; + +export const themes = [undefined, "light", "dark"] as const; + +const applyTheme = (element: HTMLElement, theme: (typeof themes)[number]) => { + element.classList.add("jkl"); + element.dataset["theme"] = theme; +}; + +const clearTheme = (element: HTMLElement) => { + delete element.dataset["theme"]; +}; + +export const themeGlobal = { + description: "Fargetema for eksemplet", + toolbar: { + title: "Fargetema", + icon: "paintbrush", + items: [ + { title: "Automatisk", value: themes[0], icon: "contrast" }, + { title: "Lyst", value: themes[1], icon: "sun" }, + { title: "Mørkt", value: themes[2], icon: "moon" }, + ], + dynamicTitle: true, + }, +}; + +export const themeDecorator: DecoratorFunction = ( + Story, + context, +) => { + useEffect(() => { + const body = window.document.body; + clearTheme(body); + applyTheme(body, context.globals.theme); + + return () => clearTheme(body); + }, [context.globals.theme]); + + return ; +}; From 2e168da8bdcda819946645379f25bd381dd1e509 Mon Sep 17 00:00:00 2001 From: Pio Rasch-Halvorsen Date: Fri, 28 Feb 2025 12:51:31 +0100 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20gj=C3=B8r=20sidebakgrunn=20i=20Stor?= =?UTF-8?q?ybook=20tilgjengelig=20i=20URL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sørg for at sidebakgrunnen i Storybook-eksemplene kan settes via URL-parametre, slik at vi kan styre det fra eksempler i portalen hvis vi bruker iframes med Storybook-stories. --- .storybook/main.ts | 3 +++ .storybook/preview.tsx | 19 +++++++++++-------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 24cde9d633f..44e6766bf00 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -9,6 +9,9 @@ const config: StorybookConfig = { "@chromatic-com/storybook", "@storybook/addon-interactions", ], + features: { + backgroundsStoryGlobals: true, + }, framework: { name: "@storybook/react-vite", options: {}, diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 51234628e42..9a13d67b98c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -12,30 +12,33 @@ const preview: Preview = { }, initialGlobals: { theme: themes[0], + backgrounds: { value: "page" }, }, decorators: [themeDecorator], parameters: { backgrounds: { - values: [ - { name: "Page", value: "var(--jkl-color-background-page)" }, - { + options: { + page: { + name: "Page", + value: "var(--jkl-color-background-page)", + }, + pageVariant: { name: "Page variant", value: "var(--jkl-color-background-page-variant)", }, - { + container: { name: "Container", value: "var(--jkl-color-background-container)", }, - { + containerLow: { name: "Container low", value: "var(--jkl-color-background-container-low)", }, - { + containerHigh: { name: "Container high", value: "var(--jkl-color-background-container-high)", }, - ], - default: "Page", + }, }, options: { storySort: (a, b) => {