diff --git a/scripts/dev-resources/devResources.mjs b/scripts/dev-resources/devResources.mjs index f78d68c..7296fe7 100644 --- a/scripts/dev-resources/devResources.mjs +++ b/scripts/dev-resources/devResources.mjs @@ -43,7 +43,7 @@ export const devResources = { "": [{ name: "AvatarBlock - Storybook", url: `${STORYBOOK_URL}sds-primitives-avatars--story-avatar-block`}], "": [{ name: "AvatarGroup - Storybook", url: `${STORYBOOK_URL}sds-primitives-avatars--story-avatar-group`}], "": [{ name: "Button - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-destructive-button`}], - "": [{ name: "DestructiveButton - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-destructive-button`}], + "": [{ name: "ButtonDanger - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-button-danger`}], "": [{ name: "ButtonGroup - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-button-group`}], "": [{ name: "IconButton - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-icon-button`}], "": [{ name: "Dialog - Storybook", url: `${STORYBOOK_URL}sds-primitives-dialog--story-dialog`}], diff --git a/src/App.tsx b/src/App.tsx index 5e3ffe8..f0ad747 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,7 +101,7 @@ function App() { actionVariant="neutral" heading="Free" price={(0 * annualRatio).toString()} - pricePer={`/ per ${intervalText}`} + pricePer={`/ ${intervalText}`} list={ List item 1 @@ -115,7 +115,7 @@ function App() { action="Select" heading="Starter" price={(50 * annualRatio).toString()} - pricePer={`/ per ${intervalText}`} + pricePer={`/ ${intervalText}`} list={ List item 1 @@ -130,7 +130,7 @@ function App() { actionVariant="neutral" heading="Enterprise" price={(150 * annualRatio).toString()} - pricePer={`/ per ${intervalText}`} + pricePer={`/ ${intervalText}`} list={ List item 1 diff --git a/src/figma/primitives/Button.figma.tsx b/src/figma/primitives/Button.figma.tsx index bd9bcfe..1dd3dbc 100644 --- a/src/figma/primitives/Button.figma.tsx +++ b/src/figma/primitives/Button.figma.tsx @@ -1,5 +1,5 @@ import figma from "@figma/code-connect"; -import { Button, ButtonGroup, DestructiveButton } from "primitives"; +import { Button, ButtonDanger, ButtonGroup } from "primitives"; const sharedProps = { label: figma.string("Label"), @@ -44,11 +44,11 @@ figma.connect(Button, "", { }), }, example: ({ label, iconEnd, iconStart, ...props }) => ( - {}} {...props}> + {}} {...props}> {iconStart} {label} {iconEnd} - + ), }); diff --git a/src/stories/_welcome/Hello.stories.tsx b/src/stories/_welcome/Hello.stories.tsx index fbd6e42..6b74d01 100644 --- a/src/stories/_welcome/Hello.stories.tsx +++ b/src/stories/_welcome/Hello.stories.tsx @@ -24,14 +24,14 @@ export const StoryHello: StoryObj<{}> = { Figma Simple Design System - + Simple Design System (SDS) is a base design system that shows how Figma’s Variables, Styles, Components, and Code Connect can be used alongside a React and CSS codebase to form a complete picture of a responsive web design system. - + SDS is not just another design system in Figma. There are still many gaps between design and development, and SDS provides some best practices for how to bridge them. SDS tries to remain honest @@ -40,7 +40,7 @@ export const StoryHello: StoryObj<{}> = { typical of many code-first component libraries. - + Whether you’re looking to use SDS to start a new project, or are looking for examples of some common design systems best practices, you'll find tools inside this codebase and design file to steer diff --git a/src/stories/layout/Flex.stories.tsx b/src/stories/layout/Flex.stories.tsx index efdf337..86762a3 100644 --- a/src/stories/layout/Flex.stories.tsx +++ b/src/stories/layout/Flex.stories.tsx @@ -35,8 +35,8 @@ export const StoryFlex: StoryObj = { }, }, render: (args) => ( - - + + {renderChild("full")} {renderChild("major")} {renderChild("minor")} @@ -55,7 +55,7 @@ export const StoryFlex: StoryObj = { {renderChild("minor")} {renderChild("half")} - + {renderChild("full")} {renderChild("major")} {renderChild("minor")} @@ -67,7 +67,7 @@ export const StoryFlex: StoryObj = { {renderChild("minor")} {renderChild("minor")} - + {renderChild("span")} {renderChild("span")} {renderChild("span")} diff --git a/src/stories/primitives/Button.stories.tsx b/src/stories/primitives/Button.stories.tsx index 1c5adcf..277b36a 100644 --- a/src/stories/primitives/Button.stories.tsx +++ b/src/stories/primitives/Button.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { IconActivity, IconArrowLeft } from "icons"; -import { Button, ButtonGroup, DestructiveButton } from "primitives"; +import { Button, ButtonDanger, ButtonGroup } from "primitives"; const meta: Meta = { component: Button, @@ -36,8 +36,8 @@ export const StoryButton: StoryObj = { ), }; -export const StoryDestructiveButton: StoryObj = { - name: "Destructive Button", +export const StoryButtonDanger: StoryObj = { + name: "Button Danger", args: { children: "Hello world", variant: "danger-primary", @@ -55,11 +55,11 @@ export const StoryDestructiveButton: StoryObj = { }, }, render: ({ children, ...props }) => ( - + {children} - + ), }; diff --git a/src/stories/primitives/Notification.stories.tsx b/src/stories/primitives/Notification.stories.tsx index ea581a7..77c2d81 100644 --- a/src/stories/primitives/Notification.stories.tsx +++ b/src/stories/primitives/Notification.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { IconInfo } from "icons"; import { Button, - DestructiveButton, + ButtonDanger, Notification, Text, TextStrong, @@ -35,7 +35,7 @@ export const StoryNotification: StoryObj< {_type === "message" ? ( ) : ( - Hello + Hello )} ); diff --git a/src/ui/compositions/Headers/headers.css b/src/ui/compositions/Headers/headers.css index f60df11..77f3176 100644 --- a/src/ui/compositions/Headers/headers.css +++ b/src/ui/compositions/Headers/headers.css @@ -36,7 +36,7 @@ } } - > .icon { + > .logo { --icon-color: var(--sds-color-icon-default-default); } } diff --git a/src/ui/primitives/Button/Button.tsx b/src/ui/primitives/Button/Button.tsx index fb0c7ae..0c017ef 100644 --- a/src/ui/primitives/Button/Button.tsx +++ b/src/ui/primitives/Button/Button.tsx @@ -18,14 +18,17 @@ export const Button = React.forwardRef(function Button( ); }); -export type DestructiveButtonProps = Omit & { +export type ButtonDangerProps = Omit & { variant?: Exclude< ButtonBaseProps["variant"], "primary" | "subtle" | "neutral" >; }; -export const DestructiveButton = React.forwardRef(function Button( - { className, variant = "danger-primary", ...props }: DestructiveButtonProps, +/** + * Only used for destructive actions + */ +export const ButtonDanger = React.forwardRef(function Button( + { className, variant = "danger-primary", ...props }: ButtonDangerProps, ref: React.ForwardedRef, ) { return ( diff --git a/src/ui/primitives/Button/button.css b/src/ui/primitives/Button/button.css index 0a04128..4487551 100644 --- a/src/ui/primitives/Button/button.css +++ b/src/ui/primitives/Button/button.css @@ -32,7 +32,8 @@ } .button-size-medium { - --button-font: var(--sds-font-body); + --button-font: var(--sds-font-body-base); + --button-padding-x: var(--sds-size-space-300); --button-padding-y: var(--sds-size-space-300); diff --git a/src/ui/primitives/IconButton/IconButton.tsx b/src/ui/primitives/IconButton/IconButton.tsx index 66560d5..f753e9f 100644 --- a/src/ui/primitives/IconButton/IconButton.tsx +++ b/src/ui/primitives/IconButton/IconButton.tsx @@ -1,8 +1,8 @@ import clsx from "clsx"; import { Button, - DestructiveButton, - DestructiveButtonProps, + ButtonDanger, + ButtonDangerProps, type ButtonProps, } from "primitives"; import { ForwardedRef, forwardRef } from "react"; @@ -20,7 +20,7 @@ export const IconButton = forwardRef(function IconButton( }); export type DestructiveIconButtonProps = Omit< - DestructiveButtonProps, + ButtonDangerProps, "aria-label" > & { "aria-label": string; @@ -29,5 +29,5 @@ export const DestructiveIconButton = forwardRef(function IconButton( props: DestructiveIconButtonProps, ref: ForwardedRef, ) { - return ; + return ; }); diff --git a/src/ui/primitives/Logo/Logo.tsx b/src/ui/primitives/Logo/Logo.tsx index a3b14db..c3119b7 100644 --- a/src/ui/primitives/Logo/Logo.tsx +++ b/src/ui/primitives/Logo/Logo.tsx @@ -1,5 +1,4 @@ import clsx from "clsx"; -import { IconFigma } from "icons"; import { AnchorOrButton, type AnchorOrButtonProps } from "utils"; import "./logo.css"; @@ -7,8 +6,40 @@ export type LogoProps = AnchorOrButtonProps; export function Logo({ className, ...props }: LogoProps) { const classNames = clsx(className, "logo"); return ( - - + + + + + + + + ); } diff --git a/src/ui/primitives/Logo/logo.css b/src/ui/primitives/Logo/logo.css index 810aeb7..158637d 100644 --- a/src/ui/primitives/Logo/logo.css +++ b/src/ui/primitives/Logo/logo.css @@ -18,4 +18,9 @@ top: calc(-1 * var(--offset)); } } + svg { + --logo-color: var(--sds-color-icon-default-default); + height: auto; + width: var(--sds-size-icon-large); + } } diff --git a/src/ui/primitives/Text/Text.tsx b/src/ui/primitives/Text/Text.tsx index 87a71fa..98442b7 100644 --- a/src/ui/primitives/Text/Text.tsx +++ b/src/ui/primitives/Text/Text.tsx @@ -15,7 +15,7 @@ export type TextProps = RACTextProps & TextLineHeightProps; export function Text({ className, elementType = "p", - lineHeight = "single", + lineHeight = "body", ...props }: TextProps) { const classNames = clsx( @@ -27,24 +27,34 @@ export function Text({ ); } -export type TextSmallProps = RACTextProps; +export type TextSmallProps = RACTextProps & TextLineHeightProps; export function TextSmall({ className, elementType = "small", + lineHeight = "body", ...props }: TextSmallProps) { - const classNames = clsx(className, "text-body-small"); + const classNames = clsx( + className, + "text-body-small", + `text-line-height-${lineHeight}`, + ); return ( ); } -export type TextSmallStrongProps = RACTextProps; +export type TextSmallStrongProps = RACTextProps & TextLineHeightProps; export function TextSmallStrong({ className, elementType = "small", + lineHeight = "body", ...props }: TextSmallProps) { - const classNames = clsx(className, "text-body-small-strong"); + const classNames = clsx( + className, + "text-body-small-strong", + `text-line-height-${lineHeight}`, + ); return ( );