Icon: Set up JSON for RTL icon list

Problem:

We define a list of icons in `RTLIconList.tsx` that we automatically
flip for right-to-left content. This works for web, but we need to make
this list available for iOS and Android.

Solution:

- Move the list of icons to a JSON file, and import it into
  `RTLIconList.tsx`. Test manually via the docs site.
- Update `/foundations/international_design/rtl_guidelines/iconography`
  to use this same icon list.

Jira: GESTALT-8856

docs/pages/foundations/international_design/rtl_guidelines/iconography.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { Box, Flex, Heading, Icon, Image, Mask, Table, Text } from 'gestalt';
+import rtlIconListJson from 'gestalt-design-tokens/src/utils/rtlIconList.json';
 import { DOCS_COPY_MAX_WIDTH_PX } from '../../../../docs-components/consts';
 import MainSection from '../../../../docs-components/MainSection';
 import Markdown from '../../../../docs-components/Markdown';
@@ -9,32 +10,18 @@ import PageHeader from '../../../../docs-components/PageHeader';
 
 type IconName = React.ComponentProps<typeof Icon>['icon'];
 export default function FormsLayoutOverview() {
-  const RTLIcons: IconName[] = [
-    'arrow-back',
-    'arrow-forward',
-    'arrow-circle-back',
-    'arrow-circle-forward',
-    'arrow-start',
-    'arrow-end',
-    'arrow-left-curved',
-    'chevron-down-circle',
-    'chevron-left-circle',
-    'directional-arrow-left',
-    'directional-arrow-right',
-    'list-numbered',
-    'indent',
-    'outdent',
-    'move-pin',
-    'reorder-images',
-    'send',
-    'visit',
-  ];
+  const flipOnRtlIconNames = rtlIconListJson.flipOnRtlIconNames as ReadonlyArray<
+    IconName | undefined
+  >;
+  const swapOnRtlIconNames = rtlIconListJson.swapOnRtlIconNames as ReadonlyArray<
+    IconName | undefined
+  >;
+  const rtlIcons = [...flipOnRtlIconNames, ...swapOnRtlIconNames].sort();
 
   const generateIconRow = (iconName: IconName) => {
     if (!iconName) return null;
-    const swapIcons = ['list-numbered'];
 
-    const shouldSwapIcon = swapIcons.includes(iconName);
+    const shouldSwapIcon = swapOnRtlIconNames.includes(iconName);
 
     return (
       <Table.Row>
@@ -125,7 +112,7 @@ Back and forward buttons and arrows are mirrored:
                   ))}
                 </Table.Row>
               </Table.Header>
-              <Table.Body>{RTLIcons.map((iconName) => generateIconRow(iconName))}</Table.Body>
+              <Table.Body>{rtlIcons.map((iconName) => generateIconRow(iconName))}</Table.Body>
             </Table>
           </Box>
         </Box>

packages/gestalt-design-tokens/src/utils/rtlIconList.json

@@ -0,0 +1,32 @@
+{
+  "flipOnRtlIconNames": [
+    "ads-overview",
+    "ads-stats",
+    "arrow-back",
+    "arrow-circle-forward",
+    "arrow-end",
+    "arrow-forward",
+    "arrow-start",
+    "arrow-up-right",
+    "chevron-left-circle",
+    "chevron-right-circle",
+    "compose",
+    "directional-arrow-left",
+    "directional-arrow-right",
+    "flip-vertical",
+    "hand-pointing",
+    "link",
+    "mute",
+    "redo",
+    "reorder-images",
+    "send",
+    "sound",
+    "speech-ellipsis",
+    "speech",
+    "switch-account",
+    "text-size",
+    "undo",
+    "visit"
+  ],
+  "swapOnRtlIconNames": ["list-numbered"]
+}

packages/gestalt/src/Icon/RTLIconList.tsx

@@ -1,38 +1,14 @@
+import rtlIconListJson from 'gestalt-design-tokens/src/utils/rtlIconList.json';
 import icons from '../icons/index';
 import compactIconsVR from '../icons-vr-theme/compact/index';
 
 type IconName = keyof typeof icons | keyof typeof compactIconsVR;
 
-const swapOnRtlIconNames: ReadonlyArray<IconName> = Object.freeze(['list-numbered']);
-
-const flipOnRtlIconNames: ReadonlyArray<IconName | undefined> = Object.freeze([
-  'ads-stats',
-  'ads-overview',
-  'arrow-back',
-  'arrow-circle-forward',
-  'arrow-end',
-  'arrow-forward',
-  'arrow-start',
-  'arrow-up-right',
-  'compose',
-  'chevron-left-circle',
-  'chevron-right-circle',
-  'directional-arrow-left',
-  'directional-arrow-right',
-  'flip-vertical',
-  'hand-pointing',
-  'link',
-  'mute',
-  'reorder-images',
-  'send',
-  'sound',
-  'speech',
-  'speech-ellipsis',
-  'switch-account',
-  'text-size',
-  'redo',
-  'undo',
-  'visit',
-]);
+const swapOnRtlIconNames = Object.freeze(rtlIconListJson.swapOnRtlIconNames) as ReadonlyArray<
+  IconName | undefined
+>;
+const flipOnRtlIconNames = Object.freeze(rtlIconListJson.flipOnRtlIconNames) as ReadonlyArray<
+  IconName | undefined
+>;
 
 export { flipOnRtlIconNames, swapOnRtlIconNames };