@xyd-js/components 0.1.0-xyd.11 → 0.1.0-xyd.13

package/src/writer/Details/Details.styles.tsx

@@ -1,104 +1,93 @@
-import {css} from "@linaria/core";
+import { css } from "@linaria/core";
 
 export const DetailsHost = css`
-    border-top: 1px solid #ececf1;
-
-    &[open] summary svg[data-icon="true"] { // TODO: bad solution
-        transform: rotate(90deg);
-    }
-`;
-
-export const DetailsHostSecondary = css`
-    background-color: #f7f7f8;
-    border: 1px solid #ececf1;
-    border-radius: 8px;
-`;
-
-export const DetailsSummary = css`
-    padding: 16px 14px 16px 0;
-    font-size: 18px;
-    cursor: pointer;
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.4;
-    transition: color 0.3s;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    list-style: none;
-
-    &:hover {
-        color: #565869;
-    }
-`;
-
-export const DetailsSummarySecondary = css`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    padding: 20px 24px;
-`;
-
-export const DetailsSummaryTertiary = css`
-    padding: 10px 24px;
-`;
-
-export const DetailsSummaryDeep = css`
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-`;
-
-export const DetailsSummaryDeepText = css`
-    color: #6e6e80;
-    text-transform: uppercase;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: .08em;
-    margin-left: 8px;
-    font-weight: 700;
-`;
-
-export const DetailsSummaryDeepTextTertiary = css`
-    text-transform: none;
+    @layer defaults {
+        border-top: 1px solid var(--xyd-details-border-color);
     
-    code {
-        background: white;
-    }
-`;
-
-export const DetailsLabel = css`
-    flex: 1 1 auto;
-`;
-
-export const DetailsLabelTertiary = css`
-    padding: 10px;
-`;
-
-export const DetailsIcon = css`
-    flex: 0 0 auto;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-right: 6px;
-`;
-
-export const DetailsContent = css`
-    padding: 0 24px 20px;
-`;
-
-export const DetailsContentSecondary = css`
-    // TODO: also bad
-
-    code {
-        background: white;
+        &[data-kind="secondary"], &[data-kind="tertiary"] {
+            background-color:  var(--xyd-details-bgcolor--secondary);
+            border: 1px solid var(--xyd-details-border-color);
+            border-radius: 8px;
+        }
+
+        &[open] [part="summary"] svg[data-icon="true"] { 
+            transform: rotate(90deg);
+        }
+
+        [part="summary"] {
+            padding: 16px 14px 16px 0;
+            cursor: pointer;
+            font-weight: var(--xyd-font-weight-medium);
+            font-variant-numeric: tabular-nums;
+            transition: color 0.3s;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            list-style: none;
+
+            &:hover {
+                color: var(--xyd-details-summary-color--active);
+            }
+        }
+
+        &[data-kind="tertiary"] [part="summary"]{
+            padding: 10px 24px;
+        }
+        &[data-kind="secondary"],
+        &[data-kind="tertiary"] {
+            [part="summary"] {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                cursor: pointer;
+                padding: 20px 24px;
+            }
+        }
+
+        [part="summary-deep"] {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        [part="summary-deep-text"] {
+            color: var(--xyd-details-summary-color);
+            text-transform: none;
+            letter-spacing: .08em;
+            margin-left: 8px;
+            font-weight: var(--xyd-font-weight-bold);
+
+            code {
+                background: var(--xyd-details-summary-code-bgcolor);
+            }
+        }
+
+        [part="summary-deep-label"] {
+            flex: 1 1 auto;
+        }
+
+        // TODO: after migration to web-components should be removed cuz 'part="content"' can be also in another element as child
+        & > [part="content"] { 
+            padding: 0 24px 20px;
+        }
+        &[data-kind="tertiary"] > [part="content"] {
+            background-color: var(--xyd-details-content-bgcolor);
+            padding-top: 20px;
+
+            code {
+                background: var(--xyd-details-content-bgcolor);
+            }
+        }
+
+        [part="icon"] {
+            flex: 0 0 auto;
+            font-size: var(--xyd-font-size-medium);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-right: 6px;
+        }
     }
 `;
 
-export const DetailsContentTertiary = css`
-    background: white;
-    padding-top: 20px;
-`;

package/src/writer/Details/Details.tsx

@@ -2,30 +2,67 @@ import React from "react"
 
 import * as cn from "./Details.styles";
 
