simplify webui story refs

basher · Apr 5, 2024 · 03e2322 · 03e2322
1 parent e6b765e
commit 03e2322
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 171 deletions.
diff --git a/ui/stories/4. Forms/Form/Form.mdx b/ui/stories/4. Forms/Form/Form.mdx
@@ -1,7 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as Form from './Form.stories';
 import * as FormNoArgs from './FormNoArgs.stories';
-import * as WebUIFormValidate from '../../6. Web Components Or Custom Elements/WebUI Form Validate/WebUIFormValidate.stories';
 
 <Meta of={Form} />
 
@@ -31,11 +30,5 @@ import * as WebUIFormValidate from '../../6. Web Components Or Custom Elements/W
 
 <Canvas of={FormNoArgs.FormServerValidation} />
 
-## JavaScript validation
-- Uses the [`<webui-form-validate>`](/docs/web-components-or-custom-elements-webui-form-validate--docs) custom element.
-
-## Additional reading
-- See a [better approach to form validation](https://adamsilver.io/blog/the-problem-with-live-validation-and-what-to-do-instead/) that uses form `submit` rather than live inline validation.
-- Uses the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript).
-
-<Canvas of={WebUIFormValidate.WebUIFormValidate} />
+## `<webui-form-validate>` JavaScript validation
+- See the [`<webui-form-validate>`](/docs/web-components-or-custom-elements-webui-form-validate--docs) custom element.
diff --git a/ui/stories/4. Forms/Form/FormNoArgs.stories.js b/ui/stories/4. Forms/Form/FormNoArgs.stories.js
@@ -1,5 +1,4 @@
 import { FormServerValidationHtml } from './Form';
