Update: DescriptionList component

Author: juzser

src/classes/DescriptionList.json

@@ -0,0 +1 @@
+{"DescriptionList":"Polaris-DescriptionList","Term":"Polaris-DescriptionList__Term","spacingTight":"Polaris-DescriptionList--spacingTight","Description":"Polaris-DescriptionList__Description"}

src/components/DescriptionList/DescriptionList.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+dl(:class="className")
+  slot
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { classNames } from 'polaris-react/src/utilities/css';
+import styles from '@/classes/DescriptionList.json';
+
+const props = withDefaults(defineProps<{
+  /**
+   * Determines the spacing between list items
+   * @default 'loose'
+   */
+  spacing?: 'loose' | 'tight';
+}>(),
+{
+  spacing: 'loose',
+});
+
+const className = computed(() => {
+  return classNames(
+    styles.DescriptionList,
+    props.spacing === 'tight' && styles.spacingTight,
+  );
+});
+</script>
+<style lang="scss">
+@import 'polaris-react/src/components/DescriptionList/DescriptionList.scss';
+</style>

src/components/DescriptionList/DescriptionListDesc.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+dd(:class="className")
+  slot
+</template>
+
+<script setup lang="ts">
+import { classNames } from 'polaris-react/src/utilities/css';
+import styles from '@/classes/DescriptionList.json';
+
+const className = classNames(styles.Description);
+</script>

src/components/DescriptionList/DescriptionListTerm.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+dt(:class="className")
+  slot
+</template>
+
+<script setup lang="ts">
+import { classNames } from 'polaris-react/src/utilities/css';
+import styles from '@/classes/DescriptionList.json';
+
+const className = classNames(styles.Term);
+</script>

src/components/DescriptionList/README.stories.mdx

@@ -0,0 +1,74 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { DescriptionList, Dt, Dd } from '@/polaris-vue';
+import dedent from 'ts-dedent';
+
+<Meta
+  title="Components / Lists and tables  / Description List"
+  component={ DescriptionList }
+  argTypes={{
+    default: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  components: { DescriptionList, Dt, Dd },
+  setup() { return { args }; },
+  template: `<DescriptionList v-bind="args">
+    <Dt>Logistics</Dt>
+    <Dd>
+      The management of products or other resources as they travel between a point of origin and a destination.
+    </Dd>
+    <Dt>Sole proprietorship</Dt>
+    <Dd>
+      A business structure where a single individual both owns and runs the company.
+    </Dd>
+    <Dt>Discount code</Dt>
+    <Dd>
+      A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+    </Dd>
+  </DescriptionList>`,
+});
+
+# Description List
+
+Description lists are a way to organize and explain related information.
+They're particularly useful when you need to list and define terms such as in a glossary.
+
+<font color="#FF7900"><strong>Warning:</strong></font> Use component name as case-sensitive (<code>&lt;Dt&gt;</code> &amp; <code>&lt;Dd&gt;</code>) to prevent conflict with <code>&lt;dt&gt;</code> <code>&lt;dd&gt;</code> HTML element.
+
+<Canvas>
+  <Story
+    name="Description List"
+    height="60px"
+    parameters={{
+      docs: {
+        source: {
+          code: dedent`
+            <DescriptionList>
+              <Dt>Logistics</Dt>
+              <Dd>
+                The management of products or other resources as they travel between a point of origin and a destination.
+              </Dd>
+              <Dt>Sole proprietorship</Dt>
+              <Dd>
+                A business structure where a single individual both owns and runs the company.
+              </Dd>
+              <Dt>Discount code</Dt>
+              <Dd>
+                A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
+              </Dd>
+            </DescriptionList>
+          `,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Description List" />

src/components/DescriptionList/index.ts

@@ -0,0 +1,3 @@
+export { default as DescriptionList } from './DescriptionList.vue';
+export { default as Dt } from './DescriptionListTerm.vue';
+export { default as Dd } from './DescriptionListDesc.vue';

src/components/Heading/README.stories.mdx

@@ -31,11 +31,11 @@ For example, card components generally use headings as their title.
   }}
 />
 
-export const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+export const Template = (args) => ({
   components: { Heading },
+  setup() { return { args }; },
   template: `
-    <Heading v-bind="$props">
+    <Heading v-bind="args">
       Online store dashboard
     </Heading>
   `,

src/components/Select/Select.vue

@@ -80,7 +80,7 @@ Labelled(
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots, isProxy } from 'vue';
+import { computed, useSlots } from 'vue';
 import type { Action, Error } from '@/utilities/type';
 import { classNames } from 'polaris-react/src/utilities/css';
 import { UseUniqueId } from '@/use';

src/components/index.ts

@@ -16,6 +16,7 @@ export * from './Connected';
 export * from './ContextualSaveBar';
 export * from './CustomProperties';
 export * from './DatePicker';
+export * from './DescriptionList';
 export * from './DisplayText';
 export * from './EventListener';
 export * from './ExceptionList';