-interface BaseDetailsProps {
+/**
+ * Base interface for all Details component variants
+ */
+export interface BaseDetailsProps {
+    /** Content to be displayed inside the details element */
     children: React.ReactNode;
+
+    /** Label text displayed in the summary */
     label: string;
+
+    /** Optional icon element to be displayed in the summary */
     icon?: React.ReactElement;
+
+    /** Optional CSS class name for custom styling */
+    className?: string;
 }
 
-interface TertiaryDetailsProps extends BaseDetailsProps {
+/**
+ * Props for the tertiary variant of the Details component
+ */
+export interface TertiaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the tertiary variant */
     kind: "tertiary";
+
+    /** Title text or element displayed in the summary */
     title: string | React.ReactNode;
 }
 
-interface SecondaryDetailsProps extends BaseDetailsProps {
+/**
+ * Props for the secondary variant of the Details component
+ */
+export interface SecondaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the secondary variant */
     kind: "secondary";
+
+    /** Title text or element displayed in the summary */
     title: string | React.ReactNode;
 }
 
-interface PrimaryDetailsProps extends BaseDetailsProps {
+/**
+ * Props for the primary variant of the Details component
+ */
+export interface PrimaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the primary variant (default) */
     kind?: "primary";
 }
 
+/** Union type of all possible Details component variants */
 export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps
 
-export function Details(props: DetailsProps) {
-    const {children, label} = props;
+/**
+ * A collapsible details component that supports three variants: primary, secondary, and tertiary.
+ * Each variant has a different visual style and structure.
+ * 
+ * @param props - The component props
+ * @returns A details element with collapsible content
+ * 
+ * @category Component
+ */
+export function Details(props: DetailsProps): React.ReactElement {
+    const { children, label } = props;
 
     let title
 
@@ -37,54 +74,45 @@ export function Details(props: DetailsProps) {
 
     const kind = props.kind || "primary";
 
-    return <details className={`
-        ${cn.DetailsHost} 
-        ${isDeepKind && cn.DetailsHostSecondary}
-   `}>
-        <summary className={`
-        ${cn.DetailsSummary} 
-        ${isDeepKind && cn.DetailsSummarySecondary}
-        ${kind === "tertiary" ? cn.DetailsSummaryTertiary : ""}
-   `}>
+    return <details
+        part="details"
+        className={`${cn.DetailsHost} ${props.className || ""}`}
+        data-kind={props.kind}
+    >
+        <summary part="summary">
             {kind === "primary" && (
                 <>
-                    {props.icon || <Icon/>}
-                    <Label>
+                    {props.icon || <$Icon />}
+                    <div part="summary-deep-label">
                         {label}
-                    </Label>
+                    </div>
                 </>
             )}
+
             {isDeepKind && (
                 <div>
-                    <div className={cn.DetailsSummaryDeep}>
-                        {props.icon || <IconDeep/>}
-                        <div className={`
-                            ${cn.DetailsSummaryDeepText}
-                            ${cn.DetailsSummaryDeepTextTertiary}
-                        `}>
+                    <div part="summary-deep">
+                        {props.icon || <$IconDeep />}
+                        <div part="summary-deep-text">
                             {title}
                         </div>
                     </div>
-                    <Label>
+                    <div part="summary-deep-label">
                         {label}
-                    </Label>
-                </div>
+                    </div>
+                </div> 
             )}
-            {isDeepKind && <Icon/>}
+            {isDeepKind && <$Icon />}
         </summary>
 
-        <div className={`
-            ${cn.DetailsContent}
-            ${isDeepKind && cn.DetailsContentSecondary}
-            ${kind === "tertiary" && cn.DetailsContentTertiary}
-        `}>
+        <div part="content">
             {children}
         </div>
     </details>
 }
 
-function Icon() {
-    return <div className={cn.DetailsIcon}>
+function $Icon() {
+    return <div part="icon">
         <svg
             // TODO: bad solution
             data-icon="true"
@@ -103,7 +131,7 @@ function Icon() {
     </div>
 }
 
-function IconDeep() {
+function $IconDeep() {
     return <svg
         width="1em"
         height="1em"
@@ -123,16 +151,9 @@ function IconDeep() {
         </g>
         <defs>
             <clipPath id="clip0_1689_2180">
-                <rect width={24} height={24} fill="white"/>
+                <rect width={24} height={24} fill="white" />
             </clipPath>
         </defs>
     </svg>
 }
 
-function Label({children}: {
-    children?: React.ReactNode
-}) {
-    return <div className={cn.DetailsLabel}>
-        {children}
-    </div>
-}

package/src/writer/Example/index.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export function Example() {
+    return <div>Example xD 2</div>
+}

package/src/writer/GuideCard/GuideCard.styles.tsx

@@ -1,119 +1,116 @@
-import {css} from "@linaria/core";
-import colors from "@livesession/design-system-colors"
-
-export const GuideHost = css``;
-
-export const GuideHostSecondary = css`
-    //flex-grow: 1;
-    //width: 100%;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    border: 1px solid ${colors.dark16};
-    background: ${colors.dark8};
-    border-radius: 8px;
-    padding: 24px;
-    z-index: 0;
-    transition: box-shadow .2s ease-in-out, background-image .2s ease;
-
-    &:hover {
-        background: ${colors.white};
-    }
-`;
-
-export const GuideHostSecondaryMd = css`
-    padding: 21px 25px 25px;
-`;
-
-export const GuideLink = css`
-    width: 100%;
-    height: 100%;
-`;
-
-export const GuideItem = css`
-    border-radius: 8px;
-    display: flex;
-
-    align-items: flex-start;
-    cursor: pointer;
-    transition: opacity .15s;
+import { css } from "@linaria/core";
+
+export const GuideHost = css`
+    @layer defaults {
+        display: block;
+
+        &[data-kind="secondary"] {
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            border: 1px solid var(--xyd-guidecard-border-color--secondary);
+            background: var(--xyd-guidecard-bgcolor--secondary);
+            border-radius: 8px;
+            padding: 24px;
+            z-index: 0;
+            transition: box-shadow .2s ease-in-out, background-image .2s ease;
+
+            &:hover {
+                background: var(--xyd-guidecard-bgcolor--secondary-hover);
+            }
+
+            &[data-size="md"] {
+                padding: 21px 25px 25px;
+            }
+        }
 
-    &:hover {
-        [data-pointer="true"] {
-            opacity: 1;
-            transform: translate(0);
+        [part="link"] {
+            width: 100%;
+            height: 100%;
         }
-    }
-`;
 
-export const GuideItemSecondary = css`
-    width: 100%;
-    height: 100%;
-`;
+        [part="item"] {
+            border-radius: 8px;
+            display: flex;
 
-export const GuideIcon = css`
-    line-height: 0px;
-    font-size: 24px;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #000;
-    transition: background .2s ease;
-    box-sizing: border-box;
-    flex-shrink: 0;
-`;
+            align-items: flex-start;
+            cursor: pointer;
+            transition: opacity .15s;
 
-export const GuideRight = css`
-    padding-left: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-`;
+            &:hover {
+                [part="pointer"] {
+                    opacity: 1;
+                    transform: translate(0);
+                }
+            }
+        }
+        &[data-kind="secondary"] [part="item"] {
+            width: 100%;
+            height: 100%;
+        }
 
-export const GuideTitle = css`
-    display: flex;
-    color: #000;
-    font-weight: 600;
-    align-items: center;
-    transition: color .15s;
-`;
+        [part="icon"] {
+            height: 32px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--xyd-guidecard-icon-color);
+            transition: background .2s ease;
+            box-sizing: border-box;
+            flex-shrink: 0;
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
+        }
 
-export const GuideTitleBody = css`
-    font-size: 16px;
-    line-height: 20px;
-`;
+        [part="right"] {
+            padding-left: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
 
-export const GuideTitleBodyMd = css`
-    font-size: 18px;
-`;
+        [part="title"] {
+            display: flex;
+            color: var(--xyd-guidecard-title-color);
+            align-items: center;
+            font-weight: var(--xyd-font-weight-semibold);
+            transition: color .15s;
+        }
 
-export const GuideBody = css`
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
+        [part="title-body"] {
+        }
+        &[data-size="md"] [part="title-body"] {
+        }
 
-    color: ${colors.dark80};
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
+        [part="body"] {
+            font-weight: var(--xyd-font-weight-normal);
 
-export const GuideBodyMd = css`
-    font-size: 16px;
-`;
+            color: var(--xyd-guidecard-color);
+            white-space: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &[data-size="md"] [part="body"] {
+        }
 
-export const GuidePointer = css`
-    opacity: 0;
-    transform: translate(-4px);
-    display: flex;
-    justify-content: center;
-    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+        [part="pointer"] {
+            opacity: 0;
+            transform: translate(-4px);
+            display: flex;
+            justify-content: center;
+            transition: opacity .15s ease-in-out, transform .15s ease-in-out;
+        }
+    }
 `;
 
 export const GuideListHost = css`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    justify-content: center;
-    gap: 24px;
+    @layer defaults {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        justify-content: center;
+        gap: 24px;
+    }
 `;