diff --git a/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx b/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx index e33ff2b22e5..90c39c838b6 100644 --- a/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx +++ b/frontend/src/components/VAudioTrack/meta/VAudioTrack.stories.mdx @@ -7,6 +7,7 @@ import { } from "@storybook/addon-docs" import { computed } from "vue" import { audioLayouts, audioSizes } from "~/constants/audio" +import { useProviderStore } from "~/stores/provider" import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue" @@ -20,17 +21,14 @@ import wavWaveform from "./wav-waveform.json" component={VAudioTrack} argTypes={{ format: { - defaultValue: "mp3", options: ["mp3", "ogg", "flac", "wav"], control: "select", }, layout: { - defaultValue: "full", options: audioLayouts, control: "select", }, size: { - defaultValue: "m", options: audioSizes, control: "select", }, @@ -38,6 +36,11 @@ import wavWaveform from "./wav-waveform.json" control: false, }, }} + args={{ + format: "mp3", + layout: "full", + size: "m", + }} /> export const commonAttrs = () => ({ @@ -47,6 +50,8 @@ export const commonAttrs = () => ({ category: "music", thumbnail: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Croce-Mozart-Detail.jpg/370px-Croce-Mozart-Detail.jpg", + frontendMediaType: "audio", + source: "wikimedia_audio", }) export const formatExamples = { @@ -80,10 +85,19 @@ export const formatExamples = { }, } +export const providerStorePatch = { + providers: { + audio: [{ source_name: "wikimedia_audio", display_name: "Wikimedia" }], + }, + sourceNames: { audio: ["Wikimedia"] }, +} + export const Template = (args) => ({ template: ``, components: { VAudioTrack }, setup() { + const providerStore = useProviderStore() + providerStore.$patch(providerStorePatch) const audioObj = computed(() => ({ ...commonAttrs(), ...formatExamples[args.format], @@ -109,37 +123,8 @@ The component can be rendered in a multiple different layouts, by specifying a ### Full (default) -#### Size M (default) - - - {Template.bind({})} - - - -#### Size S (mobile) - - - - {Template.bind({})} - + {Template.bind({})} ### Row @@ -191,7 +176,7 @@ The component can be rendered in a multiple different layouts, by specifying a ### Box -#### Sizes L and M (default) +#### Size L There is no M size in box layout. @@ -205,15 +190,6 @@ There is no M size in box layout. > {Template.bind({})} - - {Template.bind({})} - #### Size S (mobile) @@ -277,6 +253,8 @@ export const Multiple = () => ({ `, components: { VAudioTrack }, setup() { + const providerStore = useProviderStore() + providerStore.$patch(providerStorePatch) const audioObj = (audio) => ({ ...commonAttrs(), ...audio }) return { formatExamples, audioObj } }, diff --git a/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx b/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx index 558bdde9a8f..31569e5daf6 100644 --- a/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx +++ b/frontend/src/components/VAudioTrack/meta/VWaveform.stories.mdx @@ -16,6 +16,9 @@ import VWaveform from "~/components/VAudioTrack/VWaveform.vue" action: "seeked", }, }} + args={{ + audioId: "audioId", + }} /> export const Template = (args) => ({ @@ -28,9 +31,9 @@ export const Template = (args) => ({ # Waveform - + - + ## Sampling @@ -105,7 +108,7 @@ The waveform always takes the height and width of its container. - **Height:** the bars will elongate proportionally to scale vertically - **Width:** the number of samples will be adjusted to scale horizontally -Thus the `barWidth` and `barGap` will be maintained even in the case of +Thus, the `barWidth` and `barGap` will be maintained even in the case of horizontal scaling. ## Usable area @@ -160,7 +163,6 @@ will animate up to their actual height when the prop is unset. name="Message" args={{ message: "Hello, World!", - audioId: 123, }} > {Template.bind({})} diff --git a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx index d4abadea33a..bc9452f755a 100644 --- a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx +++ b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.mdx @@ -16,6 +16,10 @@ import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue" action: "close", }, }} + args={{ + id: "banner", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum.", + }} /> export const Template = (args) => ({ @@ -36,7 +40,6 @@ export const Template = (args) => ({ ({ diff --git a/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx b/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx index 6fa0fc08977..a4eb9c51242 100644 --- a/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx +++ b/frontend/src/components/VContentLink/meta/VContentLink.stories.mdx @@ -8,8 +8,6 @@ import { import VContentLink from "~/components/VContentLink/VContentLink.vue" - - export const contentLinkArgTypes = { mediaType: { options: ["audio", "image"], control: { type: "radio" } }, searchTerm: { control: { type: "string" } }, @@ -18,6 +16,13 @@ export const contentLinkArgTypes = { layout: { options: ["stacked", "horizontal"], control: { type: "radio" } }, } + + export const VContentLinkStory = (args) => ({ template: ``, components: { VContentLink }, @@ -77,6 +82,7 @@ export const TwoVContentLinkStory = (args) => ({ mediaType: "image", resultsCount: 5708, isSelected: false, + searchTerm: "cat", }} argTypes={contentLinkArgTypes} > diff --git a/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx b/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx index 55f0643d105..77a38bf0a8c 100644 --- a/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx +++ b/frontend/src/components/VExternalSearch/meta/VExternalSourceList.stories.mdx @@ -5,15 +5,28 @@ import { Meta, Story, } from "@storybook/addon-docs" +import { useFeatureFlagStore } from "~/stores/feature-flag" +import { useSearchStore } from "~/stores/search" import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue" - + export const Template = (args) => ({ template: ``, components: { VExternalSourceList }, setup() { + const featureFlagStore = useFeatureFlagStore() + featureFlagStore.toggleFeature("additional_search_types", "on") + const searchStore = useSearchStore() + searchStore.setSearchType(args.searchType) return { args } }, }) @@ -27,55 +40,23 @@ export const Template = (args) => ({ ## Images - - {Template.bind({})} - + {Template.bind({})} ## Audio - - {Template.bind({})} - + {Template.bind({})} ## Video - - {Template.bind({})} - + {Template.bind({})} ## 3D models - - {Template.bind({})} - + {Template.bind({})} diff --git a/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx b/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx index 7f630fc2f5d..67aa92da402 100644 --- a/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx +++ b/frontend/src/components/VFilters/meta/VLicenseExplanation.stories.mdx @@ -15,11 +15,13 @@ import { ALL_LICENSES } from "~/constants/license" components={VLicenseExplanation} argTypes={{ license: { - defaultValue: ALL_LICENSES[0], options: ALL_LICENSES, control: "select", }, }} + args={{ + license: ALL_LICENSES[0], + }} /> export const Template = (args) => ({ diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue index eb5fed7f0f8..642ead53a9d 100644 --- a/frontend/src/components/VHeader/VHeaderDesktop.vue +++ b/frontend/src/components/VHeader/VHeaderDesktop.vue @@ -8,7 +8,6 @@ ref="searchBarRef" v-model.trim="searchTerm" class="me-4 flex-grow" - size="medium" @submit="handleSearch" > , - required: true, + default: "medium", }, placeholder: { type: String, diff --git a/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx b/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx index 08661a4bfb3..6f4ae2f5d60 100644 --- a/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx +++ b/frontend/src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx @@ -61,7 +61,7 @@ representing the search query. export const vModelTemplate = (args) => ({ template: `
- + {{ text.length }} chars @@ -93,7 +93,6 @@ easy `` attributes like placeholders or HTML validations. name="With placeholder" args={{ placeholder: "Search query", - size: "large", }} > {Template.bind({})} diff --git a/frontend/src/components/VHeader/meta/VContentSettingsModal.stories.mdx b/frontend/src/components/VHeader/meta/VContentSettingsModal.stories.mdx index b9347df0b49..8ef00db1367 100644 --- a/frontend/src/components/VHeader/meta/VContentSettingsModal.stories.mdx +++ b/frontend/src/components/VHeader/meta/VContentSettingsModal.stories.mdx @@ -6,7 +6,10 @@ import { Story, } from "@storybook/addon-docs" +import { useSearchStore } from "~/stores/search" + import VContentSettingsModalContent from "~/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue" +import VModalTarget from "~/components/VModal/VModalTarget.vue" export const Template = (args) => ({ - template: ``, - components: { VContentSettingsModalContent }, + template: `
`, + components: { VContentSettingsModalContent, VModalTarget }, setup() { + const searchStore = useSearchStore() + searchStore.setSearchType("image") + searchStore.setSearchTerm("cat") + searchStore.toggleFilter({ filterType: "licenses", codeIdx: 0 }) return { args } }, }) diff --git a/frontend/src/components/VHeader/meta/VHeaderDesktop.stories.mdx b/frontend/src/components/VHeader/meta/VHeaderDesktop.stories.mdx index f21b0b3fa20..3589c5c8ccf 100644 --- a/frontend/src/components/VHeader/meta/VHeaderDesktop.stories.mdx +++ b/frontend/src/components/VHeader/meta/VHeaderDesktop.stories.mdx @@ -5,16 +5,18 @@ import { Meta, Story, } from "@storybook/addon-docs" +import { provide, ref } from "vue" +import { IsSidebarVisibleKey } from "~/types/provides" import VHeaderDesktop from "~/components/VHeader/VHeaderDesktop.vue" -export const Template = (args) => ({ - template: ` - `, +export const Template = () => ({ + template: ``, components: { VHeaderDesktop }, setup() { - return { args } + provide(IsSidebarVisibleKey, ref(false)) + return {} }, }) diff --git a/frontend/src/components/VHeader/meta/VHomeLink.stories.mdx b/frontend/src/components/VHeader/meta/VHomeLink.stories.mdx index bcbdc7fae36..0d437b76d3d 100644 --- a/frontend/src/components/VHeader/meta/VHomeLink.stories.mdx +++ b/frontend/src/components/VHeader/meta/VHomeLink.stories.mdx @@ -15,18 +15,18 @@ import VHomeLink from "~/components/VHeader/VHomeLink.vue" type: "string", control: { type: "select", - options: ["dark", "light"], }, + options: ["dark", "light"], }, }} /> export const Template = (args) => ({ - template: `
`, + template: `
`, components: { VHomeLink }, setup() { - args.bg = args.variant === "dark" ? "bg-white" : "bg-black" - return { args } + const bg = args.variant === "dark" ? "bg-white" : "bg-black" + return { args, bg } }, }) diff --git a/frontend/src/components/VHomeGallery/meta/VHomeGallery.stories.mdx b/frontend/src/components/VHomeGallery/meta/VHomeGallery.stories.mdx index ddf06d64e7c..1d205dddbd7 100644 --- a/frontend/src/components/VHomeGallery/meta/VHomeGallery.stories.mdx +++ b/frontend/src/components/VHomeGallery/meta/VHomeGallery.stories.mdx @@ -6,18 +6,20 @@ import { Story, } from "@storybook/addon-docs" -import VHomeGallery from "@/components/VHomeGallery/VHomeGallery.vue" +import VHomeGallery from "~/components/VHomeGallery/VHomeGallery.vue" export const Template = (args) => ({ diff --git a/frontend/src/components/VIcon/meta/VIcon.stories.mdx b/frontend/src/components/VIcon/meta/VIcon.stories.mdx index 8b889bb2933..c4988269186 100644 --- a/frontend/src/components/VIcon/meta/VIcon.stories.mdx +++ b/frontend/src/components/VIcon/meta/VIcon.stories.mdx @@ -49,9 +49,11 @@ To display the icon, pass the name of the icon as a prop. name: { options: iconNames, control: { type: "select" }, - defaultValue: "replay", }, }} + args={{ + name: "replay", + }} > {Template.bind({})} diff --git a/frontend/src/components/VInputField/VInputField.vue b/frontend/src/components/VInputField/VInputField.vue index 8f92db5b70d..de9519491d6 100644 --- a/frontend/src/components/VInputField/VInputField.vue +++ b/frontend/src/components/VInputField/VInputField.vue @@ -59,11 +59,12 @@ export default defineComponent({ }, /** * the textual content of the label associated with this input field; This - * label is SR-only. + * label is SR-only. If you want to display a visible label, add + * `for="fieldId"` to the label element and set the `fieldId` prop to the + * same value as the `for` attribute. */ labelText: { type: String, - required: true, }, /** * the ID to assign to the field; This can be used to attach custom labels diff --git a/frontend/src/components/VInputField/meta/VInputField.stories.mdx b/frontend/src/components/VInputField/meta/VInputField.stories.mdx index 3af57987a11..536ea21f52f 100644 --- a/frontend/src/components/VInputField/meta/VInputField.stories.mdx +++ b/frontend/src/components/VInputField/meta/VInputField.stories.mdx @@ -16,11 +16,16 @@ import VInputField from "~/components/VInputField/VInputField.vue" action: "update:modelValue", }, }} + args={{ + fieldId: "input", + labelText: "Test label", + size: "medium", + }} /> export const Template = (args) => ({ template: ` - + Extra info `, @@ -55,7 +60,7 @@ The recommended way to use it is with `v-model` mapping to a `String`. export const vModelTemplate = () => ({ template: `
- + {{ text.length }} {{ text }} @@ -104,7 +109,7 @@ via the `labelText` prop. To provide a custom label, skip the `labelText` prop (to remove the SR-only -label) and set the `id` attribute on the component (which is passed to the +label) and set the `field-id` attribute on the component (which is passed to the `` element). Now use the ID as the `for` attribute of your custom `
`, components: { VMetadata, VLanguageSelect }, setup() { + const providerStore = useProviderStore() + providerStore.$patch({ + providers: { + audio: [{ source_name: testAudio.source }], + image: [{ source_name: testImage.source }], + }, + sourceNames: { audio: [testAudio.source], image: [testImage.source] }, + }) const i18n = useI18n() - args.data = [ + const data = [ { metadata: getMediaMetadata(testImage, i18n, { width: testImage.width, @@ -49,7 +59,7 @@ export const Template = (args) => ({ media: testAudio, }, ] - return { args } + return { args, data } }, }) diff --git a/frontend/src/components/VRadio/meta/VRadio.stories.mdx b/frontend/src/components/VRadio/meta/VRadio.stories.mdx index c41faa40be3..4bceb0a4336 100644 --- a/frontend/src/components/VRadio/meta/VRadio.stories.mdx +++ b/frontend/src/components/VRadio/meta/VRadio.stories.mdx @@ -77,8 +77,8 @@ export const vModelTemplate = (args, { argTypes }) => ({ template: `
- A - B + A + B
{{ picked ?? 'None' }}
diff --git a/frontend/src/components/VSafetyWall/meta/VSafetyWall.stories.mdx b/frontend/src/components/VSafetyWall/meta/VSafetyWall.stories.mdx index e35e35ef3ec..75999d1c5ac 100644 --- a/frontend/src/components/VSafetyWall/meta/VSafetyWall.stories.mdx +++ b/frontend/src/components/VSafetyWall/meta/VSafetyWall.stories.mdx @@ -38,8 +38,8 @@ export const Template = (args) => ({ argTypes={{ sensitivities: { control: { type: "check" }, + options: SENSITIVITIES, }, - options: SENSITIVITIES, }} args={{ sensitivities: SENSITIVITIES, diff --git a/frontend/src/components/VSelectField/meta/VSelectField.stories.mdx b/frontend/src/components/VSelectField/meta/VSelectField.stories.mdx index cf0c97cee8f..61e77774c72 100644 --- a/frontend/src/components/VSelectField/meta/VSelectField.stories.mdx +++ b/frontend/src/components/VSelectField/meta/VSelectField.stories.mdx @@ -10,6 +10,17 @@ import { ref } from "vue" import VIcon from "~/components/VIcon/VIcon.vue" import VSelectField from "~/components/VSelectField/VSelectField.vue" +export const baseArgs = { + fieldId: "fruit", + blankText: "Fruit", + labelText: "Fruit", + choices: [ + { key: "a", text: "Apple" }, + { key: "b", text: "Banana" }, + { key: "c", text: "Cantaloupe" }, + ], +} + export const Template = (args) => ({ @@ -29,17 +43,6 @@ export const Template = (args) => ({ }, }) -export const baseArgs = { - fieldId: "fruit", - blankText: "Fruit", - labelText: "Fruit", - choices: [ - { key: "a", text: "Apple" }, - { key: "b", text: "Banana" }, - { key: "c", text: "Cantaloupe" }, - ], -} - # VSelectField @@ -47,9 +50,7 @@ export const baseArgs = { - - {Template.bind({})} - + {Template.bind({})} The recommended way to use it is with `v-model` mapping to a `String`. This @@ -70,9 +71,7 @@ export const vModelTemplate = (args) => ({ }) - - {vModelTemplate.bind({})} - + {vModelTemplate.bind({})} ## With icon @@ -95,9 +94,7 @@ export const SlotTemplate = (args) => ({ }) - - {SlotTemplate.bind({})} - + {SlotTemplate.bind({})} ## With constraints @@ -109,9 +106,9 @@ once a long option is selected, it will get clipped. export const ConstraintTemplate = (args) => ({ template: ` `, - components: { VSelectField, VIcon }, + components: { VSelectField }, setup() { - return { args, radioIcon } + return { args } }, })