mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Meta } from "@storybook/angular";
|
|
|
|
import * as SvgIcons from "@bitwarden/assets/svg";
|
|
|
|
import { BitIconComponent } from "./icon.component";
|
|
|
|
export default {
|
|
title: "Component Library/Icon",
|
|
component: BitIconComponent,
|
|
parameters: {
|
|
design: {
|
|
type: "figma",
|
|
url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=21662-50335&t=k6OTDDPZOTtypRqo-11",
|
|
},
|
|
},
|
|
} as Meta;
|
|
|
|
const {
|
|
// Filtering out the few non-icons in the libs/assets/svg import
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
DynamicContentNotAllowedError: _DynamicContentNotAllowedError,
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
isIcon,
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
svgIcon,
|
|
...Icons
|
|
}: {
|
|
[key: string]: any;
|
|
} = SvgIcons;
|
|
|
|
export const Default = {
|
|
render: (args: { icons: [string, any][] }) => ({
|
|
props: args,
|
|
template: /*html*/ `
|
|
<div class="tw-bg-secondary-100 tw-p-2 tw-grid tw-grid-cols-[repeat(auto-fit,minmax(224px,1fr))] tw-gap-2">
|
|
@for (icon of icons; track icon[0]) {
|
|
<div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
|
|
<div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
|
|
<div class="tw-size-52 tw-w-full tw-content-center">
|
|
<bit-icon [icon]="icon[1]"></bit-icon>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
`,
|
|
}),
|
|
args: {
|
|
icons: Object.entries(Icons),
|
|
},
|
|
};
|