gradio/js/gallery/Gallery.stories.svelte

<script context="module">
	import { Template, Story } from "@storybook/addon-svelte-csf";
	import Gallery from "./Index.svelte";
	import { allModes } from "../storybook/modes";
	import { within } from "@testing-library/dom";
	import { userEvent } from "@storybook/test";

	export const meta = {
		title: "Components/Gallery",
		component: Gallery,
		argTypes: {
			label: {
				control: "text",
				description: "The gallery label",
				name: "label",
				value: "Gradio Button"
			},
			show_label: {
				options: [true, false],
				description: "Whether to show the label",
				control: { type: "boolean" },
				defaultValue: true
			},
			columns: {
				options: [1, 2, 3, 4],
				description: "The number of columns to show in grid",
				control: { type: "select" },
				defaultValue: 2
			},
			rows: {
				options: [1, 2, 3, 4],
				description: "The number of rows to show in grid",
				control: { type: "select" },
				defaultValue: 2
			},
			height: {
				options: ["auto", 500, 600],
				description: "The height of the grid",
				control: { type: "select" },
				defaultValue: "auto"
			},
			preview: {
				options: [true, false],
				description: "Whether to start the gallery in preview mode",
				control: { type: "boolean" },
				defaultValue: true
			},
			allow_preview: {
				options: [true, false],
				description: "Whether to allow a preview mode in the gallery",
				control: { type: "boolean" },
				defaultValue: true
			},
			object_fit: {
				options: ["contain", "cover", "fill", "none", "scale-down"],
				description: "How to display each indivial image in the grid",
				control: { type: "select" },
				defaultValue: "contain"
			},
			show_share_button: {
				options: [true, false],
				description: "Whether to show the share button in the gallery",
				control: { type: "boolean" },
				defaultValue: false
			}
		},
		parameters: {
			chromatic: {
				modes: {
					desktop: allModes["desktop"],
					mobile: allModes["mobile"]
				}
			}
		}
	};
</script>

<Template let:args>
	<Gallery
		value={[
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
					orig_name: "cheetah_running.avif"
				},
				caption: "A fast cheetah"
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
					orig_name: "cheetah-002.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
					orig_name: "cheetah-003.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
					orig_name: "cheetah3.webp"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
					orig_name: "ghepardo-primo-piano.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
					orig_name: "main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
					orig_name: "TheCheethcat.jpg"
				}
			}
		]}
		{...args}
	/>
</Template>

<Story
	name="Gallery with label"
	args={{ label: "My Cheetah Gallery", show_label: true }}
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);

		const image = canvas.getByLabelText("Thumbnail 1 of 7");
		await userEvent.click(image);
		const expand_btn = canvas.getByRole("button", {
			name: "View in full screen"
		});
		await userEvent.click(expand_btn);
	}}
/>
<Story
	name="Gallery without label"
	args={{ label: "My Cheetah Gallery", show_label: false }}
/>
<Story
	name="Gallery with rows=3 and columns=3"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		rows: 3,
		columns: 3
	}}
/>
<Story
	name="Gallery with columns=4"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		columns: 4
	}}
/>
<Story
	name="Gallery with height=600"
	args={{
		label: "My Cheetah Gallery",
		height: 600
	}}
/>
<Story
	name="Gallery with allow_preview=false"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		allow_preview: false
	}}
/>
<Story
	name="Gallery with preview"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		preview: true
	}}
/>
<Story
	name="Gallery with object_fit=scale-down"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "scale-down"
	}}
/>
<Story
	name="Gallery with object_fit=contain"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "contain"
	}}
/>
<Story
	name="Gallery with object_fit=cover"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "cover"
	}}
/>
<Story
	name="Gallery with object_fit=none"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "none"
	}}
/>
<Story
	name="Gallery with object_fit=fill"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "fill"
	}}
/>
<Story
	name="Gallery with share button"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		show_share_button: true
	}}
/>

<Story
	name="Gallery with overflow of images"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		rows: 2,
		columns: 2,
		height: 400
	}}
/>

<Story
	name="Gallery with download button"
	args={{
		label: "My Cheetah Gallery",
		rows: 2,
		height: 400,
		show_download_button: true
	}}
/>