chore(docs): replace legacy blockquotes with component (#4178)

* chore(docs): replace legacy blockquotes with component

* chore(docs): pr cleanup

* chore: remove blockquote component

* feat(blockquote): fix build

---------

Co-authored-by: “nora <[email protected]>
Co-authored-by: Shoaib Ahmed <[email protected]>
Co-authored-by: Nora Krantz <[email protected]>

packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx

@@ -15,9 +15,9 @@ import Image from 'next/image';
 import {Anchor} from '@twilio-paste/anchor';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table';
 import {ResponsiveImage} from '../../components/ResponsiveImage';
-import {Blockquote} from '../../components/Blockquote';
 import SwitchExample from '../../assets/images/articles/2022-09-23-paste-newsletter/switch-example.gif';
 import InlineCodeExample from '../../assets/images/articles/2022-09-23-paste-newsletter/inline-code-example.png';
 import CodeBlockExample from '../../assets/images/articles/2022-09-23-paste-newsletter/code-block-example.gif';
@@ -239,11 +239,17 @@ We are excited to the share the following insights:
 In addition, some participants specified:
 
 <Blockquote>
-  It&apos;s great to have a standardized component library that lines up with Twilio standards. It allows me to focus on
-  my business logic.
+  <BlockquoteContent>
+    It&apos;s great to have a standardized component library that lines up with Twilio standards. It allows me to focus
+    on my business logic.
+  </BlockquoteContent>
 </Blockquote>
 
-<Blockquote>I really appreciate how approachable Paste is - it&apos;s really easy to get up and running.</Blockquote>
+<Blockquote>
+  <BlockquoteContent>
+    I really appreciate how approachable Paste is - it&apos;s really easy to get up and running.
+  </BlockquoteContent>
+</Blockquote>
 
 These results are music to our ears 🎶
 

packages/paste-website/src/pages/blog/2022-10-31-paste-newsletter.mdx

@@ -15,7 +15,6 @@ import {Paragraph} from '@twilio-paste/paragraph';
 import {Box} from '@twilio-paste/box';
 import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table';
 import {ResponsiveImage} from '../../components/ResponsiveImage';
-import {Blockquote} from '../../components/Blockquote';
 import RadioButtonGroup from '../../assets/images/articles/2022-10-31-paste-newsletter/radio-button-group.png';
 import ButtonGroup from '../../assets/images/articles/2022-10-31-paste-newsletter/button-group.png';
 import SideModal from '../../assets/images/articles/2022-10-31-paste-newsletter/side-modal.png';

packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx

@@ -12,9 +12,9 @@ import Image from 'next/image';
 import {Anchor} from '@twilio-paste/anchor';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table';
 import {ResponsiveImage} from '../../components/ResponsiveImage';
-import {Blockquote} from '../../components/Blockquote';
 import ChatLog from '../../assets/images/articles/2022-12-09-paste-newsletter/animated-chat-log.gif';
 import PageNav from '../../assets/images/articles/2022-12-09-paste-newsletter/in-page-nav.gif';
 import ChatComposer from '../../assets/images/articles/2022-12-09-paste-newsletter/chat-composer.gif';
@@ -163,11 +163,12 @@ Justin registered Paste React components to Builder.io which allows Justin and h
 
 <Box marginBottom="space70" />
 
-In Justin’s own words:
-
 <Blockquote>
-  I am no designer, but this is already better than every flex demo we’ve ever built from a UX perspective because of
-  access to paste
+  <BlockquoteContent>
+    I am no designer, but this is already better than every flex demo we’ve ever built from a UX perspective because of
+    access to paste
+  </BlockquoteContent>
+  <BlockquoteCitation author="Justin Young" />
 </Blockquote>
 
 We're stoked that Justin and team were able to create this builder experience all on their own, just by the Flex and Paste teams collaborating together! We can't wait to see what other people build next, with Paste on top of Flex.

packages/paste-website/src/pages/blog/2023-01-27-paste-newsletter.mdx

@@ -14,7 +14,6 @@ import {Paragraph} from '@twilio-paste/paragraph';
 import {Box} from '@twilio-paste/box';
 import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table';
 import {ResponsiveImage} from '../../components/ResponsiveImage';
-import {Blockquote} from '../../components/Blockquote';
 import DependencyIntake from '../../assets/images/articles/2023-01-27-paste-newsletter/dependency-intake.png';
 import Spacing from '../../assets/images/articles/2023-01-27-paste-newsletter/spacing-guidelines.png';
 import OneTwilio from '../../assets/images/articles/2023-01-27-paste-newsletter/one-twilio.png';

packages/paste-website/src/pages/blog/2023-11-08-paste-newsletter.mdx

@@ -11,8 +11,8 @@ export const meta = {
 import Image from 'next/image';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {ResponsiveImage} from '../../components/ResponsiveImage';
-import {Blockquote} from '../../components/Blockquote';
 
 import Pastebot from '../../assets/images/articles/2023-11-08-paste-newsletter/Pastebot.png';
 import DocsSearch from '../../assets/images/articles/2023-11-08-paste-newsletter/DocsSearch.png';
@@ -181,7 +181,14 @@ We’ve just completed our annual round of roadmap reviews with product teams to
 
 In this edition of Pastemates, we're spotlighting a mate from the Web Platform team, Pablo Deeleman! Pablo lives the Twilio Builder spirit, building complex prototypes with just out-of-the-box Paste components. During his time on the Event Streams team, he pushed the boundaries of what could be built with Paste "as is":
 
-<Blockquote>The whole node connectors UI, including the animations, is done with plain vanilla Paste components and primitives with no further tampering. No custom React/UI…was necessary to deliver this experience, and although it might seem quite a complex development, the whole UI was built in a couple of hours.</Blockquote>
+<Blockquote>
+  <BlockquoteContent>
+    The whole node connectors UI, including the animations, is done with plain vanilla Paste components and primitives
+    with no further tampering. No custom React/UI…was necessary to deliver this experience, and although it might seem
+    quite a complex development, the whole UI was built in a couple of hours.
+  </BlockquoteContent>
+  <BlockquoteCitation author="Pablo Deeleman" />
+</Blockquote>
 
 <Box width="100%" display="flex" justifyContent="center">
   <Box maxWidth="600px">

packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx

@@ -12,7 +12,6 @@ import { Box } from "@twilio-paste/box";
 
 import { ResponsiveImage } from "../../components/ResponsiveImage";
 import { ResponsiveBorderedImage } from "../../components/ResponsiveBorderedImage";
-import { Blockquote } from "../../components/Blockquote";
 
 import FiltersPattern from "../../assets/images/articles/2024-08-23-paste-newsletter/filters-pattern.gif";
 import CornerOrnament from "../../assets/images/articles/2024-08-23-paste-newsletter/corner-ornament.png";

packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx

@@ -12,7 +12,6 @@ import { Box } from "@twilio-paste/box";
 
 import { ResponsiveImage } from "../../components/ResponsiveImage";
 import { ResponsiveBorderedImage } from "../../components/ResponsiveBorderedImage";
-import { Blockquote } from "../../components/Blockquote";
 
 import PricingPattern from "../../assets/images/articles/2024-11-07-paste-newsletter/pricing-pattern.png";
 import Timeline from "../../assets/images/articles/2024-11-07-paste-newsletter/timeline.png";

packages/paste-website/src/pages/components/alert/index.mdx

@@ -8,13 +8,13 @@ export const meta = {
 import {Alert} from '@twilio-paste/alert';
 import {Text} from '@twilio-paste/text';
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {Button} from '@twilio-paste/button';
 import {Anchor} from '@twilio-paste/anchor';
 import {Card} from '@twilio-paste/card';
 import {Heading} from '@twilio-paste/heading';
 import {Paragraph} from '@twilio-paste/paragraph';
 import {DoDont, Do, Dont} from '../../../components/DoDont';
-import {Blockquote} from '../../../components/Blockquote';
 import {Codeblock} from '../../../components/codeblock';
 import {SidebarCategoryRoutes} from '../../../constants';
 import Changelog from '@twilio-paste/alert/CHANGELOG.md';
@@ -62,13 +62,12 @@ Use an Alert for one of these types of information:
 - **Warning.** Critical information that will help a user avoid an issue.
 - **Error.** Critical information that's preventing a user from continuing a flow and if there's action required on their end to resolve the issue.
 
-<Blockquote
-  name="Nielsen Norman Group"
-  source="Indicators, Validations, and Notifications"
-  sourceUrl="https://www.nngroup.com/articles/indicators-validations-notifications/"
->
-  A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it
-  will disrupt their current task and be irrelevant to their current needs.
+<Blockquote url="https://www.nngroup.com/articles/indicators-validations-notifications/">
+  <BlockquoteContent>
+    A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because
+    it will disrupt their current task and be irrelevant to their current needs.
+  </BlockquoteContent>
+  <BlockquoteCitation author="Nielsen Norman Group" source="Indicators, Validations, and Notifications" />
 </Blockquote>
 
 ### Accessibility

packages/paste-website/src/pages/components/editable-code-block/index.mdx

@@ -9,7 +9,6 @@ import Changelog from '@twilio-paste/editable-code-block/CHANGELOG.md';
 import packageJson from '@twilio-paste/editable-code-block/package.json';
 
 import {DoDont, Do, Dont} from '../../../components/DoDont';
-import {Blockquote} from '../../../components/Blockquote';
 import {Codeblock} from '../../../components/codeblock';
 import {SidebarCategoryRoutes} from '../../../constants';
 import ComponentPageLayout from '../../../layouts/ComponentPageLayout';

packages/paste-website/src/pages/components/input/index.mdx

@@ -10,6 +10,7 @@ import {Input} from '@twilio-paste/input';
 import {HelpText} from '@twilio-paste/help-text';
 import {Anchor} from '@twilio-paste/anchor';
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {Text} from '@twilio-paste/text';
 import {Button} from '@twilio-paste/button';
 import {Table, THead, TBody, Td, Th, Tr} from '@twilio-paste/table';
@@ -18,7 +19,6 @@ import {UnorderedList, ListItem} from '@twilio-paste/list';
 import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';
 import {DoDont, Do, Dont} from '../../../components/DoDont';
 import {Codeblock} from '../../../components/codeblock';
-import {Blockquote} from '../../../components/Blockquote';
 import {SidebarCategoryRoutes} from '../../../constants';
 import Changelog from '@twilio-paste/input/CHANGELOG.md';
 import packageJson from '@twilio-paste/input/package.json';
@@ -184,14 +184,13 @@ using keyboard arrow keys and increment buttons.
 
 It displays a numeric keypad in some devices with dynamic keypads.
 
-<Blockquote
-  name="Mozilla"
-  source="MDN web docs"
-  sourceUrl="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#using_number_inputs"
->
-  The number input type should only be used for incremental numbers...The number input type is not appropriate for
-  values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many
-  countries or credit card numbers.
+<Blockquote url="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#using_number_inputs">
+  <BlockquoteContent>
+    The number input type should only be used for incremental numbers...The number input type is not appropriate for
+    values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many
+    countries or credit card numbers.
+  </BlockquoteContent>
+  <BlockquoteCitation author="Mozilla" source="MDN web docs" />
 </Blockquote>
 
 In most cases, include a default value that the user can change and would not cause harm if accidentally used. Use [Help

packages/paste-website/src/pages/components/keyboard-key/index.mdx

@@ -2,6 +2,7 @@ import { KeyboardKey, KeyboardKeyGroup, useKeyCombination, useKeyCombinations }
 import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout";
 import { Anchor } from "@twilio-paste/anchor";
 import { Box } from "@twilio-paste/box";
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import { Button } from "@twilio-paste/button";
 import { useMenuState, Menu, MenuButton, MenuItem } from "@twilio-paste/menu";
 import { Paragraph } from "@twilio-paste/paragraph";
@@ -13,7 +14,6 @@ import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
 import packageJson from "@twilio-paste/keyboard-key/package.json";
 
 import { SidebarCategoryRoutes } from "../../../constants";
-import { Blockquote } from "../../../components/Blockquote";
 import ComponentPageLayout from "../../../layouts/ComponentPageLayout";
 import { getFeature, getNavigationData } from "../../../utils/api";
 import { Do, DoDont, Dont } from "../../../components/DoDont";
@@ -69,13 +69,15 @@ A Keyboard Key distinguishes a keyboard command or shortcut from other text.
 
 Keyboard shortcuts are used for extremely frequent platform-level actions (like activating search), or in canvas or productivity tools like Studio or Flex. In general, **avoid implementing keyboard shortcuts**, especially with single keys, because they can override shortcuts that are already set by operating systems, browsers, assistive technologies, or user preferences.
 
-<Blockquote
-  name="UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts"
-  source="Nielsen Norman Group"
-  sourceUrl="https://www.nngroup.com/articles/ui-copy/#guidelines-for-command-shortcuts"
->
-  Not every task on your application needs a shortcut, so observe your users interacting with your application to
-  determine the most common tasks and prioritize keyboard shortcuts for these.
+<Blockquote url="https://www.nngroup.com/articles/ui-copy/#guidelines-for-command-shortcuts">
+  <BlockquoteContent>
+    Not every task on your application needs a shortcut, so observe your users interacting with your application to
+    determine the most common tasks and prioritize keyboard shortcuts for these.
+  </BlockquoteContent>
+  <BlockquoteCitation
+    author="Nielsen Norman Group"
+    source="UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts"
+  />
 </Blockquote>
 
 Keyboards can also vary across operating systems and global regions, so make sure your key commands work for all users.

packages/paste-website/src/pages/components/media-object/index.mdx

@@ -7,6 +7,7 @@ export const meta = {
 };
 
 import {Box} from '@twilio-paste/box';
+import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
 import {Text} from '@twilio-paste/text';
 import {Avatar} from '@twilio-paste/avatar';
 import {Paragraph} from '@twilio-paste/paragraph';
@@ -15,7 +16,6 @@ import {Menu, MenuButton, SubMenuButton, MenuItem, MenuGroup, MenuSeparator, use
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
 import {subMenuExample} from '../../../component-examples/MenuExamples.ts';
-import {Blockquote} from '../../../components/Blockquote';
 import {SidebarCategoryRoutes, TWILIO_RED} from '../../../constants';
 import {PasteIcon} from '../../../components/icons/PasteIcon';
 import packageJson from '@twilio-paste/media-object/package.json';
@@ -66,12 +66,11 @@ export const getStaticProps = async () => {
 
 First created by [Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) back in 2010, the Media Object in Paste aims to serve many of the same purposes as the original concept. It's a layout pattern that you will see all across the web, on almost all the websites you will come across. We're pretty sure you'll **never unsee this going forward**.
 
-<Blockquote
-  name="Nicole Sullivan"
-  source="Stubbornella"
-  sourceUrl="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/"
->
-  What is the internet made of? At least the UI layer is mainly composed of media blocks.
+<Blockquote url="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">
+  <BlockquoteContent>
+    What is the internet made of? At least the UI layer is mainly composed of media blocks.
+  </BlockquoteContent>
+  <BlockquoteCitation author="Nicole Sullivan" source="Stubbornella" />
 </Blockquote>
 
 **So what's a media object?** An image or figure positioned horizontally next to some form of content. The figure can sit on either or both sides of the content. That's it. It sounds really simple, but it's literally everywhere on the Internet. For example, the top left of this website uses a Media Object.