Page Comparison

...

• Create a new attribute named: showComplementaryCta as optional, typed as boolean on HeroProps interface:

  • path: ctg-components-library/src/components/hero/types.ts

    Code Block
    language typescript
    showComplementaryCta?: boolean;

    

• We will change the complementaryCtaText attribute from required to optional:

  • path: ctg-components-library/src/components/hero/types.ts

    Code Block
    language typescript
    complementaryCtaText?: string;

    

• On Hero component, we will:

  • add a new attribute on the destructuring of Hero attributes from default value true

    Code Block
    language typescript
    showComplementaryCta = true,

• Now, we will do a validation of HeroComplementaryCta button:

  • before:

    Code Block
    language typescript
    <HeroComplementaryCta aria-describedby={ctaDescribedByIds} fullWidth={isMobile} reversed={isButtonReversed} children={complementaryCtaText} onClick={onClickComplementaryCta} href={complementaryCtaHref} as={complementaryCtaAs} />

  • after:

  Code Block
  language typescript
  {showComplementaryCta && complementaryCtaText && complementaryCtaHref && ( <HeroComplementaryCta aria-describedby={ctaDescribedByIds} fullWidth={isMobile} reversed={isButtonReversed} children={complementaryCtaText} onClick={onClickComplementaryCta} href={complementaryCtaHref} as={complementaryCtaAs} /> )}

• We will need to do a change on hero.stories.tsx (storybook)

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

...