diff --git a/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx b/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx index 700ea5a44b..563488a4b0 100644 --- a/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx @@ -11,6 +11,8 @@ import packageJson from '@twilio-paste/code-editor-library/package.json'; import {SidebarCategoryRoutes} from '../../../../constants'; import {getNavigationData} from '../../../../utils/api'; import DefaultLayout from '../../../../layouts/DefaultLayout'; +import {Anchor} from '@twilio-paste/anchor'; +import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; export default DefaultLayout; @@ -43,14 +45,19 @@ export const getStaticProps = async () => { ## About -The Code Editor allows for a full code-editing experiences on the web, including syntax highlighting and displaying line numbers. +The Code Editor library is the code editor that powers the stylized [Editable Code Block](/components/editable-code-block) component. It allows for full code-editing functionality on the web, including syntax highlighting and displaying line numbers. This library is built on top of [monaco-react](https://github.com/suren-atoyan/monaco-react), which wraps the -[Monaco Editor](https://github.com/microsoft/monaco-editor). - -Our library exposes a theme for use in Twilio products, aptly called the `PasteTheme`. This theme is based on the +[Monaco Editor](https://github.com/microsoft/monaco-editor). The library exposes a theme for use in Twilio products, aptly called the `PasteTheme`. This theme is based on the [Night Owl theme by Sarah Drasner](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl&WT.mc_id=github-theme-sdras). + + Are you looking for stylized UI components? + + For fully styled components, use the Editable Code Block. Or if you don't need editing functionality, use the Code Block. + + + ### Installation ```bash @@ -105,7 +112,7 @@ const PasteThemeEditor = (): React.ReactNode => { --- -See more examples on our [Storybook](https://paste-storybook.twilio.design/?path=/story/libraries-code-editor-editor--). +See more examples on our [Storybook](https://paste-storybook.twilio.design/?path=/story/libraries-code-editor-editor--javascript-editor). diff --git a/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx b/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx index ec69ffc770..fdb015bd50 100644 --- a/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx +++ b/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx @@ -158,7 +158,7 @@ Horizontal spacing is very similar to vertical space, using 8-pixel multiples. R ## Max widths -We suggest a max width of 1440px for the content area (not including margins). +We suggest a max width of 1232px or `size-120` for the content area (not including margins). What responsive breakpoints do I use for my feature? @@ -171,7 +171,7 @@ We suggest a max width of 1440px for the content area (not including margins). #### Text widths -Your text width should not be as long as your max width (1140px). In fact, a good rule of thumb for your text widths is no more than 65 characters per line. For Twilio default body text, we aim for about 712 pixels (`size-70`) for text width. +Your text width should not be as long as your max width (1232px or `size-120`). In fact, a good rule of thumb for your text widths is no more than 65 characters per line. For Twilio default body text, we aim for about 712 pixels (`size-70`) for text width. It's sometimes helpful to also break up content by pairing it with a hero image. By doing this, you're visually signaling that this is an effortless conversation.