-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
preview.js
53 lines (47 loc) · 1.32 KB
/
preview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* the styled-elements and normalized are included here to replicate the presets that exist in the learn app */
import React from "react";
import "../src/normalize.css";
import "../src/global-element-styles.css";
import "../src/base.css";
export const parameters = {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
backgrounds: {
default: "light-palette",
values: [
{
name: "light-palette",
value: "#ffffff",
},
{
name: "dark-palette",
value: "#0a0a23",
},
],
},
};
export const decorators = [renderTheme];
/**
* Gets matching theme name for currently selected background and provides it
* to the story.
*/
function renderTheme(Story, context) {
const selectedBackgroundValue = context.globals.backgrounds?.value;
const selectedBackgroundName = parameters.backgrounds.values.find(
(bg) => bg.value === selectedBackgroundValue,
)?.name;
// Use the value of the default background to prevent "undefined" className
const className = selectedBackgroundName || parameters.backgrounds.default;
if (className === "light-palette") {
document.body.classList.remove("dark-palette");
document.body.classList.add("light-palette");
} else {
document.body.classList.remove("light-palette");
document.body.classList.add("dark-palette");
}
return <Story />;
}