From c2a4b39546d609cc79b03d1d77ae45e67fb8a513 Mon Sep 17 00:00:00 2001 From: Sarah Date: Fri, 21 Mar 2025 12:54:03 -0700 Subject: [PATCH 1/4] chore(website): update code editor library with editable code block info --- .../pages/core/libraries/code-editor/index.mdx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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..273df6002d 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,7 @@ 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 {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; export default DefaultLayout; @@ -43,14 +44,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 +111,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). From 3b812437f916716f731ca42c7555039f5bf0eb06 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 8 Apr 2025 12:36:32 -0700 Subject: [PATCH 2/4] chore: align max width values --- .../src/pages/foundations/spacing-and-layout/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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. From 2267ab25667834b50bff8386de777db6b9f97308 Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 8 Apr 2025 12:51:14 -0700 Subject: [PATCH 3/4] chore: add Anchor import to code editor library page --- .../paste-website/src/pages/core/libraries/code-editor/index.mdx | 1 + 1 file changed, 1 insertion(+) 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 273df6002d..5368080f51 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,7 @@ 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; From b0536eb65802e9a8f9dbc4f2192e1ef427354784 Mon Sep 17 00:00:00 2001 From: PixeledCode Date: Wed, 9 Apr 2025 13:30:52 +0530 Subject: [PATCH 4/4] chore(website): add marginY for callout --- .../src/pages/core/libraries/code-editor/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5368080f51..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 @@ -51,7 +51,7 @@ This library is built on top of [monaco-react](https://github.com/suren-atoyan/m [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.