mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 09:43:23 +00:00
07076ebf9d
* refactor: move logic for products into a service - This is in preparation for having having the navigation menu show products based off of the same logic. * add extra small font size to tailwind config * remove absolute positioning from toggle width component - it now sits beneath the product switcher * update product switcher to have UI details that are only shown in the navigation pane * add navigation oriented product switcher * integrate navigation product switcher into secrets manager * integrate navigation product switcher into provider console * integrate navigation product switcher into user layout * integrate navigation product switcher into organizations * add translation for "switch" * hide active styles from navigation product switcher * update storybook for product switcher stories * remove unneeded full width style * use protected readonly variable instead of getter * migrate stories to CSF3 * remove double subscription to `moreProducts$` * only use wrapping div in navigation switcher story - less vertical space is taken up * update to satisfies * refactor `navigationUI` to `otherProductOverrides` * move observables to protected readonly * apply margin-top via class on the host component * remove switch text from the navigation product switcher * Allow for the active navigation switcher to be shown * remove xxs font style * remove unneeded module * remove switch from stories * remove defensive nullish coalescing * remove merge leftovers * Defect PM-7899 - show organizations product at the top of the other products list * Defect PM-7951 use attr.icon to keep the icon as an attribute after prod mode is enabled * Defect PM-7948 update path based on the current org * force active styles for navigation items (#9128) * add horizontal margin to icon --------- Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
115 lines
3.0 KiB
TypeScript
115 lines
3.0 KiB
TypeScript
import { RouterTestingModule } from "@angular/router/testing";
|
|
import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
|
|
|
|
import { IconButtonModule } from "../icon-button";
|
|
|
|
import { NavItemComponent } from "./nav-item.component";
|
|
import { NavigationModule } from "./navigation.module";
|
|
|
|
export default {
|
|
title: "Component Library/Nav/Nav Item",
|
|
component: NavItemComponent,
|
|
decorators: [
|
|
moduleMetadata({
|
|
declarations: [],
|
|
imports: [RouterTestingModule, IconButtonModule, NavigationModule],
|
|
}),
|
|
],
|
|
parameters: {
|
|
design: {
|
|
type: "figma",
|
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4687%3A86642",
|
|
},
|
|
},
|
|
} as Meta;
|
|
|
|
type Story = StoryObj<NavItemComponent>;
|
|
|
|
export const Default: Story = {
|
|
render: (args) => ({
|
|
props: args,
|
|
template: `
|
|
<bit-nav-item text="${args.text}" [route]="['']" icon="${args.icon}"></bit-nav-item>
|
|
`,
|
|
}),
|
|
args: {
|
|
text: "Hello World",
|
|
icon: "bwi-filter",
|
|
},
|
|
};
|
|
|
|
export const WithoutIcon: Story = {
|
|
...Default,
|
|
args: {
|
|
text: "Hello World",
|
|
icon: "",
|
|
},
|
|
};
|
|
|
|
export const WithoutRoute: Story = {
|
|
render: (args: NavItemComponent) => ({
|
|
props: args,
|
|
template: `
|
|
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
|
`,
|
|
}),
|
|
};
|
|
|
|
export const WithChildButtons: Story = {
|
|
render: (args: NavItemComponent) => ({
|
|
props: args,
|
|
template: `
|
|
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
|
|
<button
|
|
slot="start"
|
|
class="tw-ml-auto"
|
|
[bitIconButton]="'bwi-clone'"
|
|
[buttonType]="'light'"
|
|
size="small"
|
|
aria-label="option 1"
|
|
></button>
|
|
<button
|
|
slot="end"
|
|
class="tw-ml-auto"
|
|
[bitIconButton]="'bwi-pencil-square'"
|
|
[buttonType]="'light'"
|
|
size="small"
|
|
aria-label="option 2"
|
|
></button>
|
|
<button
|
|
slot="end"
|
|
class="tw-ml-auto"
|
|
[bitIconButton]="'bwi-check'"
|
|
[buttonType]="'light'"
|
|
size="small"
|
|
aria-label="option 3"
|
|
></button>
|
|
</bit-nav-item>
|
|
`,
|
|
}),
|
|
};
|
|
|
|
export const MultipleItemsWithDivider: Story = {
|
|
render: (args: NavItemComponent) => ({
|
|
props: args,
|
|
template: `
|
|
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
|
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
|
<bit-nav-divider></bit-nav-divider>
|
|
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
|
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
|
|
`,
|
|
}),
|
|
};
|
|
|
|
export const ForceActiveStyles: Story = {
|
|
render: (args: NavItemComponent) => ({
|
|
props: args,
|
|
template: `
|
|
<bit-nav-item text="First Nav" icon="bwi-collection"></bit-nav-item>
|
|
<bit-nav-item text="Active Nav" icon="bwi-collection" [forceActiveStyles]="true"></bit-nav-item>
|
|
<bit-nav-item text="Third Nav" icon="bwi-collection"></bit-nav-item>
|
|
`,
|
|
}),
|
|
};
|