Updates to Documentation (#103)

* Update documentation for Badge, Card & List * Improved docs for NativeSelect & TextArea Co-authored-by: Prashanth HN <[email protected]>
antstackio · Sep 16, 2022 · e4db658 · e4db658
1 parent 635199e
commit e4db658
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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