From e289a6ce536ae113eee47ebdff8f17707f450b57 Mon Sep 17 00:00:00 2001
From: David Nixon <david_nixon@us.ibm.com>
Date: Mon, 28 Nov 2022 14:53:47 -0500
Subject: [PATCH] feat: add cv-content-switcher

---
 .../CvComboBox/__tests__/CvComboBox.spec.js   |   2 +-
 .../CvContentSwitcher.stories.js              | 199 +++++++++++++++---
 .../CvContentSwitcher/CvContentSwitcher.vue   |  67 +++++-
 .../CvContentSwitcherButton.vue               | 120 ++++++++++-
 .../CvContentSwitcherContent.vue              |  24 ++-
 .../cvContentSwitcherStore.js                 |  59 ++++++
 src/components/CvContentSwitcher/index.js     |   3 +
 src/use/cvTheme.js                            |  30 +++
 8 files changed, 452 insertions(+), 52 deletions(-)

diff --git a/src/components/CvComboBox/__tests__/CvComboBox.spec.js b/src/components/CvComboBox/__tests__/CvComboBox.spec.js
index 7336026c4..3defcd52e 100644
--- a/src/components/CvComboBox/__tests__/CvComboBox.spec.js
+++ b/src/components/CvComboBox/__tests__/CvComboBox.spec.js
@@ -92,7 +92,7 @@ describe('CvComboBox', () => {
     const wrapper = result.container.querySelector('.bx--list-box__wrapper');
     expect(wrapper.getAttribute('aria-label')).toBe(ariaLabel);
 
-    await result.rerender({ ...props, invalidMessage: '' });
+    await result.rerender({ invalidMessage: '' });
     await result.findByText(props.helperText);
   });
 
diff --git a/src/components/CvContentSwitcher/CvContentSwitcher.stories.js b/src/components/CvContentSwitcher/CvContentSwitcher.stories.js
index a716ded94..ebead289e 100644
--- a/src/components/CvContentSwitcher/CvContentSwitcher.stories.js
+++ b/src/components/CvContentSwitcher/CvContentSwitcher.stories.js
@@ -1,12 +1,14 @@
 import { sbCompPrefix, storyParametersObject } from '@/global/storybook-utils';
 
 import { CvContentSwitcher } from '.';
+import CvContentSwitcherButton from './CvContentSwitcherButton';
+import CvContentSwitcherContent from './CvContentSwitcherContent';
+import { IbmSecurity20 } from '@carbon/icons-vue';
 import { action } from '@storybook/addon-actions';
