@ceed/cds 1.34.1 → 1.36.0-next.1

package/dist/components/data-display/InfoSign.md

@@ -26,9 +26,7 @@ function MyComponent() {
   return (
     <label>
       Complex Setting
-      <InfoSign
-        message="This setting affects overall system performance. Consult an administrator before making changes."
-      />
+      <InfoSign message="This setting affects overall system performance. Consult an administrator before making changes." />
     </label>
   );
 }

package/dist/components/data-display/Markdown.md

@@ -33,13 +33,7 @@ Markdown is a component that renders markdown-formatted text as styled React com
 import { Markdown } from '@ceed/cds';
 
 function ArticleContent({ content }) {
-  return (
-    <Markdown
-      content={content}
-      defaultLevel="body-md"
-      defaultLinkAction="_blank"
-    />
-  );
+  return <Markdown content={content} defaultLevel="body-md" defaultLinkAction="_blank" />;
 }
 ```
 
@@ -61,14 +55,14 @@ Control the base typography level for the content.
 
 ```tsx
 <Stack spacing={2}>
-  <Markdown {...args} defaultLevel="title-lg" />
-  <Markdown {...args} defaultLevel="title-md" />
-  <Markdown {...args} defaultLevel="title-sm" />
-  <Markdown {...args} defaultLevel="body-lg" />
-  <Markdown {...args} defaultLevel="body-md" />
-  <Markdown {...args} defaultLevel="body-sm" />
-  <Markdown {...args} defaultLevel="body-xs" />
-</Stack>
+    <Markdown {...args} defaultLevel="title-lg" />
+    <Markdown {...args} defaultLevel="title-md" />
+    <Markdown {...args} defaultLevel="title-sm" />
+    <Markdown {...args} defaultLevel="body-lg" />
+    <Markdown {...args} defaultLevel="body-md" />
+    <Markdown {...args} defaultLevel="body-sm" />
+    <Markdown {...args} defaultLevel="body-xs" />
+  </Stack>
 ```
 
 ### Text Alignment
@@ -88,12 +82,12 @@ Apply different color themes to the markdown content.
 
 ```tsx
 <div>
-  <Markdown {...args} color="primary" />
-  <Markdown {...args} color="danger" />
-  <Markdown {...args} color="neutral" />
-  <Markdown {...args} color="success" />
-  <Markdown {...args} color="warning" />
-</div>
+    <Markdown {...args} color="primary" />
+    <Markdown {...args} color="danger" />
+    <Markdown {...args} color="neutral" />
+    <Markdown {...args} color="success" />
+    <Markdown {...args} color="warning" />
+  </div>
 ```
 
 ### Text Color
@@ -102,10 +96,10 @@ Use specific text colors from the theme palette.
 
 ```tsx
 <Stack>
-  <Markdown {...args} textColor="common.black" />
-  <Markdown {...args} textColor="danger.400" />
-  <Markdown {...args} textColor="primary.500" />
-</Stack>
+    <Markdown {...args} textColor="common.black" />
+    <Markdown {...args} textColor="danger.400" />
+    <Markdown {...args} textColor="primary.500" />
+  </Stack>
 ```
 
 ### Accent Color
@@ -114,9 +108,9 @@ Highlight text with custom accent color using `||text||` syntax.
 
 ```tsx
 <Stack spacing={2}>
-  <Markdown {...args} />
-  <Markdown {...args} fontWeight={600} />
-</Stack>
+    <Markdown {...args} />
+    <Markdown {...args} fontWeight={600} />
+  </Stack>
 ```
 
 ### Bold Font Weight
@@ -125,18 +119,18 @@ Customize the weight of bold text.
 
 ```tsx
 <Stack spacing={2}>
-  <Typography fontWeight="normal">Normal:</Typography>
-  <Markdown {...args} />
+    <Typography fontWeight="normal">Normal:</Typography>
+    <Markdown {...args} />
 
-  <Typography fontWeight="sm">SM:</Typography>
-  <Markdown {...args} boldFontWeight="sm" />
-  <Typography fontWeight="md">MD:</Typography>
-  <Markdown {...args} boldFontWeight="md" />
-  <Typography fontWeight="lg">LG:</Typography>
-  <Markdown {...args} boldFontWeight="lg" />
-  <Typography fontWeight="xl">XL:</Typography>
-  <Markdown {...args} boldFontWeight="xl" />
-</Stack>
+    <Typography fontWeight="sm">SM:</Typography>
+    <Markdown {...args} boldFontWeight="sm" />
+    <Typography fontWeight="md">MD:</Typography>
+    <Markdown {...args} boldFontWeight="md" />
+    <Typography fontWeight="lg">LG:</Typography>
+    <Markdown {...args} boldFontWeight="lg" />
+    <Typography fontWeight="xl">XL:</Typography>
+    <Markdown {...args} boldFontWeight="xl" />
+  </Stack>
 ```
 
 ### Strikethrough
@@ -212,28 +206,41 @@ Full demonstration of all GFM features.
 Override the built-in anchor renderer via `markdownOptions.components.a` to detect external links by origin comparison, open them in a new tab, and prepend an `OpenInNew` icon so users can tell external links apart at a glance. Internal links keep `defaultLinkAction` behavior and render without the icon.
 
 ```tsx
