Update docs

squidit · Aug 28, 2023 · 3beac48 · 3beac48
1 parent 5b5cbff
commit 3beac48
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 46 deletions.
diff --git a/src/components/sq-button/sq-button.component.md b/src/components/sq-button/sq-button.component.md
@@ -33,11 +33,6 @@
 - description: Button color text color
 - type: `string`
 
-### 5. textTransform (optional)
-
-- description: Text case
-- type: `string`
-
 ### 6. disabled (optional)
 
 - description: Input HTML attribute disabled and put a 'disabled' class
@@ -80,6 +75,11 @@
 - description: Input HTML attribute id
 - type: `string`
 
+### 14. textTransform (optional)
+
+- description: Text case
+- type: `string`
+
 ## Outputs
 
 ### 1. emitClick

diff --git a/src/components/sq-modal/sq-modal.component.md b/src/components/sq-modal/sq-modal.component.md
@@ -49,23 +49,23 @@
 ## Example
 
 ```html
-  <button (click)='modal = true'>Open Modal</button>
-  <sq-modal
-    (modalClose)='modal = false'
-    [open]='modal'
-  >
-    <!-- Modal Header -->
-    <ng-template #headerModal>
-      Header
-    </ng-template>
-    <!-- Modal Header -->
-    <!-- Modal Body -->
-    Content
-    <!-- Modal Body -->
-    <!-- Modal Footer -->
-    <ng-template #footerModal>
-      Footer
-    </ng-template>
-    <!-- Modal Footer -->
-  </sq-modal>
+<button (click)='modal = true'>Open Modal</button>
+<sq-modal
+  (modalClose)='modal = false'
+  [open]='modal'
+>
+  <!-- Modal Header -->
+  <ng-template #headerModal>
+    Header
+  </ng-template>
+  <!-- Modal Header -->
+  <!-- Modal Body -->
+  Content
+  <!-- Modal Body -->
+  <!-- Modal Footer -->
+  <ng-template #footerModal>
+    Footer
+  </ng-template>
+  <!-- Modal Footer -->
+</sq-modal>
 ```
diff --git a/src/components/sq-overlay/sq-overlay.component.md b/src/components/sq-overlay/sq-overlay.component.md
@@ -74,17 +74,17 @@
 ## Example
 
 ```html
-  <button (click)='overlay = true'>Open Overlay</button>
-  <sq-overlay
-    (overlayClose)='overlay = false'
-    [open]='overlay'
-  >
-    <ng-template #headerTemplate>
-      Header
-    </ng-template>
-    Content
-    <ng-template #footerTemplate>
-      Footer
-    </ng-template>
-  </sq-overlay>
+<button (click)='overlay = true'>Open Overlay</button>
+<sq-overlay
+  (overlayClose)='overlay = false'
+  [open]='overlay'
+>
+  <ng-template #headerTemplate>
+    Header
+  </ng-template>
+  Content
+  <ng-template #footerTemplate>
+    Footer
+  </ng-template>
+</sq-overlay>
 ```
diff --git a/src/components/sq-steps/sq-steps.component.md b/src/components/sq-steps/sq-steps.component.md
@@ -6,7 +6,6 @@
 
 - description: Color active
 - type: `string`
-- default: `#e83e8c`
 
 ### 2. click
 
@@ -21,10 +20,7 @@
 ### 4. steps
 
 - description: Array of steps, tip is a ngTooltip to do a short description
-- type: `Array<{
-    tip?: string,
-    status: string
-  }>`
+- type: `Step[]`
 
 ## Outputs
 

diff --git a/src/components/sq-tabs/sq-tab/sq-tab.component.md b/src/components/sq-tabs/sq-tab/sq-tab.component.md
@@ -11,8 +11,8 @@ Component that render a tab
 
 ### 2. active (optional)
 
-    - description: Set if this tab should be an actived tab
-    - type: `boolean`
+- description: Set if this tab should be an actived tab
+- type: `boolean`
 
 ### 3. color (optional)
 
@@ -40,3 +40,7 @@ Component that render a tab
 
 - description: Function to be executed when opening the tab
 - type: `function`
+
+```html
+<sq-tab [title]='Tab1'>ContentTab</sq-tab>
+```
diff --git a/src/components/sq-tabs/sq-tabs.component.md b/src/components/sq-tabs/sq-tabs.component.md
@@ -35,5 +35,18 @@ Component that renders tabs
 ## Example
 
 ```html
-
+<sq-tabs>
+  <sq-tab title='Tab 1'>
+    <h2>Content Tab</h2>
+  </sq-tab>
+  <sq-tab title='Tab 2'>
+    <h2>Content Tab</h2>
+  </sq-tab>
+  <sq-tab title='Tab 3'>
+    <h2>Content Tab</h2>
+  </sq-tab>
+  <sq-tab title='Tab 4'>
+    <h2>Content Tab</h2>
+  </sq-tab>
+</sq-tabs>
 ```
diff --git a/src/components/sq-tooltip/sq-tooltip.component.md b/src/components/sq-tooltip/sq-tooltip.component.md
@@ -40,5 +40,5 @@
 ## Example
 
 ```html
-<sq-tooltip message="Oie" placement="left center" color="var(--pink)"></sq-tooltip>
+<sq-tooltip message="Hello" placement="left center" color="var(--pink)"></sq-tooltip>
 ```