-import { WebUIFormValidateHtml } from '../../6. Web Components Or Custom Elements/WebUI Form Validate/WebUIFormValidate';
 
 export default {
     title: 'Forms/Form',
@@ -16,6 +15,12 @@ export const FormServerValidation = {
 FormServerValidation.storyName = 'Form (Server Validation)';
 
 export const WebUIFormValidate = {
-    render: () => WebUIFormValidateHtml(),
+    render: () => `
+        <p>
+            See the
+            <a href="/?path=/docs/web-components-or-custom-elements-webui-form-validate--docs"><code>&lt;webui-form-validate&gt;</code></a>
+            custom element.
+        </p>
+    `
 };
 WebUIFormValidate.storyName = '<webui-form> JavaScript Validation';
diff --git a/ui/stories/5. Components/Carousel/Carousel.js b/ui/stories/5. Components/Carousel/Carousel.js
@@ -179,90 +179,3 @@ ${style2}
     <p class="carousel-instructions">Scroll or use your arrow keys for more</p>
 </section>
 `;
-
-export const WebUICarouselHtml = (args) => `
-${style}
-<webui-carousel>
-    <section class="carousel-wrapper" aria-label="[meaningful label for carousel]"
-    >
-        <ul
-            class="carousel ${args.makeFullwidth === true ? 'carousel--fullwidth' : ''}"
-            tabindex="0"
-            data-module="slider"
-            ${args.showSlideCount === true ? 'data-slide-count="true"' : ''}
-            ${
-                args.showSlideCountPips === true
-                    ? 'data-slide-count-pips="true"'
-                    : ''
-            }
-            ${
-                args.showPrevNextButtons === true
-                    ? 'data-prev-next-buttons="true"'
-                    : ''
-            }
-        >
-            <li class="carousel__slide">
-                Slide 1<br>More content<br>Slides have equal height
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-            <li class="carousel__slide">
-                Slide 2
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-            <li class="carousel__slide">
-                Slide 3
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-            <li class="carousel__slide">
-                Slide 4
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-            <li class="carousel__slide">
-                Slide 5
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-            <li class="carousel__slide">
-                Slide 6
-                <br><br>
-                <a
-                    href="#"
-                    class="button button--text button--primary"
-                >
-                    Button
-                </a>
-            </li>
-        </ul>
-        <p class="carousel-instructions">Scroll or use your arrow keys for more</p>
-    </section>
-</webui-carousel>
-`;
diff --git a/ui/stories/5. Components/Carousel/Carousel.mdx b/ui/stories/5. Components/Carousel/Carousel.mdx
@@ -1,6 +1,5 @@
 import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as Carousel from './Carousel.stories';
-import * as CarouselNoArgs from './CarouselNoArgs.stories';
 
 <Meta of={Carousel} />
 
@@ -14,30 +13,13 @@ import * as CarouselNoArgs from './CarouselNoArgs.stories';
 - The carousel has `tabindex="0"` so it can receive keyboard `focus`, and be operated via the `LEFT|RIGHT` arrow keys.
 - CSS `scroll-snap` ensures the carousel stops at a complete slide.
 
-<Canvas of={CarouselNoArgs.Carousel} />
+<Canvas of={Carousel.Carousel} />
 
 ## CSS-only fullwidth slides (e.g. banner carousel)
-<Canvas of={CarouselNoArgs.CarouselFullwidthSlides} />
+<Canvas of={Carousel.CarouselFullwidthSlides} />
 
 ## CSS-only clickable slides (e.g. cards, image thumbnails)
-<Canvas of={CarouselNoArgs.CarouselClickableSlidesHtml} />
+<Canvas of={Carousel.CarouselClickableSlides} />
 
-## Slides with JavaScript enhancements
-- The default CSS carousel can be enhanced with JavaScript to show a slide count, PREV and NEXT buttons, etc.
-- Native scrolling with `LEFT|RIGHT` arrow keys is overridden, allowing JavaScript to correctly update the slide count when using arrow keys.
-- Each slide has an `aria-label`, indicating the current slide number and the total number of slides.
-- When PREV and NEXT buttons are shown, keyboard `focus` is modified such that **only visible slides are focusable**.
-
-## Required and optional HTML  or `data-` attributes
-
-Attribute | Behaviour
---- | ---
-`data-slide-count="true"` | Optional. Displays slide count & current slide.
-`data-slide-count-pips="true"` | Optional. Displays slide count & current slide as pips instead of text.
-`data-prev-next-buttons="true"` | Optional. Displays PREV and NEXT slide buttons.
-
-### TODO
-- Update counter with touch/swipe events?
-
-<Canvas of={Carousel.WebUICarouselHtml} />
-<Controls of={Carousel.WebUICarouselHtml} />
+## JavaScript-enhanced carousel
+- See the [`<webui-carousel>`](/docs/web-components-or-custom-elements-webui-carousel--docs) custom element.
diff --git a/ui/stories/5. Components/Carousel/Carousel.stories.js b/ui/stories/5. Components/Carousel/Carousel.stories.js
@@ -1,4 +1,8 @@
-import { WebUICarouselHtml } from './Carousel';
+import {
+    CarouselHtml,
+    CarouselFullwidthSlidesHtml,
+    CarouselClickableSlidesHtml
+} from './Carousel';
 
 export default {
     title: 'Components/Carousel',
@@ -7,15 +11,31 @@ export default {
             type: 'stable',
         },
     },
-    argTypes: {
-        makeFullwidth: { control: 'boolean' },
-        showSlideCount: { control: 'boolean' },
-        showSlideCountPips: { control: 'boolean' },
-        showPrevNextButtons: { control: 'boolean' },
-    },
 };
 
+export const Carousel = {
+    render: () => CarouselHtml(),
+};
+Carousel.storyName = 'CSS-Only Carousel';
+
+export const CarouselFullwidthSlides = {
+    render: () => CarouselFullwidthSlidesHtml(),
+};
+CarouselFullwidthSlides.storyName = 'CSS-Only Fullwidth Slides';
+
+export const CarouselClickableSlides = {
+    render: () => CarouselClickableSlidesHtml(),
+};
+CarouselClickableSlides.storyName = 'CSS-Only Clickable Slides';
+
 export const WebUICarousel = {
-    render: (args) => WebUICarouselHtml(args),
+    render: () => `
+        <p>
+            See the
+            <a href="/?path=/docs/web-components-or-custom-elements-webui-carousel--docs"><code>&lt;webui-carousel&gt;</code></a>
+            custom element.
+        </p>
+    `
 };
-WebUICarouselHtml.storyName = '<webui-carousel>';
+WebUICarousel.storyName = '<webui-carousel>';
+
diff --git a/ui/stories/5. Components/Carousel/CarouselNoArgs.stories.js b/ui/stories/5. Components/Carousel/CarouselNoArgs.stories.js
diff --git a/ui/stories/5. Components/Search/Search.mdx b/ui/stories/5. Components/Search/Search.mdx
@@ -1,6 +1,5 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as Search from './Search.stories';
-import * as WebUIPredictiveSearch from '../../6. Web Components Or Custom Elements/WebUI Predictive Search/WebUIPredictiveSearch.stories';
 
 <Meta of={Search} />
 
@@ -15,11 +14,5 @@ import * as WebUIPredictiveSearch from '../../6. Web Components Or Custom Elemen
 
 <Canvas of={Search.SearchDatalist} />
 
-## Predictive search (with dynamic results from an API)
-- Uses the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) custom element.
-- When JavaScript is enabled, form submit is disabled and the submit button is hidden.
-
-### Accessibility considerations
-- Dynamic search results are displayed in an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
-
-<Canvas of={WebUIPredictiveSearch.WebUIPredictiveSearch} />
+## `<webui-predictive-search>` (with dynamic results from an API)
+- See the [`<webui-predictive-search>`](/docs/web-components-or-custom-elements-webui-predictive-search--docs) custom element.
diff --git a/ui/stories/5. Components/Search/Search.stories.js b/ui/stories/5. Components/Search/Search.stories.js
@@ -1,6 +1,4 @@
 import { SearchHtml, SearchDatalistHtml } from './Search';
-import { WebUIPredictiveSearchHtml } from '../../6. Web Components Or Custom Elements/WebUI Predictive Search/WebUIPredictiveSearch';
-
 
 export default {
     title: 'Components/Search',
@@ -21,6 +19,12 @@ export const SearchDatalist = {
 SearchDatalist.storyName = 'Predictive Search Using Datalist';
 
 export const WebUIPredictiveSearch = {
-    render: () => WebUIPredictiveSearchHtml(),
+    render: () => `
+        <p>
+            See the
+            <a href="/?path=/docs/web-components-or-custom-elements-webui-predictive-search--docs"><code>&lt;webui-predictive-search&gt;</code></a>
+            custom element.
+        </p>
+    `
 };
 WebUIPredictiveSearch.storyName = '<webui-predictive-search>';