diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index ea5609118d..7e00a87912 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,25 +1,2 @@ - diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html deleted file mode 100644 index 31ca7dd599..0000000000 --- a/.storybook/preview-head.html +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/.storybook/preview.js b/.storybook/preview.js index b65382beba..74cdca4cc5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -20,14 +20,7 @@ const SORT_ORDER = { 'Contributing', 'Code of Conduct' ], - Advanced: [ - 'Static CSS', - 'Base Components', - 'Theme', - 'Grid', - 'Icons', - 'Fonts' - ], + Advanced: ['Static CSS', 'Base Components', 'Theme', 'Grid', 'Icons'], Typography: ['Heading', 'SubHeading', 'Text'], Layout: [], Forms: [], diff --git a/docs/advanced/fonts.story.mdx b/docs/advanced/fonts.story.mdx deleted file mode 100644 index 2c40d139f0..0000000000 --- a/docs/advanced/fonts.story.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import { Meta } from '../../.storybook/components'; - - - -# Fonts - -## Defining the font stack - -The font stack can be configured as part of the theme. The default font stack is applied to the `body` and the mono font stack is applied to `pre` and `code` tags. The default values are: - -```js -export const fontStack = { - default: 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI"', - mono: 'Consolas, monaco, monospace' -}; -``` - -## Loading custom web fonts - -There are myriads of ways to load fonts on the web. You can choose between [FOIT](https://css-tricks.com/fout-foit-foft/), [FOUT](https://www.zachleat.com/web/comprehensive-webfonts/#fout-class) and [FOFT](https://www.zachleat.com/web/comprehensive-webfonts/#foft), each with several implementation techniques. - -Circuit UI does not enforce any approach. It is up to you to choose and implement your preferred one. Have a look at Zach Leatherman's [Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) for inspiration. - -The simplest strategy is the [unceremonious font-face](https://www.zachleat.com/web/comprehensive-webfonts/#font-face) with `preload` and `font-display`. This is the default approach recommended by [Google Fonts](https://fonts.google.com/). Here's how you can implement it with Circuit UI: - -1. Add the font-face(s) that you'd like to use to your global HTML ``: - -```html - - -``` - -2. Update the font stack in your theme: - -```js -export const fontStack = { - regular: '"Lato", sans-serif'; -}; -``` - -At SumUp, we like to use [FOFT, or FOUT with Two Stage Render](https://www.zachleat.com/web/comprehensive-webfonts/#foft) paired with [Critical FOFT with preload](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload). When you opt for this approach, you will have to add some custom global styles. Here's how you can do this with Circuit UI: - -```jsx -import { Global, css } from '@emotion/core'; -import { ThemeProvider } from 'emotion-theming'; -import { theme } from '@sumup/circuit-ui'; - -const fontStyles = css` - body { - font-family: sans-serif; - } - body.fonts-loaded-initial { - font-family: 'LatoInitial', sans-serif; - } - body.fonts-loaded-full { - font-family: 'Lato', sans-serif; - } -`; - -export default function App() { - return ( - - -

Hello World!

