From 9a1cb93e5ffa193ef4c8adc7009c08db78024246 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Tue, 16 Aug 2022 12:55:57 +0300 Subject: [PATCH 01/13] docs(PPDSC-2297): newskit homepage update - banners, explore and more --- .../__snapshots__/feature-card.test.tsx.snap | 416 ++++------- site/components/feature-card/feature-card.tsx | 9 +- site/components/feature-card/types.ts | 2 + site/components/homepage/explore/explore.tsx | 47 ++ 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 | 74 ++ .../homepage/supported-brands/index.ts | 1 + .../supported-brands/supported-brands.tsx | 57 ++ .../illustrations/brands/barrons.tsx | 56 ++ 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 + .../illustrations/landing-page/github.tsx | 68 ++ .../illustrations/landing-page/index.ts | 5 + .../illustrations/landing-page/medium.tsx | 28 + .../illustrations/landing-page/storybook.tsx | 43 ++ site/components/index-cards.tsx | 2 +- .../section-introduction.test.ts.snap | 184 +++++ .../__tests__/section-introduction.test.ts | 13 + .../section-introduction-grid/index.ts | 2 + .../section-introduction-grid.tsx | 57 ++ .../section-introduction-grid/types.ts | 9 + site/pages/index-new.tsx | 56 +- .../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 | 704 +++++++++++++++++- site/theme/style-presets.ts | 87 ++- 38 files changed, 2497 insertions(+), 347 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/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/components/section-introduction-grid/__tests__/__snapshots__/section-introduction.test.ts.snap create mode 100644 site/components/section-introduction-grid/__tests__/section-introduction.test.ts create mode 100644 site/components/section-introduction-grid/index.ts create mode 100644 site/components/section-introduction-grid/section-introduction-grid.tsx create mode 100644 site/components/section-introduction-grid/types.ts 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/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap b/site/components/feature-card/__tests__/__snapshots__/feature-card.test.tsx.snap index 0be641b683..eba4bf8a39 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 @@ -2404,57 +2404,32 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` .emotion-3 { box-sizing: border-box; - display: block; - position: relative; - margin-bottom: 0; -} - -.emotion-3 svg { - border-radius: 4px; } .emotion-4 { - -webkit-background-size: cover; - background-size: cover; - -webkit-background-position: right bottom; - background-position: right bottom; - height: 18vh; -} - -@media screen and (min-width: 1024px) { - .emotion-4 { - height: 200px; - } -} - -.emotion-5 { - box-sizing: border-box; -} - -.emotion-6 { box-sizing: border-box; padding: 24px; } -.emotion-6 a:not(.nk-card-link) { +.emotion-4 a:not(.nk-card-link) { z-index: 2; position: relative; } @media screen and (max-width: 1023px) { - .emotion-7 { + .emotion-5 { margin-bottom: 20px; } } @media screen and (min-width: 1024px) { - .emotion-7 { + .emotion-5 { margin-bottom: 24px; } } @media screen and (max-width: 479px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 20px; line-height: 22.5px; @@ -2463,13 +2438,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2477,7 +2452,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 480px) and (max-width: 767px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 20px; line-height: 22.5px; @@ -2486,13 +2461,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2500,7 +2475,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 768px) and (max-width: 1023px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 22px; line-height: 24.75px; @@ -2509,13 +2484,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; @@ -2523,7 +2498,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (min-width: 1024px) { - .emotion-8 { + .emotion-6 { font-family: "Bitter",serif; font-size: 28px; line-height: 31.5px; @@ -2532,46 +2507,46 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` padding: 0.5px 0px; } - .emotion-8::before { + .emotion-6::before { content: ''; margin-bottom: -0.2055em; display: block; } - .emotion-8::after { + .emotion-6::after { content: ''; margin-top: -0.2275em; display: block; } } -.emotion-9 { +.emotion-7 { display: inline; font: inherit; margin: 0; } @media screen and (max-width: 1023px) { - .emotion-10 { + .emotion-8 { margin-bottom: 24px; } } @media screen and (min-width: 1024px) { - .emotion-10 { + .emotion-8 { margin-bottom: 32px; } } -.emotion-11 { +.emotion-9 { margin: 0; } -.emotion-12 { +.emotion-10 { margin-bottom: 8px; } -.emotion-13 { +.emotion-11 { box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -2601,13 +2576,13 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` cursor: pointer; } -.emotion-13 svg { +.emotion-11 svg { width: 16px; height: 16px; } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-13 { + .emotion-11 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -2615,14 +2590,14 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-13 { + .emotion-11 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-14 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2643,7 +2618,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` margin-right: calc(-8px/2); } -.emotion-15 { +.emotion-13 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2652,7 +2627,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` margin-right: calc(8px/2); } -.emotion-16 { +.emotion-14 { margin: 0; font-family: "Poppins",sans-serif; font-size: 12px; @@ -2663,19 +2638,19 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` display: inline-block; } -.emotion-16::before { +.emotion-14::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-16::after { +.emotion-14::after { content: ''; margin-top: -0.4em; display: block; } -.emotion-18 { +.emotion-16 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -2685,7 +2660,7 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-18 { + .emotion-16 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -2693,14 +2668,14 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-18 { + .emotion-16 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-18.emotion-18 { +.emotion-16.emotion-16 { width: 16px; height: 16px; } @@ -2720,62 +2695,55 @@ exports[`FeatureCard Renders interactive vertical card with button 1`] = ` >
-
-
-

Interactive Horizontal Card

I am interactive

@@ -204,7 +204,7 @@ const FeatureCardHorizontal = React.forwardRef< )} {description && ( - + {buttonLabel} - + )} @@ -245,9 +245,9 @@ const FeatureCardVertical = React.forwardRef( stylePrefix, buttonLabel, buttonHref, - buttonLogicalProps, media, overrides, + buttonOverrides, ...props }, ref, @@ -319,13 +319,13 @@ const FeatureCardVertical = React.forwardRef( diff --git a/site/components/feature-card/types.ts b/site/components/feature-card/types.ts index 7a613f4fe0..13dcf6c21d 100644 --- a/site/components/feature-card/types.ts +++ b/site/components/feature-card/types.ts @@ -1,5 +1,4 @@ -import {CardProps, MQ} from 'newskit'; -import {LogicalProps} from '../../../src/utils/logical-properties'; +import {ButtonProps, CardProps, MQ} from 'newskit'; export interface FeatureCardProps extends Omit { @@ -9,7 +8,7 @@ export interface FeatureCardProps layout?: 'vertical' | 'horizontal'; buttonHref?: string; buttonLabel?: string; - buttonLogicalProps?: LogicalProps; + buttonOverrides?: ButtonProps['overrides']; overrides?: { title?: { typographyPreset?: MQ; diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx index 928bcddc2a..2287fbb1bb 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -51,11 +51,15 @@ export const KeepInTouch = () => ( stylePreset: 'tagKeepInTouch', }} > - + Explore {title} - + )} > diff --git a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap index 40d2841fe6..cbb4739b08 100644 --- a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap +++ b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap @@ -1390,8 +1390,8 @@ exports[`Media List renders with feature cardscards 1`] = ` } .emotion-23.emotion-23 { - width: 16px; - height: 16px; + width: 24px; + height: 24px; } @media screen { @@ -1540,6 +1540,10 @@ exports[`Media List renders with feature cardscards 1`] = ` justify-content: center; } +.emotion-35 { + margin-bottom: 24px; +} + .emotion-37 { display: -webkit-box; -webkit-line-clamp: 2; @@ -1708,7 +1712,7 @@ exports[`Media List renders with feature cardscards 1`] = `

{ )} @@ -79,9 +86,16 @@ const Index = (layoutProps: LayoutProps) => { stylePrefix="contributeCard" href="/about/contribute" layout="horizontal" + overrides={{ + title: {typographyPreset: 'editorialHeadline060'}, + description: {typographyPreset: 'editorialSubheadline010'}, + }} buttonLabel="Start contributing" buttonHref="/about/contribute" - buttonLogicalProps={{paddingInline: 'space000'}} + buttonOverrides={{ + paddingInline: 'space000', + typographyPreset: 'utilityButton020', + }} /> diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 00b6723215..cac3024960 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -978,6 +978,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -1088,6 +1091,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -1336,6 +1347,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -1882,7 +1902,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -1893,8 +1913,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -1903,7 +1926,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -2423,7 +2446,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -3536,6 +3559,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -3646,6 +3672,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -3894,6 +3928,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -4440,7 +4483,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -4451,8 +4494,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -4461,7 +4507,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -4981,7 +5027,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -6097,6 +6143,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -6207,6 +6256,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -6455,6 +6512,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -7001,7 +7067,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -7012,8 +7078,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -7022,7 +7091,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -7542,7 +7611,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -8655,6 +8724,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -8765,6 +8837,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -9013,6 +9093,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -9559,7 +9648,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -9570,8 +9659,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -9580,7 +9672,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -10100,7 +10192,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -11216,6 +11308,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -11326,6 +11421,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -11574,6 +11677,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -12120,7 +12232,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -12131,8 +12243,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -12141,7 +12256,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -12661,7 +12776,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -13774,6 +13889,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -13884,6 +14002,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -14132,6 +14258,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -14678,7 +14813,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -14689,8 +14824,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -14699,7 +14837,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -15219,7 +15357,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -16335,6 +16473,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -16445,6 +16586,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -16693,6 +16842,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -17239,7 +17397,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -17250,8 +17408,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -17260,7 +17421,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -17780,7 +17941,7 @@ Object { "utilityButton020": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", "fontSize": "{{fonts.fontSize020}}", - "fontWeight": "{{fonts.fontWeight030}}", + "fontWeight": "{{fonts.fontWeight020}}", "letterSpacing": "{{fonts.fontLetterSpacing030}}", "lineHeight": "{{fonts.fontLineHeight040}}", }, @@ -18893,6 +19054,9 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, "contributeCardContainerInteractive": Object { "base": Object { @@ -19003,6 +19167,14 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, + "exploreCardHeadline": Object { + "base": Object { + "color": "{{colors.inkContrast}}", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "featureCard": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", @@ -19251,6 +19423,15 @@ Object { "borderColor": "{{colors.interactivePositive030}}", }, }, + "keepInTouchLink": Object { + "base": Object { + "color": "{{colors.interactiveInput040}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "linkFooter": Object { "active": Object { "color": "{{colors.interactivePrimary050}}", @@ -19797,7 +19978,7 @@ Object { "backgroundSize": "cover", }, }, - "worlddesignsystemsweekCardButton": Object { + "worldDesignSystemsWeekCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", "color": "{{colors.inkBrand020}}", @@ -19808,8 +19989,11 @@ Object { "color": "{{colors.inkWhiteContrast}}", "iconColor": "{{colors.inkWhiteContrast}}", }, + "hover": Object { + "textDecoration": "underline", + }, }, - "worlddesignsystemsweekCardContainerInteractive": Object { + "worldDesignSystemsWeekCardContainerInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand040}}", "borderRadius": "{{borders.borderRadiusRounded030}}", @@ -19818,7 +20002,7 @@ Object { "boxShadow": "{{shadows.shadow040}}", }, }, - "worlddesignsystemsweekCardMedia": Object { + "worldDesignSystemsWeekCardMedia": Object { "base": Object { "backgroundImage": "url(static/landing/feature-card-banner.svg)", "backgroundPosition": "center", @@ -20338,7 +20522,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 0c7ecb3608..20be7638f4 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -502,6 +502,9 @@ export const stylePresets = { color: '{{colors.inkBrand020}}', iconColor: '{{colors.inkBrand020}}', }, + hover: { + textDecoration: 'underline', + }, }, linkFooter: { base: { @@ -702,7 +705,7 @@ export const stylePresets = { backgroundPosition: 'center left', }, }, - worlddesignsystemsweekCardContainerInteractive: { + worldDesignSystemsWeekCardContainerInteractive: { base: { backgroundColor: '{{colors.interfaceBrand040}}', borderRadius: '{{borders.borderRadiusRounded030}}', @@ -711,7 +714,7 @@ export const stylePresets = { boxShadow: '{{shadows.shadow040}}', }, }, - worlddesignsystemsweekCardButton: { + worldDesignSystemsWeekCardButton: { base: { backgroundColor: '{{colors.transparent}}', color: '{{colors.inkWhiteContrast}}', @@ -722,8 +725,11 @@ export const stylePresets = { color: '{{colors.inkBrand020}}', iconColor: '{{colors.inkBrand020}}', }, + hover: { + textDecoration: 'underline', + }, }, - worlddesignsystemsweekCardMedia: { + worldDesignSystemsWeekCardMedia: { base: { backgroundImage: 'url(static/landing/feature-card-banner.svg)', backgroundSize: 'cover', @@ -1076,6 +1082,15 @@ export const stylePresets = { }, 'focus-visible': defaultFocusVisible, }, + keepInTouchLink: { + base: { + color: '{{colors.interactiveInput040}}', + textDecoration: 'none', + }, + hover: { + textDecoration: 'underline', + }, + }, exploreCardHeadline: { base: { color: '{{colors.inkContrast}}', 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}}" }, From 5f6bda995325a044055f3fd1b1e631e5328d2163 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 11:50:38 +0300 Subject: [PATCH 08/13] docs(PPDSC-2297): add full stop to a copy --- site/components/homepage/keep-in-touch/keep-in-touch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx index 2287fbb1bb..1b956ffdde 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -28,7 +28,7 @@ const keepInTouchContent = [ { title: 'Blog', url: 'https://medium.com/newskit-design-system', - description: 'Hear what our team’s been up to', + description: 'Hear what our team’s been up to.', icon: () => , }, ]; From 9192ad4dd588cac4202841c6053fed298d9ce27f Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 13:51:18 +0300 Subject: [PATCH 09/13] docs(PPDSC-2297): update the banners to non interactive --- site/pages/index-new.tsx | 2 -- site/theme/style-presets.ts | 18 +++++++----------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 62ba316b71..687be60595 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -56,7 +56,6 @@ const Index = (layoutProps: LayoutProps) => { title="World Design Systems Week 2022" description="19-23 September 2022" stylePrefix="worldDesignSystemsWeekCard" - href="https://www.designsystemsweek.com/" layout="horizontal" overrides={{ title: {typographyPreset: 'editorialHeadline060'}, @@ -84,7 +83,6 @@ const Index = (layoutProps: LayoutProps) => { title="Contribute" description="Join the community and help grow NewsKit for everyone." stylePrefix="contributeCard" - href="/about/contribute" layout="horizontal" overrides={{ title: {typographyPreset: 'editorialHeadline060'}, diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 20be7638f4..23233308cc 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -480,7 +480,7 @@ export const stylePresets = { contributeCardContainerNonInteractive: { base: { backgroundColor: '{{colors.interfaceBrand050}}', - borderRadius: '{{borders.borderRadiusRounded020}}', + borderRadius: '{{borders.borderRadiusRounded030}}', }, }, contributeCardMedia: { @@ -497,11 +497,6 @@ export const stylePresets = { iconColor: '{{colors.inkWhiteContrast}}', borderRadius: '{{borders.borderRadiusDefault}}', }, - active: { - backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand020}}', - iconColor: '{{colors.inkBrand020}}', - }, hover: { textDecoration: 'underline', }, @@ -714,17 +709,18 @@ export const stylePresets = { boxShadow: '{{shadows.shadow040}}', }, }, + worldDesignSystemsWeekCardContainerNonInteractive: { + base: { + backgroundColor: '{{colors.interfaceBrand040}}', + borderRadius: '{{borders.borderRadiusRounded030}}', + }, + }, worldDesignSystemsWeekCardButton: { base: { backgroundColor: '{{colors.transparent}}', color: '{{colors.inkWhiteContrast}}', iconColor: '{{colors.inkWhiteContrast}}', }, - active: { - backgroundColor: '{{colors.interactiveInverse050}}', - color: '{{colors.inkBrand020}}', - iconColor: '{{colors.inkBrand020}}', - }, hover: { textDecoration: 'underline', }, From b322036e23865715a0157d4ad78fb1547e8beb95 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 18 Aug 2022 14:09:22 +0300 Subject: [PATCH 10/13] docs(PPDSC-2297): update snapshots --- .../__snapshots__/doc-theme.test.ts.snap | 144 +++++++----------- 1 file changed, 56 insertions(+), 88 deletions(-) diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index cac3024960..17c0c8d49c 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -967,11 +967,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -994,7 +989,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -1903,11 +1898,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -1926,6 +1916,12 @@ 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)", @@ -3548,11 +3544,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -3575,7 +3566,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -4484,11 +4475,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -4507,6 +4493,12 @@ 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)", @@ -6132,11 +6124,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -6159,7 +6146,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -7068,11 +7055,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -7091,6 +7073,12 @@ 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)", @@ -8713,11 +8701,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -8740,7 +8723,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -9649,11 +9632,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -9672,6 +9650,12 @@ 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)", @@ -11297,11 +11281,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -11324,7 +11303,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -12233,11 +12212,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -12256,6 +12230,12 @@ 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)", @@ -13878,11 +13858,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -13905,7 +13880,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -14814,11 +14789,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -14837,6 +14807,12 @@ 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)", @@ -16462,11 +16438,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -16489,7 +16460,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -17398,11 +17369,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -17421,6 +17387,12 @@ 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)", @@ -19043,11 +19015,6 @@ Object { }, }, "contributeCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "borderRadius": "{{borders.borderRadiusDefault}}", @@ -19070,7 +19037,7 @@ Object { "contributeCardContainerNonInteractive": Object { "base": Object { "backgroundColor": "{{colors.interfaceBrand050}}", - "borderRadius": "{{borders.borderRadiusRounded020}}", + "borderRadius": "{{borders.borderRadiusRounded030}}", }, }, "contributeCardMedia": Object { @@ -19979,11 +19946,6 @@ Object { }, }, "worldDesignSystemsWeekCardButton": Object { - "active": Object { - "backgroundColor": "{{colors.interactiveInverse050}}", - "color": "{{colors.inkBrand020}}", - "iconColor": "{{colors.inkBrand020}}", - }, "base": Object { "backgroundColor": "{{colors.transparent}}", "color": "{{colors.inkWhiteContrast}}", @@ -20002,6 +19964,12 @@ 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)", From 80d2b7081725b8b66746766977b63abf0ee309d4 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Mon, 22 Aug 2022 09:41:06 +0300 Subject: [PATCH 11/13] docs(PPDSC-2297): address comments --- .../homepage/keep-in-touch/keep-in-touch.tsx | 55 +++---- .../supported-brands/supported-brands.tsx | 6 +- .../__snapshots__/doc-theme.test.ts.snap | 144 +----------------- site/theme/style-presets.ts | 14 +- 4 files changed, 35 insertions(+), 184 deletions(-) diff --git a/site/components/homepage/keep-in-touch/keep-in-touch.tsx b/site/components/homepage/keep-in-touch/keep-in-touch.tsx index 1b956ffdde..7b1b320214 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -1,13 +1,5 @@ import * as React from 'react'; -import { - Block, - Card, - GridLayout, - Headline, - LinkStandalone, - Tag, - TextBlock, -} from 'newskit'; +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'; @@ -45,34 +37,31 @@ export const KeepInTouch = () => ( key={url} media={icon} actions={() => ( - - - Explore {title} - - + Explore {title} - + )} > - - - {title} - - - - - {description} - - + + {title} + + + {description} + ))} diff --git a/site/components/homepage/supported-brands/supported-brands.tsx b/site/components/homepage/supported-brands/supported-brands.tsx index 2affb11847..4e2fa72b55 100644 --- a/site/components/homepage/supported-brands/supported-brands.tsx +++ b/site/components/homepage/supported-brands/supported-brands.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {GridLayoutItem, GridLayout, getSSRId, LinkStandalone} from 'newskit'; +import {GridLayoutItem, GridLayout, LinkStandalone} from 'newskit'; import {ContentPrimary} from '../../content-structure'; import { Sun, @@ -14,6 +14,7 @@ import { WSJ, TimesTravel, } from '../../illustrations/brands'; +import {useReactKeys} from '../../../../src/utils/hooks'; const SUPPORTED_BRANDS = [ {icon: , url: 'https://www.barrons.com/'}, @@ -40,6 +41,7 @@ const randomiseBrands = ( const sixRandomLogos = randomiseBrands(6, SUPPORTED_BRANDS); export const SupportedBrands = () => { + const [brandLogoKey] = useReactKeys(1); const [brandsLogos, setBrandsLogos] = React.useState(sixRandomLogos); React.useEffect(() => { @@ -56,7 +58,7 @@ export const SupportedBrands = () => { justifyItems="center" > {brandsLogos.map(({icon, url}) => ( - + {icon} diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 17c0c8d49c..e0290f8b04 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -1345,6 +1345,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -1810,23 +1811,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -3922,6 +3906,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -4387,23 +4372,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -6502,6 +6470,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -6967,23 +6936,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -9079,6 +9031,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -9544,23 +9497,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -11659,6 +11595,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -12124,23 +12061,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -14236,6 +14156,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -14701,23 +14622,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -16816,6 +16720,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -17281,23 +17186,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", @@ -19393,6 +19281,7 @@ Object { "keepInTouchLink": Object { "base": Object { "color": "{{colors.interactiveInput040}}", + "iconColor": "{{colors.interactiveInput040}}", "textDecoration": "none", }, "hover": Object { @@ -19858,23 +19747,6 @@ Object { "color": "{{colors.inkBase}}", }, }, - "tagKeepInTouch": Object { - "active": Object { - "borderWidth": "{{borders.borderWidth010}}", - }, - "base": Object { - "backgroundColor": "{{colors.transparent}}", - "color": "{{colors.interactiveInput040}}", - "iconColor": "{{colors.interactiveInput040}}", - }, - "focus-visible": Object { - "outlineColor": "{{outlines.outlineColorDefault}}", - "outlineOffset": "{{outlines.outlineOffsetDefault}}", - "outlineStyle": "{{outlines.outlineStyleDefault}}", - "outlineWidth": "{{outlines.outlineWidthDefault}}", - "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}", - }, - }, "timerFlag": Object { "base": Object { "backgroundColor": "{{colors.neutral030}}", diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 23233308cc..18cd3a45ab 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -1,5 +1,3 @@ -import {defaultFocusVisible} from '../../src/utils/default-focus-visible'; - export const stylePresets = { buttonOutlinedSecondary: { base: { @@ -1067,20 +1065,10 @@ export const stylePresets = { color: '{{colors.inkBase}}', }, }, - tagKeepInTouch: { - base: { - backgroundColor: '{{colors.transparent}}', - color: '{{colors.interactiveInput040}}', - iconColor: '{{colors.interactiveInput040}}', - }, - active: { - borderWidth: '{{borders.borderWidth010}}', - }, - 'focus-visible': defaultFocusVisible, - }, keepInTouchLink: { base: { color: '{{colors.interactiveInput040}}', + iconColor: '{{colors.interactiveInput040}}', textDecoration: 'none', }, hover: { From 6ffbf984e69ee0bc096995b9aec65d68b5302231 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Mon, 22 Aug 2022 10:54:23 +0300 Subject: [PATCH 12/13] docs(PPDSC-2297): update useReactKeys usage --- .../homepage/supported-brands/supported-brands.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/components/homepage/supported-brands/supported-brands.tsx b/site/components/homepage/supported-brands/supported-brands.tsx index 4e2fa72b55..0fd4e3eccb 100644 --- a/site/components/homepage/supported-brands/supported-brands.tsx +++ b/site/components/homepage/supported-brands/supported-brands.tsx @@ -41,8 +41,8 @@ const randomiseBrands = ( const sixRandomLogos = randomiseBrands(6, SUPPORTED_BRANDS); export const SupportedBrands = () => { - const [brandLogoKey] = useReactKeys(1); const [brandsLogos, setBrandsLogos] = React.useState(sixRandomLogos); + const keys = useReactKeys(brandsLogos.length); React.useEffect(() => { setBrandsLogos(sixRandomLogos); @@ -57,8 +57,8 @@ export const SupportedBrands = () => { columns={{xs: 'repeat(3, 1fr)', md: 'repeat(6, 1fr)'}} justifyItems="center" > - {brandsLogos.map(({icon, url}) => ( - + {brandsLogos.map(({icon, url}, index) => ( + {icon} From 8c1b1b09312c440e530b47a8ab89a5233fdfa1be Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Mon, 22 Aug 2022 12:22:36 +0300 Subject: [PATCH 13/13] docs(PPDSC-2297): address comments --- site/components/homepage/explore/explore.tsx | 32 ++++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx index 1928fc05ff..34f0e93680 100644 --- a/site/components/homepage/explore/explore.tsx +++ b/site/components/homepage/explore/explore.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Block, Headline, TextBlock, GridLayout, Card} from 'newskit'; +import {Headline, TextBlock, GridLayout, Card} from 'newskit'; import {ContentPrimary} from '../../content-structure'; import { ExploreComponents, @@ -39,21 +39,21 @@ export const Explore = () => ( > {cardsContent.map(({media, title, href, description}) => ( media}> - - - {title} - - - - - {description} - - + + {title} + + + {description} + ))}