@kaizen/components 1.61.2 → 1.62.0

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss

@@ -1,356 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../../../../styles/utils/responsive";
-@import "../../../../styles/utils/button-reset";
-
-@mixin guidance-block-under-480 {
-  @media (max-width: 480px) {
-    @content;
-  }
-}
-
-$bannerPadding: $spacing-lg;
-$ca-banner-fade-out: opacity $animation-duration-slow ease;
-$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
-  $animation-duration-slow ease;
-$illustration-size: 155px;
-$scene-illustration-size: 300px;
-
-.rightMargin {
-  margin-right: $spacing-8;
-}
-
-.noRightMargin {
-  margin-right: 0;
-}
-
-.banner.noMaxWidth {
-  max-width: inherit;
-}
-
-.banner {
-  --border-width: var(--border-width-1);
-
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-  min-width: 320px;
-  max-width: $layout-breakpoints-large;
-  border: var(--border-width) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
-  padding: calc(#{$bannerPadding} - var(--border-width));
-  box-shadow: $shadow-small-box-shadow;
-  position: relative;
-  top: -1px;
-  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
-  color: $color-purple-800;
-
-  @include ca-media-desktop {
-    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
-    flex-direction: row;
-    gap: $spacing-md;
-    width: auto;
-    align-items: center;
-  }
-
-  @include ca-media-mobile {
-    min-width: unset;
-  }
-}
-
-.illustrationWrapper {
-  display: flex;
-
-  @include ca-media-tablet {
-    text-align: center;
-    justify-content: center;
-    align-self: center;
-    padding: $spacing-sm;
-  }
-
-  @include ca-media-mobile {
-    display: none;
-  }
-}
-
-.illustration {
-  width: $illustration-size;
-  height: $illustration-size;
-
-  // This has been created to handle scene illustrations consistently until the tile component is created
-  .hasSceneIllustration & {
-    display: flex;
-    justify-content: center;
-    max-width: $scene-illustration-size;
-    max-height: $scene-illustration-size;
-    width: $scene-illustration-size;
-    height: auto;
-
-    figure {
-      max-height: 100%;
-      max-width: 100%;
-      aspect-ratio: 4/3;
-    }
-
-    img {
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
-    }
-  }
-}
-
-.descriptionContainer {
-  flex: 1;
-  text-align: center;
-  align-self: center;
-  max-width: 780px;
-
-  @include ca-media-desktop {
-    padding: 0 $spacing-sm;
-    text-align: left;
-  }
-
-  @include ca-media-mobile {
-    margin: $spacing-sm;
-    max-width: 100%;
-  }
-
-  [dir="rtl"] & {
-    @include ca-media-desktop {
-      padding: 0 $spacing-sm;
-      text-align: right;
-    }
-  }
-}
-
-.descriptionAndActions {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
-
-  @include ca-media-tablet-and-under {
-    flex-direction: column;
-    width: 100%;
-    align-items: unset;
-  }
-}
-
-.buttonContainer {
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: center;
-  flex-direction: row-reverse;
-  gap: $spacing-sm;
-  min-width: max-content;
-
-  @include ca-media-tablet-and-up {
-    text-align: center;
-  }
-
-  @include ca-media-mobile {
-    flex-direction: column;
-    width: 100%;
-    margin-top: $spacing-xs;
-  }
-
-  [dir="rtl"] & svg {
-    transform: rotate(180deg);
-  }
-}
-
-.hidden {
-  opacity: 0%;
-  margin-bottom: 0;
-}
-
-.headingWrapper {
-  margin-bottom: $spacing-md;
-}
-
-.cancel {
-  @include button-reset;
-
-  cursor: pointer;
-
-  .icon {
-    opacity: 70%;
-    transition: $animation-duration-fast opacity;
-  }
-
-  &:disabled,
-  &.disabled {
-    .icon {
-      opacity: 30%;
-    }
-  }
-
-  &:not(:disabled, .disabled) {
-    &:hover,
-    &:focus,
-    &.hover {
-      .icon {
-        opacity: 100%;
-      }
-    }
-
-    &:active,
-    &.active {
-      .icon {
-        opacity: 100%;
-      }
-    }
-  }
-
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
-}
-
-.default {
-  border-color: var(--color-gray-500);
-  background: var(--color-white);
-}
-
-.expert-advice {
-  border-color: var(--color-purple-400);
-  background: $color-purple-100;
-}
-
-.inline,
-.stacked {
-  flex-flow: row wrap;
-  align-items: unset;
-  gap: $spacing-md;
-  min-width: unset;
-
-  @include ca-media-tablet-and-under {
-    flex-direction: unset;
-  }
-
-  .illustrationWrapper {
-    margin-right: $spacing-sm;
-
-    [dir="rtl"] & {
-      margin-left: $spacing-sm;
-      margin-right: inherit;
-    }
-
-    @include ca-media-tablet {
-      padding: 0;
-    }
-
-    @include ca-media-mobile {
-      display: flex;
-    }
-  }
-
-  .descriptionAndActions {
-    margin: auto 0;
-  }
-
-  .descriptionContainer {
-    text-align: left;
-    max-width: unset;
-    min-width: 320px;
-
-    @include ca-media-desktop {
-      padding: 0;
-    }
-
-    @include ca-media-mobile {
-      margin: 0;
-    }
-
-    [dir="rtl"] & {
-      text-align: right;
-
-      @include ca-media-desktop {
-        padding: 0;
-      }
-    }
-  }
-
-  .buttonContainer {
-    padding-left: $spacing-sm;
-    justify-content: flex-start;
-    width: unset;
-    min-width: unset;
-
-    @include ca-media-mobile {
-      flex-direction: row-reverse;
-    }
-
-    [dir="rtl"] & {
-      padding-left: 0;
-      padding-right: $spacing-sm;
-    }
-
-    > * {
-      width: unset;
-    }
-  }
-
-  &.hasSceneIllustration {
-    justify-content: center;
-  }
-
-  &.centerContent {
-    flex-direction: column;
-
-    &.hasSceneIllustration .illustration {
-      width: 100%;
-    }
-
-    .illustrationWrapper {
-      margin: 0 auto;
-      align-self: center;
-    }
-
-    .descriptionContainer {
-      text-align: center;
-      min-width: unset;
-
-      [dir="rtl"] & {
-        text-align: center;
-      }
-    }
-
-    .buttonContainer {
-      padding: 0;
-      flex-direction: column;
-      min-width: unset;
-      justify-content: center;
-    }
-  }
-
-  &.centerContent.smallScreenTextAlignment {
-    .descriptionContainer {
-      text-align: left;
-
-      [dir="rtl"] & {
-        text-align: right;
-      }
-    }
-  }
-}
-
-/* stylelint-disable no-descending-specificity */
-.stacked {
-  .descriptionAndActions {
-    flex-direction: column;
-    align-items: unset;
-  }
-
-  .descriptionContainer {
-    align-self: flex-start;
-  }
-}
-/* stylelint-enable no-descending-specificity */

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.spec.tsx

@@ -1,82 +0,0 @@
-import React from "react"
-import { cleanup, render, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { vi } from "vitest"
-import { Informative } from "~components/Illustration"
-import { GuidanceBlock } from "./GuidanceBlock"
-const user = userEvent.setup()
-
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-window.matchMedia = vi.fn().mockImplementation(() => ({
-  matches: false,
-  media: "",
-  onchange: null,
-  addListener: vi.fn(),
-  removeListener: vi.fn(),
-}))
-
-describe("GuidanceBlock", () => {
-  afterEach(cleanup)
-
-  it("calls the action function when action button is clicked", async () => {
-    const onAction = vi.fn()
-    const { container } = render(
-      <GuidanceBlock
-        illustration={<Informative alt="" />}
-        text={{
-          title: "This is the call to action title",
-          description:
-            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
-        }}
-        actions={{
-          primary: { label: "Action!", onClick: onAction },
-        }}
-      />
-    )
-    const actionButton = container.querySelector("button")
-    actionButton && (await user.click(actionButton))
-
-    await waitFor(() => {
-      expect(onAction).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it("has a default title tag of h3", () => {
-    const { getByRole } = render(
-      <GuidanceBlock
-        illustration={<Informative alt="" />}
-        text={{
-          title: "This is the call to action title",
-          description:
-            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
-        }}
-      />
-    )
-    expect(
-      getByRole("heading", {
-        level: 3,
-        name: "This is the call to action title",
-      })
-    ).toBeInTheDocument()
-  })
-
-  it("can allow the user to override the title tag", () => {
-    const { getByRole } = render(
-      <GuidanceBlock
-        illustration={<Informative alt="" />}
-        text={{
-          title: "This is the call to action title",
-          description:
-            "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.",
-          titleTag: "h2",
-        }}
-      />
-    )
-    expect(
-      getByRole("heading", {
-        level: 2,
-        name: "This is the call to action title",
-      })
-    ).toBeInTheDocument()
-  })
-})

package/src/__containers__/GuidanceBlock/v2/GuidanceBlock.tsx

@@ -1,262 +0,0 @@
-import React, { useEffect, useState } from "react"
-import classNames from "classnames"
-import Media from "react-media"
-import { Heading, HeadingProps } from "~components/Heading"
-import { ArrowForwardIcon } from "~components/Icon"
-import { SceneProps, SpotProps } from "~components/Illustration"
-import { Text } from "~components/Text"
-import { Button, ButtonProps } from "~components/__actions__/v2"
-import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
-import styles from "./GuidanceBlock.module.scss"
-
-export type ActionProps = ButtonProps & {
-  tooltip?: TooltipProps
-}
-
-type LayoutType = "default" | "inline" | "stacked"
-
-type IllustrationType = "spot" | "scene"
-
-type TextAlignment = "center" | "left"
-
-type GuidanceBlockActions = {
-  primary: ActionProps
-  secondary?: ActionProps
-  dismiss?: {
-    onClick: () => void
-  }
-}
-
-type BaseGuidanceBlockProps = {
-  layout?: LayoutType
-  illustration: React.ReactElement<SpotProps | SceneProps>
-  /*
-   * Sets how the width and aspect ratio will respond to the Illustration passed in.
-   */
-  illustrationType?: IllustrationType
-
-  smallScreenTextAlignment?: TextAlignment
-  actions?: GuidanceBlockActions
-  /*
-   * This will still require the secondary object to be passed into the actions ie: {secondary: { label: "Dismiss action" }}`
-   */
-  secondaryDismiss?: boolean
-  /**
-   * If you are migrating from the KAIO v1:
-   * - `prominent` is now `expert-advice`
-   * - All other variants are removed in favour of `default`
-   */
-  variant?: "default" | "expert-advice"
-  withActionButtonArrow?: boolean
-  noMaxWidth?: boolean
-}
-
-type GuidanceBlockWithText = {
-  text: {
-    title: string
-    titleTag?: HeadingProps["tag"]
-    description: string | React.ReactNode
-  }
-} & BaseGuidanceBlockProps
-
-type GuidanceBlockPropsWithContent = {
-  content: React.ReactElement
-} & BaseGuidanceBlockProps
-
-export type GuidanceBlockProps =
-  | GuidanceBlockWithText
-  | GuidanceBlockPropsWithContent
-
-export type GuidanceBlockState = {
-  hidden: boolean
-  removed: boolean
-  mediaQueryLayout: string
-}
-
-type WithTooltipProps = {
-  children: React.ReactNode
-  tooltipProps?: TooltipProps
-}
-
-const WithTooltip = ({
-  tooltipProps,
-  children,
-}: WithTooltipProps): JSX.Element =>
-  !!tooltipProps ? (
-    <Tooltip {...tooltipProps}>{children}</Tooltip>
-  ) : (
-    <>{children}</>
-  )
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
- */
-export const GuidanceBlock = ({
-  layout = "default",
-  variant = "default",
-  withActionButtonArrow = true,
-  noMaxWidth = false,
-  illustrationType = "spot",
-  smallScreenTextAlignment = "center",
-  actions,
-  illustration,
-  secondaryDismiss,
-  ...restProps
-}: GuidanceBlockProps): JSX.Element => {
-  const [hidden, setHidden] = useState<boolean>(false)
-  const [removed, setRemoved] = useState<boolean>(false)
-  const [mediaQueryLayout, setMediaQueryLayout] = useState<string>("")
-
-  const containerRef = React.createRef<HTMLDivElement>()
-
-  useEffect(() => {
-    if (layout === "inline" || layout === "stacked") {
-      containerQuery()
-    }
-  }, [])
-
-  const handleDismissBanner = (): void => {
-    setHidden(true)
-    actions?.dismiss?.onClick()
-  }
-
-  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {
-    // Be careful: this assumes the final CSS property to be animated is "margin-top".
-    if (hidden && e.propertyName === "margin-top") {
-      setRemoved(true)
-    }
-  }
-
-  const containerQuery = (): void => {
-    const resizeObserver = new ResizeObserver(entries => {
-      if (entries.length === 1) {
-        handleMediaQueryLayout(entries[0].contentRect.width)
-      }
-    })
-
-    resizeObserver.observe(containerRef.current as HTMLElement)
-  }
-
-  const handleMediaQueryLayout = (width: number): void => {
-    if (width <= 320) {
-      setMediaQueryLayout("centerContent")
-    } else {
-      setMediaQueryLayout("")
-    }
-  }
-
-  const marginTop = (): string => {
-    if (hidden && containerRef.current) {
-      return -containerRef.current.clientHeight + "px"
-    }
-
-    return "0"
-  }
-
-  if (removed) {
-    return <></>
-  }
-
-  const componentIsMobile = mediaQueryLayout.includes("centerContent")
-
-  return (
-    <div
-      className={classNames(
-        styles.banner,
-        variant && styles[variant],
-        layout && styles[layout],
-        hidden && styles.hidden,
-        mediaQueryLayout === "centerContent" && styles.centerContent,
-        noMaxWidth && styles.noMaxWidth,
-        illustrationType === "scene" && styles.hasSceneIllustration,
-        smallScreenTextAlignment === "left" && styles.smallScreenTextAlignment
-      )}
-      style={{
-        marginTop: marginTop(),
-      }}
-      ref={containerRef}
-      onTransitionEnd={onTransitionEnd}
-    >
-      <div className={styles.illustrationWrapper}>
-        <div className={styles.illustration}>
-          {illustrationType === "scene"
-            ? React.cloneElement(illustration, { enableAspectRatio: true })
-            : illustration}
-        </div>
-      </div>
-      <div className={styles.descriptionAndActions}>
-        <div className={styles.descriptionContainer}>
-          {"content" in restProps && restProps.content}
-          {"text" in restProps && (
-            <>
-              <div className={styles.headingWrapper}>
-                <Heading
-                  tag={restProps?.text?.titleTag ?? "h3"}
-                  variant="heading-3"
-                >
-                  {restProps?.text?.title}
-                </Heading>
-              </div>
-              <Text tag="p" variant="body">
-                {restProps?.text?.description}
-              </Text>
-            </>
-          )}
-        </div>
-        {actions?.primary && (
-          <Media query="(max-width: 767px)">
-            {(isMobile: boolean): JSX.Element => (
-              <div
-                className={classNames({
-                  noRightMargin: isMobile || componentIsMobile,
-                  rightMargin:
-                    !(isMobile || componentIsMobile) && layout === "default",
-                })}
-              >
-                <div
-                  className={classNames(
-                    styles.buttonContainer,
-                    actions?.secondary && styles.secondaryAction
-                  )}
-                >
-                  <WithTooltip tooltipProps={actions.primary.tooltip}>
-                    <Button
-                      icon={
-                        withActionButtonArrow ? (
-                          <ArrowForwardIcon role="presentation" />
-                        ) : undefined
-                      }
-                      iconPosition="end"
-                      {...actions.primary}
-                      fullWidth={isMobile || componentIsMobile}
-                    />
-                  </WithTooltip>
-
-                  {actions?.secondary && (
-                    <WithTooltip tooltipProps={actions.secondary.tooltip}>
-                      <div className={styles.secondaryAction}>
-                        <Button
-                          secondary
-                          {...actions.secondary}
-                          onClick={
-                            secondaryDismiss
-                              ? (): void => handleDismissBanner()
-                              : actions?.secondary?.onClick
-                          }
-                          fullWidth={isMobile || componentIsMobile}
-                        />
-                      </div>
-                    </WithTooltip>
-                  )}
-                </div>
-              </div>
-            )}
-          </Media>
-        )}
-      </div>
-    </div>
-  )
-}
-
-GuidanceBlock.displayName = "GuidanceBlock"