Skip to content

Commit

Permalink
chore(website): replace legacy blockquote with new component
Browse files Browse the repository at this point in the history
  • Loading branch information
@krisantrobus
krisantrobus committed Dec 2, 2024
1 parent 36bd1e3 commit e781b18
Show file tree
Hide file tree
Showing 11 changed files with 690 additions and 463 deletions.
77 changes: 44 additions & 33 deletions packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx
View file
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
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

0 comments on commit e781b18

Please sign in to comment.