Skip to content

Commit da2fe85

Browse files
ryan953ryan953
committed
docs(CTA): Start a docs page about CTAs in the frontend, focus on icons
1 parent e9b0074 commit da2fe85

File tree

14 files changed

+358
-6
lines changed

14 files changed

+358
-6
lines changed

‎develop-docs/frontend/calls-to-action.mdx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Calls to Action
3+
sidebar_order: 41
4+
---
5+
6+
Call to Action recommendations
7+
8+
Here is some recomended iconography to use with call to actions.
9+
10+
| Icon | CTA | Meaning |
11+
| --- | --- | --- |
12+
| <IconAdd isCircled /> | Create | Spawn something from nothing |
13+
| <IconAdd isCircled /> | Add | Append another thing in the group |
14+
| <IconDelete /> | Delete | Destroy thing in the group |
15+
| <IconSubtract isCircled /> | Remove | Disconnect thing in the group |
16+
| - | Manage | Broader meaning, includes bulk order, add, remove, etc. |
17+
| <IconEdit /> | Edit | Modifies fundamental attribute of the thing |
18+
| <IconOpen /> | Open in [Product] | Leaves existing view and goes to another product |
19+
| <IconClose isCircled /> | Close | Potentially reopen this again later |
20+
| <IconDocs /> | Read Docs | Sim to Open in but always goes to Sentry Docs |
21+
| - | More [Samples] | See more samples of the same thing |
22+
| - | Show More | Accordions down to reveal more content |
23+
| <IconChevron direction="down" /> | Expand | Content is completely hidden except for title |
24+
| <IconChevron direction="up" /> | Collapse | Content is completely shown and need to hide except title |
25+
| - | Dismiss | Get rid of forever |
26+
| <IconClock /> | Remind Me Later | Pop something up again later |
27+
| <IconStar /> | Pin/Bookmark/Star | Favoriting/saving something |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"test": "vitest",
3535
"test:ci": "vitest run",
3636
"enforce-redirects": "node ./scripts/no-vercel-json-redirects.mjs"
37-
},
37+
},
3838
"prisma": {
3939
"seed": "node prisma/seed/seed.mjs"
4040
},

‎src/icons/iconAdd.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {forwardRef, Fragment} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
interface Props extends SVGIconProps {
7+
isCircled?: boolean;
8+
}
9+
10+
const IconAdd = forwardRef<SVGSVGElement, Props>(({isCircled = false, ...props}, ref) => {
11+
return (
12+
<SvgIcon {...props} ref={ref}>
13+
{isCircled ? (
14+
<Fragment>
15+
<path d="M11.28,8.75H4.72a.75.75,0,1,1,0-1.5h6.56a.75.75,0,1,1,0,1.5Z" />
16+
<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" />
17+
<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" />
18+
</Fragment>
19+
) : (
20+
<Fragment>
21+
<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" />
22+
</Fragment>
23+
)}
24+
</SvgIcon>
25+
);
26+
});
27+
28+
IconAdd.displayName = 'IconAdd';
29+
30+
export {IconAdd};

‎src/icons/iconChevron.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import {forwardRef, Fragment} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
interface Props extends SVGIconProps {
7+
direction?: 'up' | 'right' | 'down' | 'left';
8+
isCircled?: boolean;
9+
}
10+
11+
const directions = {
12+
up: '0',
13+
right: '90',
14+
down: '180',
15+
left: '270',
16+
};
17+
18+
const IconChevron = forwardRef<SVGSVGElement, Props>(
19+
({isCircled = false, direction = 'up', ...props}, ref) => {
20+
return (
21+
<SvgIcon
22+
{...props}
23+
ref={ref}
24+
style={
25+
direction
26+
? {
27+
transition: 'transform 120ms ease-in-out',
28+
transform: `rotate(${directions[direction]}deg)`,
29+
}
30+
: undefined
31+
}
32+
>
33+
{isCircled ? (
34+
<Fragment>
35+
<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" />
36+
<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" />
37+
</Fragment>
38+
) : (
39+
<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" />
40+
)}
41+
</SvgIcon>
42+
);
43+
}
44+
);
45+
46+
IconChevron.displayName = 'IconChevron';
47+
48+
export {IconChevron};

