getsentry · ryan953 · Oct 29, 2024
diff --git a/develop-docs/frontend/calls-to-action.mdx b/develop-docs/frontend/calls-to-action.mdx
@@ -0,0 +1,27 @@
+---
+title: Calls to Action
+sidebar_order: 41
+---
+
+Call to Action recommendations
+
+Here is some recomended iconography to use with call to actions.
+
+| Icon | CTA | Meaning |
+| --- | --- | --- |
+| <IconAdd isCircled /> | Create | Spawn something from nothing |
+| <IconAdd isCircled /> | Add  | Append another thing in the group |
+| <IconDelete /> | Delete | Destroy thing in the group |
+| <IconSubtract isCircled /> | Remove | Disconnect thing in the group |
+| - | Manage | Broader meaning, includes bulk order, add, remove, etc. |
+| <IconEdit /> | Edit | Modifies fundamental attribute of the thing |
+| <IconOpen /> | Open in [Product] | Leaves existing view and goes to another product |
+| <IconClose isCircled /> | Close | Potentially reopen this again later |
+| <IconDocs /> | Read Docs | Sim to Open in but always goes to Sentry Docs |
+| - | More [Samples] | See more samples of the same thing |
+| - | Show More | Accordions down to reveal more content |
+| <IconChevron direction="down" /> | Expand | Content is completely hidden except for title |
+| <IconChevron direction="up" /> | Collapse | Content is completely shown and need to hide except title |
+| - | Dismiss | Get rid of forever |
+| <IconClock /> | Remind Me Later | Pop something up again later |
+| <IconStar /> | Pin/Bookmark/Star | Favoriting/saving something |
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "test": "vitest",
     "test:ci": "vitest run",
     "enforce-redirects": "node ./scripts/no-vercel-json-redirects.mjs"
-  },
+  },    
   "prisma": {
     "seed": "node prisma/seed/seed.mjs"
   },

