@xyd-js/components 0.1.0-xyd.0 → 0.1.0-xyd.10

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>
 }

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

@@ -1,115 +1,119 @@
 import {css} from "@linaria/core";
+import colors from "@livesession/design-system-colors"
 
-export const $guide = {
-    host: css`
-    `,
-    host$$secondary: css`
-        //flex-grow: 1;
-        //width: 100%;
-        display: flex;
-        position: relative;
-        overflow: hidden;
-        border: .5px solid #ececf1;
-        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);
-        border-radius: 8px;
-        padding: 16px 20px 20px;
-        z-index: 0;
-        transition: box-shadow .2s ease-in-out, background-image .2s ease;
-
-        &:hover {
-            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
-        }
-    `,
-    host$$secondary$$md: css`
-        padding: 21px 25px 25px;
-    `,
-    link: css`
-        width: 100%;
-        height: 100%;
-    `,
-    item: css`
-        border-radius: 8px;
-        display: flex;
-
-        align-items: flex-start;
-        cursor: pointer;
-        transition: opacity .15s;
-
-        &:hover {
-            [data-pointer="true"] {
-                opacity: 1;
-                transform: translate(0);
-            }
+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;
+
+    &:hover {
+        [data-pointer="true"] {
+            opacity: 1;
+            transform: translate(0);
         }
-    `,
-    item$$secondary: css`
-        width: 100%;
-        height: 100%;
-    `,
-    icon: css`
-        line-height: 0px;
-        font-size: 24px;
-        border-radius: 8px;
-        width: 48px;
-        height: 48px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #353740;
-        border: 1px solid #ececf1;
-        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);
-        transition: background .2s ease;
-        box-sizing: border-box;
-        flex-shrink: 0;
-    `,
-    right: css`
-        padding-left: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    `,
-    title: css`
-        display: flex;
-        color: #202123;
-        font-weight: 400;
-        align-items: center;
-        transition: color .15s;
-    `,
-    titleBody: css`
-        font-size: 16px;
-        line-height: 20px;
-    `,
-    titleBody$$md: css`
-        font-size: 18px;
-    `,
-    body: css`
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-
-        color: #6e6e80;
-        white-space: normal;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    `,
-    body$$md: css`
-        font-size: 16px;
-    `,
-    pointer: css`
-        opacity: 0;
-        transform: translate(-4px);
-        display: flex;
-        justify-content: center;
-        transition: opacity .15s ease-in-out, transform .15s ease-in-out;
-    `
-}
-
-
-export const $list = {
-    host: css`
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        justify-content: center;
-        gap: 30px;
-    `
-}
+    }
+`;
+
+export const GuideItemSecondary = css`
+    width: 100%;
+    height: 100%;
+`;
+
+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;
+`;
+
+export const GuideRight = css`
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+`;
+
+export const GuideTitle = css`
+    display: flex;
+    color: #000;
+    font-weight: 600;
+    align-items: center;
+    transition: color .15s;
+`;
+
+export const GuideTitleBody = css`
+    font-size: 16px;
+    line-height: 20px;
+`;
+
+export const GuideTitleBodyMd = css`
+    font-size: 18px;
+`;
+
+export const GuideBody = css`
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+
+    color: ${colors.dark80};
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
+export const GuideBodyMd = css`
+    font-size: 16px;
+`;
+
+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;
+`;
+
+export const GuideListHost = css`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-content: center;
+    gap: 24px;
+`;

package/src/writer/GuideCard/GuideCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import {$guide, $list} from "./GuideCard.styles";
+import * as cn from "./GuideCard.styles";
 
 export interface GuideCardProps {
     children: React.ReactNode;
@@ -21,32 +21,32 @@ export function GuideCard({
 
                           }: GuideCardProps) {
     return <div className={`
-        ${$guide.host}
-        ${kind === "secondary" && $guide.host$$secondary}
-        ${kind === "secondary" && size == "md" && $guide.host$$secondary$$md}
+        ${cn.GuideHost}
+        ${kind === "secondary" && cn.GuideHostSecondary}
+        ${kind === "secondary" && size == "md" && cn.GuideHostSecondaryMd}
     `}>
-        <a className={$guide.link} href={href}>
+        <a className={cn.GuideLink} href={href}>
             <div className={`
-                ${$guide.item}
-                ${kind === "secondary" && $guide.item$$secondary}
+                ${cn.GuideItem}
+                ${kind === "secondary" && cn.GuideItemSecondary}
             `}>
-                {icon && <div className={$guide.icon}>
+                {icon && <div className={cn.GuideIcon}>
                     {icon}
                 </div>}
-                <div className={$guide.right}>
-                    <div className={$guide.title}>
+                <div className={cn.GuideRight}>
+                    <div className={cn.GuideTitle}>
                         <div className={`
-                            ${$guide.title} 
-                            ${$guide.titleBody}
-                            ${size == "md" && $guide.titleBody$$md}
+                            ${cn.GuideTitle} 
+                            ${cn.GuideTitleBody}
+                            ${size == "md" && cn.GuideTitleBodyMd}
                         `}>
                             {title}
                         </div>
-                        <$Pointer/>
+                        <Pointer/>
                     </div>
                     <div className={`
-                        ${$guide.body}
-                        ${size == "md" && $guide.body$$md}
+                        ${cn.GuideBody}
+                        ${size == "md" && cn.GuideBodyMd}
                     `}>
                         {children}
                     </div>
@@ -57,13 +57,13 @@ export function GuideCard({
 }
 
 GuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {
-    return <div className={$list.host}>
+    return <div className={cn.GuideListHost}>
         {children}
     </div>
 }
 
-function $Pointer() {
-    return <div data-pointer="true" className={$guide.pointer}>
+function Pointer() {
+    return <div data-pointer="true" className={cn.GuidePointer}>
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width={24}