-import { ref } from 'vue';
 
 const initArgs = {
-  title: 'Combo Box title',
-  helperText: 'Combobox helper text',
+  light: false,
+  selectedIndex: 0,
 };
 
 export default {
@@ -15,41 +17,62 @@ export default {
   parameters: {
     a11y: {
       config: {
-        rules: [
-          {
-            // The autocomplete rule will not run based on the CSS selector provided
-            id: 'aria-input-field-name',
-            selector: '.bx--combo-box',
-          },
-        ],
+        rules: [],
       },
       options: {},
       manual: true,
     },
+    controls: { exclude: ['default', 'selected'] },
   },
   argTypes: {
-    title: { type: String, description: 'Combo Box title' },
-    options: { type: Array, description: 'Combo Box options' },
+    light: {
+      description: 'light theme',
+      table: {
+        category: 'props',
+      },
+    },
+    size: {
+      type: 'select',
+      options: ['sm', 'md', 'xl'],
+    },
   },
 };
 
 const template = `
-<div style='width: 18.75rem'>
-<cv-content-switcher aria-label='Choose a fruit' v-bind='args' />
+<div>
+<cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected">
+  <cv-content-switcher-button owner-id="csb-1" :selected="selectedIndex === 0">Button Name 1</cv-content-switcher-button>
+  <cv-content-switcher-button owner-id="csb-2" :selected="selectedIndex === 1">Button Name 2</cv-content-switcher-button>
+  <cv-content-switcher-button :icon="iconSample" owner-id="csb-3" :selected="selectedIndex === 2">Button Name 3</cv-content-switcher-button>
+</cv-content-switcher>
+<section style="margin: 10px 0;">
+  <cv-content-switcher-content owner-id="csb-1">
+    <p>This is the content for option 1</p>
+  </cv-content-switcher-content>
+  <cv-content-switcher-content owner-id="csb-2">
+    <p>This is the content for option 2</p>
+  </cv-content-switcher-content>
+  <cv-content-switcher-content owner-id="csb-2" >
+    <p>This is more content for option 2</p>
+  </cv-content-switcher-content>
+  <cv-content-switcher-content owner-id="csb-3">
+    <p>This is the content for option 3</p>
+  </cv-content-switcher-content>
+</section>
 </div>
-<script>
-import CvContentSwitcher from './CvContentSwitcher';
-export default {
-components: { CvContentSwitcher }
- };
-</script>`;
+`;
 const Template = args => {
   return {
-    components: { CvContentSwitcher },
+    components: {
+      CvContentSwitcher,
+      CvContentSwitcherButton,
+      CvContentSwitcherContent,
+    },
     setup: () => ({
       args,
-      onChange: action('change'),
-      onFilter: action('filter'),
+      onSelected: action('selected'),
+      selectedIndex: args.selectedIndex,
+      iconSample: IbmSecurity20,
     }),
     template,
   };
@@ -57,8 +80,130 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = initArgs;
-Default.parameters = storyParametersObject(
-  Default.parameters,
-  template,
-  Default.args
+// Default.parameters = storyParametersObject(
+//   Default.parameters,
+//   template,
+//   Default.args
+// );
+// Default.parameters.controls = { exclude: ['default', 'selected'] };
+
+/**
+ * Direct DOM
+ */
+const templateDom = `
+<div>
+<cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected">
+  <cv-content-switcher-button content-selector=".content-1" :selected="selectedIndex === 0">Button Name 1</cv-content-switcher-button>
+  <cv-content-switcher-button content-selector=".content-2" :selected="selectedIndex === 1">Button Name 2</cv-content-switcher-button>
+  <cv-content-switcher-button :icon="iconSample" content-selector=".content-3" :selected="selectedIndex === 2">Button Name 3</cv-content-switcher-button>
+</cv-content-switcher>
+  <section style="margin: 10px 0;">
+    <div class="content-1">
+      <p>This is the DOM content for option 1</p>
+    </div>
+    <div class="content-2">
+      <p>This is the DOM content for option 2</p>
+    </div>
+    <div class="content-2" >
+      <p>This is more DOM content for option 2</p>
+    </div>
+    <div class="content-3">
+      <p>This is the DOM content for option 3</p>
+    </div>
+  </section>
+</div>
+`;
+const TemplateDom = args => {
+  return {
+    components: {
+      CvContentSwitcher,
+      CvContentSwitcherButton,
+      CvContentSwitcherContent,
+    },
+    setup: () => ({
+      args,
+      onSelected: action('selected'),
+      selectedIndex: args.selectedIndex,
+      iconSample: IbmSecurity20,
+    }),
+    template: templateDom,
+  };
+};
+export const directDom = TemplateDom.bind({});
+directDom.args = initArgs;
+directDom.parameters = storyParametersObject(
+  directDom.parameters,
+  templateDom,
+  directDom.args
+);
+directDom.parameters.controls = { exclude: ['default', 'selected'] };
+
+/**
+ * Multiple switchers
+ */
+const templateMultiple = `
+<div>
+  <cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected" id="star-wars">
+    <cv-content-switcher-button parentSwitcher="star-wars" owner-id="episode-1" :selected="selectedIndex === 0">Episode 1</cv-content-switcher-button>
+    <cv-content-switcher-button parentSwitcher="star-wars" owner-id="episode-2" :selected="selectedIndex === 1">Episode 2</cv-content-switcher-button>
+    <cv-content-switcher-button parentSwitcher="star-wars" :icon="iconSample" owner-id="episode-3" :selected="selectedIndex === 2">Episode 3</cv-content-switcher-button>
+  </cv-content-switcher>
+  <section style="margin: 10px 0;">
+    <cv-content-switcher-content parentSwitcher="star-wars" owner-id="episode-1">
+      <p>Padme</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="star-wars" owner-id="episode-2">
+      <p>Anakin</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="star-wars" owner-id="episode-2" >
+      <p>Zam</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="star-wars" owner-id="episode-3">
+      <p>Yoda</p>
+    </cv-content-switcher-content>
+  </section>
+  <cv-content-switcher aria-label='Choose content' v-bind='args' @selected="onSelected" id="LotR">
+    <cv-content-switcher-button parentSwitcher="LotR" owner-id="book-1" :selected="selectedIndex === 0">Book 1</cv-content-switcher-button>
+    <cv-content-switcher-button parentSwitcher="LotR" owner-id="book-2" :selected="selectedIndex === 1">Book 2</cv-content-switcher-button>
+    <cv-content-switcher-button parentSwitcher="LotR" :icon="iconSample" owner-id="book-3" :selected="selectedIndex === 2">Book 3</cv-content-switcher-button>
+  </cv-content-switcher>
+  <section style="margin: 10px 0;">
+    <cv-content-switcher-content parentSwitcher="LotR" owner-id="book-1">
+      <p>Bilbo</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="LotR" owner-id="book-2">
+      <p>Frodo</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="LotR" owner-id="book-2" >
+      <p>Sauron</p>
+    </cv-content-switcher-content>
+    <cv-content-switcher-content parentSwitcher="LotR" owner-id="book-3">
+      <p>Gandalf</p>
+    </cv-content-switcher-content>
+  </section>
+</div>
+`;
+const TemplateMultiple = args => {
+  return {
+    components: {
+      CvContentSwitcher,
+      CvContentSwitcherButton,
+      CvContentSwitcherContent,
+    },
+    setup: () => ({
+      args,
+      onSelected: action('selected'),
+      selectedIndex: args.selectedIndex,
+      iconSample: IbmSecurity20,
+    }),
+    template: templateMultiple,
+  };
+};
+export const multipleSwitchers = TemplateMultiple.bind({});
+multipleSwitchers.args = initArgs;
+multipleSwitchers.parameters = storyParametersObject(
+  multipleSwitchers.parameters,
+  templateMultiple,
+  multipleSwitchers.args
 );
+multipleSwitchers.parameters.controls = { exclude: ['default', 'selected'] };
diff --git a/src/components/CvContentSwitcher/CvContentSwitcher.vue b/src/components/CvContentSwitcher/CvContentSwitcher.vue
index 891bc9ee8..39df456d0 100644
--- a/src/components/CvContentSwitcher/CvContentSwitcher.vue
+++ b/src/components/CvContentSwitcher/CvContentSwitcher.vue
@@ -1,13 +1,64 @@
 <template>
-
+  <div
+    :class="[
+      `cv-content-switcher ${carbonPrefix}--content-switcher`,
+      {
+        [`${carbonPrefix}--content-switcher--light`]: isLight,
+        [`${carbonPrefix}--content-switcher--${size || 'md'}`]: size || 'md',
+      },
+    ]"
+    role="tablist"
+    :id="cvId"
+  >
+    <slot></slot>
+  </div>
 </template>
 
-<script>
-export default {
-name: "CvContentSwitcher"
-}
-</script>
+<script setup>
+import { carbonPrefix } from '@/global/settings';
+import { props as propsCvId, useCvId } from '@/use/cvId';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+import { onUnmounted, watch } from 'vue';
+import store from './cvContentSwitcherStore';
+
+const emit = defineEmits(['selected']);
 
-<style scoped>
+const props = defineProps({
+  size: {
+    type: String,
+    default: undefined,
+    validator: val => ['', 'md', 'sm', 'xl'].includes(val),
+  },
+  ...propsTheme,
+  ...propsCvId,
+});
+const cvId = useCvId(props, true);
+const isLight = useIsLight(props);
+store.addParent(cvId.value);
+store.setContentSelected('global', undefined);
+onUnmounted(() => {
+  store.removeParent(cvId.value);
+});
+watch(
+  () => store.state.global.latest,
+  (val, prev) => {
+    // if previous is not set, do not emit. This mimics the current v2 behaviour where the initial content does not generate an event
+    if (prev) emit('selected', val);
+  }
+);
+
+let ourLatest = undefined;
+watch(
+  () => store.state[cvId.value],
+  val => {
+    if (ourLatest !== val?.latest) {
+      // if ourLatest is not set, do not emit. This mimics the current v2 behaviour where the initial content does not generate an event
+      if (ourLatest) emit('selected', val?.latest);
+      ourLatest = val?.latest;
+    }
+  },
+  { deep: true }
+);
+</script>
 
-</style>
+<style lang="scss"></style>
diff --git a/src/components/CvContentSwitcher/CvContentSwitcherButton.vue b/src/components/CvContentSwitcher/CvContentSwitcherButton.vue
index d972208e5..9c89fe25b 100644
--- a/src/components/CvContentSwitcher/CvContentSwitcherButton.vue
+++ b/src/components/CvContentSwitcher/CvContentSwitcherButton.vue
@@ -1,13 +1,117 @@
-<template>
+<!--
+  Carbon content switcher button.
+
+  Attributes:
+    content-selector: A CSS selector for the content to be shown when the button is selected.
+    selected: If true the button is initially selected (only valid on one button per content switcher).
+
+  Usage:
+    See content-switcher.vue
 
+-->
+<template>
+  <button
+    type="button"
+    role="tab"
+    class="cv-content-switcher-button"
+    :class="[
+      `${carbonPrefix}--content-switcher-btn`,
+      {
+        [`${carbonPrefix}--content-switcher--selected`]: isSelected,
+      },
+    ]"
+    :data-target="contentSelector"
+    :aria-selected="isSelected ? 'true' : 'false'"
+    :id="cvId"
+    @click="open"
+  >
+    <CvSvg
+      v-if="icon"
+      :svg="icon"
+      :class="`${carbonPrefix}--content-switcher__icon`"
+      height="16"
+      width="16"
+    />
+    <span :class="`${carbonPrefix}--content-switcher__label`">
+      <slot></slot>
+    </span>
+  </button>
 </template>
 
-<script>
-export default {
-  name: 'CvContentSwitcherButton',
-};
-</script>
+<script setup>
+import { carbonPrefix } from '@/global/settings';
+import CvSvg from '../CvSvg/_CvSvg';
+import { computed, onMounted, watch } from 'vue';
+import { props as propsCvId, useCvId } from '@/use/cvId';
+import store from './cvContentSwitcherStore';
 
-<style scoped>
+const props = defineProps({
+  contentSelector: { type: String, default: undefined },
+  icon: {
+    type: [String, Object],
+    default: undefined,
+    validator(val) {
+      if (!val || typeof val === 'string') {
+        return true;
+      }
+      return val.render !== null;
+    },
+  },
+  ownerId: { type: String, default: undefined },
+  parentSwitcher: { type: String, default: 'global' },
+  selected: Boolean,
+  ...propsCvId,
+});
+const cvId = useCvId(props, true);
+
+function toggleContent(on) {
+  if (!props.contentSelector) {
+    console.error(
+      'CvContentSwitcherButton: Either ownerId or content-selector property must not be defined.'
+    );
+    return;
+  }
+
+  // show/hide content
+  const content = document.querySelectorAll(props.contentSelector);
+  for (const element of content) {
+    // element.style.visibility = on;
+    if (!on) {
+      element.setAttribute('hidden', 'hidden');
+    } else {
+      element.removeAttribute('hidden');
+    }
+    element.setAttribute('aria-hidden', `${!on}`);
+  }
+  if (on) store.setContentSelected(props.parentSwitcher, props.contentSelector);
+}
+
+function open() {
+  store.setSelected(props.parentSwitcher, cvId.value);
+  if (props.ownerId) store.setOwnerContent(props.parentSwitcher, props.ownerId);
+  else toggleContent(true);
+}
+function close() {
+  if (!props.ownerId) toggleContent(false);
+}
+const isSelected = computed(() => {
+  return store.getSelected(props.parentSwitcher, cvId.value);
+});
+watch(isSelected, val => {
+  if (val) open();
+  else close();
+});
+
+// life cycle
+onMounted(() => {
+  if (props.contentSelector === '' && props.ownerId === '') {
+    console.error(
+      'CvContentSwitcherButton: ownerId or content-selector properties must not be empty strings.'
+    );
+  }
+  if (props.selected) open();
+  else close();
+});
+</script>
 
-</style>
+<style lang="scss"></style>
diff --git a/src/components/CvContentSwitcher/CvContentSwitcherContent.vue b/src/components/CvContentSwitcher/CvContentSwitcherContent.vue
index 83f03b642..979276366 100644
--- a/src/components/CvContentSwitcher/CvContentSwitcherContent.vue
+++ b/src/components/CvContentSwitcher/CvContentSwitcherContent.vue
@@ -1,13 +1,21 @@
 <template>
-
+  <div v-show="isVisible" class="cv-content-switcher-content">
+    <slot></slot>
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'CvContentSwitcherContent',
-};
-</script>
+<script setup>
+import { computed } from 'vue';
+import store from './cvContentSwitcherStore';
 
-<style scoped>
+const props = defineProps({
+  ownerId: { type: String, required: true },
+  parentSwitcher: { type: String, default: 'global' },
+});
+
+const isVisible = computed(() => {
+  return store.isOwnerContent(props.parentSwitcher, props.ownerId);
+});
+</script>
 
-</style>
+<style lang="scss"></style>
diff --git a/src/components/CvContentSwitcher/cvContentSwitcherStore.js b/src/components/CvContentSwitcher/cvContentSwitcherStore.js
index e69de29bb..18a69e1ec 100644
--- a/src/components/CvContentSwitcher/cvContentSwitcherStore.js
+++ b/src/components/CvContentSwitcher/cvContentSwitcherStore.js
@@ -0,0 +1,59 @@
+import { reactive } from 'vue';
+export default reactive({
+  state: { global: { latest: undefined, selected: '', owner: '' } },
+  addParent(parentId) {
+    this.state[parentId] = { latest: undefined, selected: '', owner: '' };
+    // eslint-disable-next-line no-console
+    // console.log(
+    //   `addParent(${parentId})`,
+    //   JSON.stringify(this.getParent(parentId))
+    // );
+  },
+  setSelected(parentId, childId) {
+    this.getParent(parentId).selected = childId;
+    // // eslint-disable-next-line no-console
+    // console.log(
+    //   `setSelected(${parentId}, ${childId})`,
+    //   JSON.stringify(this.getParent(parentId))
+    // );
+  },
+  getSelected(parentId, childId) {
+    return this.getParent(parentId).selected === childId;
+  },
+  removeParent(parentId) {
+    delete this.state[parentId];
+    // eslint-disable-next-line no-console
+    // console.log(`removeParent(${parentId})`, JSON.stringify(this.state));
+  },
+  getParent(parentId) {
+    if (!this.state[parentId]) this.addParent(parentId);
+    return this.state[parentId];
+  },
+  setContentSelected(parentId, selected) {
+    this.getParent(parentId).latest = selected;
+    // // eslint-disable-next-line no-console
+    // console.log(
+    //   `setContentSelected(${parentId}, ${selected})`,
+    //   JSON.stringify(this.getParent(parentId))
+    // );
+  },
+  setOwnerContent(parentId, ownerId) {
+    this.getParent(parentId).owner = ownerId;
+    this.setContentSelected(parentId, ownerId);
+    // eslint-disable-next-line no-console
+    // console.log(
+    //   `setOwnerContent(${parentId}, ${ownerId})`,
+    //   JSON.stringify(this.getParent(parentId))
+    // );
+  },
+  isOwnerContent(parentId, ownerId) {
+    // eslint-disable-next-line no-console
+    // console.log(
+    //   `isOwnerContent(${parentId}, ${ownerId}) = ${
+    //     this.getParent(parentId).owner === ownerId
+    //   }`,
+    //   JSON.stringify(this.getParent(parentId))
+    // );
+    return this.getParent(parentId).owner === ownerId;
+  },
+});
diff --git a/src/components/CvContentSwitcher/index.js b/src/components/CvContentSwitcher/index.js
index e69de29bb..6602e66a3 100644
--- a/src/components/CvContentSwitcher/index.js
+++ b/src/components/CvContentSwitcher/index.js
@@ -0,0 +1,3 @@
+import CvContentSwitcher from './CvContentSwitcher';
+export { CvContentSwitcher };
+export default CvContentSwitcher;
diff --git a/src/use/cvTheme.js b/src/use/cvTheme.js
index e69de29bb..1aef23e57 100644
--- a/src/use/cvTheme.js
+++ b/src/use/cvTheme.js
@@ -0,0 +1,30 @@
+/*
+ * Provides common "light" property. Let's continue to support the deprecated "theme" property as well
+ */
+import { computed } from 'vue';
+
+const options = ['light', ''];
+export const props = {
+  light: { type: Boolean, default: false },
+  theme: {
+    type: String,
+    default: '',
+    validator: value => {
+      if (value && process.env.NODE_ENV === 'development') {
+        console.warn(
+          `theme='light' deprecated in favour of boolean light property.`
+        );
+      }
+
+      return options.includes(value);
+    },
+  },
+};
+
+export const useIsLight = props => {
+  const isLight = computed(() => {
+    return props.light || props.theme === 'light';
+  });
+
+  return isLight;
+};