Standardize Documentation

README.md

@@ -91,11 +91,11 @@ function App() {
 
 ### General
 
-- [Banner](https://github.com/wri/wri-design-systems/tree/main/src/components/Banner)
 - [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
 - [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
 - [TabBar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
 - [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
+- [InlineMessage](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
 
 ### Buttons
 
@@ -111,7 +111,7 @@ function App() {
 
 ### Inputs
 
-- [Input](https://github.com/wri/wri-design-systems/tree/main/src/components/Input)
+- [TextInput](https://github.com/wri/wri-design-systems/tree/main/src/components/TextInput)
 - [Textarea](https://github.com/wri/wri-design-systems/tree/main/src/components/Textarea)
 
 ### Layers

src/components/Buttons/Button/README.md

@@ -13,10 +13,7 @@ import { Button } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Button
-  label='Save and Download'
-  variant='primary'
-/>
+<button label="Save and Download" variant="primary" />
 ```
 
 ## Props
@@ -41,59 +38,39 @@ type ButtonProps = Omit<
 ### Primary
 
 ```html
-<Button
-  label='Primary'
-  variant='primary'
-/>
+<button label="Primary" variant="primary" />
 ```
 
 ### Secondary
 
 ```html
-<Button
-  label='Secondary'
-  variant='secondary'
-/>
+<button label="Secondary" variant="secondary" />
 ```
 
 ### Borderless
 
 ```html
-<Button
-  label='Borderless'
-  variant='borderless'
-/>
+<button label="Borderless" variant="borderless" />
 ```
 
 ### Outline
 
 ```html
-<Button
-  label='Outline'
-  variant='outline'
-/>
+<button label="Outline" variant="outline" />
 ```
 
 ## Button Sizes
 
 ### Default
 
 ```html
-<Button
-  label="Primary"
-  size="default"
-  variant="primary"
-/>
+<button label="Primary" size="default" variant="primary" />
 ```
 
 ### Small
 
 ```html
-<Button
-  label="Primary"
-  size="small"
-  variant="primary"
-/>
+<button label="Primary" size="small" variant="primary" />
 ```
 
 ## Button with Icon
@@ -123,19 +100,11 @@ type ButtonProps = Omit<
 ### Disabled
 
 ```html
-<Button
-  label="Primary"
-  variant="primary"
-  disabled
-/>
+<button label="Primary" variant="primary" disabled />
 ```
 
 ### Loading state
 
 ```html
-<Button
-  label="Primary"
-  variant="primary"
-  loading
-/>
+<button label="Primary" variant="primary" loading />
 ```

src/components/Checkbox/README.md

@@ -13,12 +13,7 @@ import { Checkbox } from 'wri-design-systems'
 ## Usage
 
 ```html
-<Checkbox
-  name='Checkbox'
-  value='1'
->
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1"> Checkbox </Checkbox>
 ```
 
 ## Props
@@ -47,17 +42,13 @@ type CheckboxProps = Omit<
 ## Default Checked
 
 ```html
-<Checkbox name='Checkbox' value='1' defaultChecked>
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1" defaultChecked> Checkbox </Checkbox>
 ```
 
 ## Disabled
 
 ```html
-<Checkbox name='Checkbox' value='1' disabled>
-  Checkbox
-</Checkbox>
+<Checkbox name="Checkbox" value="1" disabled> Checkbox </Checkbox>
 ```
 
 ## Indeterminate
@@ -74,31 +65,21 @@ const indeterminate = values.some((value) => value.checked) && !allChecked
 ```
 
 ```html
-<Checkbox
-  ms="6"
-  checked={checked}
-  onCheckedChange={(e) => {
-    setValues((current) => {
-      const newValues = [...current]
-      newValues[index] = { ...newValues[index], checked: !!e.checked }
-      return newValues
-    })
-  }}
->
-  Item Checkbox
+<Checkbox ms="6" checked="{checked}" onCheckedChange="{(e)" ="">
+  { setValues((current) => { const newValues = [...current] newValues[index] = {
+  ...newValues[index], checked: !!e.checked } return newValues }) }} > Item
+  Checkbox
 </Checkbox>
 ```
 
 ```html
 <Checkbox
-  checked={allChecked}
-  indeterminate={indeterminate}
-  onCheckedChange={(e) => {
-    setValues((current) =>
-      current.map((value) => ({ ...value, checked: !!e.checked })),
-    )
-  }}
+  checked="{allChecked}"
+  indeterminate="{indeterminate}"
+  onCheckedChange="{(e)"
+  =""
 >
-  Main Checkbox
+  { setValues((current) => current.map((value) => ({ ...value, checked:
+  !!e.checked })), ) }} > Main Checkbox
 </Checkbox>
 ```

src/components/Banner/Banner.stories.tsx → src/components/InlineMessage/InlineMessage.stories.tsx

@@ -3,17 +3,17 @@ import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
-import Banner from '.'
+import InlineMessage from '.'
 
 const meta = {
-  title: 'Banner',
-  component: Banner,
+  title: 'Inline Message',
+  component: InlineMessage,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   args: { onActionClick: fn() },
-} satisfies Meta<typeof Banner>
+} satisfies Meta<typeof InlineMessage>
 
 export default meta
 type Story = StoryObj<typeof meta>