-<Markdown {...args} markdownOptions={{
-  components: {
-    a: ({
-      href,
-      children
-    }) => {
-      const isExternal = (() => {
-        if (!href || typeof window === 'undefined') return false;
-        try {
-          return new URL(href, window.location.href).origin !== window.location.origin;
-        } catch {
-          return false;
+<Markdown
+    {...args}
+    markdownOptions={{
+      components: {
+        a: ({ href, children }) => {
+          const isExternal = (() => {
+            if (!href || typeof window === "undefined") return false;
+            try {
+              return new URL(href, window.location.href).origin !== window.location.origin;
+            } catch {
+              return false;
+            }
+          })();
+          return (
+            <Link
+              href={href}
+              target={isExternal ? "_blank" : "_self"}
+              rel={isExternal ? "noopener noreferrer" : undefined}
+              startDecorator={
+                isExternal ? (
+                  <OpenInNew
+                    sx={{
+                      fontSize: "1em"
+                    }}
+                  />
+                ) : undefined
+              }
+            >
+              {children}
+            </Link>
+          );
         }
-      })();
-      return <Link href={href} target={isExternal ? '_blank' : '_self'} rel={isExternal ? 'noopener noreferrer' : undefined} startDecorator={isExternal ? <OpenInNew sx={{
-        fontSize: '1em'
-      }} /> : undefined}>
-      {children}
-    </Link>;
-  }
-}
-}} />
+      }
+    }}
+  />
 ```
 
 ```tsx
@@ -266,7 +273,7 @@ import { Markdown, Link } from '@ceed/cds';
       },
     },
   }}
