Skip to content

Commit

Permalink
add webui-image-gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@basher
basher committed Apr 5, 2024
1 parent 77950c1 commit eb8e3e9
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 62 deletions.
1 change: 0 additions & 1 deletion ui/src/stylesheets/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
@use 'button-group';
@use 'card';
@use 'image';
@use 'image-gallery';
@use 'nav';
@use 'pagination';
@use 'responsive-media';
Expand Down
1 change: 1 addition & 0 deletions ui/src/stylesheets/web-components/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use 'webui-disclosure';
@use 'webui-image-gallery';
@use 'webui-make-clickable';
@use 'webui-modal';
@use 'webui-notify';
Expand Down
8 changes: 6 additions & 2 deletions ...tylesheets/components/_image-gallery.scss → .../web-components/_webui-image-gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@ Dependencies.
@use '../base' as *;
@use '../mixins' as *;

.image-gallery {
&__link {
webui-image-gallery {
.image-gallery__link {
@include focus;
display: block;
}

.grid {
@include responsive-grid-auto-columns($auto-layout: auto-fill);

> * {
display: block;
}
}

.modal__dialog[open] {
Expand Down
17 changes: 0 additions & 17 deletions ui/stories/5. Components/Image Gallery/ImageGallery.mdx
View file

This file was deleted.

14 changes: 0 additions & 14 deletions ui/stories/5. Components/Image Gallery/ImageGallery.stories.js
View file

This file was deleted.

56 changes: 28 additions & 28 deletions ... Components/Image Gallery/ImageGallery.js → .../WebUI Image Gallery/WebUIImageGallery.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export const ImageGalleryHtml = () => `
<div class="image-gallery" data-module="image-gallery">
export const WebUIImageGalleryHtml = () => `
<webui-image-gallery>
<ul class="grid">
<li>
<div class="modal" data-module="modal">
<webui-modal>
<a
class="image-gallery__link"
href="https://dummyimage.com/1140x810&text=image+1"
data-button="modal-open"
data-open
>
<picture>
<source
Expand All @@ -29,7 +29,7 @@ export const ImageGalleryHtml = () => `
<button
type="button"
class="button button--icon modal__close"
data-button="modal-close"
data-close
>
<svg
aria-hidden="true"
Expand All @@ -44,7 +44,7 @@ export const ImageGalleryHtml = () => `
<div
class="modal__content"
data-modal-content
data-content
>
<picture>
<source
Expand All @@ -68,14 +68,14 @@ export const ImageGalleryHtml = () => `
</picture>
</div>
</dialog>
</div>
</webui-modal>
</li>
<li>
<div class="modal" data-module="modal">
<webui-modal>
<a
class="image-gallery__link"
href="https://dummyimage.com/1140x810&text=image+2"
data-button="modal-open"
data-open
>
<picture>
<source
Expand All @@ -98,7 +98,7 @@ export const ImageGalleryHtml = () => `
<button
type="button"
class="button button--icon modal__close"
data-button="modal-close"
data-close
>
<svg
aria-hidden="true"
Expand All @@ -113,7 +113,7 @@ export const ImageGalleryHtml = () => `
<div
class="modal__content"
data-modal-content
data-content
>
<picture>
<source
Expand All @@ -137,14 +137,14 @@ export const ImageGalleryHtml = () => `
</picture>
</div>
</dialog>
</div>
</webui-modal>
</li>
<li>
<div class="modal" data-module="modal">
<webui-modal>
<a
class="image-gallery__link"
href="https://dummyimage.com/1140x810&text=image+3"
data-button="modal-open"
data-open
>
<picture>
<source
Expand All @@ -167,7 +167,7 @@ export const ImageGalleryHtml = () => `
<button
type="button"
class="button button--icon modal__close"
data-button="modal-close"
data-close
>
<svg
aria-hidden="true"
Expand All @@ -182,7 +182,7 @@ export const ImageGalleryHtml = () => `
<div
class="modal__content"
data-modal-content
data-content
>
<picture>
<source
Expand All @@ -206,14 +206,14 @@ export const ImageGalleryHtml = () => `
</picture>
</div>
</dialog>
</div>
</webui-modal>
</li>
<li>
<div class="modal" data-module="modal">
<webui-modal>
<a
class="image-gallery__link"
href="https://dummyimage.com/1140x810&text=image+4"
data-button="modal-open"
data-open
>
<picture>
<source
Expand All @@ -236,7 +236,7 @@ export const ImageGalleryHtml = () => `
<button
type="button"
class="button button--icon modal__close"
data-button="modal-close"
data-close
>
<svg
aria-hidden="true"
Expand All @@ -251,7 +251,7 @@ export const ImageGalleryHtml = () => `
<div
class="modal__content"
data-modal-content
data-content
>
<picture>
<source
Expand All @@ -275,14 +275,14 @@ export const ImageGalleryHtml = () => `
</picture>
</div>
</dialog>
</div>
</webui-modal>
</li>
<li>
<div class="modal" data-module="modal">
<webui-modal>
<a
class="image-gallery__link"
href="https://dummyimage.com/1140x810&text=image+5"
data-button="modal-open"
data-open
>
<picture>
<source
Expand All @@ -305,7 +305,7 @@ export const ImageGalleryHtml = () => `
<button
type="button"
class="button button--icon modal__close"
data-button="modal-close"
data-close
>
<svg
aria-hidden="true"
Expand All @@ -320,7 +320,7 @@ export const ImageGalleryHtml = () => `
<div
class="modal__content"
data-modal-content
data-content
>
<picture>
<source
Expand All @@ -344,8 +344,8 @@ export const ImageGalleryHtml = () => `
</picture>
</div>
</dialog>
</div>
</webui-modal>
</li>
</ul>
</div>
</webui-image-gallery>
`;
17 changes: 17 additions & 0 deletions .../6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Meta, Canvas } from '@storybook/blocks';
import * as WebUIImageGallery from './WebUIImageGallery.stories';

<Meta of={WebUIImageGallery} />

# `<webui-image-gallery>`
- Uses a simple [grid list layout](/story/layout-grid--grid-list) to arrange the image thumbnails.
- Without JavaScript, clicking thumbnails opens the large images in current browser window.
- With JavaScript, the large images are shown in the [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs) custom element.

> Please note: For brevity, the large images only have a subset of [responsive image](/story/components-images--responsive-image) `<source>` markup.
## TODO
- Consider extending `<webui-modal>` custom element to enable a single modal instance to be opened by multiple triggers?
- Consider showing the large images in a carousel?

<Canvas of={WebUIImageGallery.WebUIImageGallery} />
15 changes: 15 additions & 0 deletions ...ies/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.stories.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { WebUIImageGalleryHtml } from './WebUIImageGallery';

export default {
title: 'Web Components Or Custom Elements/<webui-image-gallery>',
parameters: {
status: {
type: 'stable',
},
},
};

export const WebUIImageGallery = {
render: () => WebUIImageGalleryHtml(),
};
WebUIImageGallery.storyName = '<webui-image-gallery';

0 comments on commit eb8e3e9

Please sign in to comment.