Icon: Update Icons [GESTALT-8440]

docs/pages/foundations/iconography/ICON_DATA.json

@@ -815,6 +815,12 @@
       "description": "Indicates a GIF media",
       "keywords": ["media", "animated", "image"]
     },
+    {
+      "name": "gift",
+      "categories": ["Reactions and ratings"],
+      "description": "Indicates a gift feature or concept.",
+      "keywords": ["present", "celebrate", "birthday", "box"]
+    },
     {
       "name": "globe",
       "categories": ["Toggle"],
@@ -946,6 +952,12 @@
       "description": "Indicates a legal statement of ownership/authorship",
       "keywords": []
     },
+    {
+      "name": "indent",
+      "categories": ["Text"],
+      "description": "Indicates a text indent.",
+      "keywords": ["formatting"]
+    },
     {
       "name": "info-circle",
       "categories": ["Utility and tools"],
@@ -982,6 +994,12 @@
       "description": "Indicates the ability to see or take action on an invoice",
       "keywords": ["receipt", "billing", "payment"]
     },
+    {
+      "name": "kakao-talk",
+      "categories": ["Brand"],
+      "description": "Indicates Kakao Talk service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "key",
       "categories": ["Utility and tools"],
@@ -1012,6 +1030,12 @@
       "description": "Indicates service-amp is available",
       "keywords": ["flash", "service", "bolt", "lightening"]
     },
+    {
+      "name": "line-logo",
+      "categories": ["Brand"],
+      "description": "Indicates Line service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "link",
       "categories": ["Utility and tools"],
@@ -1030,6 +1054,18 @@
       "description": "Indicates the ability to try a lipstick color",
       "keywords": ["mouth", "lipstick"]
     },
+    {
+      "name": "list-numbered",
+      "categories": ["Text"],
+      "description": "Indicates the ability to add a numbered list in a left to right language.",
+      "keywords": ["numbers", "bullets"]
+    },
+    {
+      "name": "list-numbered-rtl",
+      "categories": ["Text"],
+      "description": "Indicates the ability to add a numbered list in a right to left language.",
+      "keywords": ["numbers", "bullets"]
+    },
     {
       "name": "live",
       "categories": ["Utility and tools"],
@@ -1162,6 +1198,12 @@
       "description": "Indicates the ability to mute the audio",
       "keywords": ["sound", "off", "audio", "volume"]
     },
+    {
+      "name": "outdent",
+      "categories": ["Text"],
+      "description": "Indicates a text outdent.",
+      "keywords": ["formatting"]
+    },
     {
       "name": "overlay-text",
       "categories": ["Text"],
@@ -1228,6 +1270,12 @@
       "description": "Indicates the ability to hide a pin",
       "keywords": []
     },
+    {
+      "name": "pincode",
+      "categories": ["Utility and tools"],
+      "description": "Indicates the ability to scan and open a Pincode.",
+      "keywords": ["scan", "code"]
+    },
     {
       "name": "pinterest",
       "categories": ["Social", "Utility and tools"],
@@ -1258,6 +1306,12 @@
       "description": "Indicates help is available",
       "keywords": ["help", "support"]
     },
+    {
+      "name": "reddit",
+      "categories": ["Brand"],
+      "description": "Indicates Reddit service or feature.",
+      "keywords": ["social", "media"]
+    },
     {
       "name": "refresh",
       "categories": ["Utility and tools"],
@@ -1427,6 +1481,12 @@
       "description": "Indicates the ability to select skintones",
       "keywords": []
     },
+    {
+      "name": "skype",
+      "categories": ["Brand"],
+      "description": "Indicates Skype service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "smiley",
       "categories": ["Reactions and ratings"],
@@ -1439,6 +1499,12 @@
       "description": "Indicates an unselected mild happy reaction",
       "keywords": ["happy"]
     },
+    {
+      "name": "snapchat",
+      "categories": ["Brand"],
+      "description": "Indicates SnapChat service or feature.",
+      "keywords": ["social", "media"]
+    },
     {
       "name": "sort-ascending",
       "categories": ["Arrows"],
@@ -1566,6 +1632,12 @@
         "focus"
       ]
     },
+    {
+      "name": "telegram",
+      "categories": ["Brand"],
+      "description": "Indicates Telegram service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "terms",
       "categories": ["Utility and tools"],
@@ -1680,6 +1752,12 @@
       "description": "Indicates the ability to upload a feed, usually for ad conversions",
       "keywords": ["conversions", "api"]
     },
+    {
+      "name": "viber",
+      "categories": ["Brand"],
+      "description": "Indicates Viber service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "video-advance-10-seconds",
       "categories": ["Media controls"],
@@ -1728,6 +1806,12 @@
       "description": "Indicates an external link or domain",
       "keywords": ["external", "link", "new window"]
     },
+    {
+      "name": "wechat",
+      "categories": ["Brand"],
+      "description": "Indicates WeChat service or feature.",
+      "keywords": ["message"]
+    },
     {
       "name": "whats-app",
       "categories": ["Social"],

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import { Box, Flex, Heading, Icon, Image, Mask, Table, Text } from 'gestalt';
 import { DOCS_COPY_MAX_WIDTH_PX } from '../../../../docs-components/consts';
 import MainSection from '../../../../docs-components/MainSection';
@@ -22,6 +23,9 @@ export default function FormsLayoutOverview() {
     'chevron-small-right',
     'directional-arrow-left',
     'directional-arrow-right',
+    'list-numbered',
+    'indent',
+    'outdent',
     'move-pin',
     'reorder-images',
     'send',
@@ -30,27 +34,35 @@ export default function FormsLayoutOverview() {
 
   const generateIconRow = (iconName: IconName) => {
     if (!iconName) return null;
+    const swapIcons = ['list-numbered'];
+
+    const shouldSwapIcon = swapIcons.includes(iconName);
+
     return (
       <Table.Row>
         <Table.Cell>
           <Text size="200">{iconName}</Text>
         </Table.Cell>
         <Table.Cell>
-          <Icon
-            accessibilityLabel={`${iconName.split('-').join(' ')}`}
-            color="default"
-            icon={iconName}
-          />
-        </Table.Cell>
-        <Table.Cell>
-          <div className="rotateIcon">
+          <div>
             <Icon
-              accessibilityLabel={`${iconName.split('-').join(' ')} mirrored`}
+              accessibilityLabel={`${iconName.split('-').join(' ')}`}
               color="default"
               icon={iconName}
             />
           </div>
         </Table.Cell>
+        <Table.Cell>
+          <Box display="flex" justifyContent="end" width="100%">
+            <div className={cx({ 'rotateIcon': !shouldSwapIcon })} style={{ width: 'fit-content' }}>
+              <Icon
+                accessibilityLabel={`${iconName.split('-').join(' ')} mirrored`}
+                color="default"
+                icon={(iconName + (shouldSwapIcon ? '-rtl' : '')) as IconName}
+              />
+            </div>
+          </Box>
+        </Table.Cell>
       </Table.Row>
     );
   };