@xyd-js/components 0.1.0-xyd.6 → 0.1.0-xyd.8

package/src/writer/Breadcrumbs/Breadcrumbs.styles.ts

@@ -1,28 +1,29 @@
 import {css} from "@linaria/core";
 
-export const $breadcrumbs = {
-    host: css`
-        display: flex;
-        overflow: hidden;
-        margin-top: 0.375rem;
-        gap: 0.25rem;
-        align-items: center;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        color: #6B7280;
-    `,
-    icon: css`
-        shrink: 0;
-        width: 0.875rem;
-    `,
-    item: css`
-        white-space: nowrap;
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-    `,
-    item$$active: css`
-        color: #000;
-        font-weight: bold;
-    `
-};
+export const BreadcrumbsHost = css`
+    display: flex;
+    overflow: hidden;
+    margin-top: 0.375rem;
+    gap: 0.25rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: #6B7280;
+`;
+
+export const BreadcrumbsIcon = css`
+    shrink: 0;
+    width: 0.875rem;
+`;
+
+export const BreadcrumbsItem = css`
+    white-space: nowrap;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+`;
+
+export const BreadcrumbsItemActive = css`
+    color: #000;
+    font-weight: bold;
+`;

package/src/writer/Breadcrumbs/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import React, {Fragment} from 'react'
 import type {ReactElement} from 'react'
 import {ArrowRightIcon} from '@radix-ui/react-icons'
 
