docs(PPDSC-2075): merge branch 'main' into docs/PPDSC-2075-button-page

newscorp-ghfb · May 5, 2022 · 3730ee7 · 3730ee7
2 parents 71d69a0 + 816bc38
commit 3730ee7
Show file tree

Hide file tree

Showing 62 changed files with 1,792 additions and 701 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "dev": "concurrently --names \"src,storybook,docs\" \"yarn build:ts --watch\" \"yarn dev:storybook\" \"next site -p 8081\"",
     "dev:docs": "yarn build:icons:dev && concurrently --names \"src,docs\" \"yarn build:ts --watch\" \"next site -p 8081\"",
     "dev:storybook": "yarn build:icons:dev && start-storybook --ci -p 6006 -s ./fonts,./static",
-    "eyes:storybook": "eyes-storybook --conf applitools.components.config.js",
+    "eyes:storybook": "APPLITOOLS_SHOW_LOGS=true eyes-storybook --conf applitools.components.config.js",
     "lint:code:base": "eslint --report-unused-disable-directives --ext=.js,.ts,.jsx,.tsx --cache",
     "lint:code": "scripts/assert-files-and-folders.js && yarn lint:code:base .",
     "lint:code:fix": "yarn lint:code --fix",
@@ -55,7 +55,7 @@
     "e2e:docs": "cypress open --config-file cypress/config/cypress.docs.json",
     "e2e:comps:ci": "start-server-and-test e2e:serve 8080 'TZ=UTC cypress run --config-file cypress/config/cypress.components.json'",
     "e2e:docs:ci": "start-server-and-test serve:docs 8081 'TZ=UTC cypress run --config-file cypress/config/cypress.docs.json'",
-    "e2e:visual:docs:ci": "start-server-and-test serve:docs 8081 'TZ=UTC cypress run --config-file cypress/config/cypress.docs.visual.json'",
+    "e2e:visual:docs:ci": "start-server-and-test serve:docs 8081 'TZ=UTC APPLITOOLS_SHOW_LOGS=true cypress run --config-file cypress/config/cypress.docs.visual.json'",
     "e2e:generate:a11ytests": "node scripts/generate-a11y-tests.js",
     "e2e:findbrokenlinks": "linkinator http://localhost:8081 --recurse --skip '^(?!http://localhost:8081)'",
     "e2e:findbrokenlinks:ci": "start-server-and-test serve:docs 8081 e2e:findbrokenlinks",
@@ -66,8 +66,8 @@
     "storybook": "start-storybook -c .storybook -p 6006 -s ./fonts,./static"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.23.3",
-    "@applitools/eyes-storybook": "^3.27.4",
+    "@applitools/eyes-cypress": "^3.25.6",
+    "@applitools/eyes-storybook": "^3.27.6",
     "@babel/core": "^7.13.15",
     "@babel/parser": "^7.14.6",
     "@commitlint/cli": "^8.0.0",

