WidgetCelebration.jsx

Enable keyboard shortcuts

/* 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/. */

import React from "react";

const DEFAULT_GRADIENT_STOPS = [

  { offset: "0%", color: "var(--color-orange-20)" },

  { offset: "28%", color: "var(--color-orange-30)" },

  { offset: "64%", color: "var(--color-pink-30)" },

  { offset: "100%", color: "var(--color-pink-40)" },

];

export const WidgetCelebration = ({

  classNamePrefix = "widget-celebration",

  celebrationFrame,

  celebrationId,

  gradientStops = DEFAULT_GRADIENT_STOPS,

  headlineL10nId,

  illustrationSrc,

  onComplete,

  subheadL10nId,

}) => {

  const className = suffix =>

    suffix ? `${classNamePrefix}-${suffix}` : classNamePrefix;

  const resolvedIllustrationSrc = illustrationSrc?.endsWith(".svg")

    ? `${illustrationSrc}?run=${celebrationId}`

    : illustrationSrc;

  const strokeSize = celebrationFrame.strokeInset * 2;

  const strokeWidth = celebrationFrame.width - strokeSize;

  const strokeHeight = celebrationFrame.height - strokeSize;

  return (

    <div

      className={className()}

      key={celebrationId}

      role="status"

      aria-live="polite"

      onAnimationEnd={event => {

        if (

          event.target === event.currentTarget &&

          event.animationName === "widget-celebration-lifecycle"

) {

          onComplete?.();

}}

      <div className={className("effects")} aria-hidden="true">

        <svg

          viewBox={`0 0 ${celebrationFrame.width} ${celebrationFrame.height}`}

          preserveAspectRatio="none"

          <defs>

            <linearGradient

              id={`${classNamePrefix}-gradient-${celebrationId}`}

              x1="0%"

              y1="0%"

              x2="100%"

              y2="100%"

              {gradientStops.map(({ offset, color }) => (

                <stop key={offset} offset={offset} stopColor={color} />

))}

            </linearGradient>

          </defs>

          <rect

            className={className("stroke-track")}

            x={celebrationFrame.strokeInset}

            y={celebrationFrame.strokeInset}

            width={strokeWidth}

            height={strokeHeight}

            rx={celebrationFrame.radius}

            ry={celebrationFrame.radius}

            pathLength="100"

/>

          <rect

            className={className("stroke")}

            x={celebrationFrame.strokeInset}

            y={celebrationFrame.strokeInset}

            width={strokeWidth}

            height={strokeHeight}

            rx={celebrationFrame.radius}

            ry={celebrationFrame.radius}

            pathLength="100"

            stroke={`url(#${classNamePrefix}-gradient-${celebrationId})`}

/>

          <rect

            className={className("stroke-orbit")}

            x={celebrationFrame.strokeInset}

            y={celebrationFrame.strokeInset}

            width={strokeWidth}

            height={strokeHeight}

            rx={celebrationFrame.radius}

            ry={celebrationFrame.radius}

            pathLength="100"

/>

        </svg>

      </div>

      <div className={className("copy")}>

        <span className={className("headline")} data-l10n-id={headlineL10nId} />

        <span className={className("subhead")} data-l10n-id={subheadL10nId} />

      </div>

      {resolvedIllustrationSrc && (

        <img

          alt=""

          aria-hidden="true"

          className={className("illustration")}

          src={resolvedIllustrationSrc}

/>

)}

    </div>

);

};