Remove button swap JS (#1917)

Author: calebeby

.changeset/red-mice-walk.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Remove button-swap component JS. Users of the component will need to implement their own functionality for this component.

package-lock.json

@@ -1,24 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { makeTwigInclude } from '../../make-twig-include.js';
-import { useEffect } from '@storybook/client-api';
 import buttonSwap from './button-swap.twig';
-import { initButtonSwap } from './button-swap.ts';
-// Helper function to initialize toggling button JS
-const buttonSwapStory = (args) => {
-  useEffect(() => {
-    const buttonSwapEls = [...document.querySelectorAll('.js-button-swap')].map(
-      (buttonSwapEl) =>
-        initButtonSwap(buttonSwapEl, {
-          initialCallback: () => console.log('Subscribed!'),
-          swappedCallback: () => console.log('Unsubscribed!'),
-        })
-    );
-    return () => {
-      for (const buttonSwapEl of buttonSwapEls) buttonSwapEl.destroy();
-    };
-  });
-  return buttonSwap(args);
-};
 
 <Meta
   title="Components/Button Swap"
@@ -67,7 +49,7 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
       },
     }}
   >
-    {(args) => buttonSwapStory(args)}
+    {(args) => buttonSwap(args)}
   </Story>
 </Canvas>
 
@@ -83,71 +65,7 @@ You have the ability to pass `initialCallback` and `swappedCallback` callback fu
 
 ## JavaScript
 
-You'll need to use JavaScript to select the Button Swap component via the `js-button-swap` CSS class and initialize it using the `initButtonSwap` function.
-
-### Syntax
-
-```js
-initButtonSwap(buttonSwapEl, options);
-```
-
-### Parameters
-
-#### `buttonSwapEl`
-
-The `.js-button-swap` Button Swap wrapper element.
-
-#### `options` (optional)
-
-An object which allows you to optionally pass `initialCallback` and `swappedCallback` functions to be called when each button is clicked.
-
-```js
-options?: {
-  initialCallback?: (event: Event) => void;
-  swappedCallback?: (event: Event) => void;
-}
-```
-
-### Return value
-
-An object with a `destroy` function that removes event listeners.
-
-```js
-{ destroy: () => void }
-```
-
-### Examples
-
-#### Single Button Swap component on the page
-
-```js
-// Initialize
-const buttonSwapEl = initButtonSwap(document.querySelector('.js-button-swap'), {
-  initialCallback: () => console.log('Subscribed!'),
-  swappedCallback: () => console.log('Unsubscribed!'),
-});
-
-// Remove all event listeners
-buttonSwapEl.destroy();
-```
-
-#### Multiple Button Swap components on the page
-
-```js
-// Initialize
-const buttonSwapEls = [...document.querySelectorAll('.js-button-swap')].map(
-  (buttonSwapEl) =>
-    initButtonSwap(buttonSwapEl, {
-      initialCallback: () => console.log('Subscribed!'),
-      swappedCallback: () => console.log('Unsubscribed!'),
-    })
-);
-
-// Remove all event listeners
-buttonSwapEls.forEach((buttonSwapEl) => {
-  buttonSwapEl.destroy();
-});
-```
+This component does not come with built-in JavaScript for its functionality; you will need to write your own JS to use it.
 
 ## Unsupported features
 

src/components/button-swap/button-swap.stories.mdx

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import type { ElementHandle, PleasantestUtils } from 'pleasantest';
+import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
 
 import { loadGlobalCSS, loadTwigTemplate } from '../../../test-utils.js';
@@ -10,28 +10,9 @@ const componentMarkup = loadTwigTemplate(
   path.join(__dirname, './button-swap.twig')
 );
 
-// Helper to initialize the component JS
-const initJS = (
-  utils: PleasantestUtils,
-  initialCallback?: () => void,
-  swappedCallback?: () => void
-) =>
-  utils.runJS(
-    `
-    import { initButtonSwap } from './button-swap'
-    export default (initialCallback, swappedCallback) => {
-      initButtonSwap(document.querySelector('.js-button-swap'), {
-        initialCallback,
-        swappedCallback
-      })
-    }
-    `,
-    [initialCallback, swappedCallback]
-  );
-
 test(
   'Swap UI state when clicked',
-  withBrowser(async ({ utils, screen, user, page }) => {
+  withBrowser(async ({ utils, screen, page }) => {
     await utils.injectHTML(await componentMarkup());
     await loadGlobalCSS(utils);
 
@@ -47,8 +28,6 @@ test(
     await expect(firstBtn).toBeVisible();
     await expect(firstBtn).not.toHaveClass('is-slashed');
 
-    await initJS(utils);
-
     // After JS initializes it should be the same
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
@@ -59,41 +38,12 @@ test(
     firstBtn = await screen.queryByRole('button');
     await expect(firstBtn).toBeVisible();
     await expect(firstBtn).not.toHaveClass('is-slashed');
-
-    // Button swap action
-    await user.click(firstBtn);
-
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Currently subscribed to notifications"
-      button "Turn off notifications"
-    `);
-
-    const secondBtn = await screen.queryByRole('button', {
-      name: /^turn off notifications$/i,
-    });
-    await expect(secondBtn).toBeVisible();
-    await expect(secondBtn).toHaveClass('is-slashed');
-
-    // Button swap action
-    await user.click(secondBtn);
-
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Currently unsubscribed from notifications"
-      button "Get notifications"
-    `);
-
-    // Query for first button again in its new state
-    firstBtn = await screen.queryByRole('button');
-    await expect(firstBtn).toBeVisible();
-    await expect(firstBtn).not.toHaveClass('is-slashed');
   })
 );
 
 test(
   'Set custom messages and labels',
-  withBrowser(async ({ utils, screen, user, page }) => {
+  withBrowser(async ({ utils, page }) => {
     await utils.injectHTML(
       await componentMarkup({
         initial_visual_label: 'Hello world',
@@ -103,51 +53,12 @@ test(
       })
     );
     await loadGlobalCSS(utils);
-    await initJS(utils);
 
     const body = await page.evaluateHandle<ElementHandle>(() => document.body);
     expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
       status
         text "Unsubscribed"
       button "Hello world"
     `);
-
-    // Button swap action
-    await user.click(await screen.getByRole('button'));
-
-    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
-      alert (focused)
-        text "Subscribed"
-      button "Have a great day"
-    `);
-  })
-);
-
-test(
-  'Callback functions are called',
-  withBrowser(async ({ utils, screen, user }) => {
-    await utils.injectHTML(await componentMarkup());
-    await loadGlobalCSS(utils);
-
-    const mockInitialCallback = jest.fn();
-    const mockSwappedCallback = jest.fn();
-
-    await initJS(utils, mockInitialCallback, mockSwappedCallback);
-
-    const firstBtn = await screen.queryByRole('button', {
-      name: /^get notifications$/i,
-    });
-
-    await user.click(firstBtn);
-
-    expect(mockInitialCallback).toBeCalledTimes(1);
-
-    const secondBtn = await screen.queryByRole('button', {
-      name: /^turn off notifications$/i,
-    });
-
-    await user.click(secondBtn);
-
-    expect(mockSwappedCallback).toBeCalledTimes(1);
   })
 );