diff --git a/packages/venia-styleguide/src/components/Button/Button.css b/packages/venia-styleguide/src/components/Button/Button.css new file mode 100644 index 0000000000..7bb67b491f --- /dev/null +++ b/packages/venia-styleguide/src/components/Button/Button.css @@ -0,0 +1,47 @@ +.root { + --color: var(--venia-global-color-gray-900); + background: none; + border-color: rgb(var(--color)); + border-radius: 1.5rem; + border-style: solid; + border-width: 1px; + color: rgb(var(--color)); + font-size: var(--venia-global-text-fontSize-100); + font-weight: var(--venia-global-text-fontWeight-bold); + height: 2rem; + line-height: var(--venia-global-text-lineHeight-300); + max-width: 100%; + min-width: 7.5rem; + outline: none; + padding: 0 1rem; + transition-duration: 384ms; + transition-property: background-color, border-color, color; + transition-timing-function: var(--venia-global-anim-standard); +} + +.root:hover { + --color: var(--venia-brand-color-1-700); +} + +.root:focus { + box-shadow: 0 0 0 2px rgb(var(--venia-pattern-glow-color)), + 0 0 0.5rem 2px rgb(var(--color) / 0.2); + --color: var(--venia-brand-color-1-700); +} + +.root--priority-high { + composes: root; + background-color: rgb(var(--color)); + color: rgb(var(--venia-global-color-gray-50)); +} + +.root--priority-normal { + composes: root; +} + +.content { + min-width: 0; + overflow: hidden; + text-overflow: clip; + white-space: nowrap; +} diff --git a/packages/venia-styleguide/src/components/Button/Button.js b/packages/venia-styleguide/src/components/Button/Button.js new file mode 100644 index 0000000000..6d451e0445 --- /dev/null +++ b/packages/venia-styleguide/src/components/Button/Button.js @@ -0,0 +1,25 @@ +import React, { useMemo } from 'react'; + +import finalizeClasses from '../../util/finalizeClasses'; +import classes from './Button.css'; + +const Button = props => { + const { children, priority, ...rest } = props; + + const finalClasses = useMemo(() => { + return finalizeClasses(classes, { priority }); + }, [priority]); + + return ( + + ); +}; + +export default Button; + +Button.defaultProps = { + priority: 'normal', + type: 'button' +}; diff --git a/packages/venia-styleguide/src/components/Button/index.js b/packages/venia-styleguide/src/components/Button/index.js new file mode 100644 index 0000000000..efe8c800c0 --- /dev/null +++ b/packages/venia-styleguide/src/components/Button/index.js @@ -0,0 +1 @@ +export { default } from './Button'; diff --git a/packages/venia-styleguide/src/components/Columns/Columns.css b/packages/venia-styleguide/src/components/Columns/Columns.css index 1dc861f3ff..29a45604d1 100644 --- a/packages/venia-styleguide/src/components/Columns/Columns.css +++ b/packages/venia-styleguide/src/components/Columns/Columns.css @@ -12,8 +12,11 @@ } .figure { - background-color: rgb(250 250 250); + align-items: center; + background-color: rgb(var(--venia-global-color-gray-75)); border-radius: 4px; + display: grid; + justify-items: center; min-height: 10rem; padding: 3rem 5rem; } diff --git a/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.css b/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.css new file mode 100644 index 0000000000..968885e573 --- /dev/null +++ b/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.css @@ -0,0 +1,6 @@ +.root { + align-items: center; + display: grid; + gap: 2rem; + justify-items: center; +} diff --git a/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.js b/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.js new file mode 100644 index 0000000000..a6bb3e56db --- /dev/null +++ b/packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import classes from './ExampleGroup.css'; + +const ExampleGroup = props =>
; + +export default ExampleGroup; diff --git a/packages/venia-styleguide/src/components/ExampleGroup/index.js b/packages/venia-styleguide/src/components/ExampleGroup/index.js new file mode 100644 index 0000000000..e643726a1a --- /dev/null +++ b/packages/venia-styleguide/src/components/ExampleGroup/index.js @@ -0,0 +1 @@ +export { default } from './ExampleGroup'; diff --git a/packages/venia-styleguide/src/components/Routes/routes.yml b/packages/venia-styleguide/src/components/Routes/routes.yml index 1e8a5f818a..feecab8bef 100644 --- a/packages/venia-styleguide/src/components/Routes/routes.yml +++ b/packages/venia-styleguide/src/components/Routes/routes.yml @@ -10,8 +10,13 @@ groups: !!pairs - "design-tokens" - "color" - "typography" +- components: + label: "Components" + items: + - "button" pages: !!pairs +- button: "Button" - color: "Color" - design-tokens: "Design tokens" - principles: "Principles" diff --git a/packages/venia-styleguide/src/components/Section/Section.css b/packages/venia-styleguide/src/components/Section/Section.css index 0439ae6385..e11d475779 100644 --- a/packages/venia-styleguide/src/components/Section/Section.css +++ b/packages/venia-styleguide/src/components/Section/Section.css @@ -8,10 +8,9 @@ } .rule { - background-color: rgb(75 75 75); + background-color: rgb(var(--venia-global-color-gray-800)); border: none; - border-radius: 2px; - height: 4px; + height: 2px; margin: 0.5rem 0 2.5rem; } diff --git a/packages/venia-styleguide/src/pages/button/Button.md b/packages/venia-styleguide/src/pages/button/Button.md new file mode 100644 index 0000000000..73ac4e9c78 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/Button.md @@ -0,0 +1,29 @@ +import Article from "../../components/Article" +import Section from "../../components/Section" +import TableOfContents from "../../components/TableOfContents" + +import Behaviors from "./sections/Behaviors" +import Options from "./sections/Options" + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce +quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, +laoreet vel tortor. Pellentesque commodo tellus nibh, vitae +varius lectus pharetra in. Aliquam quis nisi ligula. Proin sit +amet mauris ac lacus efficitur varius eget in urna. Ut sagittis +feugiat ex et dictum. Nam ut tempor urna, at dapibus erat. +Aenean ac dui a tellus venenatis accumsan. + +*** + +
+ +
+
+ +
+
+ +
+ +export const title = "Button" +export default Article diff --git a/packages/venia-styleguide/src/pages/button/index.js b/packages/venia-styleguide/src/pages/button/index.js new file mode 100644 index 0000000000..efe8c800c0 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/index.js @@ -0,0 +1 @@ +export { default } from './Button'; diff --git a/packages/venia-styleguide/src/pages/button/sections/Behaviors/FlexibleWidth.md b/packages/venia-styleguide/src/pages/button/sections/Behaviors/FlexibleWidth.md new file mode 100644 index 0000000000..5f968715ab --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Behaviors/FlexibleWidth.md @@ -0,0 +1,3 @@ +#### Flexible width + +A button derives its width from the text. diff --git a/packages/venia-styleguide/src/pages/button/sections/Behaviors/MinimumWidth.md b/packages/venia-styleguide/src/pages/button/sections/Behaviors/MinimumWidth.md new file mode 100644 index 0000000000..e0bc837f6b --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Behaviors/MinimumWidth.md @@ -0,0 +1,3 @@ +#### Minimum width + +Standard buttons have a minimum width of `7.5rem`, ensuring their shape is easily identifiable even when the text is short. Quiet buttons have no minimum width. diff --git a/packages/venia-styleguide/src/pages/button/sections/Behaviors/TextOverflow.md b/packages/venia-styleguide/src/pages/button/sections/Behaviors/TextOverflow.md new file mode 100644 index 0000000000..19955aee95 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Behaviors/TextOverflow.md @@ -0,0 +1,3 @@ +#### Text overflow + +If the text overflows, it will clip, not wrap to a second line. To avoid clipping, keep the text as concise as possible. diff --git a/packages/venia-styleguide/src/pages/button/sections/Behaviors/index.md b/packages/venia-styleguide/src/pages/button/sections/Behaviors/index.md new file mode 100644 index 0000000000..635c37793a --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Behaviors/index.md @@ -0,0 +1,27 @@ +import Button from "../../../../components/Button" +import Columns from "../../../../components/Columns" +import ExampleGroup from "../../../../components/ExampleGroup" +import FlexibleWidth from "./FlexibleWidth" +import MinimumWidth from "./MinimumWidth" +import TextOverflow from "./TextOverflow" + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/venia-styleguide/src/pages/button/sections/Options/HighPriority.md b/packages/venia-styleguide/src/pages/button/sections/Options/HighPriority.md new file mode 100644 index 0000000000..673e6857f6 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Options/HighPriority.md @@ -0,0 +1,3 @@ +#### High priority + +A high priority button is more prominent than other buttons, attracting the user's attention and inviting them to consider taking a particular action. Avoid having more than one high priority button on the screen at once. diff --git a/packages/venia-styleguide/src/pages/button/sections/Options/NormalPriority.md b/packages/venia-styleguide/src/pages/button/sections/Options/NormalPriority.md new file mode 100644 index 0000000000..97d6aadd52 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Options/NormalPriority.md @@ -0,0 +1,3 @@ +#### Normal priority + +A normal button presents the user with an optional or less preferable action. diff --git a/packages/venia-styleguide/src/pages/button/sections/Options/OptionsTable.md b/packages/venia-styleguide/src/pages/button/sections/Options/OptionsTable.md new file mode 100644 index 0000000000..d128a8780f --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Options/OptionsTable.md @@ -0,0 +1,9 @@ +#### Table of options + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce +quis euismod nisi. + +Property | Values | Default Value +:--- | :--- | :--- +priority | high / normal | normal +quiet | true / false | false diff --git a/packages/venia-styleguide/src/pages/button/sections/Options/index.md b/packages/venia-styleguide/src/pages/button/sections/Options/index.md new file mode 100644 index 0000000000..9bb2133608 --- /dev/null +++ b/packages/venia-styleguide/src/pages/button/sections/Options/index.md @@ -0,0 +1,24 @@ +import Button from "../../../../components/Button" +import Columns from "../../../../components/Columns" +import ExampleGroup from "../../../../components/ExampleGroup" +import HighPriority from "./HighPriority" +import NormalPriority from "./NormalPriority" +import OptionsTable from "./OptionsTable" + + + + + + + + + + + + + + diff --git a/packages/venia-styleguide/src/styles/reset.css b/packages/venia-styleguide/src/styles/reset.css index 2f2e7e9d90..27839dfcdb 100644 --- a/packages/venia-styleguide/src/styles/reset.css +++ b/packages/venia-styleguide/src/styles/reset.css @@ -50,9 +50,14 @@ border-collapse: collapse; border-spacing: 0; font-size: var(--venia-typography-body-S-fontSize); + margin: 2rem 0 1rem; width: 100%; } +:global table:first-child { + margin-top: 0; +} + :global td { border: 0 solid rgb(225 225 225); border-width: 1px 0; @@ -60,6 +65,7 @@ } :global th { + color: rgb(var(--venia-global-color-gray-700)); font-size: var(--venia-typography-detail-S-fontSize); font-weight: var(--venia-global-text-fontWeight-bold); line-height: var(--venia-typography-detail-lineHeight); diff --git a/packages/venia-styleguide/src/styles/tokens.css b/packages/venia-styleguide/src/styles/tokens.css index 180e8a8325..b13f9f514d 100644 --- a/packages/venia-styleguide/src/styles/tokens.css +++ b/packages/venia-styleguide/src/styles/tokens.css @@ -1,5 +1,10 @@ /* global tokens */ :global :root { + /* animation */ + --venia-global-anim-in: cubic-bezier(0, 0, 0.2, 1); + --venia-global-anim-out: cubic-bezier(0.4, 0, 1, 1); + --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1); + /* color */ --venia-global-color-gray-50: 255 255 255; /* ffffff 100% 1.09 */ --venia-global-color-gray-75: 250 250 250; /* fafafa 98% 1.04 */ @@ -59,6 +64,7 @@ /* colors */ --venia-brand-color-1-400: var(--venia-global-color-teal-400); --venia-brand-color-1-700: var(--venia-global-color-teal-700); + --venia-pattern-glow-color: var(--venia-global-color-sea-500); /* typography */ /* heading */ --venia-typography-heading-XL-fontSize: var(