docs: add alternative components (#4109)

* docs: add alternative components * docs: edit comments
marigold-ui · Aug 15, 2024 · e6780b4 · e6780b4
1 parent 2486dac
commit e6780b4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 78 deletions.
diff --git a/docs/content/components/form/button/button.mdx b/docs/content/components/form/button/button.mdx
@@ -238,30 +238,10 @@ Each handler receives a `PressEvent`, providing details about the target and the
 
 <PropsTable component={title} />
 
-## Related
-
-<TeaserList
-  items={[
-    {
-      title: 'Link',
-      href: '/components/content/link',
-      caption: 'A component to navigate to another page.',
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="size-6"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-          />
-        </svg>
-      ),
-    },
-  ]}
-/>
+## Alternative components
+
+<ul>
+  <li>
+    [Link](/components/content/link): A component to navigate to another page.
+  </li>
+</ul>
diff --git a/docs/content/components/form/select/select.mdx b/docs/content/components/form/select/select.mdx
@@ -107,6 +107,25 @@ Keep in mind that you always should write information why a certain option is di
 
 <PropsTable component="ListBoxItem" />
 
+## Alternative components
+
+<ul>
+  <li>
+    [Autocomplete](/components/form/autocomplete): A searchfield that displays a
+    dynamic list of suggestions. Useful when there are more than 15 options and
+    you need to search for a specific value.
+  </li>
+  <li>
+    [Combobox](/components/form/combobox): A text field that allows the user to
+    select values from a provided items array. Useful when there are mote than
+    15 options.
+  </li>
+  <li>
+    [Radio](/components/form/radio): Component which allows to select only one
+    option from a list. Use it if you have less than 5 options.
+  </li>
+</ul>
+
 ## Related
 
 <TeaserList
@@ -132,55 +151,5 @@ Keep in mind that you always should write information why a certain option is di
         </svg>
       ),
     },
-    {
-      title: 'Radio group',
-      href: '../form/radio',
-      caption: 'Alternative for select with less options.',
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          className="size-6"
-        >
-          <path
-            fillRule="evenodd"
-            d="M2.625 6.75a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0A.75.75 0 0 1 8.25 6h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75ZM2.625 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0ZM7.5 12a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12A.75.75 0 0 1 7.5 12Zm-4.875 5.25a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75Z"
-            clipRule="evenodd"
-          />
-        </svg>
-      ),
-    },
-    {
-      title: 'Combobox',
-      href: '../form/combobox',
-      caption: 'Alternative for select with many options.',
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          className="size-6"
-        >
-          <path
-            fillRule="evenodd"
-            d="M2.625 6.75a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0A.75.75 0 0 1 8.25 6h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75ZM2.625 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0ZM7.5 12a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12A.75.75 0 0 1 7.5 12Zm-4.875 5.25a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75Z"
-            clipRule="evenodd"
-          />
-        </svg>
-      ),
-    },
-    {
-      title: 'Autocomplete',
-      href: '../form/autocomplete',
-      caption: 'Alternative for select with many options.',
-      icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-        <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-      </svg>
-
-      ),
-    },
-
-]}
+  ]}
 />