From 0d6fd036560d03345a85168652f3128402b957c2 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 25 Aug 2022 10:32:11 +0300 Subject: [PATCH 01/12] docs(PPDSC-2298): newskit homepage update - whats new section --- site/components/feature-card/feature-card.tsx | 18 +++++- site/components/feature-card/types.ts | 1 + site/components/homepage/index.ts | 1 + .../homepage/keep-in-touch/keep-in-touch.tsx | 4 +- site/components/homepage/whats-new/index.ts | 1 + .../homepage/whats-new/whats-new.tsx | 63 +++++++++++++++++++ site/pages/index-new.tsx | 36 +++++------ .../__snapshots__/doc-theme.test.ts.snap | 56 +++++++++++++++++ site/theme/style-presets.ts | 7 +++ site/utils/release-notes/types.ts | 1 + 10 files changed, 162 insertions(+), 26 deletions(-) create mode 100644 site/components/homepage/whats-new/index.ts create mode 100644 site/components/homepage/whats-new/whats-new.tsx diff --git a/site/components/feature-card/feature-card.tsx b/site/components/feature-card/feature-card.tsx index 4917b1d006..18bdc7e63a 100644 --- a/site/components/feature-card/feature-card.tsx +++ b/site/components/feature-card/feature-card.tsx @@ -81,6 +81,7 @@ const FeatureCardHorizontal = React.forwardRef< description, href, stylePrefix, + buttonIcon, buttonLabel, buttonHref, buttonOverrides, @@ -162,7 +163,11 @@ const FeatureCardHorizontal = React.forwardRef< }} > {buttonLabel} - + {buttonIcon || ( + + )} @@ -224,7 +229,11 @@ const FeatureCardHorizontal = React.forwardRef< }} > {buttonLabel} - + {buttonIcon || ( + + )} )} @@ -243,6 +252,7 @@ const FeatureCardVertical = React.forwardRef( description, href, stylePrefix, + buttonIcon, buttonLabel, buttonHref, media, @@ -325,7 +335,9 @@ const FeatureCardVertical = React.forwardRef( }} > {buttonLabel} - + {buttonIcon || ( + + )} diff --git a/site/components/feature-card/types.ts b/site/components/feature-card/types.ts index 13dcf6c21d..2cfb4dd64c 100644 --- a/site/components/feature-card/types.ts +++ b/site/components/feature-card/types.ts @@ -6,6 +6,7 @@ export interface FeatureCardProps description?: string; stylePrefix?: string; layout?: 'vertical' | 'horizontal'; + buttonIcon?: React.ReactNode; buttonHref?: string; buttonLabel?: string; buttonOverrides?: ButtonProps['overrides']; diff --git a/site/components/homepage/index.ts b/site/components/homepage/index.ts index 0ab20d5632..1295d5a24d 100644 --- a/site/components/homepage/index.ts +++ b/site/components/homepage/index.ts @@ -2,3 +2,4 @@ export * from './hero'; export * from './supported-brands'; export * from './keep-in-touch'; export * from './explore'; +export * from './whats-new'; 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 7b1b320214..86673b9fb2 100644 --- a/site/components/homepage/keep-in-touch/keep-in-touch.tsx +++ b/site/components/homepage/keep-in-touch/keep-in-touch.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import {Card, GridLayout, Headline, LinkStandalone, TextBlock} from 'newskit'; -import {IconFilledChevronRight} from '../../../../src/icons'; +import {IconFilledLaunch} from '../../../../src/icons'; import {Github, Storybook, Medium} from '../../illustrations/landing-page'; import {ContentPrimary} from '../../content-structure'; @@ -44,7 +44,7 @@ export const KeepInTouch = () => ( overrides={{stylePreset: 'keepInTouchLink'}} > Explore {title} - + )} > diff --git a/site/components/homepage/whats-new/index.ts b/site/components/homepage/whats-new/index.ts new file mode 100644 index 0000000000..749006f165 --- /dev/null +++ b/site/components/homepage/whats-new/index.ts @@ -0,0 +1 @@ +export * from './whats-new'; diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx new file mode 100644 index 0000000000..d74aaf2dd0 --- /dev/null +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import {Headline, TextBlock, GridLayout, Card, Flag} from 'newskit'; +import {ContentPrimary} from '../../content-structure'; +import {IconFilledLaunch} from '../../../../src/icons'; +import {Release} from '../../../utils/release-notes/types'; + +interface WhatsNewProps { + releases: Release[]; +} + +export const WhatsNew = ({releases}: WhatsNewProps) => ( + + + {releases.map(({html_url, tag_name}) => ( + + + Release notes + + + NewsKit {tag_name} + + + + + This release includes new features, bug fixes and other changes. + + + ))} + + +); diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 687be60595..616126de87 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -1,30 +1,18 @@ import * as React from 'react'; -import {GridLayout, styled, TextBlock} from 'newskit'; +import {GridLayout} from 'newskit'; import Layout, {LayoutProps} from '../components/layout'; import { Hero, KeepInTouch, SupportedBrands, Explore, + WhatsNew, } from '../components/homepage'; import {GridLayoutProps} from '../../src/grid-layout/types'; import {FeatureCard} from '../components/feature-card'; - -const Placeholder: React.FC = ({children}) => ( - - {children} - -); - -// Placeholder box -const GridBox = styled.div` - padding: 10px; - border: 1px solid orange; -`; +import {fetchGitHubReleases} from '../utils/release-notes/functions'; +import {ReleasesPageProps} from '../utils/release-notes/types'; +import {IconFilledLaunch} from '../../src/icons'; const GRID_SECTION_OVERRIDES: GridLayoutProps['overrides'] = { maxWidth: '1150px', @@ -38,7 +26,7 @@ const GRID_SECTION_OVERRIDES: GridLayoutProps['overrides'] = { }, }; -const Index = (layoutProps: LayoutProps) => { +const Index = ({releases, ...layoutProps}: LayoutProps & ReleasesPageProps) => { // 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; @@ -61,6 +49,7 @@ const Index = (layoutProps: LayoutProps) => { title: {typographyPreset: 'editorialHeadline060'}, description: {typographyPreset: 'editorialSubheadline010'}, }} + buttonIcon={} buttonLabel="Join the community" buttonHref="https://www.designsystemsweek.com/" buttonOverrides={{ @@ -74,9 +63,7 @@ const Index = (layoutProps: LayoutProps) => { - - Whats New - + { }; export default Index; + +// This function is called at build time and the response is passed to the page +// component as props. +export async function getStaticProps() { + const releases = await fetchGitHubReleases(2); + return {props: {releases}}; +} diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 5c20feb8ec..691c2ccdc7 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -1857,6 +1857,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -4428,6 +4435,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -7002,6 +7016,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -9573,6 +9594,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -12147,6 +12175,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -14718,6 +14753,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -17292,6 +17334,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", @@ -19863,6 +19912,13 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewHomeFlag": Object { + "base": Object { + "backgroundColor": "{{colors.teal060}}", + "borderRadius": "{{borders.borderRadiusRounded020}}", + "color": "{{colors.inkInverse}}", + }, + }, "whatsnewCardButton": Object { "active": Object { "backgroundColor": "{{colors.interactiveInverse050}}", diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 682bf2dbed..79c89c0173 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -1093,4 +1093,11 @@ export const stylePresets = { textDecoration: 'underline', }, }, + whatsNewHomeFlag: { + base: { + borderRadius: '{{borders.borderRadiusRounded020}}', + color: '{{colors.inkInverse}}', + backgroundColor: '{{colors.teal060}}', + }, + }, }; diff --git a/site/utils/release-notes/types.ts b/site/utils/release-notes/types.ts index b7bfa9e17d..8160a5b78c 100644 --- a/site/utils/release-notes/types.ts +++ b/site/utils/release-notes/types.ts @@ -5,6 +5,7 @@ export interface Release { tag_name: string; body: string; name: string; + html_url: string; } export interface FullRelease extends Release { From 2ddb9d405afd861daebed44ba84676237bd14ef1 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 25 Aug 2022 10:37:00 +0300 Subject: [PATCH 02/12] docs(PPDSC-2298): update unit test --- site/utils/release-notes/__tests__/functions.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/utils/release-notes/__tests__/functions.test.tsx b/site/utils/release-notes/__tests__/functions.test.tsx index 59111ecadf..ca21d304fc 100644 --- a/site/utils/release-notes/__tests__/functions.test.tsx +++ b/site/utils/release-notes/__tests__/functions.test.tsx @@ -100,6 +100,7 @@ describe('updateFinalReleaseInfo', () => { body: 'https://github.com/newscorp-ghfb/newskit/compare/v5.6.0...trigger-release@5.7.0', published_at: '2022-07-18T11:41:49Z', + html_url: 'https://github.com/newscorp-ghfb/newskit/releases/tag/v5.7.0', }); expect(after.name).toEqual('v5.7.0'); expect(after.tag_name).toEqual('v5.7.0'); @@ -114,6 +115,7 @@ describe('updateFinalReleaseInfo', () => { body: 'https://github.com/newscorp-ghfb/newskit/compare/v5.6.0...trigger-rlease@5.7.0', published_at: '2022-07-18T11:41:49Z', + html_url: 'https://github.com/newscorp-ghfb/newskit/releases/tag/v5.7.0', }); expect(after.name).toEqual('v5.7.0'); expect(after.tag_name).toEqual('v5.7.0'); @@ -127,6 +129,7 @@ describe('updateFinalReleaseInfo', () => { name: 'v5.7.0', body: 'https://github.com/newscorp-ghfb/newskit/compare/v5.6.0...v5.7.0', published_at: '2022-07-18T11:41:49Z', + html_url: 'https://github.com/newscorp-ghfb/newskit/releases/tag/v5.7.0', }); expect(after.name).toEqual('v5.7.0'); expect(after.tag_name).toEqual('v5.7.0'); From 42d3ee240829fd73474eb357624a7cc9f677e20b Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Tue, 30 Aug 2022 18:00:48 +0300 Subject: [PATCH 03/12] docs(PPDSC-2298): update whats new section --- site/components/homepage/explore/explore.tsx | 4 +- .../supported-brands/supported-brands.tsx | 5 +- .../homepage/whats-new/whats-new.tsx | 79 +++++++++++++++---- site/pages/index-new.tsx | 4 +- site/theme/style-presets.ts | 6 +- 5 files changed, 71 insertions(+), 27 deletions(-) diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx index fb0f274075..04b880f4e8 100644 --- a/site/components/homepage/explore/explore.tsx +++ b/site/components/homepage/explore/explore.tsx @@ -32,7 +32,7 @@ const cardsContent = [ ]; export const Explore = () => ( - + ( overrides={{ marginBlockEnd: 'space040', typographyPreset: 'editorialHeadline020', - heading: {stylePreset: 'exploreCardHeadline'}, + heading: {stylePreset: 'exploreCardLink'}, }} > {title} diff --git a/site/components/homepage/supported-brands/supported-brands.tsx b/site/components/homepage/supported-brands/supported-brands.tsx index 0fd4e3eccb..9e8d56a287 100644 --- a/site/components/homepage/supported-brands/supported-brands.tsx +++ b/site/components/homepage/supported-brands/supported-brands.tsx @@ -49,10 +49,7 @@ export const SupportedBrands = () => { }, []); return ( - + ( - +export const WhatsNew = ({releases}: WhatsNewProps) => { + const [latestRelease, ...restReleases] = releases; + + return ( - {releases.map(({html_url, tag_name}) => ( + ( stylePreset: 'whatsNewHomeFlag', }} > - Release notes + Latest Release - NewsKit {tag_name} + NewsKit {latestRelease.tag_name} ( This release includes new features, bug fixes and other changes. - ))} + + + + + {restReleases.map(({html_url, tag_name}) => ( + + + + NewsKit {tag_name} + + + + + ))} + + - -); + ); +}; diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 616126de87..f7ee294733 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -11,7 +11,7 @@ import { import {GridLayoutProps} from '../../src/grid-layout/types'; import {FeatureCard} from '../components/feature-card'; import {fetchGitHubReleases} from '../utils/release-notes/functions'; -import {ReleasesPageProps} from '../utils/release-notes/types'; +import {Release, ReleasesPageProps} from '../utils/release-notes/types'; import {IconFilledLaunch} from '../../src/icons'; const GRID_SECTION_OVERRIDES: GridLayoutProps['overrides'] = { @@ -99,6 +99,6 @@ export default Index; // This function is called at build time and the response is passed to the page // component as props. export async function getStaticProps() { - const releases = await fetchGitHubReleases(2); + const releases: Release[] = await fetchGitHubReleases(4); return {props: {releases}}; } diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index cd506128d8..31b9c30759 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -1077,9 +1077,11 @@ export const stylePresets = { color: '{{colors.inkBase}}', }, }, - exploreCardHeadline: { + exploreCardLink: { base: { + textDecoration: 'none', color: '{{colors.inkContrast}}', + iconColor: '{{colors.inkContrast}}', }, hover: { textDecoration: 'underline', @@ -1089,7 +1091,7 @@ export const stylePresets = { base: { borderRadius: '{{borders.borderRadiusRounded020}}', color: '{{colors.inkInverse}}', - backgroundColor: '{{colors.teal060}}', + backgroundColor: '{{colors.inkInformative}}', }, }, }; From a4075a9e0228a67c771ecbe443760c6890cfa472 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Tue, 30 Aug 2022 18:06:03 +0300 Subject: [PATCH 04/12] docs(PPDSC-2298): update snapshots --- .../__snapshots__/doc-theme.test.ts.snap | 48 ++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index f6f5859174..72250a338c 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -1060,9 +1060,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -1835,7 +1837,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -3614,9 +3616,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -4389,7 +4393,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -6171,9 +6175,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -6946,7 +6952,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -8725,9 +8731,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -9500,7 +9508,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -11282,9 +11290,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -12057,7 +12067,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -13836,9 +13846,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -14611,7 +14623,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -16393,9 +16405,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -17168,7 +17182,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, @@ -18947,9 +18961,11 @@ Object { "borderWidth": "{{borders.borderWidth030}}", }, }, - "exploreCardHeadline": Object { + "exploreCardLink": Object { "base": Object { "color": "{{colors.inkContrast}}", + "iconColor": "{{colors.inkContrast}}", + "textDecoration": "none", }, "hover": Object { "textDecoration": "underline", @@ -19722,7 +19738,7 @@ Object { }, "whatsNewHomeFlag": Object { "base": Object { - "backgroundColor": "{{colors.teal060}}", + "backgroundColor": "{{colors.inkInformative}}", "borderRadius": "{{borders.borderRadiusRounded020}}", "color": "{{colors.inkInverse}}", }, From da0e4667f6b5aa3fc71679a3ccb9549c0d16fd44 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Wed, 31 Aug 2022 15:49:33 +0300 Subject: [PATCH 05/12] docs(PPDSC-2298): update whats new and brands --- .../supported-brands/supported-brands.tsx | 68 +++++------- .../homepage/whats-new/whats-new.tsx | 69 +++++++----- .../illustrations/brands/factiva.tsx | 102 ++++++++++++++++++ site/components/illustrations/brands/index.ts | 2 + .../__snapshots__/doc-theme.test.ts.snap | 80 ++++++++++++++ site/theme/style-presets.ts | 10 ++ 6 files changed, 260 insertions(+), 71 deletions(-) create mode 100644 site/components/illustrations/brands/factiva.tsx diff --git a/site/components/homepage/supported-brands/supported-brands.tsx b/site/components/homepage/supported-brands/supported-brands.tsx index 9e8d56a287..29a46620d7 100644 --- a/site/components/homepage/supported-brands/supported-brands.tsx +++ b/site/components/homepage/supported-brands/supported-brands.tsx @@ -13,55 +13,37 @@ import { Virgin, WSJ, TimesTravel, + Factiva, } 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.talk.tv/'}, + {icon: , url: 'https://talkradio.co.uk/frontpage'}, {icon: , url: 'https://www.thetimes.co.uk/travel/'}, + {icon: , url: 'https://www.thesun.co.uk/'}, {icon: , url: 'https://www.virginradio.co.uk/'}, + {icon: , url: 'https://www.barrons.com/'}, {icon: , url: 'https://www.wsj.com/'}, + {icon: , url: 'https://www.mansionglobal.com/'}, + {icon: , url: 'https://www.talksport.com/'}, + {icon: , url: 'https://www.dowjones.com/professional/factiva/'}, + {icon: , url: 'https://www.marketwatch.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} - - - ))} - - - ); -}; +export const SupportedBrands = () => ( + + + {SUPPORTED_BRANDS.map(({icon, url}) => ( + + + {icon} + + + ))} + + +); diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 2fba6bf9a4..78ea6fae8a 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -7,6 +7,7 @@ import { Flag, LinkStandalone, Block, + GridLayoutItem, } from 'newskit'; import {ContentPrimary} from '../../content-structure'; import {IconFilledLaunch} from '../../../../src/icons'; @@ -25,39 +26,50 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { rowGap="space080" columnGap="space050" > - + - - Latest Release - - - NewsKit {latestRelease.tag_name} - - + + + New + + + + + NewsKit {latestRelease.tag_name} + + + + { - + {restReleases.map(({html_url, tag_name}) => ( @@ -87,6 +99,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { overrides={{ marginBlockEnd: 'space050', typographyPreset: 'editorialHeadline020', + heading: {stylePreset: 'whatsNewCardLink'}, }} > NewsKit {tag_name} diff --git a/site/components/illustrations/brands/factiva.tsx b/site/components/illustrations/brands/factiva.tsx new file mode 100644 index 0000000000..4c5bff221a --- /dev/null +++ b/site/components/illustrations/brands/factiva.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../svg'; +import {Path} from '../path'; +import {Rect} from '../rect'; + +const Factiva: React.FC = () => { + const clip0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Factiva; diff --git a/site/components/illustrations/brands/index.ts b/site/components/illustrations/brands/index.ts index bbff065305..84e5032734 100644 --- a/site/components/illustrations/brands/index.ts +++ b/site/components/illustrations/brands/index.ts @@ -9,6 +9,7 @@ import Times from './times'; import TimesTravel from './times-travel'; import Virgin from './virgin'; import WSJ from './wsj'; +import Factiva from './factiva'; export { Barrons, @@ -22,4 +23,5 @@ export { TimesTravel, Virgin, WSJ, + Factiva, }; diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index 72250a338c..fccc0f2bca 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -1835,6 +1835,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -4391,6 +4401,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -6950,6 +6970,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -9506,6 +9536,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -12065,6 +12105,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -14621,6 +14671,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -17180,6 +17240,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", @@ -19736,6 +19806,16 @@ Object { "color": "{{colors.inkBase}}", }, }, + "whatsNewCardLink": Object { + "base": Object { + "color": "{{colors.interactivePrimary030}}", + "iconColor": "{{colors.interactivePrimary030}}", + "textDecoration": "none", + }, + "hover": Object { + "textDecoration": "underline", + }, + }, "whatsNewHomeFlag": Object { "base": Object { "backgroundColor": "{{colors.inkInformative}}", diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts index 31b9c30759..1795341f8a 100644 --- a/site/theme/style-presets.ts +++ b/site/theme/style-presets.ts @@ -1087,6 +1087,16 @@ export const stylePresets = { textDecoration: 'underline', }, }, + whatsNewCardLink: { + base: { + textDecoration: 'none', + color: '{{colors.interactivePrimary030}}', + iconColor: '{{colors.interactivePrimary030}}', + }, + hover: { + textDecoration: 'underline', + }, + }, whatsNewHomeFlag: { base: { borderRadius: '{{borders.borderRadiusRounded020}}', From 54d1219ac865dc817b27f6b227146fbfc7338e94 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 1 Sep 2022 11:17:54 +0300 Subject: [PATCH 06/12] docs(PPDSC-2298): whats new update --- site/components/homepage/whats-new/whats-new.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 78ea6fae8a..675c389c5c 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -30,7 +30,6 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { { - {restReleases.map(({html_url, tag_name}) => ( @@ -105,7 +102,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { NewsKit {tag_name} { ))} - + ); From 05c8f69645d6f9446ed4a42aa0808c6dd40e9385 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 1 Sep 2022 14:19:27 +0300 Subject: [PATCH 07/12] docs(PPDSC-2298): alignment update --- .../homepage/whats-new/whats-new.tsx | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 675c389c5c..37ed697498 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -21,16 +21,14 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { const [latestRelease, ...restReleases] = releases; return ( - - + + @@ -77,13 +75,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { This release includes new features, bug fixes and other changes. - - - - + {restReleases.map(({html_url, tag_name}) => ( { ))} - - + + ); }; From 619eb75b0eeab31dd91a5f8ebf536b63fb90f1ba Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 1 Sep 2022 15:58:44 +0300 Subject: [PATCH 08/12] docs(PPDSC-2298): update spacings --- site/components/homepage/explore/explore.tsx | 5 ++++- site/pages/index-new.tsx | 21 +++++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx index 04b880f4e8..e8cea6ed9e 100644 --- a/site/components/homepage/explore/explore.tsx +++ b/site/components/homepage/explore/explore.tsx @@ -42,7 +42,10 @@ export const Explore = () => ( key={href} href={href} media={() => media} - overrides={{stylePreset: 'homepageCard'}} + overrides={{ + stylePreset: 'homepageCard', + marginBlockEnd: {xs: 'space080', md: 'space000'}, + }} > { > {showEventBanner && ( - + { - + { }} /> - + From f0412c103db701ff1983be8351a4a9e4b2351280 Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Thu, 1 Sep 2022 18:11:07 +0300 Subject: [PATCH 09/12] docs(PPDSC-2298): update small screen spacing --- site/pages/index-new.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 2e35d4b246..3f3944c065 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -67,7 +67,12 @@ const Index = ({releases, ...layoutProps}: LayoutProps & ReleasesPageProps) => { - + Date: Mon, 5 Sep 2022 15:29:20 +0300 Subject: [PATCH 10/12] docs(PPDSC-2298): added target _blank to whats new links --- site/components/homepage/whats-new/whats-new.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 37ed697498..1b165cb424 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -83,6 +83,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { overrides={{stylePreset: 'whatsNewCardLink'}} href={html_url} key={tag_name} + target="_blank" > Date: Wed, 7 Sep 2022 09:07:47 +0300 Subject: [PATCH 11/12] docs(PPDSC-2298): update external release link --- .../homepage/whats-new/whats-new.tsx | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 1b165cb424..730abfa1d9 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -27,11 +27,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { rowGap="space040" columnGap="space100" > - + { - - NewsKit {latestRelease.tag_name} - - + > + NewsKit {latestRelease.tag_name} + + + From f5db856e75103d02808623243d84bd2620e3307b Mon Sep 17 00:00:00 2001 From: evgenitsn Date: Wed, 7 Sep 2022 12:01:12 +0300 Subject: [PATCH 12/12] docs(PPDSC-2298): simplified markup --- .../homepage/whats-new/whats-new.tsx | 59 ++++++++----------- 1 file changed, 24 insertions(+), 35 deletions(-) diff --git a/site/components/homepage/whats-new/whats-new.tsx b/site/components/homepage/whats-new/whats-new.tsx index 730abfa1d9..5c328e0bc4 100644 --- a/site/components/homepage/whats-new/whats-new.tsx +++ b/site/components/homepage/whats-new/whats-new.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - Headline, TextBlock, GridLayout, Card, @@ -30,7 +29,7 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { @@ -47,26 +46,21 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { - - NewsKit {latestRelease.tag_name} - - + /> @@ -78,34 +72,29 @@ export const WhatsNew = ({releases}: WhatsNewProps) => { This release includes new features, bug fixes and other changes. - + {restReleases.map(({html_url, tag_name}) => ( - +
- - NewsKit {tag_name} - - + /> - +
))}