Icon: new docs (#1698)

* new

* fixes

cypress/integration/accessibility_Icon_spec.js

@@ -5,6 +5,15 @@ describe('Icon Accessibility check', () => {
   });
 
   it('Tests accessibility on the Icon page', () => {
+    cy.configureAxe({
+      rules: [
+        {
+          id: 'aria-command-name', // caused by: Tooltip wrapping TapArea on Icon with a11yLabel empty for redundancy with tooltip
+          enabled: false,
+        },
+      ],
+    });
+
     cy.checkA11y();
   });
 });

cypress/integration/accessibility_Iconography and SVGs_spec.js

@@ -0,0 +1,19 @@
+describe('Iconography and SVGs Accessibility check', () => {
+  beforeEach(() => {
+    cy.visit('/iconography_and_svgs');
+    cy.injectAxe();
+  });
+
+  it('Tests accessibility on the Iconography and SVGs page', () => {
+    cy.configureAxe({
+      rules: [
+        {
+          id: 'aria-command-name', // caused by: Tooltip wrapping TapArea on Icon with a11yLabel empty for redundancy with tooltip
+          enabled: false,
+        },
+      ],
+    });
+
+    cy.checkA11y();
+  });
+});

docs/components/sidebarIndex.js

@@ -27,7 +27,14 @@ const sidebarIndex: Array<sidebarIndexType> = [
   },
   {
     sectionName: 'Guidelines',
-    pages: ['Accessibility', 'Design Tokens', 'Color', 'Layouts', 'Screen Sizes'],
+    pages: [
+      'Accessibility',
+      'Design Tokens',
+      'Color',
+      'Iconography and SVGs',
+      'Layouts',
+      'Screen Sizes',
+    ],
   },
   {
     sectionName: 'Foundation',

docs/pages/faq.js

@@ -4,7 +4,6 @@ import { Box, Flex, Heading, Link, Text } from 'gestalt';
 import Markdown from '../components/Markdown.js';
 import Card from '../components/Card.js';
 import PageHeader from '../components/PageHeader.js';
-import MainSection from '../components/MainSection.js';
 import CardPage from '../components/CardPage.js';
 
 const cards: Array<Node> = [];
@@ -212,33 +211,6 @@ yarn cypress run
   </Card>,
 );
 
-card(
-  <MainSection name="Icons and SVGs">
-    <MainSection.Subsection
-      description={`
-If you need a new icon for an experiment that is not listed on our [Icon](/Icon) documentation, use the \`dangerouslySetSvgPath\` prop on [Icon](/Icon), [IconButton](/IconButton), and [Pog](/Pog). However, \`dangerouslySetSvgPath\` only works with one SVG path. For icons with multiple paths and groups, use [Box](/Box) and \`dangerouslySetInlineStyle\` to pass the custom icon as \`backgroundImage\`.
-
-Once your experiment ships to 100%, ask your designer to follow the directions in the [Icon kit](https://www.figma.com/file/N60WnDx9j6Moz3Dt1rNsq9/Icon-Kit). Once the asset is ready, we can add the Icon to Gestalt.
-
-We recommend streamlining (removing strokes, transforms, ...) and optimizing the SVGs to improve the performance and the pinner experience using the tools [svgo](https://github.com/svg/svgo) or [ImageOptim](https://imageoptim.com/mac)
-
-Gestalt Icon svg files follow a particular format and use automatic file validation testing.
-
-\`<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-<path d="_______________"/>
-</svg>\`
-
-We override the color in the Gestalt Icon component and Gestalt only uses the \`d\` attribute in the \`path\` tag and the basic attributes for visualizing the raw file in the \`svg\` tag . For consistency, we don't include unnecessary attributes in the \`svg\` and \`path\` tags.
-
-Accessibility notes:
-- Icons must meet the [Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requirement.
-- Avoid using unfamiliar icons. Always refer to Gestalt available icons. A new icon needs to be user tested to evaluate comprehension.
-- Some icons don’t translate well in all cultures, so it's preferred to user-test each Icon before it gets added to Gestalt.
-`}
-    />
-  </MainSection>,
-);
-
 card(
   <Card name="Automated Releases">
     <Flex alignItems="start" direction="column" gap={4}>