@xyd-js/components 0.1.0-xyd.7 → 0.1.0-xyd.94

package/src/content/ContentDecoator.styles.tsx

@@ -0,0 +1,113 @@
+import { css } from "@linaria/core";
+
+export default {
+    ContentDecoratorHost: css`
+        @layer components {
+            --space-small: 8px;
+            --space-medium: 16px;
+            --space-large: 20px;
+            --space-xlarge: 24px;
+            --space-xxlarge: 32px;
+            --space-2xlarge: 50px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p:not(li p):not(ul p):not(xyd-callout p):not(xyd-codetabs p):not(xyd-guidecard p):not([data-button="true"] p) {
+                margin-top: var(--space-medium);
+            }
+            
+            details {
+                --xyd-callout-bgcolor: var(--white);
+                margin-top: var(--space-medium);
+
+                summary {
+                    [part="summary-deep"], [part="summary-deep-label"] {
+                        font-size: var(--xyd-font-size-small);
+                        line-height: var(--xyd-line-height-small);
+                    }
+                    [part="summary-deep-label"] {
+                        font-weight: bold;
+                    }
+                }
+
+                &[data-kind="secondary"] {
+                    code {
+                        background: var(--xyd-details-bgcolor--secondary);
+                    }
+                }
+            }
+
+            hr {
+                margin: var(--space-xxlarge) 0;
+            }
+            
+            p {
+                display: block;
+
+                code {
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-small);
+                    margin: 0;
+                }
+            }
+            
+            h2,h3,h4,h5,h6 {
+                margin-top: var(--space-xxlarge);
+                &[data-kind="muted"] {
+                    display: block;
+                }
+            }
+            h2 {
+                margin-top: var(--space-2xlarge);
+            }
+            h2:first-of-type {
+                margin-top: var(--space-xxlarge);
+            }
+
+            h4 {
+                &[data-kind="muted"] {
+                    margin: 4px 0 16px;
+                }
+            }
+            
+       
+            ul:not(xyd-underlinenav ul), ol:not(xyd-underlinenav ol) {
+                margin-top: var(--space-medium);
+            }
+            
+            xyd-codetabs, xyd-callout, xyd-guidecard, xyd-tabs {
+                margin: var(--space-large) 0;
+            }
+            xyd-guidecard [part="body"]  {
+                color: var(--dark48);
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-medium);
+
+                p {
+                    color: var(--dark48);
+                    font-size: var(--xyd-font-size-small);
+                    line-height: var(--xyd-line-height-medium);
+                }
+            }
+            xyd-guidecard-list xyd-guidecard {
+                margin-bottom: 0;
+            }
+            xyd-tabs [part="buttons"] {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+
+            xyd-callout {
+                --xyd-font-size-medium: var(--xyd-font-size-small);
+            }
+        
+            xyd-codetabs {
+                xyd-code-pre {
+                    font-size: var(--xyd-font-size-xsmall);
+                    line-height: var(--xyd-line-height-xsmall);
+                }
+            }
+        }
+    `
+}

package/src/content/ContentDecorator.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import cn from "./ContentDecoator.styles";
+
+interface ContentDecoratorProps {
+    children: React.ReactNode
+    metaComponent?: string
+}
+
+export function ContentDecorator({ children, metaComponent }: ContentDecoratorProps) {
+    return <xyd-content-decorator
+        className={cn.ContentDecoratorHost}
+        meta-component={metaComponent || undefined}
+    >
+        {children}
+    </xyd-content-decorator>
+}

package/src/content/GridDecorator.styles.tsx

@@ -0,0 +1,67 @@
+import { css } from "@linaria/core";
+
+export default {
+    GridDecoratorHost: css`
+        @layer components {
+            display: grid;
+            gap: 1rem;
+            width: 100%;
+
+            /* First level ul - 1fr */
+            > ul {
+                display: grid;
+                grid-template-columns: 1fr;
+                gap: 1rem;
+                width: 100%;
+            }
+
+            /* Nested ul - 2fr */
+            ul ul {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 1rem;
+                width: 100%;
+            }
+
+            &[data-cols] {
+                --cols: var(--data-cols, 2);
+                ul ul {
+                    grid-template-columns: repeat(var(--cols), 1fr);
+                }
+            }
+
+            &[data-cols="2"] { --data-cols: 2; }
+            &[data-cols="3"] { --data-cols: 3; }
+            &[data-cols="4"] { --data-cols: 4; }
+            &[data-cols="5"] { --data-cols: 5; }
+            &[data-cols="6"] { --data-cols: 6; }
+
+            @media (max-width: 768px) {
+                > ul {
+                    gap: 0;
+                }
+                ul ul {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            ul, ol, li {
+                &::before {
+                    content: none;
+                }
+            }
+
+            ul, ol {
+                display: grid;
+                margin: 0;
+                padding: 0 !important;
+                list-style: none;
+            }
+
+            li {
+                margin-left: 0 !important;
+                padding-left: 0 !important;
+            }
+        }
+    `
+}

package/src/content/GridDecorator.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import cn from "./GridDecorator.styles";
+
+interface GridDecoratorProps {
+    cols?: 2 | 3 | 4 | 5 | 6
+}
+/**
+ * A wrapper component that applies grid decoration styling to its children.
+ * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.
+ * 
+ * @category Component
+ */
+export function GridDecorator({ children, cols }: GridDecoratorProps) {
+    return <xyd-grid-decorator 
+        className={cn.GridDecoratorHost}
+        data-cols={cols}
+    >
+        {children}
+    </xyd-grid-decorator>
+}