feat(PPDSC-1983): add logical props part 3/6 (#192)

* feat(PPDSC-1983): add logical props part 3/6 * fix(PPDSC-1983): add LOGICAL_PROPS_TO_DO tag to comments * fix(PPDSC-1983): address reviews * fix(PPDSC-1983): remove sharebar scenario
newscorp-ghfb · May 11, 2022 · a0435ec · a0435ec
1 parent d0badaa
commit a0435ec
Show file tree

Hide file tree

Showing 82 changed files with 6,701 additions and 1,246 deletions.
diff --git a/site/components/component-api/common-logical-props.tsx b/site/components/component-api/common-logical-props.tsx
@@ -1,68 +1,77 @@
 import React from 'react';
 import {Prop, StyledContainer} from '../prop';
+import {OverridesRowsProps} from './types';
+
+export const logicalMarginOverrideProps: OverridesRowsProps[] = [
+  {
+    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 the container. 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.       `,
+  },
+];
+
+export const logicalPaddingOverrideProps: OverridesRowsProps[] = [
+  {
+    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.       `,
+  },
+];
 
 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.       `,
-    },
+    ...logicalMarginOverrideProps,
+    ...logicalPaddingOverrideProps,
   ];
 
   const logicalProps = logicalPropsOverrides.map(
@@ -79,7 +88,38 @@ interface CommonLogicalPropsMDXProps {
   nested: boolean;
 }
 
-export const CommonLogicalPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
+export const CommonLogicalMarginPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
+  nested = false,
+}) => (
+  <StyledContainer nested={nested}>
+    <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>
+);
+
+export const CommonLogicalPaddingPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
   nested = false,
 }) => (
   <StyledContainer nested={nested}>
@@ -109,29 +149,14 @@ export const CommonLogicalPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
       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>
 );
+
+export const CommonLogicalPropsMDX: React.FC<CommonLogicalPropsMDXProps> = ({
+  nested = false,
+}) => (
+  <>
+    <CommonLogicalPaddingPropsMDX nested={nested} />
+    <CommonLogicalMarginPropsMDX nested={nested} />
+  </>
+);
diff --git a/site/pages/components/card.mdx b/site/pages/components/card.mdx
@@ -108,6 +108,32 @@ There are two card variants - card without inset `<Card/>` card with inset `<Car
       <Prop name="spaceInline" type="MQ<SpacingPresetKeys>">
         If provided, this overrides the space between the media container and the container that holds the content and actions area.
       </Prop>
+      <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>
     <Prop name="teaserContainer" type="object">
       <Prop name="stylePreset" type="MQ<string>" >

diff --git a/site/pages/components/divider.tsx b/site/pages/components/divider.tsx
@@ -5,6 +5,8 @@ import {LayoutProps} from '../../components/layout';
 import {ComponentPageTemplate} from '../../templates/component-page-template/component-page-template';
 import {getIllustrationComponent} from '../../components/illustrations/illustration-loader';
 import {Mono} from '../../components/flags';
+import {OverridesRowsProps} from '../../components/component-api';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
 
 const DividerComponent = (layoutProps: LayoutProps) => (
   <ComponentPageTemplate
@@ -163,6 +165,7 @@ const DividerComponent = (layoutProps: LayoutProps) => (
               description:
                 'If provided, overrides the style preset applied to the Divider. The style preset can modify the borderStyle, borderColor and borderWidth.',
             },
+            ...(commonLogicalProps() as OverridesRowsProps[]),
           ],
         },
       ],

diff --git a/site/pages/components/drawer.tsx b/site/pages/components/drawer.tsx
@@ -9,6 +9,7 @@ import {
   styled,
 } from 'newskit';
 
+import {logicalPaddingOverrideProps} from '../../components/component-api/common-logical-props';
 import {UsageKind} from '../../components/usage-card';
 import {MetaStatus} from '../../components/meta/types';
 import {LayoutProps} from '../../components/layout';
