feat(icons): keyboard and thumbs (#76195)

![Screenshot 2024-08-14 at 11 22
28 AM](https://github.com/user-attachments/assets/7382ba6b-049a-42e0-8668-c6b16f65c885)
![Screenshot 2024-08-14 at 11 22
40 AM](https://github.com/user-attachments/assets/8c81df5e-d3f3-4f22-8203-eb523cd0f09f)

Author: doralchan

static/app/icons/iconKeyboard.tsx

@@ -0,0 +1,21 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconKeyboard = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M15.28,13.49H.72c-.41,0-.75-.34-.75-.75V3.26c0-.41.34-.75.75-.75h14.56c.41,0,.75.34.75.75v9.49c0,.41-.34.75-.75.75ZM1.47,11.99h13.06v-7.99H1.47v7.99Z" />
+      <rect x="10.89" y="3.26" width="1.5" height="6.32" />
+      <rect x="3.61" y="3.26" width="1.5" height="6.32" />
+      <rect x="7.25" y="3.26" width="1.5" height="6.32" />
+      <rect x=".72" y="8.83" width="14.56" height="1.5" />
+      <rect x=".72" y="5.67" width="14.56" height="1.5" />
+    </SvgIcon>
+  );
+});
+
+IconKeyboard.displayName = 'IconKeyboard';
+
+export {IconKeyboard};

static/app/icons/iconThumb.tsx

@@ -0,0 +1,37 @@
+import {forwardRef} from 'react';
+import {css, useTheme} from '@emotion/react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  direction?: 'up' | 'right' | 'down' | 'left';
+}
+
+const IconThumb = forwardRef<SVGSVGElement, Props>(
+  ({direction = 'up', ...props}, ref) => {
+    const theme = useTheme();
+
+    return (
+      <SvgIcon
+        {...props}
+        ref={ref}
+        css={
+          direction
+            ? css`
+                transition: transform 120ms ease-in-out;
+                transform: rotate(${theme.iconDirections[direction]}deg);
+              `
+            : undefined
+        }
+      >
+        <path d="M12.57,16.01h-5.27c-.7,0-1.41-.09-2.09-.25l-1.91-.47H.74c-.41,0-.75-.34-.75-.75v-7.96c0-.41.34-.75.75-.75h3.15c.61,0,1.13-.44,1.23-1.04l.51-2.93c.1-.59.43-1.11.93-1.45.49-.34,1.09-.47,1.68-.37.59.1,1.11.43,1.45.92.34.49.48,1.09.37,1.68l-.51,2.89h4.19c1.24,0,2.25,1.01,2.25,2.25,0,.68-.31,1.29-.79,1.71.26.37.41.81.41,1.29,0,.8-.42,1.51-1.06,1.91.18.32.28.69.28,1.09,0,1.24-1.01,2.25-2.25,2.25ZM1.49,13.79h1.91c.06,0,.12,0,.18.02l1.99.49c.57.14,1.15.21,1.73.21h5.27c.41,0,.75-.33.75-.75s-.33-.75-.75-.75-.75-.34-.75-.75.34-.75.75-.75h.78c.41,0,.75-.33.75-.75s-.33-.75-.75-.75-.75-.34-.75-.75.34-.75.75-.75h.38c.41,0,.75-.33.75-.75s-.33-.75-.75-.75h-5.09c-.22,0-.43-.1-.58-.27s-.2-.39-.16-.61l.67-3.77c.03-.2,0-.39-.12-.56-.11-.16-.29-.27-.48-.31-.2-.03-.39,0-.56.12-.16.11-.27.29-.31.48l-.51,2.93c-.23,1.32-1.37,2.28-2.71,2.28H1.49v6.46Z" />
+        <path d="M3.4,15.29c-.41,0-.75-.34-.75-.75v-7.96c0-.41.34-.75.75-.75s.75.34.75.75v7.96c0,.41-.34.75-.75.75Z" />
+      </SvgIcon>
+    );
+  }
+);
+
+IconThumb.displayName = 'IconThumb';
+
+export {IconThumb};

static/app/icons/icons.stories.tsx

@@ -1029,6 +1029,28 @@ const SECTIONS: TSection[] = [
         name: 'Tap',
         defaultProps: {},
       },
+      {
+        id: 'keyboard',
+        keywords: ['keys', 'shortcut'],
+        name: 'Keyboard',
+        defaultProps: {},
+      },
+      {
+        id: 'thumb',
+        keywords: ['feedback', 'good'],
+        additionalProps: ['direction'],
+        name: 'Thumb',
+        defaultProps: {},
+      },
+      {
+        id: 'thumb',
+        keywords: ['feedback', 'bad', 'poor'],
+        additionalProps: ['direction'],
+        name: 'Thumb',
+        defaultProps: {
+          direction: ['down'],
+        },
+      },
     ],
   },
   {

static/app/icons/index.tsx

@@ -52,6 +52,7 @@ export {IconInput} from './iconInput';
 export {IconIssues} from './iconIssues';
 export {IconJira} from './iconJira';
 export {IconJson} from './iconJson';
+export {IconKeyboard} from './iconKeyboard';
 export {IconKeyDown} from './iconKeyDown';
 export {IconLab} from './iconLab';
 export {IconLaptop} from './iconLaptop';
@@ -109,6 +110,7 @@ export {IconTag} from './iconTag';
 export {IconTap} from './iconTap';
 export {IconTeamwork} from './iconTeamwork';
 export {IconTelescope} from './iconTelescope';
+export {IconThumb} from './iconThumb';
 export {IconTerminal} from './iconTerminal';
 export {IconTimer} from './iconTimer';
 export {IconToggle} from './iconToggle';