docs: minor fixes & badge docs updates (jd-solanki#120)

Co-authored-by: JD Solanki <47495003+jd-solanki@users.noreply.github.com>

docs/components/demos/card/DemoCardVariants.vue

@@ -17,9 +17,7 @@
       variant="light"
       color="primary"
       class="shadow-none"
-    >
-      <p>Awesome</p>
-    </ACard>
+    />
 
     <!-- 👉 Outline -->
     <ACard

docs/guide/components/alert.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/AAlert.json';
+import api from '@anu/component-meta/AAlert.json'
 </script>
 
 # Alert
@@ -42,7 +42,7 @@ You can use `variant="outline"` to create outlined alert.
 <!-- 👉 Icons -->
 ::::card Icons
 
-You can use `icon` prop to render icon in button.
+You can use `icon` prop to render icon in alert.
 
 Use `append-icon` prop to render icon after default slot.
 

docs/guide/components/avatar.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/AAvatar.json';
+import api from '@anu/component-meta/AAvatar.json'
 </script>
 
 # Avatar
@@ -20,7 +20,7 @@ Use `color` prop to change the avatar color.
 <!-- 👉 Fill -->
 ::::card Fill
 
-You can use `variant="fill"` to create avatar with filled background
+You can use `variant="fill"` to create avatar with filled background.
 
 :::code DemoAvatarFill
 <<< @/components/demos/avatar/DemoAvatarFill.vue{4,9,15}
@@ -30,7 +30,7 @@ You can use `variant="fill"` to create avatar with filled background
 <!-- 👉 Outlined -->
 ::::card Outlined
 
-You can use variant="outline" to create outlined avatar
+You can use `variant="outline"` to create outlined avatar.
 
 :::code DemoAvatarOutlined
 <<< @/components/demos/avatar/DemoAvatarOutlined.vue{4,9,15}
@@ -41,7 +41,7 @@ You can use variant="outline" to create outlined avatar
 <!-- 👉 Sizing -->
 ::::card Sizing
 
-You can use font-size utility to adjust the size of avatar
+You can use font-size utility to adjust the size of avatar.
 
 :::code DemoAvatarSizing
 <<< @/components/demos/avatar/DemoAvatarSizing.vue{5,9,13,17,21}
@@ -52,7 +52,7 @@ You can use font-size utility to adjust the size of avatar
 <!-- 👉 Roundness -->
 ::::card Roundness
 
-You can adjust avatar roundness using border-radius utilities
+You can adjust avatar roundness using border-radius utilities.
 
 :::code DemoAvatarRoundness
 <<< @/components/demos/avatar/DemoAvatarRoundness.vue{5,9,13,17,21}

docs/guide/components/badge.md

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ABadge.json';
+import api from '@anu/component-meta/ABadge.json'
 </script>
 
 # Badge
 
 <!-- 👉 Default -->
 ::::card Default
 
-Default variant for badge is `standard`
+Default color for badge is `primary`.
 
 :::code DemoBadgeDefault
 <<< @/components/demos/badge/DemoBadgeDefault.vue
@@ -18,7 +18,7 @@ Default variant for badge is `standard`
 <!-- 👉 Content -->
 ::::card Content
 
-Use the prop `content` to pass numeric values, if you want to use other data different than a number, use the slot `content` instead
+Use the prop `content` to pass numeric values, if you want to use other data different than a number use the slot `content` instead.
 
 :::code DemoBadgeContent
 <<< @/components/demos/badge/DemoBadgeContent.vue{3,8}
@@ -29,7 +29,7 @@ Use the prop `content` to pass numeric values, if you want to use other data dif
 <!-- 👉 v-model support -->
 ::::card v-model support
 
-You can use v-model to control hiding/showing the badge
+You can use v-model to control hiding/showing the badge.
 
 :::code DemoBadgeVModel
 <<< @/components/demos/badge/DemoBadgeVModel.vue{4,9}
@@ -51,7 +51,7 @@ You can use the `color` prop to change the badge color.
 <!-- 👉 Dot -->
 ::::card Dot
 
-Use the prop `variant` to transform the badge into a `dot`
+Use the prop `dot` to transform the badge into a dot.
 
 :::code DemoBadgeDot
 <<< @/components/demos/badge/DemoBadgeDot.vue{3}
@@ -62,7 +62,7 @@ Use the prop `variant` to transform the badge into a `dot`
 <!-- 👉 Anchor origin -->
 ::::card Anchor origin
 
-Change the position of the badge by passing `horizontal` and `vertical` values to the `anchor` prop.
+Change the position of the badge by passing `top/bottom` and `left/right` values to the `anchor` prop.
 
 :::code DemoBadgeAnchor
 <<< @/components/demos/badge/DemoBadgeAnchor.vue{5,11,17,23}
@@ -73,7 +73,7 @@ Change the position of the badge by passing `horizontal` and `vertical` values t
 <!-- 👉 Max -->
 ::::card Max
 
-Change the `max` prop to cap the numeric value of the content
+Change the `max` prop to cap the numeric value of the content.
 
 :::code DemoBadgeMax
 <<< @/components/demos/badge/DemoBadgeMax.vue{5,11,17}

docs/guide/components/rating.md

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ARating.json';
+import api from '@anu/component-meta/ARating.json'
 </script>
 
 # Rating
 
 <!-- 👉 Basic -->
 ::::card Basic
 
-Rating component allows users to rate content
+Rating component allows users to rate content.
 
 :::code DemoRatingBasic
 <<< @/components/demos/rating/DemoRatingBasic.vue{4,8}
@@ -18,7 +18,7 @@ Rating component allows users to rate content
 <!-- 👉 Colors -->
 ::::card Colors
 
-You can use `color` prop to change the rating color
+You can use `color` prop to change the rating color.
 
 :::code DemoRatingColor
 <<< @/components/demos/rating/DemoRatingColor.vue{10}

docs/guide/components/switch.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import api from '@anu/component-meta/ASwitch.json';
+import api from '@anu/component-meta/ASwitch.json'
 </script>
 
 # Switch
@@ -18,7 +18,7 @@ Use `ASwitch` component to create toggle for boolean value.
 <!-- 👉 Colors -->
 ::::card Colors
 
-You can use `color` prop to change the switch color
+You can use `color` prop to change the switch color.
 
 :::code DemoSwitchColors
 <<< @/components/demos/switch/DemoSwitchColors.vue{15,19,23,27,31}
@@ -42,7 +42,7 @@ Label and switch have `justify-between` added as this is how generally used but
 ::::
 
 :::tip
-You can also use default slot to render the label
+You can also use default slot to render the label.
 :::
 
 <!-- 👉 Icons -->
@@ -59,7 +59,7 @@ Use `on-icon` & `off-icon` prop to render icons inside switch dot.
 <!-- 👉 Sizing -->
 ::::card Sizing
 
-You can use font-size utility to adjust the size of switch
+You can use font-size utility to adjust the size of switch.
 
 :::code DemoSwitchSizing
 <<< @/components/demos/switch/DemoSwitchSizing.vue{16,20,25,29,33}
@@ -70,7 +70,7 @@ You can use font-size utility to adjust the size of switch
 <!-- 👉 States -->
 ::::card States
 
-You can use `disabled` prop to disable the switch
+You can use `disabled` prop to disable the switch.
 
 :::code DemoSwitchStates
 <<< @/components/demos/switch/DemoSwitchStates.vue{23,28}
@@ -81,7 +81,7 @@ You can use `disabled` prop to disable the switch
 <!-- 👉 Roundness -->
 ::::card Roundness
 
-You can adjust switch roundness using border-radius utilities
+You can adjust switch roundness using border-radius utilities.
 
 :::code DemoSwitchRoundness
 <<< @/components/demos/switch/DemoSwitchRoundness.vue{12,16}