[FooterHelp] Add align property (Shopify#11764)

### WHY are these changes introduced?

This change will allow UX and devs the ability to chose an alignment for
the FooterHelp component. Some footer layouts are being created with
left-aligned text and they would like to see the footer help component
utilize the same alignment.

### WHAT is this pull request doing?

Adds an align property with the options `left | center | right` with the
default continuing to be `center`.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.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({
+        '--pc-footer-help-align': 'start',
+      }) as React.CSSProperties,
+    });
+  });
 });

polaris.shopify.com/content/components/navigation/footer-help.mdx

@@ -17,6 +17,9 @@ examples:
   - fileName: footer-help-default.tsx
     title: Default
     description: Use to direct merchants to more information related to the product or feature they’re working on.
+  - fileName: footer-help-align.tsx
+    title: Align
+    description: Control the horizontal alignment of component using the align prop.
 previewImg: /images/components/navigation/footer-help.png
 ---
 

polaris.shopify.com/pages/examples/footer-help-align.tsx

@@ -0,0 +1,30 @@
+import {BlockStack, FooterHelp, Link} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function FooterHelpAlignExample() {
+  return (
+    <BlockStack gap="1600">
+      <FooterHelp align="start">
+        Start{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+      <FooterHelp align="center">
+        Center{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+      <FooterHelp align="end">
+        End{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
+    </BlockStack>
+  );
+}
+
+export default withPolarisExample(FooterHelpAlignExample);