Migrate-brandmoment-kaio (#3907)

* add BrandMoment to kaio * add changeset * fix missing dep * add dev dep for test * fix yarn lock * kill spec * remove hosted assets * fix * Replace Box usages with classNameOverrides and remove Box code (#3908) * fix yarn lock * fix style lint --------- Co-authored-by: Doug MacKenzie <doug.mackenzie@cultureamp.com>
cultureamp · Jul 25, 2023 · b5eece4 · b5eece4
1 parent ce0642a
commit b5eece4
Show file tree

Hide file tree

Showing 5 changed files with 339 additions and 0 deletions.
diff --git a/.changeset/slow-seahorses-thank.md b/.changeset/slow-seahorses-thank.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Add BrandMoment
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -46,12 +46,14 @@
     "@kaizen/draft-badge": "^1.13.12",
     "@kaizen/draft-divider": "^2.2.10",
     "@kaizen/draft-form": "^10.4.8",
+    "@kaizen/draft-illustration": "^7.0.0",
     "@kaizen/draft-menu": "^5.0.2",
     "@kaizen/draft-tag": "^3.4.16",
     "@kaizen/draft-tooltip": "^5.4.47",
     "@kaizen/hosted-assets": "^2.0.2",
     "@kaizen/loading-skeleton": "^2.0.7",
     "@kaizen/loading-spinner": "^2.3.11",
+    "@kaizen/responsive": "^1.8.10",
     "@kaizen/typography": "^2.3.10",
     "@popperjs/core": "^2.11.8",
     "@react-aria/button": "^3.8.0",

diff --git a/packages/components/src/BrandMoment/BrandMoment.module.scss b/packages/components/src/BrandMoment/BrandMoment.module.scss
@@ -0,0 +1,200 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+
+$breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and replace this out
+
+// --------------------------------
+// Body
+// --------------------------------
+.body {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: $spacing-lg;
+
+  &.informative {
+    background: $color-blue-100;
+  }
+
+  &.positive {
+    background: $color-green-100;
+  }
+
+  &.negative {
+    background: $color-red-100;
+  }
+}
+
+// --------------------------------
+// Reusable container
+// --------------------------------
+.container {
+  max-width: $layout-content-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-md;
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .container {
+    padding: 0 $spacing-xxl;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .container {
+    padding: 0 $spacing-xxxxl;
+  }
+}
+
+// --------------------------------
+// Header
+// --------------------------------
+.header {
+  inline-size: 100%;
+  margin-block-end: $spacing-md;
+}
+
+// --------------------------------
+// Main
+// --------------------------------
+.main {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  margin-block-end: $spacing-xxl;
+}
+
+.mainInner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-xl $spacing-lg;
+  align-items: center;
+}
+
+@media (min-width: $layout-breakpoints-medium) {
+  .mainInner {
+    row-gap: $spacing-xxl;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .mainInner {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .mainInner {
+    column-gap: $spacing-xxxxl;
+  }
+}
+
+.left {
+  display: flex;
+  justify-content: center;
+}
+
+.leftInner {
+  width: 100%;
+  max-width: 525px;
+}
+
+.right {
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rightInner {
+  max-width: 543px;
+}
+
+.subtitle {
+  margin-bottom: $spacing-12;
+}
+
+.title {
+  margin-bottom: $spacing-lg;
+}
+
+.secondaryAction {
+  margin-block-start: $spacing-sm;
+}
+
+@media (min-width: $layout-breakpoints-medium) {
+  .actions {
+    display: flex;
+  }
+
+  .secondaryAction {
+    margin-block-start: 0;
+    margin-inline-start: $spacing-sm;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .left {
+    justify-content: flex-end;
+  }
+
+  .right {
+    align-items: flex-start;
+  }
+}
+
+// --------------------------------
+// Footer
+// --------------------------------
+.footer {
+  flex: 0 0 auto;
+}
+
+.footerInner {
+  display: flex;
+  flex-direction: column;
+  border-block-start: 1px solid $color-purple-800;
+  border-inline-start: 1px solid $color-purple-800;
+  padding: $spacing-sm $spacing-md;
+  margin-block-end: $spacing-lg;
+}
+
+.poweredByContainer {
+  flex: 0 0 auto;
+  order: 2;
+  display: flex;
+}
+
+.footerTextContainer {
+  flex: 1 1 auto;
+  order: 1;
+  margin-block-end: $spacing-md;
+}
+
+.poweredByLogo {
+  margin-inline-start: $spacing-xs;
+
+  > img {
+    max-width: 133px;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .footerInner {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .footerTextContainer {
+    order: initial;
+    margin-block-end: 0;
+    margin-inline-start: $spacing-md;
+  }
+
+  .poweredByContainer {
+    order: initial;
+  }
+}
diff --git a/packages/components/src/BrandMoment/BrandMoment.tsx b/packages/components/src/BrandMoment/BrandMoment.tsx
@@ -0,0 +1,131 @@
+import React, { ReactNode, ReactElement, HTMLAttributes } from "react"
+import classnames from "classnames"
+import { SceneProps } from "@kaizen/draft-illustration"
+import { assetUrl } from "@kaizen/hosted-assets"
+import { useMediaQueries } from "@kaizen/responsive"
+import { Heading, Paragraph } from "@kaizen/typography"
+import { Button, ButtonProps } from "~components/Button"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./BrandMoment.module.scss"
+
+export interface BrandMomentProps
+  extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+  mood: "informative" | "positive" | "negative"
+  illustration: ReactElement<SceneProps>
+  header: ReactNode
+  body?: ReactNode
+  primaryAction?: ButtonProps
+  secondaryAction?: ButtonProps
+  text: {
+    title: ReactNode
+    subtitle?: ReactNode
+    body?: ReactNode
+    footer?: ReactNode
+  }
+}
+
+export const BrandMoment = ({
+  mood,
+  illustration,
+  header,
+  body,
+  primaryAction,
+  secondaryAction,
+  text,
+  classNameOverride,
+  ...restProps
+}: BrandMomentProps): JSX.Element => {
+  const { queries } = useMediaQueries()
+
+  return (
+    <div
+      className={classnames(styles.body, styles[mood], classNameOverride)}
+      {...restProps}
+    >
+      <header className={styles.header}>{header}</header>
+      <main className={styles.main}>
+        <div className={styles.container}>
+          <div className={styles.mainInner}>
+            <div className={styles.left}>
+              <div className={styles.leftInner}>{illustration}</div>
+            </div>
+            <div className={styles.right}>
+              <div className={styles.rightInner}>
+                {text.subtitle && (
+                  <Heading
+                    variant="heading-3"
+                    tag="h1"
+                    classNameOverride={styles.subtitle}
+                  >
+                    {text.subtitle}
+                  </Heading>
+                )}
+                <Heading
+                  variant="display-0"
+                  tag={text.subtitle ? "h2" : "h1"}
+                  classNameOverride={styles.title}
+                >
+                  {text.title}
+                </Heading>
+                {text.body && (
+                  <Paragraph
+                    variant="intro-lede"
+                    classNameOverride={styles.body}
+                  >
+                    {text.body}
+                  </Paragraph>
+                )}
+                {body && <div className={styles.body}>{body}</div>}
+                <div className={styles.actions}>
+                  {primaryAction && (
+                    <Button
+                      primary
+                      fullWidth={queries.isSmall}
+                      {...primaryAction}
+                    />
+                  )}
+                  {secondaryAction && (
+                    <div className={styles.secondaryAction}>
+                      <Button
+                        secondary
+                        fullWidth={queries.isSmall}
+                        {...secondaryAction}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      {text.footer && (
+        <footer className={styles.footer}>
+          <div className={styles.container}>
+            <div className={styles.footerInner}>
+              <div className={styles.poweredByContainer}>
+                <Paragraph variant="extra-small" color="dark-reduced-opacity">
+                  Powered by
+                </Paragraph>
+                <a
+                  href="https://www.cultureamp.com"
+                  className={styles.poweredByLogo}
+                >
+                  <img
+                    src={assetUrl("brand/logo-horizontal-default.svg")}
+                    alt="Culture Amp"
+                  />
+                </a>
+              </div>
+              <div className={styles.footerTextContainer}>
+                <Paragraph variant="extra-small">{text.footer}</Paragraph>
+              </div>
+            </div>
+          </div>
+        </footer>
+      )}
+    </div>
+  )
+}
+
+BrandMoment.displayName = "BrandMoment"
diff --git a/packages/components/src/BrandMoment/index.ts b/packages/components/src/BrandMoment/index.ts
@@ -0,0 +1 @@
+export * from "./BrandMoment"