diff --git a/site/components/component-api/common-logical-props.tsx b/site/components/component-api/common-logical-props.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import {Prop, StyledContainer} from '../prop';
+
+export const commonLogicalProps = (type?: 'propsRow' | 'overridesRow') => {
+  const logicalPropsOverrides = [
+    {
+      attribute: 'paddingInline',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.	`,
+    },
+    {
+      attribute: 'paddingInlineStart',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'paddingInlineEnd',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'paddingBlock',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'paddingBlockStart',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'paddingBlockEnd',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginInline',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginInlineStart',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline start margin of thecontainer. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginInlineEnd',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginBlock',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginBlockStart',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.       `,
+    },
+    {
+      attribute: 'marginBlockEnd',
+      type: 'MQ<string>',
+      description: `It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.       `,
+    },
+  ];
+
+  const logicalProps = logicalPropsOverrides.map(
+    ({attribute: name, ...rest}) => ({
+      name,
+      ...rest,
+    }),
+  );
+
+  return type === 'propsRow' ? logicalProps : logicalPropsOverrides;
+};
+
+interface CommonLogicalPropsMDXProps {
+  nested: boolean;
+}
+
+export const CommonLogicalPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
+  nested = false,
+}) => (
+  <StyledContainer nested={nested}>
+    <Prop name="paddingInline" type="MQ<string>">
+      It can take one space token to specify the logical inline start and end
+      padding of the container. This space token can also be used on
+      breakpoints.
+    </Prop>
+    <Prop name="paddingInlineStart" type="MQ<string>">
+      It can take one space token to specify the logical inline start padding of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="paddingInlineEnd" type="MQ<string>">
+      It can take one space token to specify the logical inline end padding of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="paddingBlock" type="MQ<string>">
+      It can take one space token to specify the logical block start and end
+      padding of the container. This space token can also be used on
+      breakpoints.
+    </Prop>
+    <Prop name="paddingBlockStart" type="MQ<string>">
+      It can take one space token to specify the logical block start padding of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="paddingBlockEnd" type="MQ<string>">
+      It can take one space token to specify the logical block end padding of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginInline" type="MQ<string>">
+      It can take one space token to specify the logical inline start and end
+      margin of the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginInlineStart" type="MQ<string>">
+      It can take one space token to specify the logical inline start margin of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginInlineEnd" type="MQ<string>">
+      It can take one space token to specify the logical inline end margin of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginBlock" type="MQ<string>">
+      It can take one space token to specify the logical block start and end
+      margin of the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginBlockStart" type="MQ<string>">
+      It can take one space token to specify the logical block start margin of
+      the container. This space token can also be used on breakpoints.
+    </Prop>
+    <Prop name="marginBlockEnd" type="MQ<string>">
+      It can take one space token to specify the logical block end margin of the
+      container. This space token can also be used on breakpoints.
+    </Prop>
+  </StyledContainer>
+);
diff --git a/site/components/prop.tsx b/site/components/prop.tsx
@@ -7,6 +7,8 @@ import {
   getSizingFromTheme,
   getBorderFromTheme,
   getColorFromTheme,
+  getSizingCssFromTheme,
+  getColorCssFromTheme,
 } from 'newskit';
 
 export interface PropProps {
@@ -24,13 +26,13 @@ export interface DefaultValueProps {
   enumObj?: any;
 }
 
-const StyledContainer = styled.div<Pick<PropProps, 'nested'>>`
+export const StyledContainer = styled.div<Pick<PropProps, 'nested'>>`
   ${getTypographyPresetFromTheme('utilityBody020')}
   line-height: 1.3;
-  margin-bottom: ${getSizingFromTheme('sizing060')};
-  color: ${getColorFromTheme('inkBase')};
-  margin-top: ${({nested}) => nested && getSizingFromTheme('sizing060')};
-  margin-left: ${({nested}) => nested && getSizingFromTheme('sizing060')};
+  ${getSizingCssFromTheme('marginBottom', 'sizing060')};
+  ${getColorCssFromTheme('color', 'inkBase')};
+  ${({nested}) => nested && getSizingCssFromTheme('marginTop', 'sizing060')};
+  ${({nested}) => nested && getSizingCssFromTheme('marginLeft', 'sizing060')};
 `;
 
 const PropsRow = styled.div`

diff --git a/site/pages/components/aspect-ratio.mdx b/site/pages/components/aspect-ratio.mdx
@@ -6,7 +6,8 @@ import {AspectRatio, getAspectRatioStyles} from 'newskit';
 
 export default Layout;
 
-# Aspect Ratio
+# (deprecated) Aspect Ratio
+For more information on how to apply aspect ratio to image, please refer to the <a href="/components/image">Image component</a>.
 
 ## Overview
 

diff --git a/site/pages/components/audio-player.mdx b/site/pages/components/audio-player.mdx
@@ -3,6 +3,7 @@ import Playground from '../../components/playground';
 import Prop from '../../components/prop';
 import {CodeFromDefaultPresets} from '../../components/code';
 import {AudioPlayer, UnorderedList, Block} from 'newskit';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
 
 export default Layout;
 
@@ -139,7 +140,8 @@ The Audio Player requires a source stream to be passed in as a prop. This will t
       VolumeControl. The volume control overrides structure can be found in the {' '}
       <a href="/components/volume-control">volume control documentation page</a>.
     </Prop>
-    <CodeFromDefaultPresets componentName="audioPlayer" />
+    <CommonLogicalPropsMDX/>
+  <CodeFromDefaultPresets componentName="audioPlayer" />
   </Prop>
 </Block>
 

diff --git a/site/pages/components/banner.tsx b/site/pages/components/banner.tsx
@@ -16,6 +16,8 @@ import {UsageKind} from '../../components/usage-card';
 import {MetaStatus} from '../../components/meta/types';
 import {LayoutProps} from '../../components/layout';
 import {ComponentPageTemplate} from '../../templates/component-page-template';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
+import {OverridesRowsProps} from '../../components/component-api';
 
 const CTABtn = ({overrides, ...restProps}: ButtonOrButtonLinkProps) => (
   <Button
@@ -504,11 +506,11 @@ const BannerComponent = (layoutProps: LayoutProps) => (
                 'Overrides the stylePreset applied to the Banner container and the Icon color.',
             },
             {
-              attribute: 'spaceInset',
+              attribute: 'spaceInset(deprecated)',
               type: 'MQ<string>',
               default: 'spaceInset045',
               description:
-                'Overrides the space inset applied to the Banner container. It can take four space tokens to specify the padding for each side of the Banner. These four space tokens can also be used on breakpoints.	',
+                'Use paddingInline & paddingBlock instead. Overrides the space inset applied to the Banner container. It can take four space tokens to specify the padding for each side of the Banner. These four space tokens can also be used on breakpoints.	',
             },
             {
               attribute: 'minHeight',
@@ -602,6 +604,7 @@ const BannerComponent = (layoutProps: LayoutProps) => (
               description:
                 'Overrides the spacing between the action buttons and the close button.',
             },
+            ...(commonLogicalProps() as OverridesRowsProps[]),
           ],
         },
       ],

