From 9608ede497bd2f460626e4bb214c3ae9f24bf809 Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:42:32 -0600 Subject: [PATCH 1/8] :sparkles: add threeWordsColorClassNames options map --- src/lib/constants.ts | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 4c40ee2..43a0297 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -68,3 +68,41 @@ export const BIZ_URL = { external: 'https://musicfox.io', internal: '/', }; +export const threeWordsColorClassNames = new Map([ + [ + 'gray', + 'promo-from-gray-400 promo-to-gray-500 group-hover:promo-from-gray-700 group-hover:promo-to-gray-900', + ], + [ + 'slate', + 'promo-from-slate-400 promo-to-slate-500 group-hover:promo-from-slate-700 group-hover:promo-to-slate-900', + ], + [ + 'red', + 'promo-from-red-400 promo-to-red-500 group-hover:promo-from-red-700 group-hover:promo-to-red-900', + ], + [ + 'indigo', + 'promo-from-indigo-400 promo-to-indigo-500 group-hover:promo-from-indigo-700 group-hover:promo-to-indigo-900', + ], + [ + 'blue', + 'promo-from-blue-400 promo-to-blue-500 group-hover:promo-from-blue-700 group-hover:promo-to-blue-900', + ], + [ + 'green', + 'promo-from-green-400 promo-to-green-500 group-hover:promo-from-green-700 group-hover:promo-to-green-900', + ], + [ + 'yellow', + 'promo-from-yellow-400 promo-to-yellow-500 group-hover:promo-from-yellow-700 group-hover:promo-to-yellow-900', + ], + [ + 'orange', + 'promo-from-orange-400 promo-to-orange-500 group-hover:promo-from-orange-700 group-hover:promo-to-orange-900', + ], + [ + 'violet', + 'promo-from-violet-400 promo-to-violet-500 group-hover:promo-from-violet-700 group-hover:promo-to-violet-900', + ], +]); From 3449834dbad9a3a818a739bcc852d27b6168bb60 Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:42:35 -0600 Subject: [PATCH 2/8] :recycle: simplify and add word color optionality w/defaults --- src/components/ThreeWords/ThreeWords.tsx | 77 ++++++++++++------------ 1 file changed, 40 insertions(+), 37 deletions(-) diff --git a/src/components/ThreeWords/ThreeWords.tsx b/src/components/ThreeWords/ThreeWords.tsx index 330d160..914769a 100644 --- a/src/components/ThreeWords/ThreeWords.tsx +++ b/src/components/ThreeWords/ThreeWords.tsx @@ -4,55 +4,58 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ +import { threeWordsColorClassNames } from '../../lib/constants'; +const heroClass = 'promo-text-2xl'; -export function FirstWord({ word, isHero }: { word: string; isHero: any }) { - return !isHero ? ( - - {word} - - ) : ( - - {word} - - ); -} -export function SecondWord({ word, isHero }: { word: string; isHero: any }) { - return !isHero ? ( - - {word} - - ) : ( - - {word} - - ); -} -export function ThirdWord({ word, isHero }: { word: string; isHero: any }) { - return !isHero ? ( - - {word} - - ) : ( - - {word} - - ); +const defaultClass = (isHero?: boolean, color?: string) => { + if (!threeWordsColorClassNames.has(color || '')) { + console.warn( + `The color ${color} is not supported. It should be one of ${[ + ...threeWordsColorClassNames.keys(), + ]}.` + ); + color = 'gray'; + } + const defaultColor = color || 'gray'; + return isHero + ? `${heroClass} promo-text-2xl promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-r promo-block ${threeWordsColorClassNames.get( + defaultColor + )}` + : `promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-r promo-block ${threeWordsColorClassNames.get( + defaultColor + )}`; +}; +export function Word({ + word, + isHero, + color, +}: { + word?: string; + isHero?: boolean; + color?: string; +}) { + return {word}; } + export default function ThreeWords({ words, isHero, + colors, }: { - words: undefined | Array; - isHero: undefined | boolean; + words?: Array; + isHero?: boolean; + colors?: Array; }) { if (typeof words === 'undefined') words = ['Real', 'Easy', 'Ads!']; + if (typeof colors === 'undefined') colors = ['slate', 'indigo', 'red']; let [word1, word2, word3] = words; + let [color1, color2, color3] = colors; return ( <> - - - + + + ); } From 0238994ad13ea735d26dcb87f7fff8096db58ade Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:42:35 -0600 Subject: [PATCH 3/8] :sparkles: add new prop wordColors --- src/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.tsx b/src/index.tsx index ee9c3c4..cd106b3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -45,6 +45,7 @@ function PromoButton({ email, backend, words, + wordColors, adDisplayComponent, disablePromoPay, isOpen, @@ -57,6 +58,7 @@ function PromoButton({ email: string; backend: string; words?: Array; + wordColors?: Array; adDisplayComponent?: React.FunctionComponent; disablePromoPay?: boolean; isOpen?: boolean; @@ -235,6 +237,7 @@ function PromoButton({ {...{ words: buttonTextArray, isHero: mainButtonClassName === 'promo-button-hero group', + colors: wordColors, }} /> From b05156d6670041d3f0057da6633fb4735c44aa57 Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:44:27 -0600 Subject: [PATCH 4/8] :fire: remove superfluous exports + add license --- src/lib/constants.ts | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 43a0297..eb13fd2 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,3 +1,9 @@ +/* Copyright Tincre (Musicfox, Inc) + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ /** *constants.js * Various static exports @@ -45,18 +51,6 @@ export const IMAGE_EXTENSIONS = [ 'tiff', 'webp', ]; -export const musicfoxLogoSrcLightUi = - 'https://cdn.sanity.io/images/m7ui67sm/production/f02595607a3023b5e83b62b1038889c19a868363-885x167.png?&h=60'; -export const musicfoxLogoSrcDarkUi = - 'https://cdn.sanity.io/images/m7ui67sm/production/1d3667a1dfb7bb2a70293aa3ef639f2449335f82-885x167.png?&h=60'; -export const fratoniFace = - 'https://cdn.sanity.io/images/m7ui67sm/production/a49095558c1284b081475c34ab8ab86c14032c51-803x802.jpg?w=500&h=500&fit=max'; -export const demoAvatarImg = - 'https://cdn.sanity.io/images/m7ui67sm/production/2da66d00a51dbbcd1ea5e765808bb440bc2b3464-512x512.png?w=512&h=512&fit=max'; -export const demoAvatarDarkImg = - 'https://cdn.sanity.io/images/m7ui67sm/production/70367ecd062407510d048628ed87e6672e543951-512x512.png?w=500&h=500&fit=max'; -export const heroBackgroundImageDefault = - 'https://cdn.sanity.io/images/8du83upr/production/0c59a37d340a11fb8e9ece673fbaaf0832354e28-3840x2564.png?w=3000&h=3000&fit=max'; export const mediaQueries = { small: '(max-width: 599px)', @@ -64,10 +58,6 @@ export const mediaQueries = { large: '(min-width: 1200px)', }; -export const BIZ_URL = { - external: 'https://musicfox.io', - internal: '/', -}; export const threeWordsColorClassNames = new Map([ [ 'gray', From 3ece06782f4526df8c65bc8ef2f51d19da8d7d0a Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:57:01 -0600 Subject: [PATCH 5/8] :art: improve default styling for button hover --- src/styles/default.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/default.css b/src/styles/default.css index c80b83c..83f2ed2 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -6,7 +6,7 @@ * class names below. */ .promo-button-main { - @apply promo-inline-block md:promo-py-3 md:promo-mr-2 promo-uppercase promo-leading-none promo-text-white dark:promo-text-slate-900 promo-bg-black dark:promo-bg-slate-50 hover:promo-bg-gray-100 promo-px-3 promo-py-2 promo-rounded-md promo-shadow; + @apply promo-inline-block md:promo-py-3 md:promo-mr-2 promo-uppercase promo-leading-none promo-text-white dark:promo-text-slate-900 promo-bg-black dark:promo-bg-slate-50 hover:promo-bg-slate-300 promo-px-3 promo-py-2 promo-rounded-md promo-shadow hover:promo-shadow-xl; } .promo-button-hero { @apply promo-inline-block promo-px-24 promo-py-24 promo-uppercase promo-leading-none promo-text-white promo-bg-black dark:promo-text-slate-900 dark:promo-bg-slate-50 hover:promo-bg-gray-100 promo-rounded-md promo-shadow; From 8ee3581d74f862a633596fcf5b737d6cb7d77f72 Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:57:04 -0600 Subject: [PATCH 6/8] :art: add better default coloring for words --- src/components/ThreeWords/ThreeWords.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ThreeWords/ThreeWords.tsx b/src/components/ThreeWords/ThreeWords.tsx index 914769a..ac3ba49 100644 --- a/src/components/ThreeWords/ThreeWords.tsx +++ b/src/components/ThreeWords/ThreeWords.tsx @@ -47,7 +47,7 @@ export default function ThreeWords({ colors?: Array; }) { if (typeof words === 'undefined') words = ['Real', 'Easy', 'Ads!']; - if (typeof colors === 'undefined') colors = ['slate', 'indigo', 'red']; + if (typeof colors === 'undefined') colors = ['violet', 'blue', 'yellow']; let [word1, word2, word3] = words; let [color1, color2, color3] = colors; From 612fa76b253b5de2dda3a083e1f09d3bf0fae05a Mon Sep 17 00:00:00 2001 From: "Jason R. Stevens, CFA" Date: Wed, 20 Sep 2023 10:57:30 -0600 Subject: [PATCH 7/8] :recycle: update example button words text --- example/nextjs/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/nextjs/pages/index.tsx b/example/nextjs/pages/index.tsx index 344803d..5f60955 100644 --- a/example/nextjs/pages/index.tsx +++ b/example/nextjs/pages/index.tsx @@ -33,7 +33,7 @@ const Home: NextPage = () => {

{`isOpen: ${isOpen}`}

Date: Wed, 20 Sep 2023 11:10:43 -0600 Subject: [PATCH 8/8] :notebook: add documentation covering PR #174 --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 1553cf3..8d2b112 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ do ads any other way; the rest just suck. - [Example `.env.local`](#example-envlocal) - [Customizations](#customizations) - [Controlling open/close state](#controlling-openclose-state) + - [Customize words and colors](#customize-words-and-colors) - [Add options](#add-options) - [Example](#example) - [Managing state from `PromoButton` parent](#managing-state-from-promobutton-parent) @@ -244,6 +245,32 @@ It's simple to control the button's open close state by passing in a boolean pro This can be handy in case you need to control the button's state from an external interface. If included, the Promo Button will copy its state to your provided `isOpen` and `setIsOpen` state variables. +#### Customize words and colors + +The button's main text defaults to _Real Easy Ads_ in [Tincre](https://tincre.com) colors, violet, blue, and yellow, respectively. + +Both of these can be easily changed using the `words` and `wordColors` string array properties. Simply specify word colors when rendering the `PromoButton` as a prop, e.g.: + +```jsx + +``` + +Current color choices include + +- `gray`, +- `slate`, +- `red`, +- `indigo`, +- `blue`, +- `green`, +- `yellow`, +- `orange`, and +- `violet` + #### Add options Since [0.2.4](https://github.com/Tincre/promo-button/releases/tag/0.2.4) the button can be given options to customize its functionality.