2022-07-18 16:17:31 +02:00
|
|
|
import { CommonModule } from "@angular/common";
|
|
|
|
import { Component } from "@angular/core";
|
|
|
|
import { RouterModule } from "@angular/router";
|
|
|
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
|
|
|
|
2022-11-17 17:10:01 +01:00
|
|
|
import { ButtonModule } from "../button";
|
|
|
|
import { FormFieldModule } from "../form-field";
|
|
|
|
|
2022-09-26 23:41:51 +02:00
|
|
|
import { TabGroupComponent } from "./tab-group/tab-group.component";
|
|
|
|
import { TabsModule } from "./tabs.module";
|
2022-07-18 16:17:31 +02:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "bit-tab-active-dummy",
|
|
|
|
template: "Router - Active selected",
|
|
|
|
})
|
|
|
|
class ActiveDummyComponent {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "bit-tab-item-2-dummy",
|
|
|
|
template: "Router - Item 2 selected",
|
|
|
|
})
|
|
|
|
class ItemTwoDummyComponent {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "bit-tab-item-3-dummy",
|
|
|
|
template: "Router - Item 3 selected",
|
|
|
|
})
|
|
|
|
class ItemThreeDummyComponent {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "bit-tab-disabled-dummy",
|
|
|
|
template: "Router - Disabled selected",
|
|
|
|
})
|
|
|
|
class DisabledDummyComponent {}
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: "Component Library/Tabs",
|
|
|
|
component: TabGroupComponent,
|
|
|
|
decorators: [
|
|
|
|
moduleMetadata({
|
|
|
|
declarations: [
|
|
|
|
ActiveDummyComponent,
|
|
|
|
ItemTwoDummyComponent,
|
|
|
|
ItemThreeDummyComponent,
|
|
|
|
DisabledDummyComponent,
|
|
|
|
],
|
|
|
|
imports: [
|
|
|
|
CommonModule,
|
2022-09-26 23:41:51 +02:00
|
|
|
TabsModule,
|
2022-11-17 17:10:01 +01:00
|
|
|
ButtonModule,
|
|
|
|
FormFieldModule,
|
2022-07-18 16:17:31 +02:00
|
|
|
RouterModule.forRoot(
|
|
|
|
[
|
|
|
|
{ path: "", redirectTo: "active", pathMatch: "full" },
|
|
|
|
{ path: "active", component: ActiveDummyComponent },
|
|
|
|
{ path: "item-2", component: ItemTwoDummyComponent },
|
|
|
|
{ path: "item-3", component: ItemThreeDummyComponent },
|
|
|
|
{ path: "disabled", component: DisabledDummyComponent },
|
|
|
|
],
|
|
|
|
{ useHash: true }
|
|
|
|
),
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: "figma",
|
|
|
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17922",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as Meta;
|
|
|
|
|
2022-09-26 23:41:51 +02:00
|
|
|
const ContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
|
2022-07-18 16:17:31 +02:00
|
|
|
props: args,
|
|
|
|
template: `
|
2022-09-26 23:41:51 +02:00
|
|
|
<bit-tab-group label="Main Content Tabs" class="tw-text-main">
|
|
|
|
<bit-tab label="First Tab">First Tab Content</bit-tab>
|
|
|
|
<bit-tab label="Second Tab">Second Tab Content</bit-tab>
|
|
|
|
<bit-tab>
|
|
|
|
<ng-template bitTabLabel>
|
|
|
|
<i class="bwi bwi-search tw-pr-1"></i> Template Label
|
|
|
|
</ng-template>
|
|
|
|
Template Label Content
|
|
|
|
</bit-tab>
|
|
|
|
<bit-tab [disabled]="true" label="Disabled">
|
|
|
|
Disabled Content
|
|
|
|
</bit-tab>
|
2022-07-18 16:17:31 +02:00
|
|
|
</bit-tab-group>
|
2022-09-26 23:41:51 +02:00
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const ContentTabs = ContentTabGroupTemplate.bind({});
|
|
|
|
|
|
|
|
const NavTabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
|
|
|
<bit-tab-nav-bar label="Main">
|
|
|
|
<bit-tab-link [route]="['active']">Active</bit-tab-link>
|
|
|
|
<bit-tab-link [route]="['item-2']">Item 2</bit-tab-link>
|
|
|
|
<bit-tab-link [route]="['item-3']">Item 3</bit-tab-link>
|
|
|
|
<bit-tab-link [route]="['disable']" [disabled]="true">Disabled</bit-tab-link>
|
|
|
|
</bit-tab-nav-bar>
|
|
|
|
<div class="tw-bg-transparent tw-text-semibold tw-text-center tw-text-main tw-py-10">
|
2022-07-18 16:17:31 +02:00
|
|
|
<router-outlet></router-outlet>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
2022-09-26 23:41:51 +02:00
|
|
|
export const NavigationTabs = NavTabGroupTemplate.bind({});
|
|
|
|
|
|
|
|
const PreserveContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
|
|
|
<bit-tab-group label="Preserve Content Tabs" [preserveContent]="true" class="tw-text-main">
|
|
|
|
<bit-tab label="Text Tab">
|
|
|
|
<p>
|
|
|
|
Play the video in the other tab and switch back to hear the video is still playing.
|
|
|
|
</p>
|
|
|
|
</bit-tab>
|
|
|
|
<bit-tab label="Video Tab">
|
|
|
|
<iframe
|
|
|
|
width="560"
|
|
|
|
height="315"
|
|
|
|
src="https://www.youtube.com/embed/H0-yWbe5XG4"
|
|
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
|
|
allowfullscreen></iframe>
|
|
|
|
</bit-tab>
|
|
|
|
</bit-tab-group>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const PreserveContentTabs = PreserveContentTabGroupTemplate.bind({});
|
2022-11-17 17:10:01 +01:00
|
|
|
|
|
|
|
const KeyboardNavTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
|
|
|
|
props: args,
|
|
|
|
template: `
|
|
|
|
<bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
|
|
|
|
<bit-tab label="Form Tab">
|
|
|
|
<p>
|
|
|
|
You can navigate through all tab labels, form inputs, and the button that is outside the tab group via
|
|
|
|
the keyboard.
|
|
|
|
</p>
|
|
|
|
<bit-form-field>
|
|
|
|
<bit-label>First Input</bit-label>
|
|
|
|
<input type="text" bitInput />
|
|
|
|
</bit-form-field>
|
|
|
|
<bit-form-field>
|
|
|
|
<bit-label>Second Input</bit-label>
|
|
|
|
<input type="text" bitInput />
|
|
|
|
</bit-form-field>
|
|
|
|
</bit-tab>
|
|
|
|
|
|
|
|
<bit-tab label="No Focusable Content Tab" [contentTabIndex]="0">
|
|
|
|
<p>This tab has no focusable content, but the panel should still be focusable</p>
|
|
|
|
</bit-tab>
|
|
|
|
</bit-tab-group>
|
|
|
|
<button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const KeyboardNavigation = KeyboardNavTabGroupTemplate.bind({});
|