-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bases): add corner, borders, shadows, spacing
- Loading branch information
1 parent
57dc7b5
commit b7b7858
Showing
21 changed files
with
811 additions
and
295 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 137 additions & 0 deletions
137
packages/components/src/core/Bases/Borders/index.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { Meta } from "@storybook/react"; | ||
| import { BADGE } from "../../../common/SDSBadges"; | ||
| import { useTheme } from "@mui/material"; | ||
| import { getBorders } from "../../styles"; | ||
| import { | ||
| StyledBorderBox, | ||
| StyledBorderVariable, | ||
| StyledBordersWrapper, | ||
| } from "./style"; | ||
| import Table from "src/core/Table"; | ||
| import TableHeader from "src/core/TableHeader"; | ||
| import CellHeader from "src/core/CellHeader"; | ||
| import TableRow from "src/core/TableRow"; | ||
| import CellComponent from "src/core/CellComponent"; | ||
| import CellBasic from "src/core/CellBasic"; | ||
| import { copyToClipboard } from "../utils"; | ||
|
|
||
| export default { | ||
| parameters: { | ||
| badges: [BADGE.WIP], | ||
| }, | ||
| title: "Bases/Borders", | ||
| } as Meta; | ||
|
|
||
| // Corners | ||
|
|
||
| const Usage: Record<string, string> = { | ||
| "$sds-borders-accent-300": "-", | ||
| "$sds-borders-accent-400": | ||
| "Secondary buttons, active states of input containers", | ||
| "$sds-borders-accent-500": "Hover rounded and square buttons", | ||
| "$sds-borders-accent-600": "Active rounded and square buttons", | ||
| "$sds-borders-accent-dashed": | ||
| "Hover states for containers with dashed borders", | ||
| "$sds-borders-base-100": "Modals and dropdown Menus", | ||
| "$sds-borders-base-200": "-", | ||
| "$sds-borders-base-300": | ||
| "Disabled or non-interactive containers (buttons/inputs/tooltips)", | ||
| "$sds-borders-base-400": "Input borders (default states)", | ||
| "$sds-borders-base-500": "-", | ||
| "$sds-borders-base-black": "Input and dropdown hover states", | ||
| "$sds-borders-base-dashed": "File upload/drag and drop containers", | ||
| "$sds-borders-beta-400": "-", | ||
| "$sds-borders-info-400": "-", | ||
| "$sds-borders-link-dashed": | ||
| "Default bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.", | ||
| "$sds-borders-link-solid": | ||
| "Hover and Pressed bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.", | ||
| "$sds-borders-negative-400": "Error state on inputs.", | ||
| "$sds-borders-none": "No borders", | ||
| "$sds-borders-notice-400": "Warning state on inputs.", | ||
| "$sds-borders-positive-400": "Success state on inputs.", | ||
| }; | ||
|
|
||
| const Template = () => { | ||
| const theme = useTheme(); | ||
| const borders = getBorders({ theme }); | ||
|
|
||
| const RenderTableRow = ( | ||
| border: string, | ||
| group: string | null, | ||
| name: string | ||
| ) => { | ||
| const variable = group | ||
| ? "$sds-borders-" + group + "-" + name | ||
| : "$sds-borders-" + name; | ||
|
|
||
| return ( | ||
| <TableRow key={name}> | ||
| <CellComponent verticalAlign="center" horizontalAlign="center"> | ||
| <StyledBorderBox border={border} /> | ||
| </CellComponent> | ||
|
|
||
| <CellComponent | ||
| verticalAlign="center" | ||
| onClick={() => copyToClipboard(`border: ${border};`)} | ||
| > | ||
| <StyledBorderVariable>border: {border};</StyledBorderVariable> | ||
| </CellComponent> | ||
|
|
||
| <CellComponent | ||
| verticalAlign="center" | ||
| onClick={() => copyToClipboard(variable)} | ||
| > | ||
| <StyledBorderVariable>{variable}</StyledBorderVariable> | ||
| </CellComponent> | ||
|
|
||
| <CellBasic | ||
| verticalAlign="center" | ||
| primaryText={Usage[variable]} | ||
| shouldShowTooltipOnHover={false} | ||
| /> | ||
| </TableRow> | ||
| ); | ||
| }; | ||
|
|
||
| if (borders) { | ||
| const { none, link, base, ...rest } = borders; | ||
|
|
||
| // eslint-disable-next-line sort-keys | ||
| const TableBodyContent = Object.entries({ none, link, base, ...rest }).map( | ||
| ([key, value]) => { | ||
| if (typeof value === "object") { | ||
| return Object.entries(value).map(([k, v]) => { | ||
| return RenderTableRow(v as string, key, k); | ||
| }); | ||
| } else { | ||
| return RenderTableRow(value, null, key); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| return ( | ||
| <Table> | ||
| <TableHeader> | ||
| <CellHeader hideSortIcon style={{ width: 40 }}> | ||
| Example | ||
| </CellHeader> | ||
| <CellHeader hideSortIcon>Variable</CellHeader> | ||
| <CellHeader hideSortIcon>Value</CellHeader> | ||
| <CellHeader hideSortIcon>Usage</CellHeader> | ||
| </TableHeader> | ||
| <tbody>{TableBodyContent}</tbody> | ||
| </Table> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export const Default = { | ||
| render: () => ( | ||
| <> | ||
| <StyledBordersWrapper> | ||
| <Template /> | ||
| </StyledBordersWrapper> | ||
| </> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { styled } from "@mui/material"; | ||
| import { CommonThemeProps, fontCodeXs, getCorners } from "src/core/styles"; | ||
|
|
||
| export const StyledBordersWrapper = styled("div")` | ||
| max-width: 100%; | ||
| `; | ||
|
|
||
| interface IStyledCornerBoxProps extends CommonThemeProps { | ||
| border: string; | ||
| } | ||
|
|
||
| export const StyledBorderBox = styled("div")` | ||
| ${(props: IStyledCornerBoxProps) => { | ||
| const { border } = props; | ||
| const corners = getCorners(props); | ||
| const BorderWidth = 1; | ||
| const BoxSize = 60; | ||
| return ` | ||
| position: relative; | ||
| margin-left: 10px; | ||
| width: ${BoxSize}px; | ||
| height: ${BoxSize}px; | ||
| background-color: transparent; | ||
| border-radius: ${BorderWidth}px; | ||
| border: ${border}; | ||
| border-radius: ${corners?.l}px; | ||
| &:hover { | ||
| animation: pulse 3s infinite; | ||
| } | ||
| @keyframes pulse { | ||
| 50% { | ||
| border-radius: 0; | ||
| } | ||
| } | ||
| `; | ||
| }} | ||
| `; | ||
|
|
||
| export const StyledBorderVariable = styled("p")` | ||
| ${fontCodeXs} | ||
| margin: 0; | ||
| cursor: pointer; | ||
| &:active { | ||
| font-weight: bold; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/components/src/core/Bases/Corners/index.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { Meta } from "@storybook/react"; | ||
| import { BADGE } from "../../../common/SDSBadges"; | ||
| import { useTheme } from "@mui/material"; | ||
| import { Corners, getCorners } from "../../styles"; | ||
| import { | ||
| StyledCornerBox, | ||
| StyledCornerVariable, | ||
| StyledCornersWrapper, | ||
| } from "./style"; | ||
| import Table from "src/core/Table"; | ||
| import TableHeader from "src/core/TableHeader"; | ||
| import CellHeader from "src/core/CellHeader"; | ||
| import TableRow from "src/core/TableRow"; | ||
| import CellComponent from "src/core/CellComponent"; | ||
| import CellBasic from "src/core/CellBasic"; | ||
| import { copyToClipboard } from "../utils"; | ||
|
|
||
| export default { | ||
| parameters: { | ||
| badges: [BADGE.WIP], | ||
| }, | ||
| title: "Bases/Corners", | ||
| } as Meta; | ||
|
|
||
| // Corners | ||
|
|
||
| const Usage: Record<keyof Corners, string> = { | ||
| l: "Rounded elements (buttons and inputs)", | ||
| m: "Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.)", | ||
| none: "Corners on backgrounds for hovered dropdown menus and tables.", | ||
| s: "Corners on elements that are smaller than 20px × 20px.", | ||
| }; | ||
|
|
||
| const Title: Record<keyof Corners, string> = { | ||
| l: "Large Corner", | ||
| m: "Medium Corner", | ||
| none: "No Set Corner", | ||
| s: "Small Corner", | ||
| }; | ||
|
|
||
| const Template = () => { | ||
| const theme = useTheme(); | ||
| const corners = getCorners({ theme }); | ||
|
|
||
| const RenderTableRow = (size: number, name: keyof Corners) => { | ||
| const variable = "$sds-corners-corner-" + name; | ||
|
|
||
| return ( | ||
| <TableRow key={name}> | ||
| <CellComponent verticalAlign="center" horizontalAlign="center"> | ||
| <StyledCornerBox size={size} /> | ||
| </CellComponent> | ||
|
|
||
| <CellBasic | ||
| primaryText={Title[name]} | ||
| verticalAlign="center" | ||
| shouldShowTooltipOnHover={false} | ||
| /> | ||
|
|
||
| <CellComponent verticalAlign="center"> | ||
| <StyledCornerVariable>{`${size}px`}</StyledCornerVariable> | ||
| </CellComponent> | ||
|
|
||
| <CellComponent | ||
| verticalAlign="center" | ||
| onClick={() => copyToClipboard(variable)} | ||
| > | ||
| <StyledCornerVariable>{variable}</StyledCornerVariable> | ||
| </CellComponent> | ||
|
|
||
| <CellBasic | ||
| verticalAlign="center" | ||
| primaryText={Usage[name]} | ||
| shouldShowTooltipOnHover={false} | ||
| /> | ||
| </TableRow> | ||
| ); | ||
| }; | ||
|
|
||
| if (corners) { | ||
| const TableBodyContent = Object.entries(corners) | ||
| .sort((a, b) => b[1] - a[1]) | ||
| .map(([key, value]) => RenderTableRow(value, key as keyof Corners)); | ||
|
|
||
| return ( | ||
| <Table> | ||
| <TableHeader> | ||
| <CellHeader hideSortIcon>Example</CellHeader> | ||
| <CellHeader hideSortIcon>Corner Type</CellHeader> | ||
| <CellHeader hideSortIcon style={{ width: 40 }}> | ||
| Value | ||
| </CellHeader> | ||
| <CellHeader hideSortIcon>Variable</CellHeader> | ||
| <CellHeader hideSortIcon>Usage</CellHeader> | ||
| </TableHeader> | ||
| <tbody>{TableBodyContent}</tbody> | ||
| </Table> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export const Default = { | ||
| render: () => ( | ||
| <> | ||
| <StyledCornersWrapper> | ||
| <Template /> | ||
| </StyledCornersWrapper> | ||
| </> | ||
| ), | ||
| }; |
Oops, something went wrong.