-/>
+/>;
 ```
 
 ## When to Use
@@ -309,11 +316,7 @@ function ArticlePage({ article }) {
         </Typography>
       </Stack>
       <Divider sx={{ mb: 3 }} />
-      <Markdown
-        content={article.body}
-        defaultLevel="body-md"
-        defaultLinkAction="_blank"
-      />
+      <Markdown content={article.body} defaultLevel="body-md" defaultLinkAction="_blank" />
     </Box>
   );
 }
@@ -335,10 +338,7 @@ function Comment({ comment }) {
             </Typography>
           </Box>
         </Stack>
-        <Markdown
-          content={comment.body}
-          defaultLevel="body-sm"
-        />
+        <Markdown content={comment.body} defaultLevel="body-sm" />
       </CardContent>
     </Card>
   );
@@ -354,11 +354,7 @@ function ReleaseNotes({ version, notes }) {
       <Typography level="h2" sx={{ mb: 2 }}>
         Version {version}
       </Typography>
-      <Markdown
-        content={notes}
-        defaultLevel="body-md"
-        accentColor="success.500"
-      />
+      <Markdown content={notes} defaultLevel="body-md" accentColor="success.500" />
     </Box>
   );
 }
@@ -392,11 +388,7 @@ function HelpArticle({ title, content }) {
       <Typography level="h1" sx={{ mb: 3 }}>
         {title}
       </Typography>
-      <Markdown
-        content={content}
-        defaultLevel="body-md"
-        defaultLinkAction="_blank"
-      />
+      <Markdown content={content} defaultLevel="body-md" defaultLinkAction="_blank" />
     </Container>
   );
 }
@@ -441,10 +433,7 @@ function TaskDetails({ task }) {
         <Typography level="title-lg" sx={{ mb: 2 }}>
           {task.title}
         </Typography>
-        <Markdown
-          content={task.description}
-          defaultLevel="body-sm"
-        />
+        <Markdown content={task.description} defaultLevel="body-sm" />
       </CardContent>
     </Card>
   );
@@ -473,10 +462,7 @@ Make sure to follow the ||coding standards|| and add proper error handling.
 ```tsx
 function NotificationDetail({ notification }) {
   return (
-    <Alert
-      color={notification.type}
-      sx={{ mb: 2 }}
-    >
+    <Alert color={notification.type} sx={{ mb: 2 }}>
       <Markdown
         content={notification.message}
         defaultLevel="body-sm"
@@ -504,11 +490,7 @@ function EmailPreview({ subject, body }) {
           {subject}
         </Typography>
         <Divider sx={{ mb: 2 }} />
-        <Markdown
-          content={body}
-          defaultLevel="body-md"
-          defaultLinkAction="_blank"
-        />
+        <Markdown content={body} defaultLevel="body-md" defaultLinkAction="_blank" />
       </CardContent>
     </Card>
   );
@@ -525,10 +507,7 @@ function APIDocumentation({ endpoint }) {
       <Chip color="primary" sx={{ mb: 2 }}>
         {endpoint.method}
       </Chip>
-      <Markdown
-        content={endpoint.description}
-        defaultLevel="body-md"
-      />
+      <Markdown content={endpoint.description} defaultLevel="body-md" />
     </Box>
   );
 }
@@ -584,7 +563,7 @@ curl -X POST https://api.example.com/users \\
 ## Text Formatting
 
 **Bold text** using `**text**`
-*Italic text* using `*text*`
+_Italic text_ using `*text*`
 ~Strikethrough~ using `~text~`
 `Inline code` using backticks
 ||Accent color|| using `||text||`
@@ -592,7 +571,9 @@ curl -X POST https://api.example.com/users \\
 ## Headings
 
 # Heading 1
+
 ## Heading 2
+
 ### Heading 3
 
 ## Links
@@ -603,16 +584,19 @@ https://auto-linked-url.com
 ## Lists
 
 ### Unordered
+
 - Item 1
 - Item 2
   - Nested item
 
 ### Ordered
+
 1. First
 2. Second
 3. Third
 
 ### Task List
+
 - [x] Completed
 - [ ] Pending
 
@@ -625,6 +609,7 @@ https://auto-linked-url.com
 
 ```javascript
 const code = 'highlighted';
+```
 ````
 
 ## Tables
@@ -709,10 +694,7 @@ Markdown renders semantic HTML elements with proper accessibility:
 ```tsx
 // Links opening in new tabs should have proper attributes
 // The component handles rel="noopener noreferrer" automatically
-<Markdown
-  content="[External link](https://example.com)"
-  defaultLinkAction="_blank"
-/>
+<Markdown content="[External link](https://example.com)" defaultLinkAction="_blank" />
 ```
 
 ### Screen Reader Considerations
@@ -727,7 +709,7 @@ Markdown renders semantic HTML elements with proper accessibility:
 // Ensure sufficient contrast with text colors
 <Markdown
   content="..."
-  textColor="neutral.800"  // Good contrast
+  textColor="neutral.800" // Good contrast
 />
 ```
 
@@ -741,7 +723,7 @@ Markdown renders semantic HTML elements with proper accessibility:
 // ✅ Good: Sanitize before rendering
 import sanitize from 'sanitize-html';
 
-<Markdown content={sanitize(userContent)} />
+<Markdown content={sanitize(userContent)} />;
 ```
 
 2. **Match typography to context**: Use appropriate levels for the content type
@@ -756,20 +738,14 @@ import sanitize from 'sanitize-html';
 
 ```tsx
 // ✅ Good: External links in new tab
-<Markdown
-  content={externalContent}
-  defaultLinkAction="_blank"
-/>
+<Markdown content={externalContent} defaultLinkAction="_blank" />
 ```
 
 4. **Use accent colors meaningfully**: Highlight important information
 
 ```tsx
 // ✅ Good: Highlight key information
-<Markdown
-  content="Your balance is ||$1,234.56||"
-  accentColor="success.500"
-/>
+<Markdown content="Your balance is ||$1,234.56||" accentColor="success.500" />
 ```
 
 ### ❌ Don't
@@ -824,9 +800,7 @@ import sanitize from 'sanitize-html';
 For frequently re-rendering parents, memoize the Markdown component:
 
 ```tsx
-const MemoizedMarkdown = memo(({ content, ...props }) => (
-  <Markdown content={content} {...props} />
-));
+const MemoizedMarkdown = memo(({ content, ...props }) => <Markdown content={content} {...props} />);
 
 function ParentComponent({ content }) {
   return (
@@ -854,7 +828,7 @@ function LazyMarkdown({ content }) {
           observer.disconnect();
         }
       },
-      { threshold: 0.1 }
+      { threshold: 0.1 },
     );
 
     if (ref.current) {
@@ -865,13 +839,7 @@ function LazyMarkdown({ content }) {
   }, []);
 
   return (
-    <Box ref={ref}>
-      {isVisible ? (
-        <Markdown content={content} />
-      ) : (
-        <Skeleton variant="rectangular" height={200} />
-      )}
-    </Box>
+    <Box ref={ref}>{isVisible ? <Markdown content={content} /> : <Skeleton variant="rectangular" height={200} />}</Box>
   );
 }
 ```
@@ -901,11 +869,11 @@ Keep content stable when possible:
 
 ```tsx
 // ❌ Bad: Creating new string on each render
-<Markdown content={`Hello, ${name}!`} />
+<Markdown content={`Hello, ${name}!`} />;
 
 // ✅ Good: Memoize dynamic content
 const content = useMemo(() => `Hello, ${name}!`, [name]);
-<Markdown content={content} />
+<Markdown content={content} />;
 ```
 
 Markdown provides a powerful way to render formatted text content in your application. Use it for documentation, user-generated content, and any scenario requiring rich text display. Always sanitize untrusted content, match typography levels to your context, and consider performance for large documents.