- - ); -} -``` diff --git a/src/components/BaseStyles/BaseStyles.spec.js b/src/components/BaseStyles/BaseStyles.spec.tsx similarity index 91% rename from src/components/BaseStyles/BaseStyles.spec.js rename to src/components/BaseStyles/BaseStyles.spec.tsx index 752bcdc3cd..a39f24a00c 100644 --- a/src/components/BaseStyles/BaseStyles.spec.js +++ b/src/components/BaseStyles/BaseStyles.spec.tsx @@ -15,8 +15,9 @@ import React from 'react'; -import BaseStyles from './BaseStyles'; +import { render } from '../../util/test-utils'; +import { BaseStyles } from './BaseStyles'; import { createBaseStyles } from './BaseStylesService'; jest.mock('./BaseStylesService', () => ({ diff --git a/src/components/BaseStyles/BaseStyles.js b/src/components/BaseStyles/BaseStyles.tsx similarity index 86% rename from src/components/BaseStyles/BaseStyles.js rename to src/components/BaseStyles/BaseStyles.tsx index ff34abdd8d..80a3ba3db9 100644 --- a/src/components/BaseStyles/BaseStyles.js +++ b/src/components/BaseStyles/BaseStyles.tsx @@ -18,6 +18,6 @@ import { Global } from '@emotion/core'; import { createBaseStyles } from './BaseStylesService'; -const BaseStyles = () => createBaseStyles(theme)} />; - -export default BaseStyles; +export const BaseStyles = () => ( + createBaseStyles({ theme })} /> +); diff --git a/src/components/BaseStyles/BaseStylesService.spec.js b/src/components/BaseStyles/BaseStylesService.spec.ts similarity index 93% rename from src/components/BaseStyles/BaseStylesService.spec.js rename to src/components/BaseStyles/BaseStylesService.spec.ts index 8383142b3c..4f5ac5a876 100644 --- a/src/components/BaseStyles/BaseStylesService.spec.js +++ b/src/components/BaseStyles/BaseStylesService.spec.ts @@ -19,7 +19,7 @@ import { createBaseStyles } from './BaseStylesService'; describe('BaseStylesService', () => { it('should return the global base styles', () => { - const actual = createBaseStyles(light); + const actual = createBaseStyles({ theme: light }); expect(actual.styles).toMatchSnapshot(); }); }); diff --git a/src/components/BaseStyles/BaseStylesService.js b/src/components/BaseStyles/BaseStylesService.ts similarity index 75% rename from src/components/BaseStyles/BaseStylesService.js rename to src/components/BaseStyles/BaseStylesService.ts index 79b3be1b46..9eaf5021d3 100644 --- a/src/components/BaseStyles/BaseStylesService.js +++ b/src/components/BaseStyles/BaseStylesService.ts @@ -15,16 +15,38 @@ import { css } from '@emotion/core'; +import { StyleProps } from '../../styles/styled'; import { textMega } from '../../styles/style-helpers'; -export const createBaseStyles = theme => css` +const FONTS_BASE_URL = 'https://static.sumup.com/fonts/latin-greek-cyrillic'; + +export const createBaseStyles = ({ theme }: StyleProps) => css` + /** + * Start downloading custom fonts as soon as possible. + */ + @font-face { + font-family: 'aktiv-grotesk'; + font-weight: 400; + font-display: swap; + src: url('${FONTS_BASE_URL}/aktiv-grotest-400.woff2') format('woff2'), + url('${FONTS_BASE_URL}/aktiv-grotest-400.woff') format('woff'), + url('${FONTS_BASE_URL}/aktiv-grotest-400.eot') format('embedded-opentype'); + } + @font-face { + font-family: 'aktiv-grotesk'; + font-weight: 700; + font-display: swap; + src: url('${FONTS_BASE_URL}/aktiv-grotest-700.woff2') format('woff2'), + url('${FONTS_BASE_URL}/aktiv-grotest-700.woff') format('woff'), + url('${FONTS_BASE_URL}/aktiv-grotest-700.eot') format('embedded-opentype'); + } + /** * reset.css * http://meyerweb.com/eric/tools/css/reset/ * v2.0 | 20110126 * License: none (public domain) */ - html, body, div, @@ -134,10 +156,10 @@ export const createBaseStyles = theme => css` q { quotes: none; } - blockquote:before, - blockquote:after, - q:before, - q:after { + blockquote::before, + blockquote::after, + q::before, + q::after { content: ''; content: none; } diff --git a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap deleted file mode 100644 index 2b5041639d..0000000000 --- a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap +++ /dev/null @@ -1,8 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BaseStylesService should return the global base styles 1`] = ` -"html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;[type='button']{appearance:none;}}body{background-color:#FAFBFC;color:#0F131A; - font-size: 16px; - line-height: 24px; - ;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}" -`; diff --git a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap new file mode 100644 index 0000000000..d44ab0df52 --- /dev/null +++ b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap @@ -0,0 +1,208 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BaseStylesService should return the global base styles 1`] = ` +" + /** + * Start downloading custom fonts as soon as possible. + */ + @font-face { + font-family: 'aktiv-grotesk'; + font-weight: 400; + font-display: swap; + src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'), + url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'), + url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype'); + } + @font-face { + font-family: 'aktiv-grotesk'; + font-weight: 700; + font-display: swap; + src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'), + url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'), + url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype'); + } + + /** + * reset.css + * http://meyerweb.com/eric/tools/css/reset/ + * v2.0 | 20110126 + * License: none (public domain) + */ + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + body { + line-height: 1; + } + blockquote, + q { + quotes: none; + } + blockquote::before, + blockquote::after, + q::before, + q::after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + + /** + * Our global resets + */ + + /** + * Best practice from http://callmenick.com/post/the-new-box-sizing-reset + * TLDR: It’s easier to override and a slight performance boost. + */ + *, + *::before, + *::after { + box-sizing: inherit; + } + + html { + box-sizing: border-box; + + [type='button'] { + appearance: none; + } + } + + body { + background-color: #FAFBFC; + color: #0F131A; + + font-size: 16px; + line-height: 24px; + ;; + } + + /** + * Form elements don't inherit font settings. + * https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically + */ + html, + body, + input, + select, + optgroup, + textarea, + button { + font-weight: 400; + font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"; + font-feature-settings: 'kern'; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + text-rendering: optimizeLegibility; + } + + pre, + code { + font-family: Consolas, monaco, monospace; + } +" +`; diff --git a/src/components/BaseStyles/index.js b/src/components/BaseStyles/index.ts similarity index 93% rename from src/components/BaseStyles/index.js rename to src/components/BaseStyles/index.ts index f666ab9e86..0110f92729 100644 --- a/src/components/BaseStyles/index.js +++ b/src/components/BaseStyles/index.ts @@ -13,6 +13,6 @@ * limitations under the License. */ -import BaseStyles from './BaseStyles'; +import { BaseStyles } from './BaseStyles'; export default BaseStyles;