1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-01 13:13:36 +01:00
bitwarden-browser/.storybook/preview.js
Danielle Flinn a5abbecf39
Storybook docs structure (#3755)
* updated naming of common to documentation

* Add button docs

* updated sort order

Documentation is now above the component library and allows the general pages to come before the component specific ones.

* fixed typos

* updated file name

* fixed typo in introduction.stories.mdx

* updated banner.stories.mdx to match new docs structure

* remove plural in button docs
2022-10-18 07:54:27 -07:00

39 lines
1.1 KiB
JavaScript

import { setCompodocJson } from "@storybook/addon-docs/angular";
import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: {
order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
},
},
docs: { inlineStories: true },
};
// ng-template is used to scope any template reference variables and isolate the previews
const decorator = componentWrapperDecorator(
(story) => `
<ng-template #lightPreview>
<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
</ng-template>
<ng-template #darkPreview>
<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
</ng-template>
<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
`
);
addDecorator(decorator);