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. 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}`}

- {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 = ['violet', 'blue', 'yellow']; let [word1, word2, word3] = words; + let [color1, color2, color3] = colors; return ( <> - - - + + + ); } 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, }} /> diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 4c40ee2..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,7 +58,41 @@ export const mediaQueries = { large: '(min-width: 1200px)', }; -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', + ], +]); 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;