Remove icons in FooterHelp

UNRELEASED.md

@@ -7,11 +7,11 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 ### Enhancements
 
 - [ColorPicker] Add an inset box-shadow to make it easier to see the draggers ([#4948](https://github.com/Shopify/polaris-react/pull/4948))
-
 - Tightened up the Navigation component UI density. ([#4874](https://github.com/Shopify/polaris-react/pull/4874))
 - Updated the Navigation IA ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
 - Added new `duplicateRootItem` prop to a Navigation Section to support new mobile Navigation IA ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
 - Updated mobile behaviour of Navigation to only show one sub-section at a time ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
+- Remove the info icon and external link guidance from FooterHelp ([#4982](https://github.com/Shopify/polaris-react/pull/4982))
 
 ### Bug fixes
 

src/components/FooterHelp/FooterHelp.scss

@@ -7,30 +7,15 @@ $border-radius: 999px;
   display: flex;
   justify-content: center;
   margin: spacing(loose) 0;
-  width: 100%;
-
-  @include page-content-when-not-fully-condensed {
-    margin: spacing(loose);
-    width: auto;
-  }
-}
-
-.Content {
-  display: inline-flex;
-  align-items: center;
   padding: spacing(loose) spacing(loose) spacing(loose) spacing();
   width: 100%;
-  justify-content: center;
 
   @include page-content-when-not-fully-condensed {
+    margin: spacing(loose);
     width: auto;
   }
 }
 
-.Icon {
-  margin-right: spacing(tight);
-}
-
 .Text {
   @include text-style-input;
 }

src/components/FooterHelp/FooterHelp.tsx

@@ -1,8 +1,4 @@
 import React from 'react';
-import {InfoMinor} from '@shopify/polaris-icons';
-
-import {classNames} from '../../utilities/css';
-import {Icon, IconProps} from '../Icon';
 
 import styles from './FooterHelp.scss';
 
@@ -12,21 +8,9 @@ export interface FooterHelpProps {
 }
 
 export function FooterHelp({children}: FooterHelpProps) {
-  const className = classNames(styles.FooterHelp);
-
-  const iconProps: IconProps = {
-    source: InfoMinor,
-    color: 'highlight',
-  };
-
   return (
-    <div className={className}>
-      <div className={styles.Content}>
-        <div className={styles.Icon}>
-          <Icon {...iconProps} />
-        </div>
-        <div className={styles.Text}>{children}</div>
-      </div>
+    <div className={styles.FooterHelp}>
+      <div className={styles.Text}>{children}</div>
     </div>
   );
 }

src/components/FooterHelp/README.md

@@ -81,7 +81,7 @@ Use to direct merchants to more information related to the product or feature th
 ```jsx
 <FooterHelp>
   Learn more about{' '}
-  <Link external url="https://help.shopify.com/manual/orders/fulfill-orders">
+  <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
     fulfilling orders
   </Link>
 </FooterHelp>

src/components/FooterHelp/tests/FooterHelp.test.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import {InfoMinor} from '@shopify/polaris-icons';
 import {mountWithApp} from 'tests/utilities';
 
-import {Icon} from '../../Icon';
 import {FooterHelp} from '../FooterHelp';
 
 describe('<FooterHelp />', () => {
@@ -14,11 +12,4 @@ describe('<FooterHelp />', () => {
       children,
     });
   });
-
-  it('renders the help icon', () => {
-    const footerHelp = mountWithApp(<FooterHelp>{children}</FooterHelp>);
-    expect(footerHelp).toContainReactComponent(Icon, {
-      source: InfoMinor,
-    });
-  });
 });