Add align property for FooterHelp

.changeset/forty-geese-float.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added align property for FooterHelp

polaris-react/src/components/FooterHelp/FooterHelp.module.css

@@ -1,6 +1,7 @@
 .FooterHelp {
   display: flex;
-  justify-content: center;
+  /* stylelint-disable-next-line -- Necessary for layout components */
+  justify-content: var(--pc-footer-help-align);
   margin: var(--p-space-500);
   width: auto;
 }

polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
 import {FooterHelp, Link} from '@shopify/polaris';
 
 export default {
   component: FooterHelp,
-} as ComponentMeta<typeof FooterHelp>;
+} as Meta<typeof FooterHelp>;
 
 export function Default() {
   return (
@@ -16,3 +16,25 @@ export function Default() {
     </FooterHelp>
   );
 }
+
+export function LeftAligned() {
+  return (
+    <FooterHelp align="start">
+      Learn more about{' '}
+      <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+        fulfilling orders
+      </Link>
+    </FooterHelp>
+  );
+}
+
+export function RightAligned() {
+  return (
+    <FooterHelp align="end">
+      Learn more about{' '}
+      <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+        fulfilling orders
+      </Link>
+    </FooterHelp>
+  );
+}

polaris-react/src/components/FooterHelp/FooterHelp.tsx

@@ -5,11 +5,17 @@ import styles from './FooterHelp.module.css';
 export interface FooterHelpProps {
   /** The content to display inside the layout. */
   children?: React.ReactNode;
+  /** Horizontal alignment of the component */
+  align?: 'start' | 'center' | 'end';
 }
 
-export function FooterHelp({children}: FooterHelpProps) {
+export function FooterHelp({children, align = 'center'}: FooterHelpProps) {
+  const style = {
+    '--pc-footer-help-align': align,
+  } as React.CSSProperties;
+
   return (
-    <div className={styles.FooterHelp}>
+    <div className={styles.FooterHelp} style={style}>
       <div className={styles.Text}>{children}</div>
     </div>
   );

polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx

@@ -12,4 +12,16 @@ describe('<FooterHelp />', () => {
       children,
     });
   });
+
+  it('overrides custom properties if they are passed in', () => {
+    const footerHelp = mountWithApp(
+      <FooterHelp align="start">{children}</FooterHelp>,
+    );
+
+    expect(footerHelp).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--p-footer-help-align': 'start',
+      }) as React.CSSProperties,
+    });
+  });
 });