diff --git a/.storybook/main.ts b/.storybook/main.ts index f49c78ea53e..44e6766bf00 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,11 +5,13 @@ 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", ], + features: { + backgroundsStoryGlobals: true, + }, framework: { name: "@storybook/react-vite", options: {}, 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..9a13d67b98c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -4,9 +4,42 @@ 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], + backgrounds: { value: "page" }, + }, + decorators: [themeDecorator], parameters: { + backgrounds: { + 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)", + }, + }, + }, 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 ; +};