[Docs] [EuiStat] Incorrect reference to size property in example, s…

…hould be `titleSize` (#4742). (#4743)

* [Docs] [EuiStat] Incorrect reference to `size` property in example, should be `titleSize` (#4742).

* Fixing identation with prettier

* Adding all sizes into the example. Changing snippet to titleSize s

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>

src-docs/src/views/stat/stat_example.js

@@ -42,7 +42,7 @@ const statSizeHtml = renderToHtml(StatSize);
 const statSizeSnippet = `<EuiStat
   title="22,123"
   description="Total people"
-  size="xxl"
+  titleSize="s"
 />
 `;
 
@@ -155,10 +155,14 @@ export const StatExample = {
       text: (
         <p>
           <EuiCode>title</EuiCode> uses the <strong>EuiTitle</strong> component
-          and thus its sizing properites. Although all <strong>EuiTitle</strong>{' '}
-          sizes are available, suggested sizes include{' '}
-          <EuiCode language="ts">{"'l' | 'm' | 's'"}</EuiCode>. By default, the
-          size is set to large <EuiCode language="ts">{"'l'"}</EuiCode>. The{' '}
+          and thus uses the same sizing property values (applied via the{' '}
+          <EuiCode>titleSize</EuiCode> property). Although all{' '}
+          <strong>EuiTitle</strong> sizes are available, suggested sizes include{' '}
+          <EuiCode language="ts">
+            {"'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'"}
+          </EuiCode>
+          . By default, the size is set to large{' '}
+          <EuiCode language="ts">{"'l'"}</EuiCode>. The{' '}
           <EuiCode>description</EuiCode> label cannot be re-sized via component
           properties.
         </p>

src-docs/src/views/stat/stat_size.js

@@ -15,5 +15,28 @@ export default () => (
         <EuiStat title="1,000,000" description="Small size" titleSize="s" />
       </EuiFlexItem>
     </EuiFlexGroup>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Extra small size"
+          titleSize="xs"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Extra extra small size"
+          titleSize="xxs"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Extra extra extra small size"
+          titleSize="xxxs"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
 );