Component preview: Link (#164)

stellar · Aug 14, 2023 · 91b084d · 91b084d
1 parent 8b34c20
commit 91b084d
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 8 deletions.
diff --git a/@stellar/design-system-website/docs/components/buttons/link.mdx b/@stellar/design-system-website/docs/components/buttons/link.mdx
@@ -8,7 +8,11 @@ slug: /link
 
 ## Example
 
-TODO:
+```tsx live
+<PreviewBlock componentName="Link">
+  <Link>Link</Link>
+</PreviewBlock>
+```
 
 ## Props
 

diff --git a/...te/src/componentPreview/ButtonPreview.tsx → ...te/src/componentPreview/buttonPreview.tsx b/...te/src/componentPreview/ButtonPreview.tsx → ...te/src/componentPreview/buttonPreview.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentPreview } from "@site/src/components/PreviewBlock";
 import CheckIconSvg from "@site/static/img/check-icon.svg";
 
-export const ButtonPreview: ComponentPreview = {
+export const buttonPreview: ComponentPreview = {
   options: [
     {
       type: "select",

diff --git a/@stellar/design-system-website/src/componentPreview/linkPreview.tsx b/@stellar/design-system-website/src/componentPreview/linkPreview.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+import CheckIconSvg from "@site/static/img/check-icon.svg";
+
+export const linkPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "primary",
+          label: "Primary",
+        },
+        {
+          value: "secondary",
+          label: "Secondary",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+        {
+          value: "",
+          label: "Inherit",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "isDisabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "isUnderline",
+      label: "Underline",
+    },
+    {
+      type: "checkbox",
+      prop: "isUppercase",
+      label: "Uppercase",
+    },
+    {
+      type: "select",
+      prop: "icon",
+      customValue: <CheckIconSvg />,
+      clearProp: "iconPosition",
+      options: [
+        {
+          value: "",
+          label: "No icon",
+        },
+        {
+          value: '{"iconPosition": "right"}',
+          label: "Icon right",
+        },
+        {
+          value: '{"iconPosition": "left"}',
+          label: "Icon left",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -4,7 +4,8 @@ import { PlaygroundEditor } from "@site/src/theme/Playground";
 import "./styles.css";
 
 // Previews
-import { ButtonPreview } from "@site/src/componentPreview/ButtonPreview";
+import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
+import { linkPreview } from "@site/src/componentPreview/linkPreview";
 
 type Theme = "sds-theme-light" | "sds-theme-dark";
 
@@ -62,7 +63,8 @@ export const PreviewBlock = ({
 
   // All component previews
   const previews: { [key: string]: ComponentPreview } = {
-    Button: ButtonPreview,
+    Button: buttonPreview,
+    Link: linkPreview,
   };
 
   const compPreview = previews[componentName];
@@ -203,11 +205,13 @@ export const PreviewBlock = ({
 
         <div className="PreviewBlock__component">{component}</div>
 
-        <div className="PreviewBlock__checkboxes">
-          <div className="PreviewBlock__checkboxes__content">
-            {options.checkbox.map((o) => renderCheckbox(o))}
+        {options.checkbox.length > 0 ? (
+          <div className="PreviewBlock__checkboxes">
+            <div className="PreviewBlock__checkboxes__content">
+              {options.checkbox.map((o) => renderCheckbox(o))}
+            </div>
           </div>
-        </div>
+        ) : null}
       </div>
 
       <PlaygroundEditor>{reactElementToJSXString(component)}</PlaygroundEditor>

diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css
@@ -66,3 +66,8 @@
     width: auto;
   }
 }
+
+/* Overrides */
+.PreviewBlock .Link--underline {
+  text-decoration: underline !important;
+}