@ceed/ads 1.35.1 → 1.37.0

package/dist/components/navigation/Link.md

@@ -48,24 +48,26 @@ function MyComponent() {
 Links support four visual styles through the `variant` prop: `plain`, `outlined`, `soft`, and `solid`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: 16,
-  alignItems: 'center'
-}}>
-<Link variant="plain" href="#">
-  Plain
-</Link>
-<Link variant="outlined" href="#">
-  Outlined
-</Link>
-<Link variant="soft" href="#">
-  Soft
-</Link>
-<Link variant="solid" href="#">
-  Solid
-</Link>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: 16,
+      alignItems: "center"
+    }}
+  >
+    <Link variant="plain" href="#">
+      Plain
+    </Link>
+    <Link variant="outlined" href="#">
+      Outlined
+    </Link>
+    <Link variant="soft" href="#">
+      Soft
+    </Link>
+    <Link variant="solid" href="#">
+      Solid
+    </Link>
+  </div>
 ```
 
 ## Link Colors
@@ -73,27 +75,29 @@ Links support four visual styles through the `variant` prop: `plain`, `outlined`
 Apply semantic colors to communicate different purposes -- `primary`, `neutral`, `success`, `warning`, and `danger`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: 16,
-  alignItems: 'center'
-}}>
-<Link color="primary" href="#">
-  Primary
-</Link>
-<Link color="neutral" href="#">
-  Neutral
-</Link>
-<Link color="success" href="#">
-  Success
-</Link>
-<Link color="warning" href="#">
-  Warning
-</Link>
-<Link color="danger" href="#">
-  Danger
-</Link>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: 16,
+      alignItems: "center"
+    }}
+  >
+    <Link color="primary" href="#">
+      Primary
+    </Link>
+    <Link color="neutral" href="#">
+      Neutral
+    </Link>
+    <Link color="success" href="#">
+      Success
+    </Link>
+    <Link color="warning" href="#">
+      Warning
+    </Link>
+    <Link color="danger" href="#">
+      Danger
+    </Link>
+  </div>
 ```
 
 ## Link Underline Styles
@@ -101,21 +105,23 @@ Apply semantic colors to communicate different purposes -- `primary`, `neutral`,
 Control the underline behavior with three options: `none` (never shown), `hover` (shown on hover), and `always` (permanently visible).
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: 16,
-  alignItems: 'center'
-}}>
-<Link underline="none" href="#">
-  No underline
-</Link>
-<Link underline="hover" href="#">
-  Underline on hover
-</Link>
-<Link underline="always" href="#">
-  Always underlined
-</Link>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: 16,
+      alignItems: "center"
+    }}
+  >
+    <Link underline="none" href="#">
+      No underline
+    </Link>
+    <Link underline="hover" href="#">
+      Underline on hover
+    </Link>
+    <Link underline="always" href="#">
+      Always underlined
+    </Link>
+  </div>
 ```
 
 ## Link Typography Levels
@@ -123,37 +129,39 @@ Control the underline behavior with three options: `none` (never shown), `hover`
 Links can adopt any typography level from the design system, enabling consistent text hierarchies when links appear alongside headings or body text.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: 16,
-  alignItems: 'center',
-  flexWrap: 'wrap'
-}}>
-<Link level="h1" href="#">
-  Heading 1
-</Link>
-<Link level="h2" href="#">
-  Heading 2
-</Link>
-<Link level="h3" href="#">
-  Heading 3
-</Link>
-<Link level="h4" href="#">
-  Heading 4
-</Link>
-<Link level="body-lg" href="#">
-  Body Large
-</Link>
-<Link level="body-md" href="#">
-  Body Medium
-</Link>
-<Link level="body-sm" href="#">
-  Body Small
-</Link>
-<Link level="body-xs" href="#">
-  Body XS
-</Link>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: 16,
+      alignItems: "center",
+      flexWrap: "wrap"
+    }}
+  >
+    <Link level="h1" href="#">
+      Heading 1
+    </Link>
+    <Link level="h2" href="#">
+      Heading 2
+    </Link>
+    <Link level="h3" href="#">
+      Heading 3
+    </Link>
+    <Link level="h4" href="#">
+      Heading 4
+    </Link>
+    <Link level="body-lg" href="#">
+      Body Large
+    </Link>
+    <Link level="body-md" href="#">
+      Body Medium
+    </Link>
+    <Link level="body-sm" href="#">
+      Body Small
+    </Link>
+    <Link level="body-xs" href="#">
+      Body XS
+    </Link>
+  </div>
 ```
 
 ## Disabled Link
@@ -175,8 +183,8 @@ For links that navigate away from your application, include `target="_blank"` an
 
 ```tsx
 <Link href="https://example.com" target="_blank" rel="noopener noreferrer">
-  External Link ↗
-</Link>
+    External Link ↗
+  </Link>
 ```
 
 ## Link Inline with Text
@@ -184,11 +192,14 @@ For links that navigate away from your application, include `target="_blank"` an
 Links integrate seamlessly within paragraph text, inheriting the surrounding font styles.
 
 ```tsx
-<p style={{
-  margin: 0
-}}>
-This is a paragraph with an <Link href="#">inline link</Link> that flows naturally with the surrounding text.
-</p>
+<p
+    style={{
+      margin: 0
+    }}
+  >
+    This is a paragraph with an <Link href="#">inline link</Link> that flows naturally with the
+    surrounding text.
+  </p>
 ```
 
 ## Inline Text Links
@@ -197,8 +208,7 @@ This is a paragraph with an <Link href="#">inline link</Link> that flows natural
 function ArticleContent() {
   return (
     <Typography level="body-md">
-      For more information, visit our{' '}
-      <Link href="/services">services page</Link> or read the{' '}
+      For more information, visit our <Link href="/services">services page</Link> or read the{' '}
       <Link href="/faq">frequently asked questions</Link>.
     </Typography>
   );