‎src/icons/iconClock.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {forwardRef} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
const IconClock = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
7+
return (
8+
<SvgIcon {...props} ref={ref}>
9+
<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" />
10+
<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" />
11+
</SvgIcon>
12+
);
13+
});
14+
15+
IconClock.displayName = 'IconClock';
16+
17+
export {IconClock};

‎src/icons/iconClose.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {forwardRef, Fragment} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
interface Props extends SVGIconProps {
7+
isCircled?: boolean;
8+
}
9+
10+
const IconClose = forwardRef<SVGSVGElement, Props>(function IconClose(
11+
{isCircled = false, ...props}: Props,
12+
ref
13+
) {
14+
return (
15+
<SvgIcon ref={ref} {...props} data-test-id="icon-close">
16+
{isCircled ? (
17+
<Fragment>
18+
<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" />
19+
<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" />
20+
<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" />
21+
</Fragment>
22+
) : (
23+
<Fragment>
24+
<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" />
25+
</Fragment>
26+
)}
27+
</SvgIcon>
28+
);
29+
});
30+
31+
export {IconClose};

‎src/icons/iconDelete.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {forwardRef} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
const IconDelete = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
7+
return (
8+
<SvgIcon {...props} ref={ref}>
9+
<path d="M14.71,3.94H1.29a.75.75,0,0,1,0-1.5H14.71a.75.75,0,0,1,0,1.5Z" />
10+
<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" />
11+
<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" />
12+
<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" />
13+
<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" />
14+
<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" />
15+
</SvgIcon>
16+
);
17+
});
18+
19+
export {IconDelete};

‎src/icons/iconDocs.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {forwardRef} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
const IconDocs = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
7+
return (
8+
<SvgIcon {...props} ref={ref}>
9+
<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" />
10+
<path d="M5.74,5.38H2.93a.75.75,0,0,1,0-1.5H5.74a.75.75,0,0,1,0,1.5Z" />
11+
<path d="M5.74,7.89H2.93a.75.75,0,0,1,0-1.5H5.74a.75.75,0,0,1,0,1.5Z" />
12+
<path d="M13.07,5.38H10.26a.75.75,0,0,1,0-1.5h2.81a.75.75,0,0,1,0,1.5Z" />
13+
<path d="M13.07,7.89H10.26a.75.75,0,0,1,0-1.5h2.81a.75.75,0,0,1,0,1.5Z" />
14+
<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" />
15+
</SvgIcon>
16+
);
17+
});
18+
19+
IconDocs.displayName = 'IconDocs';
20+
21+
export {IconDocs};

‎src/icons/iconEdit.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {forwardRef} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
const IconEdit = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
7+
return (
8+
<SvgIcon {...props} ref={ref}>
9+
<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" />
10+
<rect
11+
x="9.56"
12+
y="2.34"
13+
width="1.5"
14+
height="6.6"
15+
transform="translate(-0.91 9.12) rotate(-45.91)"
16+
/>
17+
<rect
18+
x="3.76"
19+
y="8.12"
20+
width="1.5"
21+
height="6.6"
22+
transform="translate(-6.87 6.8) rotate(-46.34)"
23+
/>
24+
</SvgIcon>
25+
);
26+
});
27+
28+
IconEdit.displayName = 'IconEdit';
29+
30+
export {IconEdit};

‎src/icons/iconOpen.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {forwardRef} from 'react';
2+
3+
import type {SVGIconProps} from './svgIcon';
4+
import {SvgIcon} from './svgIcon';
5+
6+
const IconOpen = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
7+
return (
8+
<SvgIcon {...props} ref={ref}>
9+
<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" />
10+
<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" />
11+
<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" />
12+
</SvgIcon>
13+
);
14+
});
15+
16+
IconOpen.displayName = 'IconOpen';
17+
18+
export {IconOpen};

0 commit comments

Comments
 (0)