-import {$breadcrumbs} from './Breadcrumbs.styles'
+import * as cn from './Breadcrumbs.styles'
 
 function Anchor({children, ...rest}) {
     return <a {...rest}>
@@ -19,16 +19,16 @@ export interface BreadcrumbsProps {
 
 export function Breadcrumbs(props: BreadcrumbsProps): ReactElement {
     return (
-        <div className={$breadcrumbs.host}>
+        <div className={cn.BreadcrumbsHost}>
             {props.items.map((item, index) => {
                 const lastActive = index === props.items.length - 1
 
                 return (
                     <Fragment key={item.href + item.title}>
-                        {index > 0 && <ArrowRightIcon className={$breadcrumbs.icon}/>}
+                        {index > 0 && <ArrowRightIcon className={cn.BreadcrumbsIcon}/>}
                         <div className={`
-                            ${$breadcrumbs.item}
-                            ${lastActive && $breadcrumbs.item$$active}
+                            ${cn.BreadcrumbsItem}
+                            ${lastActive && cn.BreadcrumbsItemActive}
                         `}
                              title={item.title}
                         >

package/src/writer/Callout/Callout.styles.tsx

@@ -1,50 +1,46 @@
 import {css} from "@linaria/core";
 
-export const $callout = {
-    host: css`
-        display: inline-flex;
-        align-items: center;
-
-        position: relative;
-        width: 100%;
-        min-width: 275px;
-        padding: 8px 12px;
-
-        border-radius: 8px;
-
-        text-align: center;
-
-        border: 1px solid #ececf1;
-    `,
-    $$neutral: css`
-        background-color: #f7f7f8;
-
-        border-color: #ececf1;
-    `
-}
-
-export const $icon = {
-    host: css`
-        display: inline-flex;
-        margin-right: 14px;
-        flex: 0 0 auto;
-        align-self: flex-start;
-
-        color: #6e6e80;
-        font-size: 20px;
-        margin-top: 2px;
-    `
-}
-
-export const $message = {
-    host: css`
-        color: #353740;
-        text-align: left;
-
-        flex: 1 1 auto;
-    `,
-    body: css`
-        font-size: 14px;
-        line-height: 20px;
-    `
-}
+export const CalloutHost = css`
+    display: inline-flex;
+    align-items: center;
+
+    position: relative;
+    width: 100%;
+    min-width: 275px;
+    padding: 8px 12px;
+
+    border-radius: 8px;
+
+    text-align: center;
+
+    border: 1px solid #ececf1;
+`;
+
+export const CalloutNeutral = css`
+    background-color: #f7f7f8;
+
+    border-color: #ececf1;
+`;
+
+export const CalloutIcon = css`
+    display: inline-flex;
+    margin-right: 14px;
+    flex: 0 0 auto;
+    align-self: flex-start;
+
+    color: #6e6e80;
+    font-size: 20px;
+    margin-top: 2px;
+`;
+
+export const CalloutMessage = css`
+    color: #353740;
+    text-align: left;
+
+    flex: 1 1 auto;
+`;
+
+export const CalloutMessageBody = css`
+    font-size: 14px;
+    line-height: 20px;
+`;

package/src/writer/Callout/Callout.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import {$callout, $icon, $message} from "./Callout.styles";
+import * as cn from "./Callout.styles";
 
 export interface CalloutProps {
     children: React.ReactNode;
@@ -24,12 +24,12 @@ function InfoIcon() {
 }
 
 export function Callout({children}: CalloutProps) {
-    return <div className={`${$callout.host} ${$callout.$$neutral}`}>
-        <div className={$icon.host}>
+    return <div className={`${cn.CalloutHost} ${cn.CalloutNeutral}`}>
+        <div className={cn.CalloutIcon}>
             <InfoIcon/>
         </div>
-        <div className={$message.host}>
-            <div className={$message.body}>
+        <div className={cn.CalloutMessage}>
+            <div className={cn.CalloutMessageBody}>
                 {children}
             </div>
         </div>

package/src/writer/Code/Code.styles.tsx

@@ -1,17 +1,15 @@
 import {css} from "@linaria/core";
 
-export const $code = {
-    host: css`
-        display: inline-block;
-        padding: 0 .3em;
-        border-radius: 6px;
-        margin: 0 3px;
-        border: .5px solid #ececf1;
+export const CodeHost = css`
+    display: inline-block;
+    padding: 0 .3em;
+    border-radius: 6px;
+    margin: 0 3px;
+    border: .5px solid #ececf1;
 
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.6em;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.6em;
 
-        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
-    `
-}
+    background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
+`;

package/src/writer/Code/Code.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$code} from "./Code.styles";
+import * as cn from "./Code.styles";
 
 export interface CodeProps {
     children: React.ReactNode;
 }
 
 export function Code({children}: CodeProps) {
-    return <code className={$code.host}>
+    return <code className={cn.CodeHost}>
         {children}
     </code>
 }

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

@@ -1,76 +1,104 @@
 import {css} from "@linaria/core";
 
-export const $details = {
-    host: css`
-        border-top: 1px solid #ececf1;
-
-        &[open] summary svg[data-icon="true"] { // TODO: bad solution
-            transform: rotate(90deg);
-        }
-    `,
-    host$$secondary: css`
-        background-color: #f7f7f8;
-        border: 1px solid #ececf1;
-        border-radius: 8px;
-    `,
-    summary: 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;
-        }
-    `,
-    summary$$secondary: css`
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        padding: 20px 24px;
-    `,
-    summaryDeep: css`
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-    `,
-    summaryDeep$text: css`
-        color: #6e6e80;
-        text-transform: uppercase;
-        font-size: 12px;
-        line-height: 16px;
-        letter-spacing: .08em;
-        margin-left: 8px;
-        font-weight: 700;
-    `,
-    label: css`
-        flex: 1 1 auto;
-    `,
-    icon: css`
-        flex: 0 0 auto;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-right: 6px;
-    `,
-    content: css`
-        padding: 0 24px 20px;
-    `,
-    content$$secondary: css`
-        // TODO: also bad
-
-        code {
-            background: white;
-        }
-    `
-}
+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;
+    
+    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;
+    }
+`;
+
+export const DetailsContentTertiary = css`
+    background: white;
+    padding-top: 20px;
+`;

package/src/writer/Details/Details.tsx

@@ -1,74 +1,90 @@
 import React from "react"
 
-import {$details} from "./Details.styles";
+import * as cn from "./Details.styles";
 
 interface BaseDetailsProps {
     children: React.ReactNode;
     label: string;
+    icon?: React.ReactElement;
+}
+
+interface TertiaryDetailsProps extends BaseDetailsProps {
+    kind: "tertiary";
+    title: string | React.ReactNode;
 }
 
 interface SecondaryDetailsProps extends BaseDetailsProps {
     kind: "secondary";
-    title: string;
+    title: string | React.ReactNode;
 }
 
 interface PrimaryDetailsProps extends BaseDetailsProps {
     kind?: "primary";
 }
 
-export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
+export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps
 
 export function Details(props: DetailsProps) {
-    let title = "";
     const {children, label} = props;
 
-    if (props.kind === "secondary") {
+    let title
+
+    const isDeepKind = ["secondary", "tertiary"].includes(props.kind || "");
+
+    if (isDeepKind && "title" in props) {
         title = props.title;
     }
 
     const kind = props.kind || "primary";
 
     return <details className={`
-        ${$details.host} 
-        ${kind === "secondary" && $details.host$$secondary}
+        ${cn.DetailsHost} 
+        ${isDeepKind && cn.DetailsHostSecondary}
    `}>
         <summary className={`
-        ${$details.summary} 
-        ${kind === "secondary" && $details.summary$$secondary}
+        ${cn.DetailsSummary} 
+        ${isDeepKind && cn.DetailsSummarySecondary}
+        ${kind === "tertiary" ? cn.DetailsSummaryTertiary : ""}
    `}>
-            {kind === "primary" && <>
-                <$Icon/>
-                <$Label>
-                    {label}
-                </$Label>
-            </>}
-            {kind === "secondary" && <>
+            {kind === "primary" && (
+                <>
+                    {props.icon || <Icon/>}
+                    <Label>
+                        {label}
+                    </Label>
+                </>
+            )}
+            {isDeepKind && (
                 <div>
-                    <div className={$details.summaryDeep}>
-                        <$IconDeep/>
-                        <div className={$details.summaryDeep$text}>
+                    <div className={cn.DetailsSummaryDeep}>
+                        {props.icon || <IconDeep/>}
+                        <div className={`
+                            ${cn.DetailsSummaryDeepText}
+                            ${cn.DetailsSummaryDeepTextTertiary}
+                        `}>
                             {title}
                         </div>
                     </div>
-                    <$Label>
+                    <Label>
                         {label}
-                    </$Label>
+                    </Label>
                 </div>
-                <$Icon/>
-            </>}
+            )}
+            {isDeepKind && <Icon/>}
         </summary>
 
         <div className={`
-            ${$details.content}
-            ${kind === "secondary" && $details.content$$secondary}
+            ${cn.DetailsContent}
+            ${isDeepKind && cn.DetailsContentSecondary}
+            ${kind === "tertiary" && cn.DetailsContentTertiary}
         `}>
             {children}
         </div>
     </details>
 }
 
-function $Icon() {
-    return <div className={$details.icon}>
+function Icon() {
+    return <div className={cn.DetailsIcon}>
         <svg
             // TODO: bad solution
             data-icon="true"
@@ -87,7 +103,7 @@ function $Icon() {
     </div>
 }
 
-function $IconDeep() {
+function IconDeep() {
     return <svg
         width="1em"
         height="1em"
@@ -113,10 +129,10 @@ function $IconDeep() {
     </svg>
 }
 
-function $Label({children}: {
+function Label({children}: {
     children?: React.ReactNode
 }) {
-    return <div className={$details.label}>
+    return <div className={cn.DetailsLabel}>
         {children}
     </div>
 }