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

package/src/writer/Breadcrumbs/Breadcrumbs.tsx

@@ -1,8 +1,13 @@
 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 ArrowRightIcon() {
+    return <div>
+        TODO
+    </div>
+}
 
 function Anchor({children, ...rest}) {
     return <a {...rest}>
@@ -11,26 +16,27 @@ function Anchor({children, ...rest}) {
 }
 
 export interface BreadcrumbsProps {
+    className?: string;
     items: {
         title: string
         href?: string
     }[]
 }
 
-export function Breadcrumbs(props: BreadcrumbsProps): ReactElement {
+export function Breadcrumbs({className, items}: BreadcrumbsProps): ReactElement {
     return (
-        <div className={$breadcrumbs.host}>
-            {props.items.map((item, index) => {
-                const lastActive = index === props.items.length - 1
+        <xyd-breadcrumbs
+            className={`${cn.BreadcrumbsHost} ${className || ''}`}
+        >
+            {items.map((item, index) => {
+                const lastActive = index === items.length - 1
 
                 return (
                     <Fragment key={item.href + item.title}>
-                        {index > 0 && <ArrowRightIcon className={$breadcrumbs.icon}/>}
-                        <div className={`
-                            ${$breadcrumbs.item}
-                            ${lastActive && $breadcrumbs.item$$active}
-                        `}
-                             title={item.title}
+                        {index > 0 && <ArrowRightIcon part="icon"/>}
+                        <div 
+                            part="item"
+                            data-active={lastActive ? "true" : "false"}
                         >
                             {item.href && !lastActive ? (
                                 <Anchor href={item.href}>{item.title}</Anchor>
@@ -41,6 +47,6 @@ export function Breadcrumbs(props: BreadcrumbsProps): ReactElement {
                     </Fragment>
                 )
             })}
-        </div>
+        </xyd-breadcrumbs>
     )
 }

package/src/writer/Button/Button.styles.tsx

@@ -0,0 +1,137 @@
+import { css } from "@linaria/core";
+
+export const ButtonHost = css`
+    @layer defaults {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        border: 1px solid transparent;
+        font-weight: var(--xyd-font-weight-medium);
+        transition: all 0.2s ease;
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        gap: 8px;
+
+        &[data-size="sm"] {
+            height: 28px;
+            padding: 0 12px;
+            gap: 6px;
+
+            font-size: var(--xyd-font-size-xsmall);
+            line-height: var(--xyd-line-height-xsmall);
+
+            p {
+                font-size: var(--xyd-font-size-xsmall);
+                line-height: var(--xyd-line-height-xsmall);
+            }
+        }
+
+        &[data-size="md"] {
+            height: 36px;
+            padding: 0 16px;
+            gap: 8px;
+
+            font-size: var(--xyd-font-size-small);
+            line-height: var(--xyd-line-height-small);
+
+            p {
+                font-size: var(--xyd-font-size-small);
+                line-height: var(--xyd-line-height-small);
+            }
+        }
+
+        &[data-size="lg"] {
+            height: 44px;
+            padding: 0 20px;
+            gap: 10px;
+
+            font-size: var(--xyd-font-size-medium);
+            line-height: var(--xyd-line-height-medium);
+
+            p {
+                font-size: var(--xyd-font-size-medium);
+                line-height: var(--xyd-line-height-medium);
+            }
+        }
+
+        &[data-kind="primary"] {
+            background-color: var(--xyd-button-primary-bg);
+            color: var(--xyd-button-primary-color);
+            border-color: var(--xyd-button-primary-border);
+
+            &:hover:not(:disabled) {
+                background-color: var(--xyd-button-primary-bg-hover);
+                border-color: var(--xyd-button-primary-border-hover);
+            }
+        }
+
+        &[data-kind="secondary"] {
+            background-color: var(--xyd-button-secondary-bg);
+            color: var(--xyd-button-secondary-color);
+            border-color: var(--xyd-button-secondary-border);
+
+            &:hover:not(:disabled) {
+                background-color: var(--xyd-button-secondary-bg-hover);
+                border-color: var(--xyd-button-secondary-border-hover);
+            }
+        }
+
+        &[data-kind="tertiary"] {
+            background-color: var(--xyd-button-tertiary-bg);
+            color: var(--xyd-button-tertiary-color);
+            border-color: var(--xyd-button-tertiary-border);
+
+            &:hover:not(:disabled) {
+                background-color: var(--xyd-button-tertiary-bg-hover);
+                border-color: var(--xyd-button-tertiary-border-hover);
+            }
+        }
+
+        &[data-theme="ghost"] {
+            background-color: unset;
+            border: unset;
+
+            &:hover {
+                background-color: unset;
+                border: unset;
+                
+                svg {
+                    color: var(--dark64)
+                }
+            }
+
+            svg {
+                color: var(--dark48)
+            }
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        [part="content"] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        [part="icon"] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+    }
+`;
+
+export const ButtonIcon = css`
+    @layer defaults {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+`; 

package/src/writer/Button/Button.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import * as cn from "./Button.styles";
+
+export interface ButtonProps {
+    children?: React.ReactNode;
+    kind?: "primary" | "secondary" | "tertiary" | undefined
+    theme?: "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    iconPosition?: "left" | "right";
+    href?: string;
+}
+
+export function Button({
+    children,
+    kind = "primary",
+    theme,
+    size = "md",
+    className,
+    onClick,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    href
+}: ButtonProps) {
+    let Component = href ? "a" : "button"
+
+    let hrefProps = {}
+
+    if (href) {
+        hrefProps = {
+            href,
+            target: "_blank",
+        }
+    }
+
+    if (theme === "ghost") {
+        kind = undefined
+    }
+
+    return (
+        <Component
+            className={`${cn.ButtonHost} ${className || ''}`}
+            data-button={true}
+            data-kind={kind}
+            data-size={size}
+            data-theme={theme}
+            data-has-icon={!!icon}
+            data-icon-position={iconPosition}
+            onClick={onClick}
+            disabled={disabled}
+            {...hrefProps}
+        >
+            {icon && iconPosition === "left" && (
+                <span part="icon" className={cn.ButtonIcon}>
+                    {icon}
+                </span>
+            )}
+            {
+                children ? <span part="content">
+                    {children}
+                </span> : null
+            }
+            {icon && iconPosition === "right" && (
+                <span part="icon" className={cn.ButtonIcon}>
+                    {icon}
+                </span>
+            )}
+        </Component>
+    );
+}

package/src/writer/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button";

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

@@ -1,50 +1,39 @@
 import {css} from "@linaria/core";
 
-export const $callout = {
-    host: css`
+export const CalloutHost = css`
+    @layer defaults {
         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;
-    `
-}
+        border: 1px solid var(--xyd-callout-border-color);
+        background-color: var(--xyd-callout-bgcolor);
+        
+        code {
+            background: var(--white);
+        }
+        
+        [part="icon"] {
+            display: inline-flex;
+            margin-right: 14px;
+            flex: 0 0 auto;
+            align-self: flex-start;
+            color: var(--xyd-callout-icon-color);
+            margin-top: 2px;
+        }
+        
+        [part="message"] {
+            color: var(--xyd-callout-message-color);
+            text-align: left;
+            flex: 1 1 auto;
+        }
+        
+        [part="message-body"] {
+        }
+        
+    }
+`;

package/src/writer/Callout/Callout.tsx

@@ -1,12 +1,40 @@
 import React from "react"
 
-import {$callout, $icon, $message} from "./Callout.styles";
+import * as cn from "./Callout.styles";
 
+/**
+ * Props for the Callout component
+ */
 export interface CalloutProps {
+    /** Additional CSS class name to be applied to the callout */
+    className?: string;
+    
+    /** Content to be displayed inside the callout */
     children: React.ReactNode;
 }
 
-function InfoIcon() {
+/**
+ * A Callout component that displays important information or notices in a visually distinct way.
+ * It includes an info icon and a message area for content.
+ * 
+ * @category Component
+ */
+export function Callout({ className, children }: CalloutProps) {
+    return <xyd-callout
+        className={`${cn.CalloutHost} ${className || ''}`}
+    >
+        <div part="icon">
+            <$IconInfo />
+        </div>
+        <div part="message">
+            <div part="message-body">
+                {children}
+            </div>
+        </div>
+    </xyd-callout>
+}
+
+function $IconInfo() {
     return <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -14,7 +42,7 @@ function InfoIcon() {
         fill="currentColor"
         viewBox="0 0 24 24"
     >
-        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z"/>
+        <path d="M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z" />
         <path
             fillRule="evenodd"
             d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
@@ -22,16 +50,3 @@ function InfoIcon() {
         />
     </svg>
 }
-
-export function Callout({children}: CalloutProps) {
-    return <div className={`${$callout.host} ${$callout.$$neutral}`}>
-        <div className={$icon.host}>
-            <InfoIcon/>
-        </div>
-        <div className={$message.host}>
-            <div className={$message.body}>
-                {children}
-            </div>
-        </div>
-    </div>
-}

package/src/writer/Card/Card.styles.tsx

@@ -0,0 +1,47 @@
+import { css } from "@linaria/core"
+
+export const CardHost = css`
+    background-color: var(--xyd-card-bgcolor);
+    border-radius: 8px;
+    box-shadow: 0 1px 2px 0 var(--xyd-card-shadow-color);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+
+    &[data-shadow="md"] {
+        box-shadow: 0 5px 40px var(--xyd-card-shadow-color);
+    }
+
+    [part="image-container"] {
+        border-bottom: 2px solid var(--xyd-card-border-color);
+        height: 200px;
+        overflow: hidden;
+        position: relative;
+
+        [part="bg"] {
+            background-size: cover;
+            background-repeat: no-repeat;
+            position: relative;
+            height: 100%;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            margin-bottom: -4px;
+        }
+    }
+
+    [part="body"] {
+        padding: 16px;
+
+        [part="header"] {
+            margin-right: 4px;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            display: flex;
+        }
+    }
+`

package/src/writer/Card/Card.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+
+import { Button } from "../Button"
+import { Text } from "../Text"
+
+import * as cn from "./Card.styles"
+
+interface CardProps {
+    title: string
+    href?: string
+    link?: React.ElementType
+
+    description?: string
+
+    imgSrc?: string
+    imgAlt?: string
+
+    shadow?: "md"
+}
+
+export function Card(props: CardProps) {
+    const {
+        title,
+        description,
+        imgSrc,
+        imgAlt,
+        shadow,
+        href,
+        link,
+    } = props
+
+    const Link = link
+
+    return <xyd-card
+        data-shadow={shadow || undefined}
+        className={cn.CardHost}
+    >
+        {imgSrc && (
+            <div part="image-container">
+                <div part="bg">
+                    <img src={imgSrc} alt={imgAlt} />
+                </div>
+            </div>
+        )}
+
+        <div part="body">
+            <div part="header">
+                {Link && href ?
+                    <Text weight="bold">
+                        <Link href={href}>
+                            {title}
+                        </Link>
+                    </Text>
+                    : <Text weight="bold">
+                        {title}
+                    </Text>}
+                <Button size="sm" kind="secondary">
+                    Source
+                </Button>
+            </div>
+            <div part="description">
+                <Text size="small">
+                    {description}
+                </Text>
+            </div>
+        </div>
+    </xyd-card>
+}
+

package/src/writer/Card/index.ts

@@ -0,0 +1 @@
+export {Card} from "./Card"

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

@@ -1,17 +1,16 @@
 import {css} from "@linaria/core";
 
-export const $code = {
-    host: css`
+export const CodeHost = css`
+    @layer defaults {
         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;
-
-        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);
-    `
-}
+        border: .5px solid var(--xyd-code-border-color);
+        background: var(--xyd-code-bgcolor);
+        
+        & [part="content"] {
+            position: relative;
+        }
+    }
+`;

package/src/writer/Code/Code.tsx

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