v3 CvList (#1151)

* Implement component & story

* Add tests

* Remove unnecessary spreads

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/v3/src/components/CvList/CvList.stories.js

@@ -0,0 +1,88 @@
+import { CvList, CvListItem } from '.';
+
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+export default {
+  title: `${sbCompPrefix}/CvList`,
+  component: CvList,
+  argTypes: {
+    ordered: {
+      control: { type: 'boolean' },
+    },
+    nested: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template = `<cv-list v-bind="args">
+  <cv-list-item>List item 1</cv-list-item>
+  <cv-list-item>List item 2</cv-list-item>
+  <cv-list-item>List item 3</cv-list-item>
+</cv-list>`;
+const Template = args => ({
+  components: { CvList, CvListItem },
+  setup: () => ({ args }),
+  template,
+});
+
+export const Unordered = Template.bind({});
+Unordered.args = {};
+Unordered.parameters = storyParametersObject(
+  Unordered.parameters,
+  template,
+  Unordered.args
+);
+
+export const Ordered = Template.bind({});
+Ordered.args = {
+  ordered: true,
+};
+Ordered.parameters = storyParametersObject(
+  Ordered.parameters,
+  template,
+  Ordered.args
+);
+
+const nestedTemplate = `<cv-list v-bind="args">
+  <cv-list-item>
+    List with no internal order
+    <cv-list nested>
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+  <cv-list-item>
+    List with ordered = false
+    <cv-list nested :ordered="false">
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+  <cv-list-item>
+    List with opposite ordering
+    <cv-list nested :ordered="!args.ordered">
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+</cv-list>`;
+const NestedTemplate = args => ({
+  components: { CvList, CvListItem },
+  setup: () => ({ args }),
+  template: nestedTemplate,
+});
+
+export const Nested = NestedTemplate.bind({});
+Nested.args = {};
+Nested.parameters = storyParametersObject(
+  Nested.parameters,
+  nestedTemplate,
+  Nested.args
+);

packages/v3/src/components/CvList/CvList.vue

@@ -0,0 +1,50 @@
+<template>
+  <component
+    :is="listType"
+    :class="{
+      [`${carbonPrefix}--list--nested`]: nested,
+      [`${carbonPrefix}--list--ordered`]: isActuallyOrdered,
+      [`${carbonPrefix}--list--unordered`]: !isActuallyOrdered,
+    }"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+import { getCurrentInstance, computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvList',
+  props: {
+    /** Is the list ordered? */
+    ordered: {
+      type: Boolean,
+      default: undefined,
+    },
+    /** Is this list nested in another list? */
+    nested: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+
+    const isActuallyOrdered = computed(() => {
+      if (props.nested && props.ordered === undefined) {
+        if (instance.parent?.parent?.type.name === instance.type.name) {
+          return instance.parent?.parent?.setupState.isActuallyOrdered;
+        }
+      }
+
+      return props.ordered || false;
+    });
+
+    const listType = computed(() => (isActuallyOrdered.value ? 'ol' : 'ul'));
+
+    return { carbonPrefix, isActuallyOrdered, listType };
+  },
+};
+</script>

packages/v3/src/components/CvList/CvListItem.vue

@@ -0,0 +1,12 @@
+<template>
+  <li :class="`${carbonPrefix}--list__item`"><slot /></li>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvListItem',
+  setup: () => ({ carbonPrefix }),
+};
+</script>

packages/v3/src/components/CvList/__tests__/CvList.spec.js

@@ -0,0 +1,120 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { h } from 'vue';
+import { carbonPrefix } from '../../../global/settings';
+
+import { CvList, CvListItem } from '..';
+
+describe('CvList', () => {
+  it('CvList - unordered', () => {
+    const wrapper = shallowMount(CvList);
+
+    const listTag = wrapper.find('ul');
+    expect(new Set(listTag.classes())).toEqual(
+      new Set([`${carbonPrefix}--list--unordered`])
+    );
+  });
+
+  it('CvList - ordered', () => {
+    const wrapper = shallowMount(CvList, {
+      props: {
+        ordered: true,
+      },
+    });
+
+    const listTag = wrapper.find('ol');
+    expect(new Set(listTag.classes())).toEqual(
+      new Set([`${carbonPrefix}--list--ordered`])
+    );
+  });
+
+  it('CvList - nested', () => {
+    const wrapper = shallowMount(CvList, {
+      props: {
+        nested: true,
+      },
+    });
+
+    const listTag = wrapper.find('ul');
+    expect(new Set(listTag.classes())).toEqual(
+      new Set([
+        `${carbonPrefix}--list--unordered`,
+        `${carbonPrefix}--list--nested`,
+      ])
+    );
+  });
+
+  it('CvList - nested ordering', async () => {
+    const wrapper = mount(CvList, {
+      props: {
+        ordered: false,
+      },
+      slots: {
+        default: {
+          render: () =>
+            h(CvListItem, {}, () => h(CvList, { nested: true }, () => '')),
+        },
+      },
+    });
+
+    const unorderedChildListTag = wrapper.find('ul ul');
+    expect(new Set(unorderedChildListTag.classes())).toEqual(
+      new Set([
+        `${carbonPrefix}--list--nested`,
+        `${carbonPrefix}--list--unordered`,
+      ])
+    );
+
+    await wrapper.setProps({ ordered: true });
+
+    const orderedChildListTag = wrapper.find('ol ol');
+    expect(new Set(orderedChildListTag.classes())).toEqual(
+      new Set([
+        `${carbonPrefix}--list--nested`,
+        `${carbonPrefix}--list--ordered`,
+      ])
+    );
+  });
+
+  it('CvList - nested does not take parent ordering if set on itself', () => {
+    const unorderedWrapper = mount(CvList, {
+      slots: {
+        default: {
+          render: () =>
+            h(CvListItem, {}, () =>
+              h(CvList, { ordered: false, nested: true })
+            ),
+        },
+      },
+    });
+
+    const unorderedListChildListTag = unorderedWrapper.find('ul ul');
+    expect(new Set(unorderedListChildListTag.classes())).toEqual(
+      new Set([
+        `${carbonPrefix}--list--nested`,
+        `${carbonPrefix}--list--unordered`,
+      ])
+    );
+
+    const orderedWrapper = mount(CvList, {
+      props: {
+        ordered: true,
+      },
+      slots: {
+        default: {
+          render: () =>
+            h(CvListItem, {}, () =>
+              h(CvList, { ordered: false, nested: true })
+            ),
+        },
+      },
+    });
+
+    const orderedListChildListTag = orderedWrapper.find('ol ul');
+    expect(new Set(orderedListChildListTag.classes())).toEqual(
+      new Set([
+        `${carbonPrefix}--list--nested`,
+        `${carbonPrefix}--list--unordered`,
+      ])
+    );
+  });
+});

packages/v3/src/components/CvList/index.js

@@ -0,0 +1,2 @@
+export { default, default as CvList } from './CvList';
+export { default as CvListItem } from './CvListItem';