[ResourceList] Add external prop to ResourceList

UNRELEASED.md

@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- Add `external` prop to `ResourceList` [#2408](https://github.com/Shopify/polaris-react/pull/2408)
+
 ### Bug fixes
 
 - Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418])

src/components/ResourceItem/ResourceItem.tsx

@@ -48,6 +48,8 @@ export interface BaseProps {
   sortOrder?: number;
   /** URL for the resource’s details page (required unless onClick is provided) */
   url?: string;
+  /** Allows url to open in a new tab */
+  external?: boolean;
   /** Callback when clicked (required if url is omitted) */
   onClick?(id?: string): void;
   /** Content for the details area */
@@ -130,6 +132,7 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
     const {
       children,
       url,
+      external,
       media,
       shortcutActions,
       ariaControls,
@@ -280,6 +283,7 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
         aria-label={ariaLabel}
         className={styles.Link}
         url={url}
+        external={external}
         tabIndex={tabIndex}
         id={this.overlayId}
       />

src/components/ResourceItem/tests/ResourceItem.test.tsx

@@ -69,6 +69,7 @@ describe('<ResourceItem />', () => {
   };
 
   const url = 'http://test-link.com';
+  const external = false;
   const ariaLabel = 'View Item';
 
   describe('accessibilityLabel', () => {
@@ -215,6 +216,48 @@ describe('<ResourceItem />', () => {
     });
   });
 
+  describe('external', () => {
+    it('renders an <UnstyledLink /> with undefined external prop', () => {
+      const element = mountWithAppProvider(
+        <ResourceListContext.Provider value={mockDefaultContext}>
+          <ResourceItem id="itemId" url={url} />
+        </ResourceListContext.Provider>,
+      );
+
+      expect(element.find(UnstyledLink).prop('external')).toBeUndefined();
+    });
+
+    it('renders an <UnstyledLink /> with external set to true', () => {
+      const element = mountWithAppProvider(
+        <ResourceListContext.Provider value={mockDefaultContext}>
+          <ResourceItem
+            id="itemId"
+            url={url}
+            accessibilityLabel={ariaLabel}
+            external
+          />
+        </ResourceListContext.Provider>,
+      );
+
+      expect(element.find(UnstyledLink).prop('external')).toBe(true);
+    });
+
+    it('renders an <UnstyledLink /> with external set to false', () => {
+      const element = mountWithAppProvider(
+        <ResourceListContext.Provider value={mockDefaultContext}>
+          <ResourceItem
+            id="itemId"
+            url={url}
+            accessibilityLabel={ariaLabel}
+            external={external}
+          />
+        </ResourceListContext.Provider>,
+      );
+
+      expect(element.find(UnstyledLink).prop('external')).toBe(false);
+    });
+  });
+
   describe('id', () => {
     it('is used on the content node and for the description of a link', () => {
       const item = mountWithAppProvider(