Feature/simplify and add word colors

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
+<PromoButton
+  words={['Super', 'Easy', 'Ads']}
+  wordColors={['red', 'slate', 'blue']}
+  ...
+/>
+```
+
+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.

example/nextjs/pages/index.tsx

@@ -33,7 +33,7 @@ const Home: NextPage = () => {
           <p className="text-lg bg-black text-white">{`isOpen: ${isOpen}`}</p>
           <PromoButton
             logoSrc=""
-            words={['Real', 'Easy', 'Ads']}
+            words={['Super', 'Easy', 'Ads']}
             shape="square"
             email="jason@tincre.com"
             backend="/api/promo"

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 ? (
-    <span className="promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-r promo-from-gray-50 promo-to-gray-300 group-hover:promo-from-gray-700 group-hover:promo-to-gray-900 block">
-      {word}
-    </span>
-  ) : (
-    <span className="promo-text-2xl promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-r promo-from-gray-50 promo-to-gray-300 group-hover:promo-from-gray-700 group-hover:promo-to-gray-900 promo-block">
-      {word}
-    </span>
-  );
-}
-export function SecondWord({ word, isHero }: { word: string; isHero: any }) {
-  return !isHero ? (
-    <span className="promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-l promo-from-gray-50 promo-to-gray-300 group-hover:promo-from-gray-700 group-hover:promo-to-gray-900 promo-block">
-      {word}
-    </span>
-  ) : (
-    <span className="promo-text-2xl promo-animate-pulse promo-bg-clip-text text-transparent promo-bg-gradient-to-l promo-from-gray-50 promo-to-gray-300 group-hover:promo-from-gray-700 group-hover:promo-to-gray-900 block">
-      {word}
-    </span>
-  );
-}
-export function ThirdWord({ word, isHero }: { word: string; isHero: any }) {
-  return !isHero ? (
-    <span className="promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-l promo-from-red-500 promo-to-red-700 promo-group-hover:promo-from-red-700 group-hover:promo-to-red-900 promo-block">
-      {word}
-    </span>
-  ) : (
-    <span className="promo-text-2xl promo-animate-pulse promo-bg-clip-text promo-text-transparent promo-bg-gradient-to-l promo-from-red-500 promo-to-red-700 group-hover:promo-from-red-700 group-hover:promo-to-red-900 promo-block">
-      {word}
-    </span>
-  );
+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 <span className={defaultClass(isHero, color)}>{word}</span>;
 }
+
 export default function ThreeWords({
   words,
   isHero,
+  colors,
 }: {
-  words: undefined | Array<string>;
-  isHero: undefined | boolean;
+  words?: Array<string>;
+  isHero?: boolean;
+  colors?: Array<string>;
 }) {
   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 (
     <>
-      <FirstWord word={word1} isHero={isHero} />
-      <SecondWord word={word2} isHero={isHero} />
-      <ThirdWord word={word3} isHero={isHero} />
+      <Word word={word1} isHero={isHero} color={color1} />
+      <Word word={word2} isHero={isHero} color={color2} />
+      <Word word={word3} isHero={isHero} color={color3} />
     </>
   );
 }

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<string>;
+  wordColors?: Array<string>;
   adDisplayComponent?: React.FunctionComponent;
   disablePromoPay?: boolean;
   isOpen?: boolean;
@@ -235,6 +237,7 @@ function PromoButton({
           {...{
             words: buttonTextArray,
             isHero: mainButtonClassName === 'promo-button-hero group',
+            colors: wordColors,
           }}
         />
         <Transition.Root show={isOpenInternal} as={Fragment}>

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,26 +51,48 @@ 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)',
   medium: '(min-width: 600px) and (max-width: 1199px)',
   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',
+  ],
+]);

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;