From 8e4a855ae3ab62917b5656e706840137c1b6889e Mon Sep 17 00:00:00 2001 From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com> Date: Sun, 11 Aug 2024 11:28:48 +0900 Subject: [PATCH 1/2] feat: add gallery component --- apps/web/app/page.tsx | 11 ++ apps/web/next.config.mjs | 10 ++ .../components/gallery/_gallery.module.scss | 71 +++++++++++ .../components/gallery/_gallery.stories.tsx | 112 ++++++++++++++++++ .../src/components/gallery/_gallery.tsx | 59 +++++++++ .../src/components/gallery/index.ts | 2 + .../design-system/src/components/index.ts | 1 + 7 files changed, 266 insertions(+) create mode 100644 packages/design-system/src/components/gallery/_gallery.module.scss create mode 100644 packages/design-system/src/components/gallery/_gallery.stories.tsx create mode 100644 packages/design-system/src/components/gallery/_gallery.tsx create mode 100644 packages/design-system/src/components/gallery/index.ts diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index d616b7de..3bcb6a70 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,6 +1,7 @@ "use client"; import { Drawer, + Gallery, Headers, MyButton, Text, @@ -45,6 +46,16 @@ export default function Home() {
:)
토글 + + ); } diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index ad99ca3c..000e6581 100644 --- a/apps/web/next.config.mjs +++ b/apps/web/next.config.mjs @@ -14,6 +14,16 @@ const nextConfig = { sassOptions: { includePaths: [path.join(__dirname, "styles")], }, + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "media.triple.guide", + port: "", + pathname: "/triple-cms/c_limit,f_auto,h_1024,w_1024/**", + }, + ], + }, }; export default nextConfig; diff --git a/packages/design-system/src/components/gallery/_gallery.module.scss b/packages/design-system/src/components/gallery/_gallery.module.scss new file mode 100644 index 00000000..d0f37293 --- /dev/null +++ b/packages/design-system/src/components/gallery/_gallery.module.scss @@ -0,0 +1,71 @@ +@use "../../functions/" as *; +@use "../../mixins/" as *; +@use "sass:map"; + +$overlay-color: color(success, 50); + +.gallery { + display: grid; + grid-template-rows: auto; + gap: space("sm"); + max-width: 30rem; + + position: relative; + + img { + position: relative !important; + } + + @for $i from 1 through 4 { + &.gallery-img-length-#{$i} { + grid-template-columns: repeat(#{$i}, 1fr); + } + } + + &.gallery-img-length-5 { + grid-template-columns: repeat(4, 1fr); + + .gallery-item { + &:nth-child(1) { + grid-column: span 2; + grid-row: span 2; + } + + &:nth-child(n + 2):nth-child(-n + 5) { + grid-column: span 1; + grid-row: span 1; + } + } + + .overlay { + filter: brightness(40%); + position: absolute; + } + } +} + +.image-container { + position: relative; + display: inline-block; + cursor: pointer; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.display-leftover-img-count { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: $overlay-color; + z-index: z("default"); + font-size: 24px; + font-weight: bold; +} diff --git a/packages/design-system/src/components/gallery/_gallery.stories.tsx b/packages/design-system/src/components/gallery/_gallery.stories.tsx new file mode 100644 index 00000000..2ef3aea9 --- /dev/null +++ b/packages/design-system/src/components/gallery/_gallery.stories.tsx @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useEffect } from "react"; +import { useAppTheme } from "../../hooks"; +import Gallery from "./_gallery"; + +const meta: Meta = { + title: "tripie-ui/Gallery", + component: Gallery, + tags: ["autodocs"], + decorators: [ + (story, context) => { + const { mode, setMode } = useAppTheme(); + const selectedTheme = context.globals.theme || mode; + + useEffect(() => { + setMode(selectedTheme); + }, [selectedTheme]); + + return
{story()}
; + }, + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + name: "Default", + args: { + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount2: Story = { + name: "ImageCount2", + args: { + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount3: Story = { + name: "ImageCount3", + args: { + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount4: Story = { + name: "ImageCount4", + args: { + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const MaxImage5: Story = { + name: "MaxImage5", + args: { + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const OverMaxImageWithCount: Story = { + name: "OverMaxImageWithCount - displayLeftOverImgCount", + args: { + displayLeftOverImgCount: true, + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const OverMaxImageWithoutCount: Story = { + name: "OverMaxImageWithout Count", + args: { + displayLeftOverImgCount: false, + imgUrls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; diff --git a/packages/design-system/src/components/gallery/_gallery.tsx b/packages/design-system/src/components/gallery/_gallery.tsx new file mode 100644 index 00000000..63dff14d --- /dev/null +++ b/packages/design-system/src/components/gallery/_gallery.tsx @@ -0,0 +1,59 @@ +import classNames from "classnames/bind"; +import Image from "next/image"; +import Style from "./_gallery.module.scss"; + +const MAX_IMAGE_SIZE = 4; + +export type GalleryProps = { + imgUrls: string[]; + displayLeftOverImgCount?: boolean; +} & Omit, "children">; + +const style = classNames.bind(Style); + +const Gallery = ({ + imgUrls, + className, + displayLeftOverImgCount = false, + ...props +}: GalleryProps) => { + const totalImgUrlCount = imgUrls.length; + return ( +
+ {imgUrls.slice(0, 5).map((url, index) => + displayLeftOverImgCount && index === 4 ? ( +
+ + +{totalImgUrlCount - MAX_IMAGE_SIZE} + + {url} +
+ ) : ( + {url} + ) + )} +
+ ); +}; + +export default Gallery; diff --git a/packages/design-system/src/components/gallery/index.ts b/packages/design-system/src/components/gallery/index.ts new file mode 100644 index 00000000..3d637266 --- /dev/null +++ b/packages/design-system/src/components/gallery/index.ts @@ -0,0 +1,2 @@ +export * from "./_gallery"; +export { default } from "./_gallery"; diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts index a07d89ff..748403fb 100644 --- a/packages/design-system/src/components/index.ts +++ b/packages/design-system/src/components/index.ts @@ -1,5 +1,6 @@ export { default as Body } from "./body"; export { default as Drawer } from "./drawer"; +export { default as Gallery } from "./gallery/_gallery"; export { default as MyButton } from "./myButton"; export { default as Headers } from "./typography"; export { default as Text } from "./typography/text"; From 0e451d683b1998c5e67aa9d812556bf8c48ddc1a Mon Sep 17 00:00:00 2001 From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com> Date: Mon, 12 Aug 2024 12:52:37 +0900 Subject: [PATCH 2/2] feat: create gallery component --- apps/web/app/page.tsx | 34 ++-- .../components/gallery/_gallery.module.scss | 152 +++++++++++++----- .../components/gallery/_gallery.stories.tsx | 16 +- .../src/components/gallery/_gallery.tsx | 46 ++++-- .../gallery/_gallery_post.stories.tsx | 112 +++++++++++++ .../design-system/src/components/index.ts | 2 +- 6 files changed, 284 insertions(+), 78 deletions(-) create mode 100644 packages/design-system/src/components/gallery/_gallery_post.stories.tsx diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 3bcb6a70..e2797642 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -46,16 +46,30 @@ export default function Home() {
:)
토글 - - + + + + + + ); } diff --git a/packages/design-system/src/components/gallery/_gallery.module.scss b/packages/design-system/src/components/gallery/_gallery.module.scss index d0f37293..2765de9b 100644 --- a/packages/design-system/src/components/gallery/_gallery.module.scss +++ b/packages/design-system/src/components/gallery/_gallery.module.scss @@ -2,70 +2,138 @@ @use "../../mixins/" as *; @use "sass:map"; -$overlay-color: color(success, 50); +$overlay-color: #fefefe; .gallery { display: grid; - grid-template-rows: auto; gap: space("sm"); - max-width: 30rem; - + min-width: min(50vw, 36rem); position: relative; img { + width: 100%; + height: 100%; position: relative !important; + z-index: z("base") !important; + } + + .overlay { + filter: brightness(40%); + position: absolute; } - @for $i from 1 through 4 { - &.gallery-img-length-#{$i} { - grid-template-columns: repeat(#{$i}, 1fr); + .image-container { + position: relative; + display: inline-block; + cursor: pointer; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + &.post { + grid-column: span 2; + grid-row: span 1; } } - &.gallery-img-length-5 { - grid-template-columns: repeat(4, 1fr); + .display-leftover-img-count { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: $overlay-color; + z-index: z("default"); + font-size: font-size(h3); + font-weight: bold; + } - .gallery-item { - &:nth-child(1) { - grid-column: span 2; - grid-row: span 2; + @mixin gallery-template($i) { + @if ($i==4) { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); + .gallery-item { + &:nth-child(1) { + grid-column: span 3; + grid-row: span 3; + } + &:nth-child(2), + &:nth-child(3), + &:nth-child(4) { + grid-column: span 1; + grid-column: span 1; + } } - - &:nth-child(n + 2):nth-child(-n + 5) { + } @else if($i==3) { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + .gallery-item { + &:nth-child(1) { + grid-column: span 2; + grid-row: span 2; + } + &:nth-child(2), + &:nth-child(3) { + grid-column: span 1; + grid-column: span 1; + } + } + } @else if($i==2) { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(1, 1fr); + .gallery-item { grid-column: span 1; grid-row: span 1; } } - - .overlay { - filter: brightness(40%); - position: absolute; - } } -} -.image-container { - position: relative; - display: inline-block; - cursor: pointer; + @for $i from 1 through 5 { + &.gallery-img-length-#{$i}:not(.post) { + @if $i == 5 { + grid-template-columns: repeat(4, 1fr); + } + @include gallery-template($i); - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + .gallery-item { + @if $i == 5 { + &:nth-child(1) { + grid-column: span 2; + grid-row: span 2; + } + &:nth-child(n + 2):nth-child(-n + 5) { + grid-column: span 1; + grid-row: span 1; + } + } + } + } } -} -.display-leftover-img-count { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: $overlay-color; - z-index: z("default"); - font-size: 24px; - font-weight: bold; + // Post gallery + &.post { + @for $i from 1 through 5 { + &.gallery-img-length-#{$i} { + @if $i == 5 { + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(2, 1fr); + .gallery-item { + &:nth-child(1), + &:nth-child(2) { + grid-column: span 3; + } + &:nth-child(n + 3):nth-child(-n + 5) { + grid-column: span 2; + } + } + } + @include gallery-template($i); + } + } + } } diff --git a/packages/design-system/src/components/gallery/_gallery.stories.tsx b/packages/design-system/src/components/gallery/_gallery.stories.tsx index 2ef3aea9..4542fc5a 100644 --- a/packages/design-system/src/components/gallery/_gallery.stories.tsx +++ b/packages/design-system/src/components/gallery/_gallery.stories.tsx @@ -4,7 +4,7 @@ import { useAppTheme } from "../../hooks"; import Gallery from "./_gallery"; const meta: Meta = { - title: "tripie-ui/Gallery", + title: "tripie-ui/Gallery/Default", component: Gallery, tags: ["autodocs"], decorators: [ @@ -27,7 +27,7 @@ type Story = StoryObj; export const Default: Story = { name: "Default", args: { - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", ], }, @@ -36,7 +36,7 @@ export const Default: Story = { export const ImageCount2: Story = { name: "ImageCount2", args: { - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", ], @@ -46,7 +46,7 @@ export const ImageCount2: Story = { export const ImageCount3: Story = { name: "ImageCount3", args: { - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", @@ -57,7 +57,7 @@ export const ImageCount3: Story = { export const ImageCount4: Story = { name: "ImageCount4", args: { - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", @@ -69,7 +69,7 @@ export const ImageCount4: Story = { export const MaxImage5: Story = { name: "MaxImage5", args: { - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", @@ -83,7 +83,7 @@ export const OverMaxImageWithCount: Story = { name: "OverMaxImageWithCount - displayLeftOverImgCount", args: { displayLeftOverImgCount: true, - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", @@ -99,7 +99,7 @@ export const OverMaxImageWithoutCount: Story = { name: "OverMaxImageWithout Count", args: { displayLeftOverImgCount: false, - imgUrls: [ + urls: [ "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", diff --git a/packages/design-system/src/components/gallery/_gallery.tsx b/packages/design-system/src/components/gallery/_gallery.tsx index 63dff14d..c2289356 100644 --- a/packages/design-system/src/components/gallery/_gallery.tsx +++ b/packages/design-system/src/components/gallery/_gallery.tsx @@ -2,42 +2,48 @@ import classNames from "classnames/bind"; import Image from "next/image"; import Style from "./_gallery.module.scss"; -const MAX_IMAGE_SIZE = 4; +const MAX_IMAGE_COUNT = 5; export type GalleryProps = { - imgUrls: string[]; + urls: string[]; displayLeftOverImgCount?: boolean; + variant?: "default" | "post"; } & Omit, "children">; -const style = classNames.bind(Style); +const cx = classNames.bind(Style); +const DEFAULT_IMG_SIZE_PX = 1024; const Gallery = ({ - imgUrls, + urls, className, displayLeftOverImgCount = false, + variant = "default", ...props }: GalleryProps) => { - const totalImgUrlCount = imgUrls.length; + const totalImgUrlCount = urls.length; + const displayedImages = urls.slice(0, MAX_IMAGE_COUNT); + return (
- {imgUrls.slice(0, 5).map((url, index) => + {displayedImages.map((url, index) => displayLeftOverImgCount && index === 4 ? ( -
- - +{totalImgUrlCount - MAX_IMAGE_SIZE} +
+ + +{totalImgUrlCount - MAX_IMAGE_COUNT} {url}
@@ -45,9 +51,9 @@ const Gallery = ({ {url} ) @@ -56,4 +62,10 @@ const Gallery = ({ ); }; +const PostGallery = (props: Omit) => ( + +); + +Gallery.Post = PostGallery; + export default Gallery; diff --git a/packages/design-system/src/components/gallery/_gallery_post.stories.tsx b/packages/design-system/src/components/gallery/_gallery_post.stories.tsx new file mode 100644 index 00000000..74ed391f --- /dev/null +++ b/packages/design-system/src/components/gallery/_gallery_post.stories.tsx @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useEffect } from "react"; +import { useAppTheme } from "../../hooks"; +import Gallery from "./_gallery"; + +const meta: Meta = { + title: "tripie-ui/Gallery/Post", + component: Gallery.Post, + tags: ["autodocs"], + decorators: [ + (story, context) => { + const { mode, setMode } = useAppTheme(); + const selectedTheme = context.globals.theme || mode; + + useEffect(() => { + setMode(selectedTheme); + }, [selectedTheme]); + + return
{story()}
; + }, + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + name: "Default", + args: { + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount2: Story = { + name: "ImageCount2", + args: { + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount3: Story = { + name: "ImageCount3", + args: { + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const ImageCount4: Story = { + name: "ImageCount4", + args: { + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const MaxImage5: Story = { + name: "MaxImage5", + args: { + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const OverMaxImageWithCount: Story = { + name: "OverMaxImageWithCount - displayLeftOverImgCount", + args: { + displayLeftOverImgCount: true, + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; + +export const OverMaxImageWithoutCount: Story = { + name: "OverMaxImageWithout Count", + args: { + displayLeftOverImgCount: false, + urls: [ + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", + ], + }, +}; diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts index 748403fb..6dc53086 100644 --- a/packages/design-system/src/components/index.ts +++ b/packages/design-system/src/components/index.ts @@ -1,6 +1,6 @@ export { default as Body } from "./body"; export { default as Drawer } from "./drawer"; -export { default as Gallery } from "./gallery/_gallery"; +export { default as Gallery } from "./gallery"; export { default as MyButton } from "./myButton"; export { default as Headers } from "./typography"; export { default as Text } from "./typography/text";