From 906559c0dd18ef41d946cc11fa3be1134991a834 Mon Sep 17 00:00:00 2001
From: Matt Gregg <matt.gregg@shopify.com>
Date: Tue, 19 Mar 2024 22:39:24 -0500
Subject: [PATCH] Add align property for FooterHelp

---
 .changeset/forty-geese-float.md               |  5 ++++
 .../FooterHelp/FooterHelp.module.css          |  3 ++-
 .../FooterHelp/FooterHelp.stories.tsx         | 26 +++++++++++++++++--
 .../src/components/FooterHelp/FooterHelp.tsx  | 10 +++++--
 .../FooterHelp/tests/FooterHelp.test.tsx      | 12 +++++++++
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/forty-geese-float.md

diff --git a/.changeset/forty-geese-float.md b/.changeset/forty-geese-float.md
new file mode 100644
index 00000000000..1a2a7a155c0
--- /dev/null
+++ b/.changeset/forty-geese-float.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added align property for FooterHelp
diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.module.css b/polaris-react/src/components/FooterHelp/FooterHelp.module.css
index 49dca9b8721..d4a450dd4b8 100644
--- a/polaris-react/src/components/FooterHelp/FooterHelp.module.css
+++ b/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;
 }
diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx
index 4e3b89148b1..134fc6a7849 100644
--- a/polaris-react/src/components/FooterHelp/FooterHelp.stories.tsx
+++ b/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>
+  );
+}
diff --git a/polaris-react/src/components/FooterHelp/FooterHelp.tsx b/polaris-react/src/components/FooterHelp/FooterHelp.tsx
index 01fe6024082..333971bb854 100644
--- a/polaris-react/src/components/FooterHelp/FooterHelp.tsx
+++ b/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>
   );
diff --git a/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx b/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx
index 1a0c27f18ca..07b1d9347a0 100644
--- a/polaris-react/src/components/FooterHelp/tests/FooterHelp.test.tsx
+++ b/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,
+    });
+  });
 });