diff --git a/src/icons/iconAdd.tsx b/src/icons/iconAdd.tsx
@@ -0,0 +1,30 @@
+import {forwardRef, Fragment} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  isCircled?: boolean;
+}
+
+const IconAdd = forwardRef<SVGSVGElement, Props>(({isCircled = false, ...props}, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      {isCircled ? (
+        <Fragment>
+          <path d="M11.28,8.75H4.72a.75.75,0,1,1,0-1.5h6.56a.75.75,0,1,1,0,1.5Z" />
+          <path d="M8,12a.76.76,0,0,1-.75-.75V4.72a.75.75,0,0,1,1.5,0v6.56A.76.76,0,0,1,8,12Z" />
+          <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M8.75,7.25V2a.75.75,0,0,0-1.5,0V7.25H2a.75.75,0,0,0,0,1.5H7.25V14a.75.75,0,0,0,1.5,0V8.75H14a.75.75,0,0,0,0-1.5Z" />
+        </Fragment>
+      )}
+    </SvgIcon>
+  );
+});
+
+IconAdd.displayName = 'IconAdd';
+
+export {IconAdd};
diff --git a/src/icons/iconChevron.tsx b/src/icons/iconChevron.tsx
@@ -0,0 +1,48 @@
+import {forwardRef, Fragment} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  direction?: 'up' | 'right' | 'down' | 'left';
+  isCircled?: boolean;
+}
+
+const directions = {
+  up: '0',
+  right: '90',
+  down: '180',
+  left: '270',
+};
+
+const IconChevron = forwardRef<SVGSVGElement, Props>(
+  ({isCircled = false, direction = 'up', ...props}, ref) => {
+    return (
+      <SvgIcon
+        {...props}
+        ref={ref}
+        style={
+          direction
+            ? {
+                transition: 'transform 120ms ease-in-out',
+                transform: `rotate(${directions[direction]}deg)`,
+              }
+            : undefined
+        }
+      >
+        {isCircled ? (
+          <Fragment>
+            <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+            <path d="M11.12,9.87a.73.73,0,0,1-.53-.22L8,7.07,5.41,9.65a.74.74,0,0,1-1.06,0,.75.75,0,0,1,0-1.06L7.47,5.48a.74.74,0,0,1,1.06,0l3.12,3.11a.75.75,0,0,1,0,1.06A.74.74,0,0,1,11.12,9.87Z" />
+          </Fragment>
+        ) : (
+          <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" />
+        )}
+      </SvgIcon>
+    );
+  }
+);
+
+IconChevron.displayName = 'IconChevron';
+
+export {IconChevron};
diff --git a/src/icons/iconClock.tsx b/src/icons/iconClock.tsx
@@ -0,0 +1,17 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconClock = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.52A6.48,6.48,0,1,0,14.48,8,6.49,6.49,0,0,0,8,1.52Z" />
+      <path d="M11.62,8.75H8A.76.76,0,0,1,7.25,8V2.88a.75.75,0,1,1,1.5,0V7.25h2.87a.75.75,0,0,1,0,1.5Z" />
+    </SvgIcon>
+  );
+});
+
+IconClock.displayName = 'IconClock';
+
+export {IconClock};
diff --git a/src/icons/iconClose.tsx b/src/icons/iconClose.tsx
@@ -0,0 +1,31 @@
+import {forwardRef, Fragment} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  isCircled?: boolean;
+}
+
+const IconClose = forwardRef<SVGSVGElement, Props>(function IconClose(
+  {isCircled = false, ...props}: Props,
+  ref
+) {
+  return (
+    <SvgIcon ref={ref} {...props} data-test-id="icon-close">
+      {isCircled ? (
+        <Fragment>
+          <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+          <path d="M5.34,11.41a.71.71,0,0,1-.53-.22.74.74,0,0,1,0-1.06l5.32-5.32a.75.75,0,0,1,1.06,1.06L5.87,11.19A.74.74,0,0,1,5.34,11.41Z" />
+          <path d="M10.66,11.41a.74.74,0,0,1-.53-.22L4.81,5.87A.75.75,0,0,1,5.87,4.81l5.32,5.32a.74.74,0,0,1,0,1.06A.71.71,0,0,1,10.66,11.41Z" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path d="M6.94,8,1.47,13.47a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0L8,9.06l5.47,5.47a.75.75,0,0,0,1.06,0,.75.75,0,0,0,0-1.06L9.06,8l5.47-5.47a.75.75,0,0,0-1.06-1.06L8,6.94,2.53,1.47A.75.75,0,0,0,1.47,2.53Z" />
+        </Fragment>
+      )}
+    </SvgIcon>
+  );
+});
+
+export {IconClose};
diff --git a/src/icons/iconDelete.tsx b/src/icons/iconDelete.tsx
@@ -0,0 +1,19 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconDelete = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M14.71,3.94H1.29a.75.75,0,0,1,0-1.5H14.71a.75.75,0,0,1,0,1.5Z" />
+      <path d="M12.69,15.94H3.31a1.75,1.75,0,0,1-1.75-1.75v-11h1.5v11a.25.25,0,0,0,.25.25h9.38a.25.25,0,0,0,.25-.25v-11h1.5v11A1.75,1.75,0,0,1,12.69,15.94Z" />
+      <path d="M5,13a.74.74,0,0,1-.75-.75V6.14a.75.75,0,0,1,1.5,0v6.1A.75.75,0,0,1,5,13Z" />
+      <path d="M8,13a.75.75,0,0,1-.75-.75V6.14a.75.75,0,0,1,1.5,0v6.1A.75.75,0,0,1,8,13Z" />
+      <path d="M11.05,13a.75.75,0,0,1-.75-.75V6.14a.75.75,0,0,1,1.5,0v6.1A.74.74,0,0,1,11.05,13Z" />
+      <path d="M10.51,3.47l-.81-2H6.3l-.81,2L4.1,2.91,5,.77A1.26,1.26,0,0,1,6.13,0H9.87A1.26,1.26,0,0,1,11,.77l.87,2.14Z" />
+    </SvgIcon>
+  );
+});
+
+export {IconDelete};
diff --git a/src/icons/iconDocs.tsx b/src/icons/iconDocs.tsx
@@ -0,0 +1,21 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconDocs = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M8,15.27a.76.76,0,0,1-.75-.75V2.06a.75.75,0,0,1,1.5,0V14.52A.76.76,0,0,1,8,15.27Z" />
+      <path d="M5.74,5.38H2.93a.75.75,0,0,1,0-1.5H5.74a.75.75,0,0,1,0,1.5Z" />
+      <path d="M5.74,7.89H2.93a.75.75,0,0,1,0-1.5H5.74a.75.75,0,0,1,0,1.5Z" />
+      <path d="M13.07,5.38H10.26a.75.75,0,0,1,0-1.5h2.81a.75.75,0,0,1,0,1.5Z" />
+      <path d="M13.07,7.89H10.26a.75.75,0,0,1,0-1.5h2.81a.75.75,0,0,1,0,1.5Z" />
+      <path d="M15.25,14.62h-.07a76.54,76.54,0,0,0-14.36,0,.67.67,0,0,1-.57-.19A.73.73,0,0,1,0,13.87V2.06a.76.76,0,0,1,.75-.75h14.5a.76.76,0,0,1,.75.75V13.87a.73.73,0,0,1-.25.55A.7.7,0,0,1,15.25,14.62ZM8,12.77c2.23,0,4.41.09,6.5.27V2.81H1.5V13C3.59,12.86,5.77,12.77,8,12.77Z" />
+    </SvgIcon>
+  );
+});
+
+IconDocs.displayName = 'IconDocs';
+
+export {IconDocs};
diff --git a/src/icons/iconEdit.tsx b/src/icons/iconEdit.tsx
@@ -0,0 +1,30 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconEdit = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M1.36,15.91a1.34,1.34,0,0,1-.94-.38,1.32,1.32,0,0,1-.35-1.28L1.39,9a.94.94,0,0,1,.2-.35l8.06-8A1.71,1.71,0,0,1,12,.56l3.42,3.25A1.68,1.68,0,0,1,16,5a1.64,1.64,0,0,1-.48,1.2l-8.06,8a.79.79,0,0,1-.34.2L1.71,15.87A1.39,1.39,0,0,1,1.36,15.91Zm.16-1.3ZM2.8,9.53,1.59,14.35,6.51,13l7.91-7.89A.14.14,0,0,0,14.47,5a.17.17,0,0,0-.05-.12L11,1.64a.23.23,0,0,0-.3,0h0Zm7.38-8.41h0Z" />
+      <rect
+        x="9.56"
+        y="2.34"
+        width="1.5"
+        height="6.6"
+        transform="translate(-0.91 9.12) rotate(-45.91)"
+      />
+      <rect
+        x="3.76"
+        y="8.12"
+        width="1.5"
+        height="6.6"
+        transform="translate(-6.87 6.8) rotate(-46.34)"
+      />
+    </SvgIcon>
+  );
+});
+
+IconEdit.displayName = 'IconEdit';
+
+export {IconEdit};
diff --git a/src/icons/iconOpen.tsx b/src/icons/iconOpen.tsx
@@ -0,0 +1,18 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+const IconOpen = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <path d="M13.25,16H2.75A2.75,2.75,0,0,1,0,13.25V2.75A2.75,2.75,0,0,1,2.75,0h10.5A2.75,2.75,0,0,1,16,2.75v10.5A2.75,2.75,0,0,1,13.25,16ZM2.75,1.5A1.25,1.25,0,0,0,1.5,2.75v10.5A1.25,1.25,0,0,0,2.75,14.5h10.5a1.25,1.25,0,0,0,1.25-1.25V2.75A1.25,1.25,0,0,0,13.25,1.5Z" />
+      <path d="M11.13,10.63a.74.74,0,0,1-.75-.75V5.62H6.12a.75.75,0,0,1,0-1.5h5a.76.76,0,0,1,.75.75v5A.75.75,0,0,1,11.13,10.63Z" />
+      <path d="M4.87,11.88a.79.79,0,0,1-.53-.22.75.75,0,0,1,0-1.06L10.6,4.34A.75.75,0,0,1,11.66,5.4L5.4,11.66A.77.77,0,0,1,4.87,11.88Z" />
+    </SvgIcon>
+  );
+});
+
+IconOpen.displayName = 'IconOpen';
+
+export {IconOpen};
diff --git a/src/icons/iconStar.tsx b/src/icons/iconStar.tsx
@@ -0,0 +1,24 @@
+import {forwardRef} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  isSolid?: boolean;
+}
+
+const IconStar = forwardRef<SVGSVGElement, Props>(({isSolid = false, ...props}, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      {isSolid ? (
+        <path d="M12.47,15.63a.73.73,0,0,1-.35-.09L8,13.38,3.88,15.54a.75.75,0,0,1-.79,0,.76.76,0,0,1-.3-.74l.79-4.59L.24,6.91A.75.75,0,0,1,.66,5.63L5.27,5,7.33.79a.78.78,0,0,1,1.34,0L10.73,5l4.61.67a.75.75,0,0,1,.42,1.28l-3.34,3.25.79,4.59a.76.76,0,0,1-.3.74A.79.79,0,0,1,12.47,15.63Z" />
+      ) : (
+        <path d="M12.47,15.63a.73.73,0,0,1-.35-.09L8,13.38,3.88,15.54a.75.75,0,0,1-.79,0,.76.76,0,0,1-.3-.74l.79-4.59L.24,6.91A.75.75,0,0,1,.66,5.63L5.27,5,7.33.79a.78.78,0,0,1,1.34,0L10.73,5l4.61.67a.75.75,0,0,1,.42,1.28l-3.34,3.25.79,4.59a.76.76,0,0,1-.3.74A.79.79,0,0,1,12.47,15.63ZM8,11.78a.85.85,0,0,1,.35.08l3.12,1.65L10.88,10a.78.78,0,0,1,.21-.67L13.62,6.9l-3.49-.51A.74.74,0,0,1,9.56,6L8,2.82,6.44,6a.74.74,0,0,1-.57.41L2.38,6.9,4.91,9.36a.78.78,0,0,1,.21.67l-.59,3.48,3.12-1.65A.85.85,0,0,1,8,11.78Z" />
+      )}
+    </SvgIcon>
+  );
+});
+
+IconStar.displayName = 'IconStar';
+
+export {IconStar};
diff --git a/src/icons/iconSubtract.tsx b/src/icons/iconSubtract.tsx
@@ -0,0 +1,29 @@
+import {forwardRef, Fragment} from 'react';
+
+import type {SVGIconProps} from './svgIcon';
+import {SvgIcon} from './svgIcon';
+
+interface Props extends SVGIconProps {
+  isCircled?: boolean;
+}
+
+const IconSubtract = forwardRef<SVGSVGElement, Props>(
+  ({isCircled = false, ...props}, ref) => {
+    return (
+      <SvgIcon {...props} data-test-id="icon-subtract" ref={ref}>
+        {isCircled ? (
+          <Fragment>
+            <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
+            <path d="M11.28,8.75H4.72a.75.75,0,1,1,0-1.5h6.56a.75.75,0,1,1,0,1.5Z" />
+          </Fragment>
+        ) : (
+          <path d="M14,8.75H2a.75.75,0,0,1,0-1.5H14a.75.75,0,0,1,0,1.5Z" />
+        )}
+      </SvgIcon>
+    );
+  }
+);
+
+IconSubtract.displayName = 'IconSubtract';
+
+export {IconSubtract};
diff --git a/src/icons/svgIcon.tsx b/src/icons/svgIcon.tsx
@@ -0,0 +1,38 @@
+import type {SVGAttributes} from 'react';
+import {forwardRef} from 'react';
+
+const iconSizes = {
+  xs: 16,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+  xxl: 32,
+} as const;
+
+export interface SVGIconProps extends SVGAttributes<SVGSVGElement> {
+  className?: string;
+  color?: string | 'currentColor';
+  size?: keyof typeof iconSizes;
+}
+
+export const SvgIcon = forwardRef<SVGSVGElement, SVGIconProps>(function SVGIcon(
+  props: SVGIconProps,
+  ref
+) {
+  const color = props.color ?? 'currentColor';
+  const providedSize = props.size ?? 'sm';
+  const size = iconSizes[providedSize];
+  const viewBox = `0 0 ${size} ${size}`;
+
+  return (
+    <svg
+      {...props}
+      viewBox={viewBox}
+      fill={color}
+      height={`${size}px`}
+      width={`${size}px`}
+      ref={ref}
+    />
+  );
+});