From e4db658745c6a18ce2afd60bf413c2df6d9e7df7 Mon Sep 17 00:00:00 2001
From: Prashanth HN <prashanth@antstack.com>
Date: Fri, 16 Sep 2022 09:44:00 +0530
Subject: [PATCH] Updates to Documentation (#103)

* Update documentation for Badge, Card & List

* Improved docs for NativeSelect & TextArea

Co-authored-by: Prashanth HN <prashanth@192.168.0.44>
---
 docs/docs/components/badge.mdx        | 10 ++++----
 docs/docs/components/card.mdx         | 35 ++++++++++++---------------
 docs/docs/components/list.mdx         |  2 +-
 docs/docs/components/nativeSelect.mdx |  5 +---
 docs/docs/components/text-area.mdx    |  4 +--
 5 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/docs/docs/components/badge.mdx b/docs/docs/components/badge.mdx
index af0d9cf..752502f 100644
--- a/docs/docs/components/badge.mdx
+++ b/docs/docs/components/badge.mdx
@@ -68,14 +68,14 @@ import { Badge } from "@hover-design/react";
 ```jsx
 <div className="App">
   <Badge color="red" label="3" shape="rounded" position="top-end">
-    <Button variant="dark">Notifications</Button>
+    <Button variant="default">Notifications</Button>
   </Badge>
 </div>
 ```
 
 <div className="App">
   <Badge color="red" label="3" shape="rounded" position="top-end">
-    <Button variant="dark">Notifications</Button>
+    <Button variant="default">Notifications</Button>
   </Badge>
 </div>
 
@@ -86,17 +86,17 @@ import { Badge } from "@hover-design/react";
   <Button variant="dark">
     <Badge color="red" label="New" /> Profile
   </Button>
-  <Button variant="dark">
+  <Button variant="default">
     Notifications <Badge color="red" label="7" shape="rounded" />
   </Button>
 </div>
 ```
 
 <div className="App">
-  <Button variant="dark">
+  <Button variant="default">
     <Badge color="red" label="New" /> Profile
   </Button>
-  <Button variant="dark">
+  <Button variant="default">
     Notifications <Badge color="red" label="7" shape="rounded" />
   </Button>
 </div>
diff --git a/docs/docs/components/card.mdx b/docs/docs/components/card.mdx
index e4dfd76..e2fa6c8 100644
--- a/docs/docs/components/card.mdx
+++ b/docs/docs/components/card.mdx
@@ -16,75 +16,72 @@ import { Card } from "@hover-design/react";
 
 import "@hover-design/react/dist/style.css";
 import { Card } from "@hover-design/react";
-export const CardComponent = ({ variant, children }) => (
-  <Card variant={variant}>{children}</Card>
-);
 
 ```jsx
 <div className="App">
-  <CardComponent variant="plain">
+  <Card variant="plain">
     <h3>I am a card heading</h3>
     <p>I am card Content</p>
-  </CardComponent>
+  </Card>
 </div>
 ```
 
 <!-- ![Button](https://i.imgur.com/BeBATSh.jpg) -->
 
-<CardComponent variant="plain">
+<Card variant="plain">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 
 ##### Card Outline
 
 ```jsx
 <div className="App">
-  <CardComponent variant="outline">
+  <Card variant="outline">
     <h3>I am a card heading</h3>
     <p>I am card Content</p>
-  </CardComponent>
+  </Card>
 </div>
 ```
 
 <!-- ![Button](https://i.imgur.com/iGIVhXN.jpg) -->
 
-<CardComponent variant="outline">
+<Card variant="outline">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 
 ##### Card Solid
 
 ```jsx
-<CardComponent variant="solid">
+<Card variant="solid">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 ```
 
 <!-- ![Button](https://i.imgur.com/AbrmEdn.jpg) -->
 
-<CardComponent variant="solid">
+<Card variant="solid">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 
 ##### Card Shadow
 
 ```jsx
-<CardComponent variant="shadow">
+<Card variant="shadow">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 ```
 
 <!-- ![Button](https://i.imgur.com/iPfqa7x.jpg) -->
 
-<CardComponent variant="shadow">
+<Card variant="shadow">
   <h3>I am a card heading</h3>
   <p>I am card Content</p>
-</CardComponent>
+</Card>
 
 ### Props Referece
 
diff --git a/docs/docs/components/list.mdx b/docs/docs/components/list.mdx
index ece1eac..ff36113 100644
--- a/docs/docs/components/list.mdx
+++ b/docs/docs/components/list.mdx
@@ -98,5 +98,5 @@ export const ListItemComp = ({ variant, children }) => (
 | Attributes |                                                              Values                                                               | Optional ? |
 | :--------- | :-------------------------------------------------------------------------------------------------------------------------------: | ---------: |
 | variant    |                                                  `horizontal` &#124; `vertical`                                                   |        Yes |
-| type       | `square` &#124; `circle` &#124; `\1F44D` &#124; [listStyleType](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) |        Yes |
+| type       | `square` &#124; `circle` &#124; [`\1F44D`](https://www.w3schools.com/charsets/ref_emoji.asp) &#124; [listStyleType](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) |        Yes |
 | children   |                                                          React.Children                                                           |        Yes |
diff --git a/docs/docs/components/nativeSelect.mdx b/docs/docs/components/nativeSelect.mdx
index 0eb3e12..298f366 100644
--- a/docs/docs/components/nativeSelect.mdx
+++ b/docs/docs/components/nativeSelect.mdx
@@ -123,15 +123,12 @@ const options = [
 
 <div className="App">
   <NativeSelect
-    borderRadius={"50px"}
-    error="This is an error"
+    borderRadius={"60px"}
     options={options}
   />
 </div>;
 ```
 
-> Note: **error** can also be passed as a boolean.
-
 <NativeSelect
   borderRadius={"60px"}
   options={[
diff --git a/docs/docs/components/text-area.mdx b/docs/docs/components/text-area.mdx
index 15343a4..782e2f1 100644
--- a/docs/docs/components/text-area.mdx
+++ b/docs/docs/components/text-area.mdx
@@ -25,10 +25,10 @@ import { TextArea } from "@hover-design/react";
 ### Fixedsize
 
 ```jsx
-<TextArea placeholder="Fixedsize" fixedSize="true"></TextArea>
+<TextArea placeholder="Fixedsize" fixedSize={true}></TextArea>
 ```
 
-<TextArea placeholder="Fixedsize" fixedSize="true"></TextArea>
+<TextArea placeholder="Fixedsize" fixedSize={true}></TextArea>
 
 ### Rows & Cols