docs(tabs, skeleton, rich-text-editor, emoji, avatar): DLT-3347 update doc page code examples (#1221)

Author: jeverhart-dialpad

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleTabs.vue

@@ -1,5 +1,6 @@
 <template>
   <dt-tab-group
+    label="Label Example Group"
     :size="size"
     :inverted="inverted"
     :borderless="borderless"
@@ -12,26 +13,19 @@
         panel-id="2"
         selected
       >
-        <p>
-          First tab
-        </p>
+        First tab
       </dt-tab>
       <dt-tab
         id="3"
         panel-id="4"
       >
-        <p>
-          Second tab
-        </p>
+        Second tab
       </dt-tab>
       <dt-tab
         id="5"
         panel-id="6"
-        label="Third Label"
       >
-        <p>
-          Third tab
-        </p>
+        Third tab
       </dt-tab>
     </template>
     <div

apps/dialtone-documentation/docs/components/avatar.md

@@ -206,22 +206,22 @@ vueCode='
     <dt-icon-user :size="iconSize" />
   </template>
 </dt-avatar>
-<dt-avatar size="sm" icon-name="user">
+<dt-avatar size="sm">
   <template #icon="{ iconSize }">
     <dt-icon-user :size="iconSize" />
   </template>
 </dt-avatar>
-<dt-avatar size="md" icon-name="user">
+<dt-avatar size="md">
   <template #icon="{ iconSize }">
     <dt-icon-user :size="iconSize" />
   </template>
 </dt-avatar>
-<dt-avatar size="lg" icon-name="user">
+<dt-avatar size="lg">
   <template #icon="{ iconSize }">
     <dt-icon-user :size="iconSize" />
   </template>
 </dt-avatar>
-<dt-avatar size="xl" icon-name="user">
+<dt-avatar size="xl">
   <template #icon="{ iconSize }">
     <dt-icon-user :size="iconSize" />
   </template>

apps/dialtone-documentation/docs/components/emoji.md

@@ -23,7 +23,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-emoji--defau
 <code-example-tabs
 htmlCode='
 <div>
-  <span class="d-emoji d-icon d-icon--size-500" code=":smile:" size="500">
+  <span class="d-emoji d-icon d-icon--size-500">
     <div aria-busy="true" role="status" aria-label="" class="d-icon d-icon--size-500" style="display: none;">
       <div
         class="d-skeleton-placeholder d-bar-circle d-skeleton-placeholder--animate"
@@ -42,7 +42,7 @@ htmlCode='
 '
 vueCode='
 <dt-emoji
-  code="smile"
+  code=":smile:"
   size="500"
 />
 '

apps/dialtone-documentation/docs/components/rich-text-editor.md

@@ -23,8 +23,7 @@ vueCode='
   v-model="value"
   :editable="true"
   input-aria-label="this is a descriptive label"
-  :input-class="$attrs.inputClass"
-  :output-format="$attrs.outputFormat"
+  output-format="html"
   :auto-focus="false"
   placeholder="Type here..."
   :link="true"
@@ -117,12 +116,11 @@ vueCode='
   v-model="value"
   :editable="true"
   input-aria-label="this is a descriptive label"
-  :input-class="$attrs.inputClass"
-  :output-format="$attrs.outputFormat"
+  output-format="html"
   :auto-focus="false"
   placeholder="Type here..."
   :link="true"
-  :mentionSuggestion="{ items }"
+  :mention-suggestion="{ items }"
 />
 '
 />

apps/dialtone-documentation/docs/components/skeleton.md

@@ -60,29 +60,29 @@ figma: planned
 
 <code-well-header>
   <div class="d-w50p">
-    <dt-skeleton :animate="false" arial-label="Loading" ref="defaultExample" />
+    <dt-skeleton :animate="false" aria-label="Loading" ref="defaultExample" />
   </div>
 </code-well-header>
 
 <code-example-tabs
 :htmlCode="() => $refs.defaultExample"
 vueCode='
-<dt-skeleton :animate="false" arial-label="Loading" />
+<dt-skeleton :animate="false" aria-label="Loading" />
 '
 showHtmlWarning />
 
 ### Animation
 
 <code-well-header>
   <div class="d-w50p">
-    <dt-skeleton arial-label="Loading" ref="animationExample" />
+    <dt-skeleton aria-label="Loading" ref="animationExample" />
   </div>
 </code-well-header>
 
 <code-example-tabs
 :htmlCode="() => $refs.animationExample"
 vueCode='
-<dt-skeleton arial-label="Loading" />
+<dt-skeleton aria-label="Loading" />
 '
 />
 
@@ -98,7 +98,7 @@ To customize a non-animating Skeleton background color modify the `--placeholder
         style: '--placeholder-from-color: var(--dt-color-blue-400)',
       }"
       ref="customExample"
-      arial-label="Loading"
+      aria-label="Loading"
     />
   </div>
 </code-well-header>
@@ -111,7 +111,7 @@ vueCode='
   :text-option="{
     style: `--placeholder-from-color: var(--dt-color-blue-400)`,
   }"
-  arial-label="Loading"
+  aria-label="Loading"
 />
 '
 showHtmlWarning />
@@ -125,7 +125,7 @@ Customize an animating Skeleton by modifying the `--placeholder-from-color` and
         style: '--placeholder-from-color: var(--dt-color-blue-400); --placeholder-to-color: var(--dt-color-blue-200);',
       }"
       ref="customAnimateExample"
-      arial-label="Loading"
+      aria-label="Loading"
     />
   </div>
 </code-well-header>
@@ -137,7 +137,7 @@ vueCode='
   :text-option="{
     style: `--placeholder-from-color: var(--dt-color-blue-400); --placeholder-to-color: var(--dt-color-blue-200);`,
   }"
-  arial-label="Loading"
+  aria-label="Loading"
 />
 '
 showHtmlWarning />