Skip to content

Commit

Permalink
chore(PPDSC-1581): merge in main
Browse files Browse the repository at this point in the history
  • Loading branch information
mstuartf committed Jan 5, 2023
2 parents f172f7a + deb955f commit dcf226c
Show file tree
Hide file tree
Showing 43 changed files with 1,074 additions and 345 deletions.
3 changes: 3 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -528,6 +528,9 @@ jobs:
command: make unit_test_docs
environment:
JEST_JUNIT_OUTPUT_DIR: ./reports/junit/
- run:
name: Check component statuses match code tags
command: yarn test:comp-statuses
- store_test_results:
path: ./reports/junit/
- store_artifacts:
Expand Down
4 changes: 2 additions & 2 deletions cypress/site/functional/404.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ describe('404 page', () => {
.should('equal', 404);
cy.request({url: '/abcde', failOnStatusCode: false})
.its('body')
.should('include', 'Go back to the homepage');
.should('include', 'Back to the homepage');
});
it('should return to homepage when back link is clicked', () => {
cy.visit('/abcde', {failOnStatusCode: false});
cy.get('[data-testid="back-link"]')
.should('have.attr', 'href', '/')
.should('have.text', 'Go back to the homepage');
.should('have.text', 'Back to the homepage');
cy.get('[data-testid="back-link"]').click({force: true});
// Go back to the homepage
cy.url().should('eq', 'http://localhost:8081/');
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"test:unit:ci": "yarn test:unit:run --maxWorkers=2 --ci --reporters=default --reporters=jest-junit",
"test:unit:comps": "yarn test:unit:run:local --projects=src",
"test:unit:site": "yarn test:unit:run:local --projects=site",
"test:comp-statuses": "node scripts/component-status.js",
"test:visual:comps:ci:percy": "STORYBOOK_IS_VISUAL_TEST=true start-server-and-test dev:storybook 6006 percy:run",
"test:visual:comps:ci:percy:skip": "PERCY_PARTIAL_BUILD=1 SKIP_PERCY_CHECK=true start-server-and-test dev:storybook 6006 percy:run",
"test:visual:comps:local:percy": "sh ./scripts/percy_local.sh comps",
Expand Down
89 changes: 89 additions & 0 deletions scripts/component-status.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
#!/usr/bin/env node

/* eslint-env node */

const fs = require('fs');
const path = require('path');

const componentPages = path.join(__dirname, '../site/pages/components');
const componentSrc = path.join(__dirname, '../src');

const getComponentName = s =>
s.replace(/\b./g, x => x.toUpperCase()).replace(/-/g, '');

// This object handles non-src component files and instances where site file names
// do not match src file paths exactly.
const OVERRIDES = {
overview: null,
utils: null,
visibility: 'grid/visibility.tsx',
'audio-player': 'audio-player-composable/audio-player-composable.tsx',
link: 'link/internal-link.tsx',
};

// Search component page files for the MetaStatus enum.
const getSiteStatus = componentName => {
const data = fs.readFileSync(
path.join(componentPages, `${componentName}.tsx`),
{encoding: 'utf-8'},
);
const regEx = /MetaStatus\.(?<status>Beta|Supported|Deprecated)/;
const matches = regEx.exec(data);
return matches.groups.status.toLowerCase();
};

// Check if the component src file contains either:
// /**
// * @deprecated ComponentName is deprecated and will be removed in the next major release.
// */
// Or:
// /**
// * @beta ComponentName is in beta.
// */
// Otherwise, assume the component is supported.
const getSrcStatus = (filePath, componentName) => {
const data = fs.readFileSync(path.join(componentSrc, filePath), {
encoding: 'utf-8',
});
// Be careful to avoid accidentally detecting deprecated props.
const regEx = new RegExp(
`\\/\\*\\*.*\\n.*@(?<status>deprecated|beta).*\\b${componentName}\\b.*\\n.*\\*\\/`,
);
const matches = regEx.exec(data);
if (matches) {
return matches.groups.status;
}
return 'supported';
};

fs.readdir(componentPages, (err, files) => {
const mismatches = files
.filter(file => !file.includes('.mdx'))
.map(file => file.replace('.tsx', ''))
.reduce((prev, fileName) => {
// eslint-disable-next-line no-prototype-builtins
const srcFilePath = OVERRIDES.hasOwnProperty(fileName)
? OVERRIDES[fileName]
: `${fileName}/${fileName}.tsx`;
if (!srcFilePath) {
return prev;
}
const componentName = getComponentName(fileName);
const srcStatus = getSrcStatus(srcFilePath, componentName);
const siteStatus = getSiteStatus(fileName);
if (srcStatus === siteStatus) {
return prev;
}
return [...prev, {componentPageName: fileName, srcStatus, siteStatus}];
}, []);
if (mismatches.length) {
throw Error(
`The following components have status mismatches (src vs. site):\n${mismatches
.map(
({componentPageName, srcStatus, siteStatus}) =>
`* ${componentPageName}: ${srcStatus} vs. ${siteStatus}`,
)
.join('\n')}`,
);
}
});
2 changes: 2 additions & 0 deletions site/components/homepage/hero/styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import {getMediaQueryFromTheme, styled, Block} from 'newskit';
export const HeroContainer = styled(Block)`
background-size: cover;
background-repeat: no-repeat;
margin-block-start: -12px;
min-height: calc(100% + 12px);
${getMediaQueryFromTheme('md')} {
${({theme}) => {
Expand Down
26 changes: 16 additions & 10 deletions site/components/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export interface LayoutProps {
toggleTheme: () => void;
themeMode: string;
hideSidebar?: boolean;
hideFooter?: boolean;
children: React.ReactNode | ((props: {themeMode: string}) => React.ReactNode);
}
interface LayoutState {
Expand Down Expand Up @@ -168,6 +169,7 @@ class Layout extends React.Component<LayoutProps, LayoutState> {
const {sidebarOpen, debugDropdownVisible} = this.state;
const {
hideSidebar,
hideFooter,
path,
newPage,
toggleTheme,
Expand Down Expand Up @@ -227,16 +229,20 @@ class Layout extends React.Component<LayoutProps, LayoutState> {
)}
</BodyWrapper>
</InstrumentationProvider>
{path === '/index' ? (
<SiteFooter
cellProps={{
xs: 12,
xl: 10,
xlOffset: 1,
}}
/>
) : (
<SiteFooter />
{!hideFooter && (
<>
{path === '/index' ? (
<SiteFooter
cellProps={{
xs: 12,
xl: 10,
xlOffset: 1,
}}
/>
) : (
<SiteFooter />
)}
</>
)}
</Container>
</ThemeModeContext.Provider>
Expand Down
30 changes: 9 additions & 21 deletions site/components/meta/__tests__/__snapshots__/meta.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -175,21 +175,17 @@ exports[`Meta renders with mandatory props 1`] = `
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
color: #FFFFFF;
background-color: #3358CC;
border-radius: 8px;
white-space: nowrap;
border-color: #017582;
color: #FFFFFF;
background-color: #017582;
}
.emotion-9 svg {
width: 16px;
height: 16px;
}
.emotion-9 svg {
fill: #FFFFFF;
}
.emotion-10 {
padding: 4px;
}
Expand Down Expand Up @@ -1361,21 +1357,17 @@ exports[`Meta renders with mandatory props and figma button 1`] = `
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
color: #FFFFFF;
background-color: #3358CC;
border-radius: 8px;
white-space: nowrap;
border-color: #017582;
color: #FFFFFF;
background-color: #017582;
}
.emotion-9 svg {
width: 16px;
height: 16px;
}
.emotion-9 svg {
fill: #FFFFFF;
}
.emotion-10 {
padding: 4px;
}
Expand Down Expand Up @@ -2669,21 +2661,17 @@ exports[`Meta renders with mandatory props and version above v5 1`] = `
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
color: #FFFFFF;
background-color: #3358CC;
border-radius: 8px;
white-space: nowrap;
border-color: #017582;
color: #FFFFFF;
background-color: #017582;
}
.emotion-9 svg {
width: 16px;
height: 16px;
}
.emotion-9 svg {
fill: #FFFFFF;
}
.emotion-10 {
padding: 4px;
}
Expand Down
6 changes: 3 additions & 3 deletions site/components/meta/status.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import {Block, Flag, Headline, Stack, TextBlock} from 'newskit';
import {MetaFlagStylePresets} from './types';
import {MetaFlagStylePresets, MetaStatus} from './types';

