Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(website): replace legacy blockquote with new component #4176

Closed
wants to merge 2 commits into from
Closed

chore(website): replace legacy blockquote with new component #4176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e781b18
chore(website): replace legacy blockquote with new component
krisantrobus Dec 2, 2024
3d265c9
chore(website): add blockquote to docs site deps
krisantrobus Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/paste-website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@twilio-paste/avatar": "^9.1.0",
"@twilio-paste/badge": "^8.3.1",
"@twilio-paste/base-radio-checkbox": "^13.1.0",
"@twilio-paste/blockquote": "^0.0.0",
"@twilio-paste/box": "^10.3.0",
"@twilio-paste/breadcrumb": "^11.1.1",
"@twilio-paste/button": "^14.1.2",
Expand Down
77 changes: 44 additions & 33 deletions packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
export const meta = {
title: 'Paste Design System Newsletter - September 2022 Edition',
slug: '/blog/2022-09-23-paste-newsletter/',
date: '2022-09-23',
author: 'Paste',
avatar: 'https://avatars.githubusercontent.com/t/3335688?s=280&v=4',
title: "Paste Design System Newsletter - September 2022 Edition",
slug: "/blog/2022-09-23-paste-newsletter/",
date: "2022-09-23",
author: "Paste",
avatar: "https://avatars.githubusercontent.com/t/3335688?s=280&v=4",
author_link: null,
status: 'published',
status: "published",
external_link: null,
excerpt:
"What's new in Paste in September 2022? NEW components, NEW icons, insights into our customer experience, and more!",
};

import Image from 'next/image';
import {Anchor} from '@twilio-paste/anchor';
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 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';
import CalloutExample from '../../assets/images/articles/2022-09-23-paste-newsletter/callout-example.png';
import MinimizableDialog from '../../assets/images/articles/2022-09-23-paste-newsletter/minimizable-dialog-example.gif';
import NewIcons from '../../assets/images/articles/2022-09-23-paste-newsletter/new-icons-example.png';
import UiKit from '../../assets/images/articles/2022-09-23-paste-newsletter/ui-kit-example.png';
import ToggleButton from '../../assets/images/articles/2022-09-23-paste-newsletter/toggle-button-example.gif';
import StickyHeaders from '../../assets/images/articles/2022-09-23-paste-newsletter/sticky-headers-example.gif';
import Ramona from '../../assets/images/articles/2022-09-23-paste-newsletter/ramona-pastemate.png';
import DefaultLayout from '../../layouts/DefaultLayout';
import {getNavigationData} from '../../utils/api';
import Image from "next/image";
import { Anchor } from "@twilio-paste/anchor";
import { Paragraph } from "@twilio-paste/paragraph";
import { Box } from "@twilio-paste/box";
import { Table, THead, TBody, Tr, Td, Th } from "@twilio-paste/table";
import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";

import { ResponsiveImage } from "../../components/ResponsiveImage";
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";
import CalloutExample from "../../assets/images/articles/2022-09-23-paste-newsletter/callout-example.png";
import MinimizableDialog from "../../assets/images/articles/2022-09-23-paste-newsletter/minimizable-dialog-example.gif";
import NewIcons from "../../assets/images/articles/2022-09-23-paste-newsletter/new-icons-example.png";
import UiKit from "../../assets/images/articles/2022-09-23-paste-newsletter/ui-kit-example.png";
import ToggleButton from "../../assets/images/articles/2022-09-23-paste-newsletter/toggle-button-example.gif";
import StickyHeaders from "../../assets/images/articles/2022-09-23-paste-newsletter/sticky-headers-example.gif";
import Ramona from "../../assets/images/articles/2022-09-23-paste-newsletter/ramona-pastemate.png";
import DefaultLayout from "../../layouts/DefaultLayout";
import { getNavigationData } from "../../utils/api";

export default DefaultLayout;

