chore: add Source Code tab (#32)

gioboa · web-flow · commit 635f80e6d350 · 2023-10-27T11:38:42.000+02:00
diff --git a/apps/docs/content/_components/WIP_ratingbutton.md b/apps/docs/content/_components/WIP_ratingbutton.md
@@ -2,7 +2,7 @@
 
 The RatingButton component is an interactive input element specifically designed for evaluations on product pages. It provides users with the ability to select a rating by choosing an icon using either the cursor or keyboard input. The number of icons displayed and the actual icon used can be customized based on your specific requirements. The rating scale within the component operates from left to right.
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
diff --git a/apps/docs/content/_components/WIP_scrollable.md b/apps/docs/content/_components/WIP_scrollable.md
diff --git a/apps/docs/content/_components/WIP_select.md b/apps/docs/content/_components/WIP_select.md
@@ -1,6 +1,6 @@
 # Select
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
diff --git a/apps/docs/content/_components/WIP_thumbnail.md b/apps/docs/content/_components/WIP_thumbnail.md
diff --git a/apps/docs/content/_components/WIP_tooltip.md b/apps/docs/content/_components/WIP_tooltip.md
diff --git a/apps/docs/content/_components/accordionitem.md b/apps/docs/content/_components/accordionitem.md
@@ -1,6 +1,6 @@
 # AccordionItem
 
-::tabs{:titles='["Usage", "API", "Source"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 The `SfAccordionItem` component is a wrapper around the native `<details>` and `<summary>` HTML elements. It allows you to create an accordion component that expands and collapses content.
diff --git a/apps/docs/content/_components/badge.md b/apps/docs/content/_components/badge.md
@@ -1,6 +1,6 @@
 # Badge
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -64,3 +64,9 @@ The component itself does not provide any specific accessibility features. Pleas
 | `max`       | `number`           | `99`          |                                                        |
 | `variant`   | `SfBadgeVariant`   | `standard`    | `standard`, `dot`                                      |
 | `placement` | `SfBadgePlacement` | `top-right`   | `top-right`, `top-left`, `bottom-right`, `bottom-left` |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx
diff --git a/apps/docs/content/_components/button.md b/apps/docs/content/_components/button.md
@@ -1,6 +1,6 @@
 # Button
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -101,3 +101,9 @@ If you need to use Button with non-`<button>` tags like `<div>` you need to add
 | `prefix`  | Left side slotted content  |
 | `default` | Slotted content            |
 | `suffix`  | Right side slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfButton/SfButton.tsx
diff --git a/apps/docs/content/_components/checkbox.md b/apps/docs/content/_components/checkbox.md
@@ -1,6 +1,6 @@
 # Checkbox
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -55,3 +55,9 @@ It's focusable and can be toggled with `Space`. -->
 | `ref?`       | `Signal<Element>`                                                  |               |                 |
 | `invalid`    | `boolean`                                                          | `false`       |                 |
 | `onChange$?` | `PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>` |               |                 |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfCheckbox/SfCheckbox.tsx
diff --git a/apps/docs/content/_components/chip.md b/apps/docs/content/_components/chip.md
@@ -4,7 +4,7 @@
 This component is shipped in our NPM package, but its API might change based on user feedback.
 :::
 
-::tabs{:titles='["Usage", "API"]' class="mt-8"}
+::tabs{:titles='["Usage", "API", "Source code"]' class="mt-8"}
 
 #tab-1
 
@@ -94,3 +94,9 @@ When using `SfChip` without any text label/description inside, you should specif
 | `prefix`  | Left side slotted content  |
 | `default` | Slotted content            |
 | `suffix`  | Right side slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfChip/SfChip.tsx
diff --git a/apps/docs/content/_components/counter.md b/apps/docs/content/_components/counter.md
@@ -1,6 +1,6 @@
 # Counter
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -63,3 +63,9 @@ The root element of `SfCounter` is a `<span>`. Since a `<span>` is an inline ele
 | Slot name | Description                     |
 | --------- | ------------------------------- |
 | `default` | To be filled with counter value |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfCounter/SfCounter.tsx
diff --git a/apps/docs/content/_components/drawer.md b/apps/docs/content/_components/drawer.md
@@ -1,6 +1,6 @@
 # Drawer
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -62,3 +62,9 @@ The component is providing keyboard accessibility with `@keydown.esc="onEscKeyDo
 | Slot name | Description             |
 | --------- | ----------------------- |
 | `default` | Place content of drawer |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfDrawer/SfDrawer.tsx
diff --git a/apps/docs/content/_components/dropdown.md b/apps/docs/content/_components/dropdown.md
@@ -1,6 +1,6 @@
 # Dropdown
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -41,3 +41,9 @@ The floating content area has an `aria-hidden` attribute that reflects the visib
 | `class?`    | `string`                                |               |                 |
 | `open?`     | `boolean`                               |               |                 |
 | `onClose$?` | `PropFunction<() => void>`              |               |                 |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfDropdown/SfDropdown.tsx
diff --git a/apps/docs/content/_components/iconbase.md b/apps/docs/content/_components/iconbase.md
@@ -1,6 +1,6 @@
 # Icons
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -75,3 +75,9 @@ When using an Icon without any additional label and/or description, you should s
 | Slot name | Description                                |
 | --------- | ------------------------------------------ |
 | `default` | Content of an SVG, e.g. `<path d='...'/>`. |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfIconBase/SfIconBase.tsx
diff --git a/apps/docs/content/_components/input.md b/apps/docs/content/_components/input.md
@@ -1,6 +1,6 @@
 # Input
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -113,3 +113,9 @@ Avoid adding `div` tags to slots. If an input element is wrapped in `label` tag
 | `prefix`  | Left side slotted content  |
 | `default` | Slotted content            |
 | `suffix`  | Right side slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfInput/SfInput.tsx
diff --git a/apps/docs/content/_components/link.md b/apps/docs/content/_components/link.md
@@ -1,6 +1,6 @@
 # Link
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -69,3 +69,9 @@ When no tag provided, the component will render as an `<a>`. To achieve proper a
 | Slot name | Description     |
 | --------- | --------------- |
 | `default` | Slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfLink/SfLink.tsx
diff --git a/apps/docs/content/_components/listitem.md b/apps/docs/content/_components/listitem.md
@@ -1,6 +1,6 @@
 # ListItem
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -71,3 +71,9 @@ When no tag provided, the component will render as an `<li>`. To achieve proper
 | `prefix`  | Left side slotted content  |
 | `default` | Slotted content            |
 | `suffix`  | Right side slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfListItem/SfListItem.tsx
diff --git a/apps/docs/content/_components/loadercircular.md b/apps/docs/content/_components/loadercircular.md
@@ -1,6 +1,6 @@
 # LoaderCircular
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -55,3 +55,9 @@ It's important to properly set `aria-label` for screen readers to read proper in
 | `class`     | `string`       |               |                                                              |
 | `size`      | `SfLoaderSize` | `'base'`      | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
 | `ariaLabel` | `string`       | `'loading'`   |                                                              |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfLoaderCircular/SfLoaderCircular.tsx
diff --git a/apps/docs/content/_components/loaderlinear.md b/apps/docs/content/_components/loaderlinear.md
@@ -1,6 +1,6 @@
 # LoaderLinear
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -59,3 +59,9 @@ It's important to properly set `aria-label` for screen readers to read proper in
 | `class`     | `string`             |               |                                                                           |
 | `size`      | `SfLoaderLinearSize` | `'base'`      | `'minimal'`, `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'`,`'2xl'`,`'3xl'`,`'4xl'` |
 | `ariaLabel` | `string`             | `'loading'`   |                                                                           |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfLoaderLinear/SfLoaderLinear.tsx
diff --git a/apps/docs/content/_components/modal.md b/apps/docs/content/_components/modal.md
@@ -1,6 +1,6 @@
 # Modal
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -84,3 +84,9 @@ Both techniques can be seen in the code examples above.
 | Slot name | Description     |
 | --------- | --------------- |
 | `default` | Slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfModal/SfModal.tsx
diff --git a/apps/docs/content/_components/progresscircular.md b/apps/docs/content/_components/progresscircular.md
@@ -1,6 +1,6 @@
 # ProgressCircular
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -78,3 +78,9 @@ This component sets the `role="progressbar"` to [allow screen readers treat it a
 | Slot name | Description     |
 | --------- | --------------- |
 | `default` | Slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfProgressCircular/SfProgressCircular.tsx
diff --git a/apps/docs/content/_components/progresslinear.md b/apps/docs/content/_components/progresslinear.md
@@ -1,6 +1,6 @@
 # ProgressLinear
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -74,3 +74,9 @@ ProgressLinear uses native [`<progress>`](https://developer.mozilla.org/en-US/do
 | Slot name | Description     |
 | --------- | --------------- |
 | `default` | Slotted content |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfProgressLinear/SfProgressLinear.tsx
diff --git a/apps/docs/content/_components/radio.md b/apps/docs/content/_components/radio.md
@@ -1,6 +1,6 @@
 # Radio
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -85,3 +85,9 @@ If you have an element that is not an `<input type="radio">`, you should set the
 | `ref?`      | `Signal<Element>`                                                  |               |                 |
 | `invalid?`  | `boolean`                                                          | `false`       |                 |
 | `onChange$` | `PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>` |               |                 |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfRadio/SfRadio.tsx
diff --git a/apps/docs/content/_components/rating.md b/apps/docs/content/_components/rating.md
@@ -1,6 +1,6 @@
 # Rating
 
-::tabs{:titles='["Usage", "API"]'}
+::tabs{:titles='["Usage", "API", "Source code"]'}
 
 #tab-1
 
@@ -76,3 +76,9 @@ For better out-of-the-box accessibility, `SfRating` adds `role="img"` and an `ar
 | `size?`          | `SfRatingSize` | `'base'`      | `'xs'`,`'sm'`,`'base'`,`'lg'`,`'xl'` |
 | `halfIncrement?` | `boolean`      | `false`       |                                      |
 | `ariaLabel?`     | `string`       |               |                                      |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfRating/SfRating.tsx
diff --git a/apps/docs/content/_components/switch.md b/apps/docs/content/_components/switch.md
@@ -1,6 +1,6 @@
 # Switch
 
-::tabs{:titles='["Usage", "API"]' class="mt-8"}
+::tabs{:titles='["Usage", "API", "Source code"]' class="mt-8"}
 
 #tab-1
 
@@ -62,3 +62,9 @@ By default, it comes with a `role="switch"` attribute. This is useful for screen
 | `class?`    | `string`                                                           |               |                 |
 | `invalid?`  | `boolean`                                                          |               |                 |
 | `onChange$` | `PropFunction<(event: QwikChangeEvent<HTMLInputElement>) => void>` |               |                 |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfSwitch/SfSwitch.tsx
diff --git a/apps/docs/content/_components/textarea.md b/apps/docs/content/_components/textarea.md
@@ -1,6 +1,6 @@
 # Textarea component
 
-::tabs{:titles='["Usage", "API"]' class="mt-8"}
+::tabs{:titles='["Usage", "API", "Source code"]' class="mt-8"}
 
 #tab-1
 
@@ -77,3 +77,9 @@ Textarea is multi-line input, so Return or Enter key inserts a line break.
 | `invalid?`      | `boolean`                              |               |                          |
 | `wrapperClass?` | `string[]`                             |               |                          |
 | `style?`        | `CSSProperties`                        |               |                          |
+
+#tab-3
+
+## Source code
+
+<<<../../../../packages/qwik-storefront-ui/src/components/SfTextArea/SfTextArea.tsx