export const Status: React.FC<{status?: string}> = ({status}) =>
export const Status: React.FC<{status?: MetaStatus}> = ({status}) =>
status ? (
<Stack flow="vertical-left" spaceInline="space040">
<Headline overrides={{typographyPreset: 'utilityLabel020'}}>
Expand All @@ -11,7 +11,7 @@ export const Status: React.FC<{status?: string}> = ({status}) =>
<Flag
size="small"
overrides={{
stylePreset: MetaFlagStylePresets.Supported,
stylePreset: MetaFlagStylePresets[status],
}}
>
<Block spaceInset="space010">
Expand Down
4 changes: 2 additions & 2 deletions site/components/meta/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ export enum MetaStatus {
}

export enum MetaFlagStylePresets {
Supported = 'flagBrand',
Supported = 'flagSupported',
Deprecated = 'flagSolidNegative',
Beta = 'flagSolidNotice',
Beta = 'flagBeta',
}

export interface MetaProps {
Expand Down
79 changes: 43 additions & 36 deletions site/components/playground/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
/* eslint-disable react/destructuring-assignment */
import React, {useState} from 'react';
import {styled, getColorFromTheme, deepMerge} from 'newskit';
import {
styled,
getColorFromTheme,
deepMerge,
InstrumentationProvider,
} from 'newskit';
import {LegacyBlock, LegacyBlockProps} from '../legacy-block';
import {MultiChoiceKnob} from './knobs/multichoice-knob';
import {InputKnob} from './knobs/input-knob';
Expand Down Expand Up @@ -173,41 +178,43 @@ export const Playground: React.FC<
);

return (
<PlaygroundContainer>
<LegacyBlock
data-testid="playground-element"
{...commonBlockProps}
minHeight="280px"
backgroundColor="interfaceBackground"
padding="sizing070"
>
<ErrorBoundary key={errorBoundaryKey}>
<Component {...state} />
</ErrorBoundary>
</LegacyBlock>
{componentOptions && (
<Selector options={componentOptions} onChange={setComponentIndex}>
Component
</Selector>
)}
<LegacyBlock
{...commonBlockProps}
alignItems="left"
padding="sizing070"
overflow="scroll"
maxHeight="450px"
borderRadius="0px 0px 0px 0px"
>
{knobs.map(renderKnob(state, updateState))}
</LegacyBlock>
<LegacyBlock {...commonBlockProps} borderRadius="0px 0px 12px 12px">
<CodeExample
componentName={selectedCompName}
source={source.code || source.error || ''}
error={Boolean(source.error)}
/>
</LegacyBlock>
</PlaygroundContainer>
<InstrumentationProvider context={{area: 'playground'}}>
<PlaygroundContainer>
<LegacyBlock
data-testid="playground-element"
{...commonBlockProps}
minHeight="280px"
backgroundColor="interfaceBackground"
padding="sizing070"
>
<ErrorBoundary key={errorBoundaryKey}>
<Component {...state} />
</ErrorBoundary>
</LegacyBlock>
{componentOptions && (
<Selector options={componentOptions} onChange={setComponentIndex}>
Component
</Selector>
)}
<LegacyBlock
{...commonBlockProps}
alignItems="left"
padding="sizing070"
overflow="scroll"
maxHeight="450px"
borderRadius="0px 0px 0px 0px"
>
{knobs.map(renderKnob(state, updateState))}
</LegacyBlock>
<LegacyBlock {...commonBlockProps} borderRadius="0px 0px 12px 12px">
<CodeExample
componentName={selectedCompName}
source={source.code || source.error || ''}
error={Boolean(source.error)}
/>
</LegacyBlock>
</PlaygroundContainer>
</InstrumentationProvider>
);
};

Expand Down
Loading

0 comments on commit dcf226c

Please sign in to comment.