/
index.ts
91 lines (78 loc) · 2.83 KB
/
index.ts
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { document, window } from 'global';
import dedent from 'ts-dedent';
import { logger } from '@storybook/client-logger';
import { Background } from '../types';
export const isReduceMotionEnabled = () => {
const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
return prefersReduceMotion.matches;
};
export const getBackgroundColorByName = (
currentSelectedValue: string,
backgrounds: Background[] = [],
defaultName: string
): string => {
if (currentSelectedValue === 'transparent') {
return 'transparent';
}
if (backgrounds.find((background) => background.value === currentSelectedValue)) {
return currentSelectedValue;
}
const defaultBackground = backgrounds.find((background) => background.name === defaultName);
if (defaultBackground) {
return defaultBackground.value;
}
if (defaultName) {
const availableColors = backgrounds.map((background) => background.name).join(', ');
logger.warn(
dedent`
Backgrounds Addon: could not find the default color "${defaultName}".
These are the available colors for your story based on your configuration:
${availableColors}.
`
);
}
return 'transparent';
};
export const clearStyles = (selector: string | string[]) => {
const selectors = Array.isArray(selector) ? selector : [selector];
selectors.forEach(clearStyle);
};
const clearStyle = (selector: string) => {
const element = document.getElementById(selector) as HTMLElement;
if (element) {
element.parentElement.removeChild(element);
}
};
export const addGridStyle = (selector: string, css: string) => {
const existingStyle = document.getElementById(selector) as HTMLElement;
if (existingStyle) {
if (existingStyle.innerHTML !== css) {
existingStyle.innerHTML = css;
}
} else {
const style = document.createElement('style') as HTMLElement;
style.setAttribute('id', selector);
style.innerHTML = css;
document.head.appendChild(style);
}
};
export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
const existingStyle = document.getElementById(selector) as HTMLElement;
if (existingStyle) {
if (existingStyle.innerHTML !== css) {
existingStyle.innerHTML = css;
}
} else {
const style = document.createElement('style') as HTMLElement;
style.setAttribute('id', selector);
style.innerHTML = css;
const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ''}`;
// If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
if (existingGridStyle) {
existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
} else {
document.head.appendChild(style);
}
}
};