1
0
mirror of https://github.com/bitwarden/browser synced 2024-12-25 17:32:46 +01:00
bitwarden-estensione-browser/.storybook/preview.tsx
Danielle Flinn 6ef6140b29
Storybook docs (#5552)
* updated sort order

* Update preview.tsx

* Create avatar.mdx

Added avatar documentation based on Figma docs

* Added badge docs

* fixed typos

* added breadcrumb docs

* Added callout docs

* added color password docs

* Added dialog docs

* fixed typo

* Updated Dialogs docs

Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.

Updated the sub-docs pages

* Update simple-dialog.mdx

* Added documentation from Figma to Forms docs

* Create icon-button.mdx

* added link docs

* Added menu docs

* Added progress indicator docs

* Updated table docs

* Added tab docs

* Added toggle group docs

* Revert "Update preview.tsx"

This reverts commit 4671d9726a.

* added docs for appA11yTitle

* Fixed typos

* Update libs/components/src/link/link.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/components/src/menu/menu.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback

* Addressed feedback on callout, menu, and progress

* moved stories mdx files to proper location

* Addressed feedback on dialogs.mdx

* Update libs/components/src/tabs/tabs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback on Tabs

* ran prettier

* Fixed title formatting

* ran prettier

* Update libs/components/src/dialog/dialogs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* ran prettier

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2023-06-27 12:46:44 -07:00

113 lines
2.9 KiB
TypeScript

import { setCompodocJson } from "@storybook/addon-docs/angular";
import { componentWrapperDecorator } from "@storybook/angular";
import type { Preview } from "@storybook/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
const decorator = componentWrapperDecorator(
(story) => {
return `
<ng-template #lightPreview>
<div
class="theme_light tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff] tw-px-5 tw-py-10 tw-mb-5"
*ngIf="theme == 'both' || theme == 'light'"
>
${story}
</div>
</ng-template>
<ng-template #darkPreview>
<div
class="theme_dark tw-border-2 tw-border-solid tw-bg-[#1f242e] tw-px-5 tw-py-10"
*ngIf="theme == 'both' || theme == 'dark'"
>
${story}
</div>
</ng-template>
<ng-template #nordPreview>
<div
class="theme_nord tw-border-2 tw-border-solid tw-bg-[#434C5E] tw-px-5 tw-py-10"
*ngIf="theme == 'nord'">
${story}
</div>
</ng-template>
<ng-template #solarizedPreview>
<div
class="theme_solarized tw-border-2 tw-border-solid tw-bg-[#002b36] tw-px-5 tw-py-10"
*ngIf="theme == 'solarized'"
>
${story}
</div>
</ng-template>
<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
<ng-container *ngTemplateOutlet="nordPreview"></ng-container>
<ng-container *ngTemplateOutlet="solarizedPreview"></ng-container>
`;
},
({ globals }) => {
return { theme: `${globals["theme"]}` };
}
);
const preview: Preview = {
decorators: [decorator],
globalTypes: {
theme: {
description: "Global theme for components",
defaultValue: "both",
toolbar: {
title: "Theme",
icon: "circlehollow",
items: [
{
title: "Light & Dark",
value: "both",
icon: "sidebyside",
},
{
title: "Light",
value: "light",
icon: "sun",
},
{
title: "Dark",
value: "dark",
icon: "moon",
},
{
title: "Nord",
value: "nord",
left: "⛰",
},
{
title: "Solarized",
value: "solarized",
left: "☯",
},
],
dynamicTitle: true,
},
},
},
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: {
method: "alphabetical",
order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
},
},
docs: { source: { type: "dynamic", excludeDecorators: true } },
},
};
export default preview;