diff --git a/develop-docs/frontend/calls-to-action.mdx b/develop-docs/frontend/calls-to-action.mdx new file mode 100644 index 0000000000000..a2fa35d8a8980 --- /dev/null +++ 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 | +| --- | --- | --- | +| | Create | Spawn something from nothing | +| | Add | Append another thing in the group | +| | Delete | Destroy thing in the group | +| | Remove | Disconnect thing in the group | +| - | Manage | Broader meaning, includes bulk order, add, remove, etc. | +| | Edit | Modifies fundamental attribute of the thing | +| | Open in [Product] | Leaves existing view and goes to another product | +| | Close | Potentially reopen this again later | +| | 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 | +| | Expand | Content is completely hidden except for title | +| | Collapse | Content is completely shown and need to hide except title | +| - | Dismiss | Get rid of forever | +| | Remind Me Later | Pop something up again later | +| | Pin/Bookmark/Star | Favoriting/saving something | diff --git a/package.json b/package.json index 38ea1b5d6cebc..20d06eaa20009 100644 --- 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 new file mode 100644 index 0000000000000..ddeaaf866a944 --- /dev/null +++ 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(({isCircled = false, ...props}, ref) => { + return ( + + {isCircled ? ( + + + + + + ) : ( + + + + )} + + ); +}); + +IconAdd.displayName = 'IconAdd'; + +export {IconAdd}; diff --git a/src/icons/iconChevron.tsx b/src/icons/iconChevron.tsx new file mode 100644 index 0000000000000..e25fa94c379bc --- /dev/null +++ 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( + ({isCircled = false, direction = 'up', ...props}, ref) => { + return ( + + {isCircled ? ( + + + + + ) : ( + + )} + + ); + } +); + +IconChevron.displayName = 'IconChevron'; + +export {IconChevron}; diff --git a/src/icons/iconClock.tsx b/src/icons/iconClock.tsx new file mode 100644 index 0000000000000..ae7855d72a456 --- /dev/null +++ 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((props, ref) => { + return ( + + + + + ); +}); + +IconClock.displayName = 'IconClock'; + +export {IconClock}; diff --git a/src/icons/iconClose.tsx b/src/icons/iconClose.tsx new file mode 100644 index 0000000000000..c0b4102f95af4 --- /dev/null +++ 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(function IconClose( + {isCircled = false, ...props}: Props, + ref +) { + return ( + + {isCircled ? ( + + + + + + ) : ( + + + + )} + + ); +}); + +export {IconClose}; diff --git a/src/icons/iconDelete.tsx b/src/icons/iconDelete.tsx new file mode 100644 index 0000000000000..9908d00d38cdd --- /dev/null +++ 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((props, ref) => { + return ( + + + + + + + + + ); +}); + +export {IconDelete}; diff --git a/src/icons/iconDocs.tsx b/src/icons/iconDocs.tsx new file mode 100644 index 0000000000000..6469ca3a6051c --- /dev/null +++ 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((props, ref) => { + return ( + + + + + + + + + ); +}); + +IconDocs.displayName = 'IconDocs'; + +export {IconDocs}; diff --git a/src/icons/iconEdit.tsx b/src/icons/iconEdit.tsx new file mode 100644 index 0000000000000..191edaf03d2db --- /dev/null +++ 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((props, ref) => { + return ( + + + + + + ); +}); + +IconEdit.displayName = 'IconEdit'; + +export {IconEdit}; diff --git a/src/icons/iconOpen.tsx b/src/icons/iconOpen.tsx new file mode 100644 index 0000000000000..04d937054792d --- /dev/null +++ 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((props, ref) => { + return ( + + + + + + ); +}); + +IconOpen.displayName = 'IconOpen'; + +export {IconOpen}; diff --git a/src/icons/iconStar.tsx b/src/icons/iconStar.tsx new file mode 100644 index 0000000000000..a8383f58869d5 --- /dev/null +++ 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(({isSolid = false, ...props}, ref) => { + return ( + + {isSolid ? ( + + ) : ( + + )} + + ); +}); + +IconStar.displayName = 'IconStar'; + +export {IconStar}; diff --git a/src/icons/iconSubtract.tsx b/src/icons/iconSubtract.tsx new file mode 100644 index 0000000000000..46a89f2a64ab4 --- /dev/null +++ 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( + ({isCircled = false, ...props}, ref) => { + return ( + + {isCircled ? ( + + + + + ) : ( + + )} + + ); + } +); + +IconSubtract.displayName = 'IconSubtract'; + +export {IconSubtract}; diff --git a/src/icons/svgIcon.tsx b/src/icons/svgIcon.tsx new file mode 100644 index 0000000000000..4aabf679e9843 --- /dev/null +++ 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 { + className?: string; + color?: string | 'currentColor'; + size?: keyof typeof iconSizes; +} + +export const SvgIcon = forwardRef(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 ( + + ); +}); diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts index 3f2fb60589df7..6d627b6c5bb31 100644 --- a/src/mdxComponents.ts +++ b/src/mdxComponents.ts @@ -31,6 +31,16 @@ import {SandboxLink} from './components/sandboxLink'; import {SignInNote} from './components/signInNote'; import {SmartLink} from './components/smartLink'; import {VimeoEmbed} from './components/video'; +import {IconAdd} from './icons/iconAdd'; +import {IconChevron} from './icons/iconChevron'; +import {IconClock} from './icons/iconClock'; +import {IconClose} from './icons/iconClose'; +import {IconDelete} from './icons/iconDelete'; +import {IconDocs} from './icons/iconDocs'; +import {IconEdit} from './icons/iconEdit'; +import {IconOpen} from './icons/iconOpen'; +import {IconStar} from './icons/iconStar'; +import {IconSubtract} from './icons/iconSubtract'; export function mdxComponents( dynamicComponents: any = {}, @@ -43,30 +53,40 @@ export function mdxComponents( CodeBlock, CodeTabs, ConfigKey, - CreateGitHubAppForm, ConfigValue, + CreateGitHubAppForm, DefinitionList, Expandable, GuideGrid, + IconAdd, + IconChevron, + IconClock, + IconClose, + IconDelete, + IconDocs, + IconEdit, + IconOpen, + IconStar, + IconSubtract, JsBundleList, LambdaLayerDetail, Link: SmartLink, LinkWithPlatformIcon, Note, + OnboardingOption, + OnboardingOptionButtons, OrgAuthTokenNote, PageGrid, ParamTable, PiiFields, + PlatformCategorySection, PlatformGrid, PlatformIdentifier, PlatformLink, PlatformLinkWithLogo, - PlatformSection, - PlatformCategorySection, PlatformOrGuideName, PlatformSdkPackageName, - OnboardingOption, - OnboardingOptionButtons, + PlatformSection, RelayMetrics, SandboxLink, SignInNote,