@@ -560,6 +561,40 @@ const DrawerComponent = (layoutProps: LayoutProps) => (
               description:
                 'If provided, this overrides the zIndex of the Drawer panel.',
             },
+            ...logicalPaddingOverrideProps.map(({attribute, ...rest}) => ({
+              attribute: `panel.${attribute}`,
+              ...rest,
+            })),
+            {
+              attribute: 'panel.marginInline',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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: 'panel.marginInlineStart',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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: 'panel.marginInlineEnd',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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: 'panel.marginBlock',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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: 'panel.marginBlockStart',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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: 'panel.marginBlockEnd',
+              type: 'MQ<string>',
+              description: `This attribute only applies to inline drawer. 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.       `,
+            },
             {
               attribute: 'header.stylePreset',
               type: 'MQ<string>',

diff --git a/site/pages/components/fieldset.tsx b/site/pages/components/fieldset.tsx
@@ -6,6 +6,8 @@ import {LayoutProps} from '../../components/layout';
 import {ContentText} from '../../components/text-section/content-text';
 import {MetaStatus} from '../../components/meta/types';
 import {Link} from '../../components/link';
+import {commonLogicalProps} from '../../components/component-api/common-logical-props';
+import {OverridesRowsProps} from '../../components/component-api';
 
 const infoIcon = (
   <IconFilledInfo
@@ -223,13 +225,13 @@ const FieldsetComponent = (layoutProps: LayoutProps) => (
           ],
           overridesRows: [
             {
-              attribute: 'fieldset.spaceInset',
+              attribute: 'spaceInset',
               type: 'MQ<string>',
               description:
                 'If provided, this overrides the inset space (padding) applied to the Fieldset.',
             },
             {
-              attribute: 'fieldset.stylePreset',
+              attribute: 'stylePreset',
               type: 'MQ<string>',
               description:
                 'If provided, overrides the stylePreset of the Fieldset.',
@@ -259,6 +261,7 @@ const FieldsetComponent = (layoutProps: LayoutProps) => (
               description:
                 'If provided, this overrides the stack space (margin) applied to the Legend.',
             },
+            ...(commonLogicalProps() as OverridesRowsProps[]),
           ],
         },
       ],

diff --git a/site/pages/components/form.mdx b/site/pages/components/form.mdx
@@ -5,6 +5,7 @@ import {TextBoxSwatch} from '../../components/theming-values/colors';
 import {LegacyBlock} from '../../components/legacy-block';
 import {CodeFromFile} from '../../components/code';
 import {Form, TextInput, Block, Button, styled, EmailInput} from 'newskit';
+import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props';
 
 export default Layout;
 
@@ -82,6 +83,7 @@ The Form component also supports schema validation. To use an external validatio
     The resolver will validate your input data against the schema and return
     with either errors or a valid result.
   </Prop>
+  <CommonLogicalPropsMDX nested={false}/>
 </LegacyBlock>
 
 <Playground

diff --git a/site/pages/components/share-bar.tsx b/site/pages/components/share-bar.tsx
@@ -34,12 +34,12 @@ const ShareBarComponent = (layoutProps: LayoutProps) => (
     layoutProps={layoutProps}
     pageIntroduction={{
       type: 'Actions & Inputs',
-      name: 'Share Bar',
+      name: 'Share Bar (deprecated)',
       hero: {
         illustration: 'components/share-bar/share-bar-illustration',
       },
       introduction:
-        'The Share Bar component allows users to share hyperlinks of content across their various social media and communication channels. It is usually embedded within article pages in order to increase the reach of a story.',
+        'The Share Bar component allows users to share hyperlinks of content across their various social media and communication channels. It is usually embedded within article pages in order to increase the reach of a story. The Share Bar component is now deprecated and will be removed in the next major release.',
     }}
     componentDefaultsKey="shareBar"
     meta={{