docs: link

qwikifiers · Oct 18, 2023 · e9a60b2 · e9a60b2
1 parent 08a38dd
commit e9a60b2
Showing 1 changed file with 12 additions and 102 deletions.
diff --git a/apps/docs/content/_components/link.md b/apps/docs/content/_components/link.md
@@ -14,43 +14,19 @@
 
 <Showcase showcase-name="Link/LinkVariants">
 
-::vue-only
-
-<<<../../../preview/nuxt/pages/showcases/Link/LinkVariants.vue
-
-::
-::react-only
-
-<<<../../../preview/next/pages/showcases/Link/LinkVariants.tsx
-
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Link/LinkVariants/index.tsx
-::
 
 </Showcase>
 
 ### Customization
 
 When using the `'secondary'` variant, the text color of the base state is inherited from the parent element.
 
-You can [customize your color palette](../customization/theming.html) as a part of your Tailwind config.
+<!-- You can [customize your color palette](../customization/theming.html) as a part of your Tailwind config. -->
 
 <Showcase showcase-name="Link/Customization">
 
-::vue-only
-
-<<<../../../preview/nuxt/pages/showcases/Link/Customization.vue
-
-::
-::react-only
-
-<<<../../../preview/next/pages/showcases/Link/Customization.tsx
-
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Link/Customization/index.tsx
-::
 
 </Showcase>
 
@@ -59,45 +35,11 @@ You can [customize your color palette](../customization/theming.html) as a part
 If you need more customization beyond the built-in variants, we recommend copying the `SfLink` [source code](#source) and modifying it to your needs. This way, you can have all the custom styles for your design system, but still be able to easily use all of our [Blocks](./blocks.html).
 ::
 
-## Accessibility notes
-
-::vue-only
-Link component can be rendered as an `<a>`, `<NuxtLink>`, or any other tag by providing it with prop `tag`.
-::
-
-::react-only
-Link component can be rendered as an `<a>`, `<NextLink>`, or any other tag by providing it with prop `as`.
-::
-
-::qwik-only
+<!-- ## Accessibility notes
 Link component can be rendered as an `<a>`, `<Link>`, or any other tag by providing it with prop `as`.
-::
 
 When no tag provided, the component will render as an `<a>`. To achieve proper accessibility it is important to implement required properties depending on the passed tag.
-
-::react-only
-
-### Usage with NextJS Link
-
-`SfLink` can be composed together with `NextJS` link component.
-
-<Showcase showcase-name="Link/NextLink">
-<<<../../../preview/next/pages/showcases/Link/NextLink.tsx
-</Showcase>
-::
-
-::vue-only
-
-### Usage with Nuxt Link
-
-You can use the `tag` prop to render component as `NuxtLink`.
-
-<Showcase showcase-name="Link/NuxtLink">
-<<<../../../preview/nuxt/pages/showcases/Link/NuxtLink.vue
-</Showcase>
-::
-
-::qwik-only
+-->
 
 ### Usage with Qwik Link
 
@@ -106,7 +48,6 @@ You can use the `tag` prop to render component as `NuxtLink`.
 <Showcase showcase-name="Link/QwikLink">
 <<<../../../website/src/routes/showcases/Link/QwikLink/index.tsx
 </Showcase>
-::
 
 ## Playground
 
@@ -116,46 +57,15 @@ You can use the `tag` prop to render component as `NuxtLink`.
 
 ## Props
 
-::vue-only
-| Prop name | Type | Default value | Possible values |
-| --------- | --------------- | ------------- | -------------------------- |
-| `variant` | `SfLinkVariant` | `'primary'` | `'primary'`, `'secondary'` |
-| `tag` | `string` | `'a'` | |
-::
-::react-only
-| Prop name | Type | Default value | Possible values |
-| --------- | --------------- | ------------- | -------------------------- |
-| `variant` | `SfLinkVariant` | `'primary'` | `'primary'`, `'secondary'` |
-| `as` | `ReactElement` | `'a'` | any tag name |
-| `children` | `ReactNode` | | Default slotted content |
-::
-::qwik-only
-| Prop name | Type | Default value | Possible values |
-| --------- | --------------- | ------------- | -------------------------- |
-| `variant` | `SfLinkVariant` | `'primary'` | `'primary'`, `'secondary'` |
-| `as` | `ReactElement` | `'a'` | any tag name |
-| `children` | `ReactNode` | | Default slotted content |
-::
-::vue-only
+| Prop name  | Type              | Default value | Possible values            |
+| ---------- | ----------------- | ------------- | -------------------------- |
+| `as?`      |                   |               |                            |
+| `ref?`     | `Signal<Element>` |               |                            |
+| `class?`   | `string`          |               |                            |
+| `variant?` | `SfLinkVariant`   | `'primary'`   | `'primary'`, `'secondary'` |
 
 ## Slots
 
-| Slot name | Description                  |
-| --------- | ---------------------------- |
-| `default` | replaces the default content |
-
-::
-
-#tab-3
-
-::vue-only
-
-<<<../../../../packages/sfui/frameworks/vue/components/SfLink/SfLink.vue
-
-::
-::react-only
-
-<<<../../../../packages/sfui/frameworks/react/components/SfLink/SfLink.tsx
-
-::
-::
+| Slot name | Description     |
+| --------- | --------------- |
+| `default` | Slotted content |