From c70f702d0f77898727a9acb74d13344bd2c75f9e Mon Sep 17 00:00:00 2001 From: Sarah Date: Tue, 5 Nov 2024 12:07:18 -0800 Subject: [PATCH 1/4] chore: remove pricing example from docs --- .../src/pages/components/card/index.mdx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/paste-website/src/pages/components/card/index.mdx b/packages/paste-website/src/pages/components/card/index.mdx index 2b3631f6b2..056087667b 100644 --- a/packages/paste-website/src/pages/components/card/index.mdx +++ b/packages/paste-website/src/pages/components/card/index.mdx @@ -27,7 +27,7 @@ import MultipleDont from '../../../assets/images/dont2-multiple-primary.png'; import packageJson from '@twilio-paste/card/package.json'; import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; -import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample, PricingExample} from '../../../component-examples/CardExamples' +import {AdjustingPaddingExample, DefaultExample, TitleBodyButtonExample, MarketingOneExample, MarketingTwoExample, MarketingThreeExample, MarketingFourExample} from '../../../component-examples/CardExamples' export default ComponentPageLayout; @@ -172,19 +172,6 @@ An example that doesn't use Card at all: If these options don’t work for your use case and you need to create something custom, [request a creative review with the Brand team](https://library.twilio.com/guidelines/guide/9306890b-4bde-4210-bb35-2a566890e47a/page/db009ba3-57e3-4e04-bfe3-efc5d38860d1) and partner with them to make sure it aligns with Twilio’s brand guidelines. -#### Pricing Cards - -Use this layout to show a group of Cards with pricing plans. Use a [brand Badge](/components/badge#brand) to highlight a “recommended” plan and [decorative Badges](/components/badge#decorative) for a customer’s current plan. - -The text layout in each Card is a suggestion. Adjust it as needed for your use case. - - - ## Composition notes When a Card contains text content, use the following guidelines: From 9b48f941df8eb7f9b5d96383a033e677228e1327 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 5 Nov 2024 14:47:50 -0600 Subject: [PATCH 2/4] docs(cards): update marketing SVG --- .../public/images/card/Marketing4.tsx | 236 +++++++++--------- 1 file changed, 116 insertions(+), 120 deletions(-) diff --git a/packages/paste-website/public/images/card/Marketing4.tsx b/packages/paste-website/public/images/card/Marketing4.tsx index 21d5ee5e4b..d9b106fa60 100644 --- a/packages/paste-website/public/images/card/Marketing4.tsx +++ b/packages/paste-website/public/images/card/Marketing4.tsx @@ -1,228 +1,224 @@ export const Marketing4 = (): JSX.Element => { return ( - - - - - - - - - + + + + + + + + + + + + - - - - - + + - + - - + + - + - + - + - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - - + + + - - - + + + - - + + From f96729a4b31bb15d82cf23ee90377755719f9aa0 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 5 Nov 2024 14:58:29 -0600 Subject: [PATCH 3/4] chore(cards-doc): fix unsupported svg attribute --- .../public/images/card/Marketing4.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/paste-website/public/images/card/Marketing4.tsx b/packages/paste-website/public/images/card/Marketing4.tsx index d9b106fa60..a9e7df077c 100644 --- a/packages/paste-website/public/images/card/Marketing4.tsx +++ b/packages/paste-website/public/images/card/Marketing4.tsx @@ -28,7 +28,15 @@ export const Marketing4 = (): JSX.Element => { fill="#51A9E3" d="M295.471 223.487a3.29 3.29 0 0 0-6.58 0v31.965a3.29 3.29 0 0 0 6.58 0v-31.965Zm-25.664 9.147a3.29 3.29 0 0 0-6.58 0v22.818a3.29 3.29 0 0 0 6.58 0v-22.818Z" /> - + { stroke-width="1.5" rx="4.825" /> - + Date: Tue, 5 Nov 2024 15:10:19 -0600 Subject: [PATCH 4/4] chore(cards-doc): linting --- .../public/images/card/Marketing4.tsx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/paste-website/public/images/card/Marketing4.tsx b/packages/paste-website/public/images/card/Marketing4.tsx index a9e7df077c..4993426b6c 100644 --- a/packages/paste-website/public/images/card/Marketing4.tsx +++ b/packages/paste-website/public/images/card/Marketing4.tsx @@ -2,7 +2,7 @@ export const Marketing4 = (): JSX.Element => { return ( - + @@ -12,17 +12,17 @@ export const Marketing4 = (): JSX.Element => { { > { y="86.455" fill="#fff" stroke="#51A9E3" - stroke-width="1.5" + strokeWidth="1.5" rx="4.825" /> { > { y="148.425" fill="#fff" stroke="#F22F46" - stroke-width="1.5" + strokeWidth="1.5" rx="4.825" /> @@ -180,10 +180,10 @@ export const Marketing4 = (): JSX.Element => { height="296.283" x="82.931" y="31.866" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" > - + @@ -197,10 +197,10 @@ export const Marketing4 = (): JSX.Element => { height="153.002" x="30.725" y="205.095" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" > - + @@ -214,10 +214,10 @@ export const Marketing4 = (): JSX.Element => { height="100.206" x="109.34" y="183.738" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" > - + @@ -226,12 +226,12 @@ export const Marketing4 = (): JSX.Element => { - - + + - - + +