chore(PPDSC-1852): replace enums

README_COMPONENTS.md

@@ -78,7 +78,7 @@ NewsKit components can be used like any typical react components. One thing to b
 The following example shows the "Hello World!" example of using a NewsKit component. More comprehensive usage documentation can be found on our [website](https://www.newskit.co.uk/getting-started/code/engineering-quickstart/).
 
 ```typescript
-import {ThemeProvider, Tag, TagSize, newskitLightTheme} from 'newskit';
+import {ThemeProvider, Tag, newskitLightTheme} from 'newskit';
 import React from 'react';
 
 export default class App extends React.Component {
@@ -88,7 +88,7 @@ export default class App extends React.Component {
       <ThemeProvider theme={newskitLightTheme}>
         <Tag
           href="http://example.com"
-          size={TagSize.Medium}>
+          size="medium">
             Tag Content
         </Tag>
       </ThemeProvider>

lib/codemod/src/transforms/__tests__/enums-to-union/actual.js

@@ -29,7 +29,9 @@ import {
 const Component = () => (
   <>
     <Button size={ButtonSize.Small}>Button</Button>
-    <IconButton size={ButtonSize.Small}><IconFilledLight overrides={{size: 'iconSize010'}} /></IconButton>
+    <IconButton size={ButtonSize.Small}>
+      <IconFilledLight overrides={{size: 'iconSize010'}} />
+    </IconButton>
     <Menu vertical align={MenuItemAlign.Start} size={MenuItemSize.Small}>
       <MenuItem href={href}>Menu item knickknackatory 1</MenuItem>
       <MenuItem href={href}>Menu item knickknackatory 2</MenuItem>
@@ -57,6 +59,18 @@ const Component = () => (
     <StackChild alignSelf={AlignSelfValues.Stretch}>
       <Divider />
     </StackChild>
+    <StackChild alignSelf={AlignSelfValues.FirstBaseline}>
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf={AlignSelfValues.LastBaseline}>
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf={AlignSelfValues.SafeCenter}>
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf={AlignSelfValues.UnsafeCenter}>
+      <Divider />
+    </StackChild>
     <Tag size={TagSize.Medium}>Tag</Tag>
     <Tabs
       size={TabSize.Medium}
@@ -65,9 +79,7 @@ const Component = () => (
       indicatorPosition={TabsIndicatorPosition.Start}
       distribution={TabsDistribution.Equal}
     >
-      <Tab label="Tab">
-        Tab
-      </Tab>
+      <Tab label="Tab">Tab</Tab>
     </Tabs>
     <Label size={TextFieldSize.Small}>Label</Label>
     <Form onSubmit={onSubmit}>
@@ -82,7 +94,9 @@ const Component = () => (
         assistiveText="Your email"
       />
     </Form>
-    <Avatar size={AvatarSize.Small} align={AlignContent.Start}>New image</Avatar>
+    <Avatar size={AvatarSize.Small} align={AlignContent.Start}>
+      New image
+    </Avatar>
     <ArticleHeader align={HeaderAlign.Start}>Header</ArticleHeader>
   </>
 );

lib/codemod/src/transforms/__tests__/enums-to-union/expected.js

@@ -15,7 +15,9 @@ import {
 const Component = () => (
   <>
     <Button size="small">Button</Button>
-    <IconButton size="small"><IconFilledLight overrides={{size: 'iconSize010'}} /></IconButton>
+    <IconButton size="small">
+      <IconFilledLight overrides={{size: 'iconSize010'}} />
+    </IconButton>
     <Menu vertical align="start" size="small">
       <MenuItem href={href}>Menu item knickknackatory 1</MenuItem>
       <MenuItem href={href}>Menu item knickknackatory 2</MenuItem>
@@ -43,6 +45,18 @@ const Component = () => (
     <StackChild alignSelf="stretch">
       <Divider />
     </StackChild>
+    <StackChild alignSelf="first baseline">
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf="last baseline">
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf="safe center">
+      <Divider />
+    </StackChild>
+    <StackChild alignSelf="unsafe center">
+      <Divider />
+    </StackChild>
     <Tag size="medium">Tag</Tag>
     <Tabs
       size="medium"
@@ -51,9 +65,7 @@ const Component = () => (
       indicatorPosition="start"
       distribution="equal"
     >
-      <Tab label="Tab">
-        Tab
-      </Tab>
+      <Tab label="Tab">Tab</Tab>
     </Tabs>
     <Label size="small">Label</Label>
     <Form onSubmit={onSubmit}>
@@ -68,7 +80,9 @@ const Component = () => (
         assistiveText="Your email"
       />
     </Form>
-    <Avatar size={AvatarSize.Small} align={AlignContent.Start}>New image</Avatar>
+    <Avatar size={AvatarSize.Small} align={AlignContent.Start}>
+      New image
+    </Avatar>
     <ArticleHeader align={HeaderAlign.Start}>Header</ArticleHeader>
   </>
 );

lib/codemod/src/transforms/enum-to-union.js

@@ -1,4 +1,5 @@
 const {toKebabCase} = require('../utils/to-kebab-case');
+const {toLowerCaseWithSpace} = require('../utils/to-lower-case-with-space');
 
 const enumNames = [
   'ButtonSize',
@@ -61,12 +62,21 @@ const transformEnums = (j, root) => {
       .filter(path => enumNames.includes(path.value.expression.object.name))
       .replaceWith(path => {
         const propValue = path.value.expression.property.name;
-        const newPropValue = `${toKebabCase(propValue)}`;
+        const newPropValue =
+          propName === 'alignSelf' &&
+          [
+            'FirstBaseline',
+            'LastBaseline',
+            'SafeCenter',
+            'UnsafeCenter',
+          ].includes(propValue)
+            ? `${toLowerCaseWithSpace(propValue)}`
+            : `${toKebabCase(propValue)}`;
         const newPath =
           propName === 'stackDistribution' &&
           ['start', 'end'].includes(newPropValue)
-            ? j.literal(`flex-${toKebabCase(propValue)}`)
-            : j.literal(`${toKebabCase(propValue)}`);
+            ? j.literal(`flex-${newPropValue}`)
+            : j.literal(`${newPropValue}`);
         return newPath;
       });
   });

lib/codemod/src/utils/__tests__/to-lower-case-with-space.test.js

@@ -0,0 +1,10 @@
+const {toLowerCaseWithSpace} = require('../to-lower-case-with-space');
+
+describe('to-lower-case-with-space', () => {
+  test('toLowerCaseWithSpace', () => {
+    expect(toLowerCaseWithSpace('HelloWorld')).toBe('hello world');
+    expect(toLowerCaseWithSpace('Hello World')).toBe('hello world');
+    expect(toLowerCaseWithSpace('HelloWorldAgain')).toBe('hello world again');
+    expect(toLowerCaseWithSpace('HelloWorldcup')).toBe('hello worldcup');
+  });
+});

lib/codemod/src/utils/to-lower-case-with-space.js

@@ -0,0 +1,11 @@
+function toLowerCaseWithSpace(str) {
+  if (str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+  }
+  /* istanbul ignore next */
+  return '';
+}
+
+module.exports = {
+  toLowerCaseWithSpace,
+};

site/components/component-api/component-api.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Block, Tab, Tabs, TabSize} from 'newskit';
+import {Block, Tab, Tabs} from 'newskit';
 import {Table} from '../table';
 import {ContentText} from '../text-section/content-text';
 import {ComponentAPIProps} from './types';
@@ -107,7 +107,7 @@ export const ComponentAPI: React.FC<ComponentAPIProps> = ({components}) => (
               </ContentText>
             )}
             {tabs.length > 1 && (
-              <Tabs size={TabSize.Medium}>
+              <Tabs size="medium">
                 {tabs.map(({label, tabSummary, content}) => (
                   <Tab label={label} overrides={tabOverrides} key={label}>
                     {tabSummary && <ContentText>{tabSummary}</ContentText>}

site/components/feature-card/feature-card.tsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {
   Block,
   Visible,
-  StackDistribution,
   Stack,
   Headline,
   TextBlock,
   Button,
-  ButtonSize,
   useTheme,
   toNewsKitIcon,
 } from 'newskit';
@@ -154,7 +152,7 @@ const FeatureCardHorizontal = React.forwardRef<
               <Block spaceStack="space020">
                 <OptionalButtonLinkWrapper href={href} buttonHref={buttonHref}>
                   <Button
-                    size={ButtonSize.Small}
+                    size="small"
                     overrides={{
                       stylePreset: `${stylePrefix}Button`,
                       typographyPreset: 'utilityButton010',
@@ -188,7 +186,7 @@ const FeatureCardHorizontal = React.forwardRef<
               },
             }}
           >
-            <Stack stackDistribution={StackDistribution.Center}>
+            <Stack stackDistribution="center">
               {title && (
                 <Block spaceStack={{xs: 'space045', lg: 'space050'}}>
                   <Headline
@@ -216,7 +214,7 @@ const FeatureCardHorizontal = React.forwardRef<
               {buttonLabel && (
                 <OptionalButtonLinkWrapper href={href} buttonHref={buttonHref}>
                   <Button
-                    size={ButtonSize.Small}
+                    size="small"
                     overrides={{
                       stylePreset: `${stylePrefix}Button`,
                       typographyPreset: 'utilityButton010',
@@ -317,7 +315,7 @@ const FeatureCardVertical = React.forwardRef<HTMLDivElement, FeatureCardProps>(
             <Block spaceStack="space020">
               <OptionalButtonLinkWrapper href={href} buttonHref={buttonHref}>
                 <Button
-                  size={ButtonSize.Small}
+                  size="small"
                   overrides={{
                     stylePreset: `${stylePrefix}Button`,
                     typographyPreset: 'utilityButton010',

site/components/meta/figma-button.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {Button, ButtonSize} from 'newskit';
+import {Button} from 'newskit';
 
 import {IconFilledFigma} from '../icons/icon-filled-figma';
 
 export const FigmaButton: React.FC<{href?: string}> = ({href}) =>
   href ? (
     <Button
-      size={ButtonSize.Small}
+      size="small"
       overrides={{
         typographyPreset: 'utilityButton010',
         stylePreset: 'buttonOutlinedSecondary',

site/components/meta/github-button.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {Button, ButtonSize} from 'newskit';
+import {Button} from 'newskit';
 
 import {IconFilledGitHub} from '../icons/icon-filled-github';
 
 export const GitHubButton: React.FC<{href?: string}> = ({href}) =>
   href ? (
     <Button
-      size={ButtonSize.Small}
+      size="small"
       overrides={{
         typographyPreset: 'utilityButton010',
         stylePreset: 'buttonOutlinedSecondary',

site/components/meta/introduce.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Headline, Stack, Flow, TextBlock} from 'newskit';
+import {Headline, Stack, TextBlock} from 'newskit';
 import {Link} from '../link';
 
 const newskitRepoLink = `https://github.com/newscorp-ghfb/newskit/releases/tag/`;
@@ -9,7 +9,7 @@ export const Introduced: React.FC<{
   introducedLink?: boolean;
 }> = ({introduced, introducedLink}) =>
   introduced ? (
-    <Stack flow={Flow.VerticalLeft} spaceInline="space050">
+    <Stack flow="vertical-left" spaceInline="space050">
       <Headline overrides={{typographyPreset: 'utilityLabel020'}}>
         Introduced
       </Headline>

site/components/meta/meta.tsx

@@ -1,15 +1,5 @@
 import React from 'react';
-import {
-  Stack,
-  Block,
-  Divider,
-  StackChild,
-  AlignSelfValues,
-  Flow,
-  Hidden,
-  Cell,
-  Grid,
-} from 'newskit';
+import {Stack, Block, Divider, StackChild, Hidden, Cell, Grid} from 'newskit';
 import {MetaProps} from './types';
 import {GitHubButton} from './github-button';
 import {FigmaButton} from './figma-button';
@@ -26,10 +16,10 @@ export const Meta = ({
   <>
     <Block spaceStack={{xs: 'space080', md: 'space050'}}>
       <Hidden xs sm>
-        <Stack flow={Flow.HorizontalCenter} stackDistribution="space-between">
-          <Stack flow={Flow.HorizontalTop}>
+        <Stack flow="horizontal-center" stackDistribution="space-between">
+          <Stack flow="horizontal-top">
             <Status status={status} />
-            <StackChild alignSelf={AlignSelfValues.Stretch}>
+            <StackChild alignSelf="stretch">
               <Block
                 spaceInline={{
                   md: 'space060',
@@ -48,7 +38,7 @@ export const Meta = ({
             />
           </Stack>
           <Stack flow="horizontal-center" spaceInline="space040">
-            <StackChild alignSelf={AlignSelfValues.Stretch}>
+            <StackChild alignSelf="stretch">
               <GitHubButton href={codeUrl} />
             </StackChild>
             <FigmaButton href={figmaUrl} />
@@ -59,17 +49,17 @@ export const Meta = ({
       </Hidden>
 
       <Hidden md lg xl>
-        <Stack flow={Flow.VerticalLeft} spaceInline="space050">
-          <StackChild alignSelf={AlignSelfValues.Stretch}>
+        <Stack flow="vertical-left" spaceInline="space050">
+          <StackChild alignSelf="stretch">
             <Cell xs={6}>
               <Status status={status} />
             </Cell>
             <Cell xs={6}>
-              <Stack flow={Flow.HorizontalTop}>
+              <Stack flow="horizontal-top">
                 <Divider vertical />
                 <Block spaceInline="space060" />
                 <Stack
-                  flow={Flow.VerticalLeft}
+                  flow="vertical-left"
                   spaceInline="space020"
                   stackDistribution="space-evenly"
                 />
@@ -80,7 +70,7 @@ export const Meta = ({
               </Stack>
             </Cell>
           </StackChild>
-          <StackChild alignSelf={AlignSelfValues.Stretch}>
+          <StackChild alignSelf="stretch">
             <Grid xsMargin="space000">
               <Cell xs={12}>
                 <Divider />

site/components/meta/status.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import {Block, Flag, FlagSize, Flow, Headline, Stack, TextBlock} from 'newskit';
+import {Block, Flag, Headline, Stack, TextBlock} from 'newskit';
 import {MetaFlagStylePresets} from './types';
 
 export const Status: React.FC<{status?: string}> = ({status}) =>
   status ? (
-    <Stack flow={Flow.VerticalLeft} spaceInline="space040">
+    <Stack flow="vertical-left" spaceInline="space040">
       <Headline overrides={{typographyPreset: 'utilityLabel020'}}>
         Status
       </Headline>
       <Flag
-        size={FlagSize.Small}
+        size="small"
         overrides={{
           stylePreset: MetaFlagStylePresets.Supported,
         }}

site/components/playground/code-example.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import CodeSandboxer from 'react-codesandboxer';
-import {Button, ButtonSize} from 'newskit';
+import {Button} from 'newskit';
 import {Code} from '../code';
 import {LegacyBlock} from '../legacy-block';
 import {ErrorMessageContainer} from './error-boundary';
@@ -78,7 +78,7 @@ export const CodeExample: React.FC<CodeExampleProps> = ({
         <LegacyBlock alignSelf="flex-end" padding="sizing060">
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a>
-            <Button size={ButtonSize.Medium} data-testid="code-sandbox">
+            <Button size="medium" data-testid="code-sandbox">
               Edit on CodeSandbox
             </Button>
           </a>