-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add sustainable views brand (#1383)
feat: add sustainable views brand --------- Co-authored-by: Akaki Mikaia <[email protected]> Co-authored-by: Lee Moody <[email protected]>
- Loading branch information
3 people
authored
Jan 4, 2024
1 parent
dabb875
commit fbd1939
Showing
16 changed files
with
28,685 additions
and
22,385 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
112 changes: 112 additions & 0 deletions
112
.../for-everyone-website/src/content/docs/sustainable-views/components/buttons.mdx
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,112 @@ | ||
| --- | ||
| title: Buttons | ||
| description: Buttons are triggers that provide users with a call to action. Typically allowing users to execute, choose, submit and confirm actions. | ||
| --- | ||
| import { Button } from '@financial-times/o3-button'; | ||
| import '@financial-times/o3-button/css/sustainable-views.css'; | ||
| import {renderToString} from 'react-dom/server'; | ||
| import { Code } from 'astro:components'; | ||
| import { default as ButtonAnatomy } from '../../../../components/ButtonAnatomy.astro'; | ||
| import {Content as ButtonGuidelines} from '../../../../content-partial/docs/components/buttons-guidelines.mdx'; | ||
|
|
||
|
|
||
| export function Preview ({component: Component, componentProps } = props) { | ||
| const ComponentInstance = Component(componentProps); | ||
| const componentHtml = renderToString(ComponentInstance); | ||
| const componentJSX = `<${Component.name} ${Object.entries(componentProps).map(p => `${p[0]}="${p[1]}"`).join(' ')} />`; | ||
| const inverse = componentProps['theme'] === 'inverse'; | ||
| return <> | ||
| <div style={`padding: var(--o3-spacing-2xs); margin-left: calc(var(--o3-spacing-2xs) * -1); ${inverse ? 'background-color: black' : ''}`}> | ||
| <Component {...componentProps} /> | ||
| </div> | ||
| <a style="display: inline-block; margin: var(--o3-spacing-2xs) 0;" href={`https://main--64faf6b1815b6c0106f82e74.chromatic.com/?path=/story/core-sustainable-views-o3-${Component.name.toLowerCase()}--${Component.name.toLowerCase()}&args=${Object.entries(componentProps).map(p => `${p[0]}:${p[1]};`).join('')}`}>Open in StoryBook</a> | <a style="display: inline-block; margin: var(--o3-spacing-2xs) 0;" href="https://www.figma.com/file/Y7u0SwIJ1mCNDE0dpzgHCJ/Sustainable-Views---Design-System?type=design&node-id=3604-103&mode=design">Open in Figma</a> | ||
| <details> | ||
| <summary>code</summary> | ||
| <Code code={componentJSX} lang="jsx" theme="css-variables" /> | ||
| <Code code={componentHtml} lang="html" theme="css-variables" /> | ||
| </details> | ||
| <hr /> | ||
| </> | ||
| } | ||
|
|
||
| Buttons are triggers that provide users with a call to action. Typically allowing users to execute, choose, submit and confirm actions. | ||
|
|
||
| ## Anatomy | ||
|
|
||
| The button component contains two required elements and one optional element. | ||
|
|
||
| <ButtonAnatomy /> | ||
|
|
||
| 1. <strong>Label</strong>: Text that explains the result of selecting the button. Use action verbs or phrases to tell the user what will happen next. | ||
| 1. <strong>Container</strong>: has minimum width of 80px for standard buttons and 64px for small buttons. | ||
| 1. <strong>Icon (optional)</strong>: Most buttons don't need an icon. Use an icon to add additional affordance where the icon has a clear and well-established meaning. | ||
|
|
||
| ## Usage Guidelines | ||
|
|
||
| <ButtonGuidelines /> | ||
|
|
||
| ## Icons | ||
|
|
||
| Buttons may be used with icons, without icons, or only icons. | ||
|
|
||
| ### Without icon | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse" }} /> | ||
|
|
||
| ### With icon | ||
|
|
||
| When icons are used, these are always left aligned. | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse", icon: "search"}} /> | ||
|
|
||
| ### Only icon | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse", icon: "search", iconOnly: true }} /> | ||
|
|
||
| ## Sizes | ||
|
|
||
| The button comes in two sizes: standard and small. | ||
|
|
||
| ### Standard | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse" }} /> | ||
|
|
||
| ### Small | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse", size: "small" }} /> | ||
|
|
||
| ## Types | ||
|
|
||
| There are three types of buttons to support different contexts. | ||
|
|
||
| ### Primary | ||
|
|
||
| The primary button is used for the most important calls to action on a page. Primary buttons should only appear once per product area (not including the application header, modal dialogue, on-site messaging, or side panel). | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse" }} /> | ||
|
|
||
| ### Secondary | ||
|
|
||
| For secondary actions on each page or used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "secondary", theme: "inverse" }} /> | ||
|
|
||
| ### Ghost | ||
|
|
||
| For the least pronounced actions; often used in conjunction with a primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for ‘Save and continue’ the ghost button would be ‘Skip’. | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "ghost", theme: "inverse" }} /> | ||
|
|
||
| ## Themes | ||
|
|
||
| Each button type supports the following themes. | ||
|
|
||
| ### Standard | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary" }} /> | ||
|
|
||
| ### Inverse | ||
|
|
||
| An alternative theme for use on dark backgrounds. | ||
|
|
||
| <Preview component={Button} componentProps={{label: "hello", type: "primary", theme: "inverse" }} /> |
18 changes: 18 additions & 0 deletions
18
apps/for-everyone-website/src/content/docs/sustainable-views/guides/colours.mdx
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,18 @@ | ||
| --- | ||
| title: Colours | ||
| description: A guide in my new Starlight docs site | ||
| --- | ||
|
|
||
| import Palette from '../../../../components/Palette.astro'; | ||
|
|
||
| ## Primary Palette | ||
|
|
||
| These are Sustainable Views' primary brand colours. | ||
|
|
||
| <Palette brand='sustainable-views' type="palette" palette="primary" /> | ||
|
|
||
| ## Secondary Palette | ||
|
|
||
| Secondary colours provide visual hierarchy to differentiate content and are brand identifiers of the FT. | ||
|
|
||
| <Palette brand='sustainable-views' type="palette" palette="secondary" /> |
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
Oops, something went wrong.