diff --git a/site/pages/components/block.tsx b/site/pages/components/block.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import {Block, BlockProps, InlineMessage, styled} from 'newskit';
+import {PropsRowsProps} from '../../components/component-api';
 import {Link} from '../../components/link/link';
 import {LegacyBlock} from '../../components/legacy-block';
 import {getIllustrationComponent} from '../../components/illustrations/illustration-loader';
 import {UsageKind} from '../../components/usage-card';
 import {MetaStatus} from '../../components/meta/types';
 import {LayoutProps} from '../../components/layout';
 import {ComponentPageTemplate} from '../../templates/component-page-template';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
 
 const PlaygroundContainer = styled.div`
   width: 100%;
@@ -230,28 +232,27 @@ const BlockComponent = (layoutProps: LayoutProps) => (
               description: `If provided, applies style on the Block.`,
             },
             {
-              name: 'spaceInline',
+              name: 'spaceInline(deprecated)',
               type: 'MQ<string>',
-              description: `Set the spacing which is applied as a margin on the right of the Block.`,
+              description: `Use marginInlineEnd instead. Set the spacing which is applied as a margin on the right of the Block.`,
             },
             {
-              name: 'spaceStack',
+              name: 'spaceStack(deprecated)',
               type: 'MQ<string>',
-              description: `This is a spacing preset token which is applied as a margin on the bottom of the Block. Use this to space stacking content down the page.`,
+              description: `Use marginBlockEnd instead. This is a spacing preset token which is applied as a margin on the bottom of the Block. Use this to space stacking content down the page.`,
             },
             {
-              name: 'spaceInset',
+              name: 'spaceInset(deprecated)',
               type: 'MQ<string>',
-              description: `Overrides the space inset applied to the Block.`,
+              description: `Use paddingBlock and paddingInline instead. Apply space inset to the Block.`,
             },
-          ],
-          overridesRows: [
             {
-              attribute: 'block.transitionPreset',
+              name: 'transitionPreset',
               type: 'TransitionToken | TransitionToken[]',
               default: 'backgroundColorChange',
-              description: `Overrides the transitionPreset of the Menu Item.`,
+              description: `Apply transitionPreset to the Block component.`,
             },
+            ...(commonLogicalProps('propsRow') as PropsRowsProps[]),
           ],
           propsFooter: (
             <InlineMessage>
@@ -278,5 +279,4 @@ const BlockComponent = (layoutProps: LayoutProps) => (
     }}
   />
 );
-
 export default BlockComponent;
diff --git a/site/pages/components/byline.mdx b/site/pages/components/byline.mdx
@@ -7,6 +7,8 @@ import {
   CodeFromDefaultPresets,
   Code,
 } from '../../components/code';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
+
 
 import {Byline} from 'newskit';
 
@@ -77,6 +79,7 @@ interface BylineData {
         the text.
       </Prop>
     </Prop>
+    <CommonLogicalPropsMDX/>
     Refer to the defaults below for the full object structure:
     <CodeFromDefaultPresets componentName="byline" />
   </Prop>

diff --git a/site/pages/components/caption.mdx b/site/pages/components/caption.mdx
@@ -3,6 +3,7 @@ import Playground from '../../components/playground';
 import {Prop} from '../../components/prop';
 import {TextBoxSwatch} from '../../components/theming-values/colors';
 import {LegacyBlock} from '../../components/legacy-block';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
 
 import {Caption, CaptionInset} from 'newskit';
 
@@ -41,8 +42,7 @@ The are two variants of the caption component - a caption without inset `<Captio
         If provided, this overrides the typography preset of the component..
       </Prop>
       <Prop name="spaceStack" type="MQ<string>">
-        If provided, this overrides the spacing between the caption and the
-        credit.
+        If provided, this overrides the spacing between the caption and the credit.
       </Prop>
       <Prop name="credit" type="object" >
         If provided, this overrides the styling of the credit portion of the component.
@@ -54,8 +54,9 @@ The are two variants of the caption component - a caption without inset `<Captio
           </Prop>
       </Prop>
       <Prop name="spaceInset" type="MQ<string>">
-       If provided, this overrides the padding of the Caption. This override should only be used with CaptionInset. Otherwise, spaceInset040 or spaceInset050  is used depending on the `size` prop.
+       This property is deprecated. Use paddingInline and paddingBlock instead. If provided, this overrides the padding of the Caption. This override should only be used with CaptionInset. Otherwise, spaceInset040 or spaceInset050  is used depending on the `size` prop.
       </Prop>
+      <CommonLogicalPropsMDX/>
 
   </Prop>
 </LegacyBlock>