Update enum Avatar component & minor fixes docs

Author: juzser

src/components/Avatar/Avatar.vue

@@ -35,11 +35,7 @@ import { styleClass } from './utils';
 import { Image } from '../Image';
 import type { Size } from './utils';
 
-enum Status {
-  Pending = 'PENDING',
-  Loaded = 'LOADED',
-  Errored = 'ERRORED',
-}
+type Status = 'PENDING' | 'LOADED' | 'ERRORED';
 
 interface Props {
   /**
@@ -70,15 +66,15 @@ const props = withDefaults(defineProps<Props>(),{
 
 const emit = defineEmits<{ (event: 'error'): void }>();
 
-const status = ref<Status>(Status.Pending);
+const status = ref<Status>('PENDING');
 
 const svgPath = 'M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z';
 
 // Use `dominant-baseline: central` instead of `dy` when Edge supports it.
 const verticalOffset = '0.35em';
 
 const hasImage = computed(() => {
-  return props.source && status.value !== Status.Errored;
+  return props.source && status.value !== 'ERRORED';
 });
 
 const className =  computed(() => {
@@ -90,7 +86,7 @@ const className =  computed(() => {
     size && styles[size],
     !props.customer && styles[style],
     (hasImage.value || (props.initials && props.initials.length === 0))
-    && status.value !== Status.Loaded
+    && status.value !== 'LOADED'
     && styles.hidden,
     hasImage.value && styles.hasImage,
   );
@@ -107,11 +103,11 @@ const label = computed(() => {
 });
 
 const handleLoad = () => {
-  status.value = Status.Loaded;
+  status.value = 'LOADED';
 }
 
 const handleError = () => {
-  status.value = Status.Errored;
+  status.value = 'ERRORED';
   emit('error');
 }
 </script>

src/components/Button/Button.vue

@@ -169,7 +169,7 @@ const listeners = computed(() => {
   return eventBindings;
 });
 
-const hasChildren = !!slots.default
+const hasChildren = !!slots.default;
 
 const disclosureActive = ref<boolean>(false);
 
@@ -243,6 +243,7 @@ const buttonMarkupProps = computed(() => {
   const {
     removeUnderline, disclosure, loading, icon,
   } = props;
+
   return {
     commonProps: commonProps.value,
     linkProps: linkProps.value,

src/components/Button/utils.ts

@@ -36,7 +36,7 @@ export interface CommonButtonProps
   | 'ariaDescribedBy'
   | 'role'
   > {
-  className: UnstyledButtonProps['className'];
+  class: UnstyledButtonProps['className'];
 }
 
 export type LinkButtonProps = Pick<ButtonProps, 'url' | 'external' | 'download'>;

src/components/MediaCard/README.stories.mdx

@@ -3,7 +3,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { MediaCard } from '@/polaris-vue';
 
 <Meta
-  title="Components / Structure"
+  title="Components / Structure / Media card"
   component={ MediaCard }
   argTypes={{
     title: {

src/components/Page/README.stories.mdx

@@ -91,11 +91,12 @@ export const Template = (args) => ({
     const handleClick = () => {
       console.log('click');
     };
-    return { args, handleClick };
+    const { breadcrumbs, primaryAction, secondaryActions, actionGroups, pagination, ...rest } = args;
+    return { rest, handleClick };
   },
   template: `
     <Page
-      v-bind="args"
+      v-bind="rest"
       :breadcrumbs="[{content: 'Products', url: '/products'}]"
       :primaryAction="{ content: 'Save', disabled: true }"
       :secondaryActions="[{ content: 'Duplicate', onAction: handleClick }]"
@@ -147,6 +148,9 @@ Use pagination to let merchants move through an ordered collection of items that
         source: {
           code: dedent`
             <Page
+              :fullWidth="true"
+              title="3/4 inch Leather pet collar",
+              subtitle="Perfect for any pet",
               :breadcrumbs="[{content: 'Products', url: '/products'}]"
               :primaryAction="{ content: 'Save', disabled: true }"
               :secondaryActions="[{ content: 'Duplicate', onAction: handleClick }]"

src/components/PageActions/README.stories.mdx

@@ -3,7 +3,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { PageActions } from '@/polaris-vue';
 
 <Meta
-  title="Components / Structure / Page Actions"
+  title="Components / Structure / Page actions"
   component={ PageActions }
   argTypes={{
     secondaryActions: {
@@ -43,7 +43,7 @@ Page actions let merchants take key actions at the bottom of specific pages in t
 
 <Canvas>
   <Story
-    name="Page Actions"
+    name="Page actions"
     height="100px"
     parameters={{
       docs: {
@@ -67,4 +67,4 @@ Page actions let merchants take key actions at the bottom of specific pages in t
   </Story>
 </Canvas>
 
-<ArgsTable story="Page Actions" />
+<ArgsTable story="Page actions" />

src/components/SkeletonBodyText/README.stories.mdx

@@ -3,7 +3,7 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs'
 import {SkeletonBodyText} from '@/polaris-vue';
 
 <Meta
-  title="Components / Feedback indicators"
+  title="Components / Feedback indicators / Skeleton body text"
   component={SkeletonBodyText}
 />
 

src/components/SkeletonDisplayText/README.stories.mdx

@@ -3,7 +3,7 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs';
 import {SkeletonDisplayText} from '@/polaris-vue';
 
 <Meta
-  title="Components / Feedback indicators"
+  title="Components / Feedback indicators / Skeleton display text"
   component={ SkeletonDisplayText }
   argTypes={{
     size: {