-
Notifications
You must be signed in to change notification settings - Fork 12
/
preview.js
145 lines (130 loc) · 3.29 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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import '@department-of-veterans-affairs/formation/dist/formation.min.css';
import './style.scss';
import '@department-of-veterans-affairs/formation/dist/formation';
import '@department-of-veterans-affairs/component-library/dist/main.css';
import {
applyPolyfills,
defineCustomElements,
} from '@department-of-veterans-affairs/component-library';
applyPolyfills().then(() => {
defineCustomElements();
});
// This CustomEvent polyfill is for IE11:
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#polyfill
(function () {
if (typeof window.CustomEvent === 'function') return;
function CustomEvent(event, params) {
const customParams = params || {
bubbles: false,
cancelable: false,
detail: null,
};
const evt = document.createEvent('CustomEvent');
evt.initCustomEvent(
event,
customParams.bubbles,
customParams.cancelable,
customParams.detail,
);
return evt;
}
window.CustomEvent = CustomEvent;
})();
const viewports = {
xsmall: {
name: 'XSmall Screen',
styles: {
height: '568px',
width: '320px',
},
type: 'mobile',
},
small: {
name: 'Small Screen',
styles: {
height: '896px',
width: '481px',
},
type: 'mobile',
},
medium: {
name: 'Medium',
styles: {
height: '1112px',
width: '768px',
},
type: 'tablet',
},
smallDesktop: {
name: 'Small Desktop',
styles: {
height: '1400px',
width: '1008px',
},
type: 'desktop',
},
large: {
name: 'Large',
styles: {
height: '1600px',
width: '1601px',
},
type: 'desktop',
},
};
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
options: {
storySort: {
method: 'alphabetical',
order: [
'About',
['Introduction'],
'Components',
'V1 Components',
'Under development',
'Deprecated',
],
},
},
viewport: {
viewports,
defaultViewport: 'small',
},
viewMode: 'docs',
};
export const decorators = [
Story => (
<div>
<Story />
</div>
),
];
// Sets up a mutation observer to ensure that the storybook docs-root container doesn't get hidden by modals
const observeDocsRoot = () => {
// The target for the observer
const targetNode = document.getElementById('docs-root');
// Configuration options for the observer
const config = {attributes: true, childList: false, subtree: false}
// Callback function that 'resets' the aria-hidden attribute to false
const callback = (
/** @type {MutationRecord[]} */ mutationList
) => {
for (const mutation of mutationList) {
if (mutation.attributeName === 'aria-hidden' && targetNode?.getAttribute('aria-hidden') !== 'false') {
targetNode?.setAttribute('aria-hidden', 'false');
}
}
};
// Create an observer instance
const observer = new MutationObserver(callback);
// Start observing
if (targetNode) observer.observe(targetNode, config);
}
document.body.onload = function () {
// Fix for React 17/NVDA bug where React root is read as "clickable"
// https://github.com/nvaccess/nvda/issues/13262
// https://github.com/facebook/react/issues/20895
document.querySelector('#root').setAttribute('role', 'presentation');
observeDocsRoot();
};