From 577cbb7eeb096a9c41df1fd3cc232f65b9846c1e Mon Sep 17 00:00:00 2001 From: Evgeni Nikolov Date: Mon, 22 Aug 2022 16:56:37 +0300 Subject: [PATCH] docs(PPDSC-2297): NewsKit homepage update - banners, explore and more (#336) * docs(PPDSC-2297): newskit homepage update - banners, explore and more * docs(PPDSC-2297): update brand grid * docs(PPDSC-2297): update sections and ssr mismatch fixed * docs(PPDSC-2297): update random logos naming * docs(PPDSC-2297): address design review comments * docs(PPDSC-2297): update Explore Foundations illustration * docs(PPDSC-2297): address design comments * docs(PPDSC-2297): add full stop to a copy * docs(PPDSC-2297): update the banners to non interactive * docs(PPDSC-2297): update snapshots * docs(PPDSC-2297): update useReactKeys usage * docs(PPDSC-2297): address comments --- .../__snapshots__/site-header.test.tsx.snap | 6 +- .../__snapshots__/component-api.test.tsx.snap | 2 +- .../__snapshots__/feature-card.test.tsx.snap | 478 ++++------- site/components/feature-card/feature-card.tsx | 17 +- site/components/feature-card/types.ts | 3 +- site/components/homepage/explore/explore.tsx | 61 ++ site/components/homepage/explore/index.ts | 1 + site/components/homepage/index.ts | 3 + .../homepage/keep-in-touch/index.ts | 1 + .../homepage/keep-in-touch/keep-in-touch.tsx | 69 ++ .../homepage/supported-brands/index.ts | 1 + .../supported-brands/supported-brands.tsx | 70 ++ .../illustrations/brands/barrons.tsx | 32 + site/components/illustrations/brands/index.ts | 25 + .../illustrations/brands/mansion-global.tsx | 20 + .../illustrations/brands/marketwatch.tsx | 24 + site/components/illustrations/brands/sun.tsx | 22 + .../illustrations/brands/talk-radio.tsx | 58 ++ .../illustrations/brands/talk-sport.tsx | 54 ++ .../illustrations/brands/talk-tv.tsx | 46 ++ .../illustrations/brands/times-travel.tsx | 66 ++ .../components/illustrations/brands/times.tsx | 452 +++++++++++ .../illustrations/brands/virgin.tsx | 52 ++ site/components/illustrations/brands/wsj.tsx | 20 + .../landing-page/explore-components.tsx | 119 +++ .../landing-page/explore-foundations.tsx | 274 +++++++ .../landing-page/explore-patterns.tsx | 119 +++ .../illustrations/landing-page/github.tsx | 68 ++ .../illustrations/landing-page/index.ts | 15 + .../illustrations/landing-page/medium.tsx | 28 + .../illustrations/landing-page/storybook.tsx | 43 + site/components/index-cards.tsx | 2 +- .../__snapshots__/media-list.test.tsx.snap | 10 +- .../sidebar-navigation.test.tsx.snap | 10 +- .../__snapshots__/sidebar.test.tsx.snap | 8 +- .../__snapshots__/table.test.tsx.snap | 4 +- .../tabs-with-table.test.tsx.snap | 2 +- .../__snapshots__/svg-previewer.test.tsx.snap | 8 +- site/pages/index-new.tsx | 114 ++- .../static/landing/feature-card-banner.svg | 18 + .../landing/feature-card-contribute-old.svg | 23 + .../landing/feature-card-contribute.svg | 39 +- .../__snapshots__/doc-theme.test.ts.snap | 758 ++++++++++++++++-- site/theme/style-presets.ts | 94 ++- site/theme/typography-presets.json | 3 - 45 files changed, 2894 insertions(+), 448 deletions(-) create mode 100644 site/components/homepage/explore/explore.tsx create mode 100644 site/components/homepage/explore/index.ts create mode 100644 site/components/homepage/keep-in-touch/index.ts create mode 100644 site/components/homepage/keep-in-touch/keep-in-touch.tsx create mode 100644 site/components/homepage/supported-brands/index.ts create mode 100644 site/components/homepage/supported-brands/supported-brands.tsx create mode 100644 site/components/illustrations/brands/barrons.tsx create mode 100644 site/components/illustrations/brands/index.ts create mode 100644 site/components/illustrations/brands/mansion-global.tsx create mode 100644 site/components/illustrations/brands/marketwatch.tsx create mode 100644 site/components/illustrations/brands/sun.tsx create mode 100644 site/components/illustrations/brands/talk-radio.tsx create mode 100644 site/components/illustrations/brands/talk-sport.tsx create mode 100644 site/components/illustrations/brands/talk-tv.tsx create mode 100644 site/components/illustrations/brands/times-travel.tsx create mode 100644 site/components/illustrations/brands/times.tsx create mode 100644 site/components/illustrations/brands/virgin.tsx create mode 100644 site/components/illustrations/brands/wsj.tsx create mode 100644 site/components/illustrations/landing-page/explore-components.tsx create mode 100644 site/components/illustrations/landing-page/explore-foundations.tsx create mode 100644 site/components/illustrations/landing-page/explore-patterns.tsx create mode 100644 site/components/illustrations/landing-page/github.tsx create mode 100644 site/components/illustrations/landing-page/index.ts create mode 100644 site/components/illustrations/landing-page/medium.tsx create mode 100644 site/components/illustrations/landing-page/storybook.tsx create mode 100644 site/public/static/landing/feature-card-banner.svg create mode 100644 site/public/static/landing/feature-card-contribute-old.svg diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index 761a693991..242ea522d6 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -593,7 +593,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; - font-weight: 600; + font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; @@ -1962,7 +1962,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; - font-weight: 600; + font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; @@ -3325,7 +3325,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; - font-weight: 600; + font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; diff --git a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap index 920bc04808..fb8f217c29 100644 --- a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap +++ b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap @@ -1112,7 +1112,7 @@ exports[`ComponentAPI renders with props for multiple components 1`] = ` font-family: "Poppins",sans-serif; font-size: 14px; line-height: 21px; - font-weight: 600; + font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; diff --git a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap index 0be641b683..5df93c034b 100644 --- a/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap +++ b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap @@ -398,8 +398,8 @@ exports[`FeatureCard Renders horizontal card with clickable button only 1`] = ` } .emotion-19.emotion-19 { - width: 16px; - height: 16px; + width: 24px; + height: 24px; }

-
-
-

Interactive Horizontal Card

I am interactive

@@ -200,7 +204,7 @@ const FeatureCardHorizontal = React.forwardRef< )} {description && ( - + {buttonLabel} - + )} @@ -242,11 +247,12 @@ const FeatureCardVertical = React.forwardRef( buttonHref, media, overrides, + buttonOverrides, ...props }, ref, ) => { - const indexCards = ['roadmapCard', 'contributeCard', 'patternsCard']; + const indexCards = ['roadmapCard', 'contributeOldCard', 'patternsCard']; const mediaValue = () => ( ); @@ -315,10 +321,11 @@ const FeatureCardVertical = React.forwardRef( overrides={{ stylePreset: `${stylePrefix}Button`, typographyPreset: 'utilityButton010', + ...buttonOverrides, }} > {buttonLabel} - + diff --git a/site/components/feature-card/types.ts b/site/components/feature-card/types.ts index d3a8f45187..13dcf6c21d 100644 --- a/site/components/feature-card/types.ts +++ b/site/components/feature-card/types.ts @@ -1,4 +1,4 @@ -import {CardProps, MQ} from 'newskit'; +import {ButtonProps, CardProps, MQ} from 'newskit'; export interface FeatureCardProps extends Omit { @@ -8,6 +8,7 @@ export interface FeatureCardProps layout?: 'vertical' | 'horizontal'; buttonHref?: string; buttonLabel?: string; + buttonOverrides?: ButtonProps['overrides']; overrides?: { title?: { typographyPreset?: MQ; diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx new file mode 100644 index 0000000000..34f0e93680 --- /dev/null +++ b/site/components/homepage/explore/explore.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import {Headline, TextBlock, GridLayout, Card} from 'newskit'; +import {ContentPrimary} from '../../content-structure'; +import { + ExploreComponents, + ExploreFoundations, + ExplorePatterns, +} from '../../illustrations/landing-page'; + +const cardsContent = [ + { + media: , + title: 'Theme', + href: '/theme/overview', + description: + 'These standardised styles define the look and feel of UI components, e.g. colours, fonts, shadows and sizing.', + }, + { + media: , + title: 'Components', + href: '/components/overview', + description: + 'NewsKit’s flexible UI components are built to best practices to ensure usability, performance and accessibility.', + }, + { + media: , + title: 'Patterns', + href: '/patterns/overview', + description: + 'Design patterns provide a framework for solving a particular user problem in a consistent, considered way.', + }, +]; + +export const Explore = () => ( + + + {cardsContent.map(({media, title, href, description}) => ( + media}> + + {title} + + + {description} + + + ))} + + +); diff --git a/site/components/homepage/explore/index.ts b/site/components/homepage/explore/index.ts new file mode 100644 index 0000000000..0159f62614 --- /dev/null +++ b/site/components/homepage/explore/index.ts @@ -0,0 +1 @@ +export * from './explore'; diff --git a/site/components/homepage/index.ts b/site/components/homepage/index.ts index 5efc7348f3..0ab20d5632 100644 --- a/site/components/homepage/index.ts +++ b/site/components/homepage/index.ts @@ -1 +1,4 @@ export * from './hero'; +export * from './supported-brands'; +export * from './keep-in-touch'; +export * from './explore'; diff --git a/site/components/homepage/keep-in-touch/index.ts b/site/components/homepage/keep-in-touch/index.ts new file mode 100644 index 0000000000..0def1705ae --- /dev/null +++ b/site/components/homepage/keep-in-touch/index.ts @@ -0,0 +1 @@ +export * from './keep-in-touch'; diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx new file mode 100644 index 0000000000..7b1b320214 --- /dev/null +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import {Card, GridLayout, Headline, LinkStandalone, TextBlock} from 'newskit'; +import {IconFilledChevronRight} from '../../../../src/icons'; +import {Github, Storybook, Medium} from '../../illustrations/landing-page'; +import {ContentPrimary} from '../../content-structure'; + +const keepInTouchContent = [ + { + title: 'GitHub', + url: 'https://github.com/newscorp-ghfb/newskit', + description: 'Contribute, request features and report bugs.', + icon: () => , + }, + { + title: 'Storybook', + url: 'https://storybook.newskit.co.uk/', + description: 'Take a look at our UI components.', + icon: () => , + }, + { + title: 'Blog', + url: 'https://medium.com/newskit-design-system', + description: 'Hear what our team’s been up to.', + icon: () => , + }, +]; + +export const KeepInTouch = () => ( + + + {keepInTouchContent.map(({title, url, description, icon}) => ( + ( + + Explore {title} + + + )} + > + + {title} + + + {description} + + + ))} + + +); diff --git a/site/components/homepage/supported-brands/index.ts b/site/components/homepage/supported-brands/index.ts new file mode 100644 index 0000000000..36747aec75 --- /dev/null +++ b/site/components/homepage/supported-brands/index.ts @@ -0,0 +1 @@ +export * from './supported-brands'; diff --git a/site/components/homepage/supported-brands/supported-brands.tsx b/site/components/homepage/supported-brands/supported-brands.tsx new file mode 100644 index 0000000000..0fd4e3eccb --- /dev/null +++ b/site/components/homepage/supported-brands/supported-brands.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import {GridLayoutItem, GridLayout, LinkStandalone} from 'newskit'; +import {ContentPrimary} from '../../content-structure'; +import { + Sun, + Barrons, + MansionGlobal, + Marketwatch, + TalkRadio, + TalkSport, + TalkTV, + Times, + Virgin, + WSJ, + TimesTravel, +} from '../../illustrations/brands'; +import {useReactKeys} from '../../../../src/utils/hooks'; + +const SUPPORTED_BRANDS = [ + {icon: , url: 'https://www.barrons.com/'}, + {icon: , url: 'https://www.mansionglobal.com/'}, + {icon: , url: 'https://www.marketwatch.com/'}, + {icon: , url: 'https://www.thesun.co.uk/'}, + {icon: , url: 'https://talkradio.co.uk/frontpage'}, + {icon: , url: 'https://www.talksport.com/'}, + {icon: , url: 'https://www.talk.tv/'}, + {icon: , url: 'https://www.thetimes.co.uk/'}, + {icon: , url: 'https://www.thetimes.co.uk/travel/'}, + {icon: , url: 'https://www.virginradio.co.uk/'}, + {icon: , url: 'https://www.wsj.com/'}, +]; + +const randomiseBrands = ( + count: number, + brands: {icon: JSX.Element; url: string}[], +) => { + const shuffled = [...brands].sort(() => 0.5 - Math.random()); + return shuffled.slice(0, count); +}; + +const sixRandomLogos = randomiseBrands(6, SUPPORTED_BRANDS); + +export const SupportedBrands = () => { + const [brandsLogos, setBrandsLogos] = React.useState(sixRandomLogos); + const keys = useReactKeys(brandsLogos.length); + + React.useEffect(() => { + setBrandsLogos(sixRandomLogos); + }, []); + + return ( + + + {brandsLogos.map(({icon, url}, index) => ( + + + {icon} + + + ))} + + + ); +}; diff --git a/site/components/illustrations/brands/barrons.tsx b/site/components/illustrations/brands/barrons.tsx new file mode 100644 index 0000000000..6b052113f8 --- /dev/null +++ b/site/components/illustrations/brands/barrons.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Barrons: React.FC = () => ( + + + + + + +); + +export default Barrons; diff --git a/site/components/illustrations/brands/index.ts b/site/components/illustrations/brands/index.ts new file mode 100644 index 0000000000..bbff065305 --- /dev/null +++ b/site/components/illustrations/brands/index.ts @@ -0,0 +1,25 @@ +import Barrons from './barrons'; +import MansionGlobal from './mansion-global'; +import Marketwatch from './marketwatch'; +import Sun from './sun'; +import TalkRadio from './talk-radio'; +import TalkSport from './talk-sport'; +import TalkTV from './talk-tv'; +import Times from './times'; +import TimesTravel from './times-travel'; +import Virgin from './virgin'; +import WSJ from './wsj'; + +export { + Barrons, + MansionGlobal, + Marketwatch, + Sun, + TalkRadio, + TalkSport, + TalkTV, + Times, + TimesTravel, + Virgin, + WSJ, +}; diff --git a/site/components/illustrations/brands/mansion-global.tsx b/site/components/illustrations/brands/mansion-global.tsx new file mode 100644 index 0000000000..9350d71817 --- /dev/null +++ b/site/components/illustrations/brands/mansion-global.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const MansionGlobal: React.FC = () => ( + + + +); + +export default MansionGlobal; diff --git a/site/components/illustrations/brands/marketwatch.tsx b/site/components/illustrations/brands/marketwatch.tsx new file mode 100644 index 0000000000..cc974b8e93 --- /dev/null +++ b/site/components/illustrations/brands/marketwatch.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Marketwatch: React.FC = () => ( + + + + +); + +export default Marketwatch; diff --git a/site/components/illustrations/brands/sun.tsx b/site/components/illustrations/brands/sun.tsx new file mode 100644 index 0000000000..076983c70b --- /dev/null +++ b/site/components/illustrations/brands/sun.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Sun: React.FC = () => ( + + + +); + +export default Sun; diff --git a/site/components/illustrations/brands/talk-radio.tsx b/site/components/illustrations/brands/talk-radio.tsx new file mode 100644 index 0000000000..e37a02e3fc --- /dev/null +++ b/site/components/illustrations/brands/talk-radio.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const TalkRadio: React.FC = () => ( + + + + + + + + + + + + +); + +export default TalkRadio; diff --git a/site/components/illustrations/brands/talk-sport.tsx b/site/components/illustrations/brands/talk-sport.tsx new file mode 100644 index 0000000000..7c90e8a211 --- /dev/null +++ b/site/components/illustrations/brands/talk-sport.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const TalkSport: React.FC = () => ( + + + + + + + + + + + +); + +export default TalkSport; diff --git a/site/components/illustrations/brands/talk-tv.tsx b/site/components/illustrations/brands/talk-tv.tsx new file mode 100644 index 0000000000..88e62a0480 --- /dev/null +++ b/site/components/illustrations/brands/talk-tv.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; + +const TalkTV: React.FC = () => { + const clip0 = getSSRId(); + + return ( + + + + + + + + + + + + + ); +}; + +export default TalkTV; diff --git a/site/components/illustrations/brands/times-travel.tsx b/site/components/illustrations/brands/times-travel.tsx new file mode 100644 index 0000000000..68cda28174 --- /dev/null +++ b/site/components/illustrations/brands/times-travel.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const TimesTravel: React.FC = () => ( + + + + + + + + + + + + + + +); + +export default TimesTravel; diff --git a/site/components/illustrations/brands/times.tsx b/site/components/illustrations/brands/times.tsx new file mode 100644 index 0000000000..1cf7f8d5ad --- /dev/null +++ b/site/components/illustrations/brands/times.tsx @@ -0,0 +1,452 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Times: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Times; diff --git a/site/components/illustrations/brands/virgin.tsx b/site/components/illustrations/brands/virgin.tsx new file mode 100644 index 0000000000..a67f2b1a0a --- /dev/null +++ b/site/components/illustrations/brands/virgin.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Virgin: React.FC = () => ( + + + + + + + + + + + +); + +export default Virgin; diff --git a/site/components/illustrations/brands/wsj.tsx b/site/components/illustrations/brands/wsj.tsx new file mode 100644 index 0000000000..e9e5bc2789 --- /dev/null +++ b/site/components/illustrations/brands/wsj.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const WSJ: React.FC = () => ( + + + +); + +export default WSJ; diff --git a/site/components/illustrations/landing-page/explore-components.tsx b/site/components/illustrations/landing-page/explore-components.tsx new file mode 100644 index 0000000000..b7c179b7cd --- /dev/null +++ b/site/components/illustrations/landing-page/explore-components.tsx @@ -0,0 +1,119 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; + +const Components: React.FC = () => { + const mask0 = getSSRId(); + const clip0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Components; diff --git a/site/components/illustrations/landing-page/explore-foundations.tsx b/site/components/illustrations/landing-page/explore-foundations.tsx new file mode 100644 index 0000000000..00d4fa9bc9 --- /dev/null +++ b/site/components/illustrations/landing-page/explore-foundations.tsx @@ -0,0 +1,274 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; +import {Circle} from '../circle'; + +const Foundations: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + const filter3 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Foundations; diff --git a/site/components/illustrations/landing-page/explore-patterns.tsx b/site/components/illustrations/landing-page/explore-patterns.tsx new file mode 100644 index 0000000000..1e555e1048 --- /dev/null +++ b/site/components/illustrations/landing-page/explore-patterns.tsx @@ -0,0 +1,119 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; + +const Patterns: React.FC = () => { + const mask0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Patterns; diff --git a/site/components/illustrations/landing-page/github.tsx b/site/components/illustrations/landing-page/github.tsx new file mode 100644 index 0000000000..2c58f0ba17 --- /dev/null +++ b/site/components/illustrations/landing-page/github.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; + +const Github: React.FC = () => { + const clip0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + ); +}; + +export default Github; diff --git a/site/components/illustrations/landing-page/index.ts b/site/components/illustrations/landing-page/index.ts new file mode 100644 index 0000000000..0bfba1ea6f --- /dev/null +++ b/site/components/illustrations/landing-page/index.ts @@ -0,0 +1,15 @@ +import Github from './github'; +import Storybook from './storybook'; +import Medium from './medium'; +import ExploreComponents from './explore-components'; +import ExploreFoundations from './explore-foundations'; +import ExplorePatterns from './explore-patterns'; + +export { + Github, + Storybook, + Medium, + ExploreComponents, + ExploreFoundations, + ExplorePatterns, +}; diff --git a/site/components/illustrations/landing-page/medium.tsx b/site/components/illustrations/landing-page/medium.tsx new file mode 100644 index 0000000000..35ed2f4693 --- /dev/null +++ b/site/components/illustrations/landing-page/medium.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Medium: React.FC = () => ( + + + + + +); + +export default Medium; diff --git a/site/components/illustrations/landing-page/storybook.tsx b/site/components/illustrations/landing-page/storybook.tsx new file mode 100644 index 0000000000..cb997d8208 --- /dev/null +++ b/site/components/illustrations/landing-page/storybook.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const Storybook: React.FC = () => { + const mask0 = getSSRId(); + + return ( + + + + + + + + + ); +}; + +export default Storybook; diff --git a/site/components/index-cards.tsx b/site/components/index-cards.tsx index a4eab4d560..352517c736 100644 --- a/site/components/index-cards.tsx +++ b/site/components/index-cards.tsx @@ -30,7 +30,7 @@ export const FeatureCardsForIndex = () => (

( ( - - - - - - Banner - - - - - Explore - - - - - Whats New - - - - - Contribute - - - - - Keep in touch - - - - - Supported brands - +const Index = (layoutProps: LayoutProps) => { + // The World Design Systems Week 2022 banner should hide automatically after the event which is on 19-23 September 2022 + const eventDateEnd = new Date('2022-09-24'); + const showEventBanner = new Date() < eventDateEnd; + + return ( + + + + {showEventBanner && ( + + + + )} + + + + + + Whats New + + + + + + + + + + + - - -); + + ); +}; export default Index; diff --git a/site/public/static/landing/feature-card-banner.svg b/site/public/static/landing/feature-card-banner.svg new file mode 100644 index 0000000000..ac165a0017 --- /dev/null +++ b/site/public/static/landing/feature-card-banner.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/site/public/static/landing/feature-card-contribute-old.svg b/site/public/static/landing/feature-card-contribute-old.svg new file mode 100644 index 0000000000..2072ba8987 --- /dev/null +++ b/site/public/static/landing/feature-card-contribute-old.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/public/static/landing/feature-card-contribute.svg b/site/public/static/landing/feature-card-contribute.svg index 2072ba8987..6f32e5a28f 100644 --- a/site/public/static/landing/feature-card-contribute.svg +++ b/site/public/static/landing/feature-card-contribute.svg @@ -1,23 +1,26 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - + + diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 7fb412651b..e0290f8b04 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -967,6 +967,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -994,7 +1027,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -1003,15 +1036,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -1053,6 +1086,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -1301,6 +1342,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -1830,6 +1881,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -2343,7 +2426,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -3445,6 +3528,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -3472,7 +3588,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -3481,15 +3597,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -3531,6 +3647,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -3779,6 +3903,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -4308,6 +4442,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -4821,7 +4987,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -5926,6 +6092,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -5953,7 +6152,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -5962,15 +6161,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -6012,6 +6211,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -6260,6 +6467,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -6789,6 +7006,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -7302,7 +7551,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -8404,6 +8653,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -8431,7 +8713,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -8440,15 +8722,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -8490,6 +8772,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -8738,6 +9028,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -9267,6 +9567,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -9780,7 +10112,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -10885,6 +11217,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -10912,7 +11277,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -10921,15 +11286,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -10971,6 +11336,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -11219,6 +11592,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -11726,25 +12109,57 @@ Object { "color": "{{colors.inkBrand030}}", "iconColor": "{{colors.inkBrand030}}", }, - "hover": Object { - "backgroundColor": "{{colors.interactiveInverse020}}", + "hover": Object { + "backgroundColor": "{{colors.interactiveInverse020}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + }, + "whatsnewCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand060}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "whatsnewCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-whatsnew.svg)", + "backgroundPosition": "center left", + "backgroundSize": "cover", + }, + }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "whatsnewCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { - "backgroundColor": "{{colors.interfaceBrand060}}", + "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", }, "hover": Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "whatsnewCardMedia": Object { + "worldDesignSystemsWeekCardContainerNonInteractive": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-whatsnew.svg)", - "backgroundPosition": "center left", + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", "backgroundSize": "cover", }, }, @@ -12261,7 +12676,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -13363,6 +13778,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -13390,7 +13838,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -13399,15 +13847,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -13449,6 +13897,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -13697,6 +14153,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -14226,6 +14692,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -14739,7 +15237,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -15844,6 +16342,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -15871,7 +16402,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -15880,15 +16411,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -15930,6 +16461,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -16178,6 +16717,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -16707,6 +17256,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -17220,7 +17801,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -18322,6 +18903,39 @@ Object { }, }, "contributeCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "borderRadius": "{{borders.borderRadiusDefault}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "contributeCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "contributeCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand050}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "contributeCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, + "contributeOldCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -18349,7 +18963,7 @@ Object { "iconColor": "{{colors.inkBrand020}}", }, }, - "contributeCardContainerInteractive": Object { + "contributeOldCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -18358,15 +18972,15 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "contributeCardContainerNonInteractive": Object { + "contributeOldCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", "borderRadius": "{{borders.borderRadiusRounded020}}", }, }, - "contributeCardMedia": Object { + "contributeOldCardMedia": Object { "base": Object { - "backgroundImage": "url(static/landing/feature-card-contribute.svg)", + "backgroundImage": "url(static/landing/feature-card-contribute-old.svg)", }, }, "controlLabel": Object { @@ -18408,6 +19022,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -18656,6 +19278,16 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -19185,6 +19817,38 @@ Object { "backgroundSize": "cover", }, }, + "worldDesignSystemsWeekCardButton": Object { + "base": Object { + "backgroundColor": "{{colors.transparent}}", + "color": "{{colors.inkWhiteContrast}}", + "iconColor": "{{colors.inkWhiteContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, + "worldDesignSystemsWeekCardContainerInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + "hover": Object { + "boxShadow": "{{shadows.shadow040}}", + }, + }, + "worldDesignSystemsWeekCardContainerNonInteractive": Object { + "base": Object { + "backgroundColor": "{{colors.interfaceBrand040}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", + }, + }, + "worldDesignSystemsWeekCardMedia": Object { + "base": Object { + "backgroundImage": "url(static/landing/feature-card-banner.svg)", + "backgroundPosition": "center", + "backgroundSize": "cover", + }, + }, }, "themeVersion": 1, "transitionPresets": Object { @@ -19698,7 +20362,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 4e0cf764fd..18cd3a45ab 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -417,7 +417,7 @@ export const stylePresets = { }, }, - contributeCardContainerInteractive: { + contributeOldCardContainerInteractive: { base: { backgroundColor: '{{colors.interfaceBrand050}}', borderRadius: '{{borders.borderRadiusRounded030}}', @@ -426,18 +426,18 @@ export const stylePresets = { boxShadow: '{{shadows.shadow040}}', }, }, - contributeCardContainerNonInteractive: { + contributeOldCardContainerNonInteractive: { base: { backgroundColor: '{{colors.interfaceBrand050}}', borderRadius: '{{borders.borderRadiusRounded020}}', }, }, - contributeCardMedia: { + contributeOldCardMedia: { base: { - backgroundImage: 'url(static/landing/feature-card-contribute.svg)', + backgroundImage: 'url(static/landing/feature-card-contribute-old.svg)', }, }, - contributeCardButton: { + contributeOldCardButton: { base: { backgroundColor: '{{colors.interactiveInverse030}}', borderRadius: '{{borders.borderRadiusDefault}}', @@ -465,6 +465,40 @@ export const stylePresets = { iconColor: '{{colors.inkBrand020}}', }, }, + + contributeCardContainerInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand050}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + hover: { + boxShadow: '{{shadows.shadow040}}', + }, + }, + contributeCardContainerNonInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand050}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + }, + contributeCardMedia: { + base: { + backgroundSize: 'cover', + backgroundImage: 'url(static/landing/feature-card-contribute.svg)', + backgroundPosition: 'center', + }, + }, + contributeCardButton: { + base: { + backgroundColor: '{{colors.transparent}}', + color: '{{colors.inkWhiteContrast}}', + iconColor: '{{colors.inkWhiteContrast}}', + borderRadius: '{{borders.borderRadiusDefault}}', + }, + hover: { + textDecoration: 'underline', + }, + }, linkFooter: { base: { color: '{{colors.interactivePrimary030}}', @@ -664,6 +698,38 @@ export const stylePresets = { backgroundPosition: 'center left', }, }, + worldDesignSystemsWeekCardContainerInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand040}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + hover: { + boxShadow: '{{shadows.shadow040}}', + }, + }, + worldDesignSystemsWeekCardContainerNonInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand040}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + }, + worldDesignSystemsWeekCardButton: { + base: { + backgroundColor: '{{colors.transparent}}', + color: '{{colors.inkWhiteContrast}}', + iconColor: '{{colors.inkWhiteContrast}}', + }, + hover: { + textDecoration: 'underline', + }, + }, + worldDesignSystemsWeekCardMedia: { + base: { + backgroundImage: 'url(static/landing/feature-card-banner.svg)', + backgroundSize: 'cover', + backgroundPosition: 'center', + }, + }, needHelpCardContainerInteractive: { base: { backgroundColor: '{{colors.interfaceBrand030}}', @@ -999,4 +1065,22 @@ export const stylePresets = { color: '{{colors.inkBase}}', }, }, + keepInTouchLink: { + base: { + color: '{{colors.interactiveInput040}}', + iconColor: '{{colors.interactiveInput040}}', + textDecoration: 'none', + }, + hover: { + textDecoration: 'underline', + }, + }, + exploreCardHeadline: { + base: { + color: '{{colors.inkContrast}}', + }, + hover: { + textDecoration: 'underline', + }, + }, }; diff --git a/site/theme/typography-presets.json b/site/theme/typography-presets.json index c51025857e..d20a29f1db 100644 --- a/site/theme/typography-presets.json +++ b/site/theme/typography-presets.json @@ -86,9 +86,6 @@ "utilityButton010": { "fontWeight": "{{fonts.fontWeight030}}" }, - "utilityButton020": { - "fontWeight": "{{fonts.fontWeight030}}" - }, "utilityButton030": { "fontWeight": "{{fonts.fontWeight030}}" },