mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-09 05:57:40 +02:00
55d9ee22ab
* [EC-667] feat: scaffold new select component * [EC-667] feat: sort of working implementation * [EC-667] feat: support for using in forms * [EC-667] feat: add bit-select example to full form * [EC-667] fix: broken aria label connetion * [EC-667] fix: web not building * [EC-667] fix: dropdown getting trapped in dialog * [EC-667] fix: select not emitting correct value * [EC-667] feat: add collection icon to options * [EC-667] feat: add default select placeholder translation * [EC-667] fix: undefined handling * [EC-667] fix: value vs options race condition * [EC-667] feat: remove x and add "no collection" option * [EC-667] chore: add country list disclaimer * chore: clean up comments * [EC-667] chore: cleanup commented import * [EC-667] fix: input text color not applying to single-select
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
|
|
import { MultiSelectComponent } from "../multi-select/multi-select.component";
|
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
|
|
|
import { SelectComponent } from "./select.component";
|
|
import { SelectModule } from "./select.module";
|
|
|
|
export default {
|
|
title: "Component Library/Form/Select",
|
|
component: SelectComponent,
|
|
decorators: [
|
|
moduleMetadata({
|
|
imports: [SelectModule],
|
|
providers: [
|
|
{
|
|
provide: I18nService,
|
|
useFactory: () => {
|
|
return new I18nMockService({
|
|
selectPlaceholder: "-- Select --",
|
|
});
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
],
|
|
args: {
|
|
disabled: false,
|
|
},
|
|
parameters: {
|
|
design: {
|
|
type: "figma",
|
|
url: "https://www.figma.com/file/3tWtMSYoLB0ZLEimLNzYsm/End-user-%26-admin-Vault-Refresh?t=7QEmGA69YTOF8sXU-0",
|
|
},
|
|
},
|
|
} as Meta;
|
|
|
|
const DefaultTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
|
|
props: {
|
|
...args,
|
|
},
|
|
template: `<bit-select [disabled]="disabled">
|
|
<bit-option value="value1" label="Value 1" icon="bwi-collection"></bit-option>
|
|
<bit-option value="value2" label="Value 2" icon="bwi-collection"></bit-option>
|
|
<bit-option value="value3" label="Value 3" icon="bwi-collection"></bit-option>
|
|
<bit-option value="value4" label="Value 4" icon="bwi-collection" disabled></bit-option>
|
|
</bit-select>`,
|
|
});
|
|
|
|
export const Default = DefaultTemplate.bind({});
|
|
Default.args = {};
|
|
|
|
export const Disabled = DefaultTemplate.bind({});
|
|
Disabled.args = {
|
|
disabled: true,
|
|
};
|