Expand Down Expand Up @@ -227,8 +228,8 @@ Our survey used a scale of 1-5 (1 being strongly disagree, 5 being strongly agre
We are excited to the share the following insights:

<Paragraph>
When asked how strongly they agreed to{' '}
<strong>Paste being easy to use to design and build customer interfaces</strong>, our participants averaged{' '}
When asked how strongly they agreed to{" "}
<strong>Paste being easy to use to design and build customer interfaces</strong>, our participants averaged{" "}
<strong>4.00/5</strong>.
</Paragraph>
<Paragraph>
Expand All @@ -238,12 +239,22 @@ 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.
</Blockquote>

<Blockquote>I really appreciate how approachable Paste is - it&apos;s really easy to get up and running.</Blockquote>
<Box marginBottom="space60">
<Blockquote>
<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>
</Box>

<Box marginBottom="space60">
<Blockquote>
<BlockquoteContent>
I really appreciate how approachable Paste is - it&apos;s really easy to get up and running.
</BlockquoteContent>
</Blockquote>
</Box>

These results are music to our ears 🎶

Expand Down
70 changes: 38 additions & 32 deletions packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
export const meta = {
title: 'Paste Design System Newsletter - December 2022 Edition',
slug: '/blog/2022-12-09-paste-newsletter/',
date: '2022-12-09',
author: 'Paste',
status: 'published',
avatar: 'https://avatars.githubusercontent.com/t/3335688?s=280&v=4',
title: "Paste Design System Newsletter - December 2022 Edition",
slug: "/blog/2022-12-09-paste-newsletter/",
date: "2022-12-09",
author: "Paste",
status: "published",
avatar: "https://avatars.githubusercontent.com/t/3335688?s=280&v=4",
excerpt: "What's new in Paste in December 2022? New components, new variants, and more!",
};

import Image from 'next/image';
import {Anchor} from '@twilio-paste/anchor';
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 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';
import DisplayHeading from '../../assets/images/articles/2022-12-09-paste-newsletter/display-heading.png';
import Robb from '../../assets/images/articles/2022-12-09-paste-newsletter/robb-niznik.jpeg';
import Justin from '../../assets/images/articles/2022-12-09-paste-newsletter/justin-young.png';
import DefaultLayout from '../../layouts/DefaultLayout';
import {getNavigationData} from '../../utils/api';
import Image from "next/image";
import { Anchor } from "@twilio-paste/anchor";
import { Paragraph } from "@twilio-paste/paragraph";
import { Box } from "@twilio-paste/box";
import { Table, THead, TBody, Tr, Td, Th } from "@twilio-paste/table";
import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";

import { ResponsiveImage } from "../../components/ResponsiveImage";
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";
import DisplayHeading from "../../assets/images/articles/2022-12-09-paste-newsletter/display-heading.png";
import Robb from "../../assets/images/articles/2022-12-09-paste-newsletter/robb-niznik.jpeg";
import Justin from "../../assets/images/articles/2022-12-09-paste-newsletter/justin-young.png";
import DefaultLayout from "../../layouts/DefaultLayout";
import { getNavigationData } from "../../utils/api";

export default DefaultLayout;

Expand Down Expand Up @@ -56,7 +57,7 @@ export const getStaticProps = async () => {

### Chat Log animations

<Box as={Image} maxWidth="size60" src={ChatLog} alt="" style={{objectFit: 'contain'}} />
<Box as={Image} maxWidth="size60" src={ChatLog} alt="" style={{ objectFit: "contain" }} />

The final piece of [the Chat Log package](/components/chat-log) is complete— animation! There is a new useChatLogger hook that manages a list of messages, bookends, and events and a new ChatLogger component that animates the list into a Chat Log.

Expand All @@ -66,7 +67,7 @@ The final piece of [the Chat Log package](/components/chat-log) is complete— a

### In Page Navigation

<Box as={Image} maxWidth="size60" src={PageNav} alt="" style={{objectFit: 'contain'}} />
<Box as={Image} maxWidth="size60" src={PageNav} alt="" style={{ objectFit: "contain" }} />

The In Page Navigation component is a collection of links that navigate users to related pages. Although stylistically similar to Tabs, this component’s structure allows for straightforward integration with routers like React Router.

Expand All @@ -76,7 +77,7 @@ The In Page Navigation component is a collection of links that navigate users to

### Chat Composer

<Box as={Image} maxWidth="size60" src={ChatComposer} alt="" style={{objectFit: 'contain'}} />
<Box as={Image} maxWidth="size60" src={ChatComposer} alt="" style={{ objectFit: "contain" }} />

A highly anticipated component, the Chat Composer is a rich text input that users can type chat messages into. It is built with [the Lexical text editor](https://lexical.dev/) and can be extended to include the features you need through Lexical’s plugins.

Expand Down Expand Up @@ -135,40 +136,45 @@ Robb enjoys going on hikes, listening to his records, and volunteering at Therap

In this edition of Pastemates, we're spotlighting a mate from Twilio Contact Center Sales, Justin Young! Justin has been busy emboldening the Twilio Builder Spirit, stitching together the new Flex UI and its inbuilt support of Paste, with builder.io, to create a drag and drop Flex UI builder!

<div style={{position: 'relative', paddingBottom: '55.26590198123045%', height: 0}}>
<div style={{ position: "relative", paddingBottom: "55.26590198123045%", height: 0 }}>
<iframe
src="https://www.loom.com/embed/8162c351e3524b818b29697a5736ca54"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
></iframe>
</div>

<Box marginBottom="space70" />

Justin registered Paste React components to Builder.io which allows Justin and his team to rapidly create rich Paste-based experiences in the Flex UI using a drag and drop editor. By exposing paste component properties like variants in the Builder.io editor, Justin can choose between different styles of buttons, alerts and any other Paste component that they have wired up. As you can see by the video demo's the authoring is easy and intuitive and the customer experiences and functionality it creates are excellent and fully functional. Another benefit to his team is that they can begin to build complex components using many different Paste components, and save them as templates for easy re-use in customer demos.

<div style={{position: 'relative', paddingBottom: '55.26590198123045%', height: 0}}>
<div style={{ position: "relative", paddingBottom: "55.26590198123045%", height: 0 }}>
<iframe
src="https://www.loom.com/embed/2c3b6d26919749738aa47ff11d48fcd4"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
></iframe>
</div>

<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
</Blockquote>
<Box marginBottom="space60">
<Blockquote>
<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>
</Box>

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.

Expand Down
Loading
Loading