diff --git a/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/andres-cortez.png b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/andres-cortez.png new file mode 100644 index 0000000000..b5d138acd2 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/andres-cortez.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/corner-ornament.png b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/corner-ornament.png new file mode 100644 index 0000000000..3752dca95d Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/corner-ornament.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/figma-typography.gif b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/figma-typography.gif new file mode 100644 index 0000000000..65bba83cbe Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/figma-typography.gif differ diff --git a/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/filters-pattern.gif b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/filters-pattern.gif new file mode 100644 index 0000000000..faded3ed3c Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/filters-pattern.gif differ diff --git a/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/paste-mate-2024-08.png b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/paste-mate-2024-08.png new file mode 100644 index 0000000000..bf58e292a8 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-08-23-paste-newsletter/paste-mate-2024-08.png differ diff --git a/packages/paste-website/src/components/ResponsiveBorderedImage.tsx b/packages/paste-website/src/components/ResponsiveBorderedImage.tsx index 7bada72e54..9e01a7c787 100644 --- a/packages/paste-website/src/components/ResponsiveBorderedImage.tsx +++ b/packages/paste-website/src/components/ResponsiveBorderedImage.tsx @@ -15,7 +15,7 @@ const ResponsiveBorderedImage: React.FC = (props) => { borderRadius="borderRadius20" overflow="hidden" > - + ); }; diff --git a/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx new file mode 100644 index 0000000000..16afe044e4 --- /dev/null +++ b/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx @@ -0,0 +1,179 @@ +export const meta = { + title: "Paste Design System Newsletter - August 2024 Edition", + slug: "/blog/2024-08-23-paste-newsletter/", + date: "2024-08-23", + author: "Kristian Antrobus", + avatar: "https://avatars.githubusercontent.com/u/55083528", + excerpt: "What's new in Paste in July 2024? Corner Ornament, updated filters, and more!", +}; + +import Image from "next/image"; +import { Box } from "@twilio-paste/box"; + +import { ResponsiveImage } from "../../components/ResponsiveImage"; +import { ResponsiveBorderedImage } from "../../components/ResponsiveBorderedImage"; + +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"; +import FigmaTypography from "../../assets/images/articles/2024-08-23-paste-newsletter/figma-typography.gif"; +import AndresCortez from "../../assets/images/articles/2024-08-23-paste-newsletter/andres-cortez.png"; +import PasteMateUI from "../../assets/images/articles/2024-08-23-paste-newsletter/paste-mate-2024-08.png"; + +import DefaultLayout from "../../layouts/DefaultLayout"; +import { getNavigationData } from "../../utils/api"; + +export default DefaultLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + return { + props: { + navigationData, + }, + }; +}; + + + +--- + + + + + + + +## 📣 What was new in Paste? + +### Filter pattern + + + + + + + +We've updated our [filter pattern](/patterns/filter)! The simplified layout uses Form Pills, Popovers, and Side Panel to reduce visual noise and help customers focus on the data and information that matter most. + +### Corner Ornament component + + + + + +The [Corner Ornament](/components/corner-ornament) component lets you quickly relate 2 graphic elements to each other. Use it to show unread notifications, cart counts, relationships in Tables, and more. The component supports a variety of Avatar and Icon sizes with built-in cutouts. + +### Paste Figma library featuring typography and effect variables + + + + + + + +We added typography and effect variables to the [Paste Components & Themes](https://www.figma.com/file/l2qtpQVMmXzQPVB3rEAA8i/Paste-Components-%26-Themes?type=design&node-id=3015-46646&mode=design&t=LavBWI8WtuCpWbz0-0) Figma library for more accurate swapping between Twilio, Twilio Dark, Evergreen, Default, and Dark themes. + +[Learn more about how to swap modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE). + +### Additional updates + +#### New + +- Added new [icons](/components/icon) for RCSCapable and SupportRequest. + +#### Updates + +- [Badge](/components/badge#counter) has a new notification_counter variant. + +And thank you for all these contributions, Joe Fehrman!: + +- [Form Pill Groups](/components/form-pill-group#large) now have a large variant to support the Filter pattern +- [User Dialog](/components/user-dialog) has a smaller default size based on feedback from our consumers + +## ✨ Pastemates™ spotlight + +Pastemates are individuals and teams who have been critical contributors to Paste, through advocating for adoption within their products and channeling important feedback and contributions back into the system.\_ + + + + + +In this edition of Pastemates, we're spotlighting a mate from the Platform Engineering team, **Andrés Rodríguez Cortés**! Andrés built One Admin pages with minimal guidance outside of the written guidelines on the Paste doc site. + +He recently attended Comms Platform UX office hours for a gut check on his implementation. Principal Designer **Andy Doyle** was thoroughly impressed with what he was able to achieve, saying it's an “exceptional standard using latest Paste and all the guidance.” + + + + + + + +Here's what Andrés has to say about working with Paste: + +Bravo to Andrés and his attention to detail! + +Sign up for [Comms Platform UX office hours](https://airtable.com/appszlqNhBPkOhjqA/shrRkluqJRg1fade0/tblbiQQjRGR9tXygz) if you're interested in design advice and feedback for your own work, too. + +## 👀 What we're working on next + +| Feature | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Timeline component** | The Timeline component represents a sequence of events or steps in a process. | +| **Pricing pattern** | The pricing pattern shows a group of paid features or packaged plans a user is selecting, contributed by **Kara Kenna** with support from **Bhooma Srirangarajan**. | +| **Callout component, refined** | Improved design and documentation of the Callout component, including stronger differentiation from the Alert component. | + + + +As always, we're better together. + +— The UX Infrastructure Team + + + +