Questions:

•  N/D

Technical Refinement

Description

Today in Sanity’s Hero Component there’s a Reversed option that can be toggled on that enables a background color and changes the texts and buttons to a light color.

• intl-whitelabel-cms

  • TASK 1–We will need to add a new toggle named Background Color

    • path: intl-whitelabel-cms/schemas/components/documents/hero.tsx

      • We will need to add a new toggle option named Background Color

        • The description of the toggle should be updated to “Turn this on to add and choose a background color for the homepage Hero.”

          

  • TASK 2–We will need to create a dropdown

    • path: intl-whitelabel-cms/schemas/components/documents/hero.tsx

      • Use the example:

        • intl-whitelabel-cms/schemas/configuration/pos-configuration/documents/pos-configuration.ts

        • intl-whitelabel-cms/schemas/configuration/pos-configuration/objects/pos-vendor-config-option.ts

      • Create a dropdown to choose the background color with the following options

      • When the Background Color toggle is on it should show:

        

        • Burger King:

          • Brown (default)

          • Red

          • Green

          • Orange

          • Yellow

        • Popeyes:

          • Orange (default)

          • Purple

        • Firehouse Subs:

          • Red (default)

          • Yellow

  • TASK 3–We will need to add a toggle named Split Background

    • path: intl-whitelabel-cms/schemas/components/documents/hero.tsx

      • We will need to add a toggle named Split Background (default is false)

        • The Split Background toggle should have the following description: “Turn this on to split the background color.”

        • By turning the Split Background toggle on the background color area should be reduced

          

  • TASK 4—Deprecate Reversed toggle

    • path: intl-whitelabel-cms/schemas/components/documents/hero.tsx

      • The Reversed toggle should be deprecated

      • The Reversed toggle option should be removed from Sanity’s UI

• ctg-component-library

  • TASK 5—Change component hero

    • path: ctg-components-library/src/components/hero/hero.tsx

    • We will add tree new attributes:

      backgroundHero?: string;
      isSplit?: boolean;
      backgroundSplit?: string;

    • After that, we will update the component to support the themes

      • full background

      • split background

      • texts and buttons with the same color

      • texts and buttons with different colors

    • By turning the Split Background toggle on the background color area should be reduced

      • The Heading and Sub-Heading should be displayed over the colored background

      • The CTAs should be displayed below the colored background area

      • The background color of the bottom portion should not be configurable

    • If the Reversed toggle was on when deprecated it should now point and default to the new Background Color toggle defaulting to the on state in the respective colors:

      • Burger King

        • Brown

      • Popeyes

        • Orange

      • Firehouse Subs

        • Red

• intl-whitelabel-app

  • TASK 5—Change graphql queries and run apollo generate

    • path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/fragments/hero.graphql

  • TASK 6–Create feature flag

  • TASK 7–Create color constants (tokens)

    • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/primitives.ts

    • Background colors:

      • Burger King:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.bk.ts

        • Brown (default option)

          • There is already the color: $bbqBrown: 'rgb(80,35,20)'

        • Red

          • There is already the color: $fieryRed: 'rgb(214,35,0)'

        • Green

          • There is already the color: $crunchyGreen: 'rgb(25,135,55)'

        • Orange

          • There is already the color: $flamingOrange: 'rgb(255,135,50)'

        • Yellow

          • There is already the color: $meltyYellow: 'rgb(255,170,0)'

      • Popeyes:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.plk.ts

        • Orange (default option)

          • There are already the colors: $popeyesOrange: 'rgb(255,125,0)' and $burntOrange: 'rgb(242,86,0)'

        • Purple

          • There is already the color: $nolaPurple: 'rgb(145,25,135)', but we will create the second purple color: 'rgba(88, 16, 82)'

      • Firehouse Subs:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.fhs.ts

        • Red (default option)

          • We will create the color red: 'rgba(196, 0, 0)'

        • Yellow

          • We will create the color red: 'rgba(255, 205, 120)'

      • Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1 - Connect your Figma account

      • Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account

      • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account

  • TASK 8—Create method to create hero theme

    • Burger King:

      • Brown (default option)

        • Elements over this background should be displayed in their reversed (light color) version

      • Red

        • Elements over this background should be displayed in their reversed (light color) version

      • Green

        • Elements over this background should be displayed in their reversed (light color) version

      • Orange

      • Yellow

    • Popeyes:

      • Orange (default option)

        • Elements over this background should be displayed in their reversed (light color) version

      • Purple

        • Elements over this background should be displayed in their reversed (light color) version

    • Firehouse Subs:

      • Red (default option)

        • Elements over this background should be displayed in their reversed (light color) version

      • Yellow

    • If the Reversed toggle was on when deprecated it should now point and default to the new Background Color toggle defaulting to the on state in the respective colors:

      • Burger King

        • Brown

      • Popeyes

        • Orange

      • Firehouse Subs

        • Red

Screenshots

• N/D

POC

• N/D

Impact Analysis

• Hero component

Dependencies

• N/D

Unit Test

• N/D

Useful Links

• Full-Color Background:

  • Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1 - Connect your Figma account

  • Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account

  • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account

• Split Background:

  • Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74807&t=ylezOnsQVDmMGLZo-1 - Connect your Figma account

  • Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68616&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account

  • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105587&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account