feat(Brand): update asset for Collective Intelligence

cultureamp · Jul 15, 2024 · 31679f8 · 31679f8
1 parent 73b6be9
commit 31679f8
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 20 deletions.
diff --git a/packages/brand/docs/Brand.stories.tsx b/packages/brand/docs/Brand.stories.tsx
@@ -43,13 +43,11 @@ const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({
       <Brand alt="Culture Amp" variant="enso" reversed={isReversed} />
     </StoryWrapper.Row>
     <StoryWrapper.Row rowTitle="Collective Intelligence">
-      <div style={{ width: "200px" }}>
-        <Brand
-          alt="Collective Intelligence"
-          variant="collective-intelligence"
-          reversed={isReversed}
-        />
-      </div>
+      <Brand
+        alt="Collective Intelligence"
+        variant="collective-intelligence"
+        reversed={isReversed}
+      />
     </StoryWrapper.Row>
   </StoryWrapper>
 )

diff --git a/packages/brand/src/Brand/Brand.tsx b/packages/brand/src/Brand/Brand.tsx
@@ -1,33 +1,71 @@
-import React, { HTMLAttributes } from "react"
+import React, { HTMLAttributes, SVGAttributes } from "react"
 import { OverrideClassName } from "@kaizen/component-base"
 import { assetUrl } from "@kaizen/hosted-assets"
+import { BrandCollectiveIntelligence } from "./BrandCollectiveIntelligence"
 import styles from "./Brand.module.scss"
 
-export interface BrandProps
-  extends OverrideClassName<HTMLAttributes<HTMLElement>> {
-  variant:
-    | "logo-horizontal"
-    | "logo-vertical"
-    | "enso"
-    | "collective-intelligence"
+type MeaningfulSVG = { role: "img"; "aria-label": string; alt?: never }
+type DecorativeSVG = { role: "presentation"; "aria-label"?: never; alt?: never }
+export type BrandSVGProps = OverrideClassName<SVGAttributes<SVGElement>> &
+  (MeaningfulSVG | DecorativeSVG)
+
+type SVGBackwardsCompatible = { role?: never; alt: string }
+type SVGProps = OverrideClassName<SVGAttributes<SVGElement>> &
+  (MeaningfulSVG | DecorativeSVG | SVGBackwardsCompatible)
+type VariantSVG = {
+  variant: "collective-intelligence"
+} & SVGProps
+
+type PictureProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
   alt: string
-  reversed?: boolean
 }
+type VariantPicture = {
+  variant: "logo-horizontal" | "logo-vertical" | "enso"
+} & PictureProps
+
+export type BrandProps = {
+  reversed?: boolean
+} & (VariantSVG | VariantPicture)
+
+const isSVG = (
+  variant: VariantSVG["variant"] | VariantPicture["variant"],
+  restProps: SVGProps | PictureProps
+): restProps is SVGProps => variant === "collective-intelligence"
 
 /**
  * @deprecated Please use the same component from `@kaizen/components`
  */
 export const Brand = ({
-  variant,
-  alt,
   reversed = false,
-  classNameOverride,
+  variant,
   ...restProps
 }: BrandProps): JSX.Element => {
+  if (isSVG(variant, restProps)) {
+    const { role, alt, "aria-label": ariaLabel, ...props } = restProps
+
+    if (role === "presentation") {
+      return <BrandCollectiveIntelligence role={role} {...props} />
+    }
+    if (role === "img") {
+      return (
+        <BrandCollectiveIntelligence
+          role={role}
+          aria-label={ariaLabel}
+          {...props}
+        />
+      )
+    }
+
+    return (
+      <BrandCollectiveIntelligence role="img" aria-label={alt} {...props} />
+    )
+  }
+
+  const { alt, classNameOverride } = restProps
   const brandTheme = reversed ? "-reversed" : "-default"
 
   return (
-    <picture className={classNameOverride} {...restProps}>
+    <picture className={classNameOverride} {...(restProps as PictureProps)}>
       <source
         srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
         media="(forced-colors: active) and (prefers-color-scheme: dark)"

diff --git a/packages/brand/src/Brand/BrandCollectiveIntelligence/BrandCollectiveIntelligence.tsx b/packages/brand/src/Brand/BrandCollectiveIntelligence/BrandCollectiveIntelligence.tsx
@@ -0,0 +1,60 @@
+import React from "react"
+import { BrandSVGProps } from "../Brand"
+
+export type BrandCollectiveIntelligenceProps = BrandSVGProps
+
+export const BrandCollectiveIntelligence = ({
+  role,
+  classNameOverride,
+  ...restProps
+}: BrandCollectiveIntelligenceProps): JSX.Element => {
+  const props = {
+    role,
+    "aria-hidden": role === "presentation" ? true : undefined,
+    className: classNameOverride,
+    ...restProps,
+  }
+
+  return (
+    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" {...props}>
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="M27.849 55.029c-1.607 0-3.15-.502-4.34-1.41l-2.94-2.235c-1.025-.78-3.201-1.658-4.479-1.802l-3.68-.423c-3.155-.363-5.847-2.995-6.262-6.12l-.484-3.646c-.169-1.267-1.086-3.418-1.888-4.422l-2.3-2.882c-1.94-2.429-1.972-6.263-.07-8.726l2.25-2.92c.784-1.015 1.667-3.178 1.815-4.452l.425-3.653c.365-3.131 3.013-5.804 6.16-6.22l3.674-.48c1.277-.169 3.44-1.08 4.445-1.874l2.906-2.288C24.289.524 25.868 0 27.521 0c1.61 0 3.15.5 4.343 1.406l2.939 2.24c1.024.777 3.201 1.655 4.479 1.799l3.68.423c3.155.363 5.846 2.995 6.261 6.12l.484 3.646c.17 1.267 1.088 3.418 1.888 4.422l2.301 2.88c1.97 2.475 2.001 6.225.073 8.727l-2.255 2.92c-.783 1.016-1.664 3.18-1.814 4.451l-.425 3.655c-.365 3.131-3.013 5.806-6.158 6.22l-3.671.482c-1.28.167-3.441 1.079-4.453 1.874L32.29 53.55c-1.21.952-2.785 1.477-4.44 1.477h-.001Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="m51.622 24.726-2.301-2.882c-1.13-1.416-2.25-4.042-2.49-5.834l-.484-3.647c-.238-1.791-1.911-3.428-3.72-3.634l-3.678-.422c-1.808-.209-4.467-1.277-5.912-2.378l-2.94-2.238c-1.443-1.1-3.792-1.08-5.216.043L21.978 6.02c-1.425 1.122-4.067 2.234-5.87 2.472l-3.672.48c-1.805.238-3.451 1.9-3.661 3.697l-.425 3.654c-.209 1.795-1.286 4.438-2.393 5.872l-2.252 2.92c-1.107 1.435-1.089 3.767.042 5.183l2.3 2.882c1.131 1.417 2.252 4.042 2.49 5.834l.484 3.646c.238 1.792 1.911 3.429 3.72 3.636l3.68.423c1.808.206 4.467 1.275 5.911 2.376l2.94 2.238c1.443 1.1 3.791 1.082 5.216-.043l2.903-2.285c1.426-1.123 4.068-2.235 5.873-2.471l3.671-.483c1.804-.236 3.45-1.9 3.658-3.694l.425-3.655c.21-1.796 1.286-4.439 2.394-5.872l2.252-2.92c1.106-1.434 1.088-3.768-.042-5.184Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#FFCA4D"
+        fillRule="evenodd"
+        d="M16.105 8.491c1.804-.236 4.446-1.35 5.873-2.472l2.903-2.286c1.425-1.122 3.773-1.142 5.217-.041l2.939 2.238c1.444 1.099 4.105 2.17 5.912 2.377l3.678.422c1.808.207 3.482 1.842 3.72 3.634l.485 3.648c.238 1.792 1.359 4.416 2.488 5.834l2.302 2.88c1.13 1.418 1.15 3.75.042 5.184l-2.252 2.92c-1.108 1.435-2.184 4.078-2.394 5.874l-.425 3.654c-.209 1.795-1.856 3.457-3.658 3.694l-3.672.482c-1.804.236-4.447 1.35-5.872 2.473l-2.902 2.285c-1.425 1.123-3.776 1.142-5.218.041l-2.94-2.238c-1.444-1.099-4.103-2.168-5.911-2.375l-3.679-.424c-1.806-.206-3.481-1.842-3.72-3.634l-.485-3.648c-.239-1.792-1.357-4.416-2.49-5.832l-2.298-2.883c-1.132-1.417-1.15-3.749-.045-5.183l2.255-2.919c1.107-1.434 2.184-4.078 2.391-5.874l.425-3.654c.21-1.796 1.858-3.458 3.661-3.694l3.67-.483Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#FFCA4D"
+        fillRule="evenodd"
+        d="M16.105 8.491c1.804-.236 4.446-1.35 5.873-2.472l2.903-2.286c1.425-1.122 3.773-1.142 5.217-.041l2.939 2.238c1.444 1.099 4.105 2.17 5.912 2.377l3.678.422c1.808.207 3.482 1.842 3.72 3.634l.485 3.648c.238 1.792 1.359 4.416 2.488 5.834l2.302 2.88c1.13 1.418 1.15 3.75.042 5.184l-2.252 2.92c-1.108 1.435-2.184 4.078-2.394 5.874l-.425 3.654c-.209 1.795-1.856 3.457-3.658 3.694l-3.672.482c-1.804.236-4.447 1.35-5.872 2.473l-2.902 2.285c-1.425 1.123-3.776 1.142-5.218.041l-2.94-2.238c-1.444-1.099-4.103-2.168-5.911-2.375l-3.679-.424c-1.806-.206-3.481-1.842-3.72-3.634l-.485-3.648c-.239-1.792-1.357-4.416-2.49-5.832l-2.298-2.883c-1.132-1.417-1.15-3.749-.045-5.183l2.255-2.919c1.107-1.434 2.184-4.078 2.391-5.874l.425-3.654c.21-1.796 1.858-3.458 3.661-3.694l3.67-.483Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#4A234D"
+        fillRule="evenodd"
+        d="M39.24 38.774c-1.214 1.212-3.587 1.325-6.513.307-.832-.29-1.68-.658-2.536-1.099a35.787 35.787 0 0 0 4.461-3.794 35.747 35.747 0 0 0 3.768-4.414c1.932 3.709 2.58 7.242.82 9Zm-16.317.307c-2.926 1.017-5.3.907-6.513-.307-1.214-1.212-1.326-3.585-.307-6.51.289-.829.66-1.678 1.098-2.532a36.016 36.016 0 0 0 3.797 4.457 35.986 35.986 0 0 0 4.46 3.793c-.855.44-1.703.81-2.535 1.1Zm-6.82-16.612c-1.02-2.924-.907-5.297.307-6.51.664-.662 1.673-.997 2.932-.997 1.041 0 2.256.228 3.581.692.832.288 1.68.657 2.534 1.096a36.243 36.243 0 0 0-4.46 3.795 36.008 36.008 0 0 0-3.796 4.456c-.439-.853-.81-1.701-1.098-2.532Zm20.9 4.898a32.31 32.31 0 0 1-4.116 5.06 32.716 32.716 0 0 1-5.062 4.163 32.72 32.72 0 0 1-5.064-4.163 32.75 32.75 0 0 1-4.166-5.06 32.778 32.778 0 0 1 4.166-5.061 32.79 32.79 0 0 1 5.064-4.163c1.73 1.142 3.447 2.548 5.062 4.163a32.335 32.335 0 0 1 4.115 5.061Zm-4.276-11.713c1.326-.464 2.538-.692 3.58-.692 1.26 0 2.27.335 2.934.997 1.759 1.758 1.111 5.29-.821 9a35.851 35.851 0 0 0-3.768-4.414 36.04 36.04 0 0 0-4.46-3.795c.855-.44 1.703-.808 2.535-1.096Zm8.277-1.457c-1.946-1.942-5.176-2.26-9.097-.898-1.338.467-2.711 1.114-4.082 1.913-1.371-.8-2.744-1.446-4.082-1.913-3.921-1.363-7.152-1.044-9.097.899-1.944 1.942-2.263 5.172-.898 9.09.466 1.338 1.113 2.71 1.913 4.08-.8 1.37-1.447 2.741-1.913 4.079-1.365 3.918-1.046 7.146.898 9.09 1.151 1.148 2.752 1.73 4.68 1.73 1.33 0 2.816-.278 4.417-.833 1.338-.466 2.71-1.112 4.082-1.912 1.371.8 2.744 1.446 4.082 1.912 1.6.556 3.087.834 4.416.834 1.93 0 3.53-.583 4.68-1.732 2.686-2.683 2.11-7.802-1.019-13.169 3.13-5.366 3.705-10.488 1.02-13.17Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#5F3361"
+        fillRule="evenodd"
+        d="M32 26.95c-.078.03-.127.217-.116.37.038.5.082 1.068-.285 1.935-.174.412-.487.843-.907 1.243-.529.505-.971.618-1.084.618-.04 0-.064-.013-.071-.039-.003-.008-.01-.034.023-.059l.094-.067c.224-.16.285-.202.525-.412.383-.33.93-1.13 1.017-1.387.107-.312.2-.785.166-1.134-.021-.22-.068-.29-.078-.295-.039.006-.122.12-.171.31-.045.17-.106.371-.164.563-.162.537-.326.733-.486.923l-.098.12c-.281.365-.645.563-.731.563-.038 0-.05-.026-.054-.035-.013-.035.016-.068.061-.108.116-.097.51-.465.685-1.086.029-.105 0-.215-.02-.225 0 0-.037.01-.095.153-.122.3-.143.33-.336.61-.24.35-.674.7-.879.799-.323.152-.673.23-1.041.23-.219 0-.451-.027-.684-.08-.524-.123-1.142-.639-1.18-.679a3.352 3.352 0 0 1-.455-.576c-.288-.511-.411-1.007-.366-1.472.047-.48.14-.854.47-1.235.321-.377.61-.63 1.12-.808.254-.089.574-.14.898-.14.454 0 .86.099 1.116.264.444.29.603.441.998.834.178.177.457.284.738.284.212 0 .415-.056.606-.169.381-.224.599-.514.648-.862.106-.752-.589-1.491-.596-1.498a6.458 6.458 0 0 0-.477-.453c-.001-.185-.21-.33-.21-.33a4.134 4.134 0 0 0-2.681-.787 6.647 6.647 0 0 0-1.505.214c-1.228.28-2.2.968-2.899 2.05-.493.577-.677 1.465-.73 2.188-.06.782.246 1.954.413 2.111a.58.58 0 0 0 .313.169c.094.203.197.413.24.474l.095.137c.197.286.401.583.674.82.451.387.854.601 1.4.839.54.236.956.336 1.484.354.186.009.315.012.43.012.421 0 .724-.045 1.16-.164a5.244 5.244 0 0 0 1.336-.59c.17-.107.695-.577.876-.787a4.16 4.16 0 0 0 .706-1.215c.389-1.109.309-1.715.255-2.121-.033-.258-.098-.373-.148-.373Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+BrandCollectiveIntelligence.displayName = "Brand.CollectiveIntelligence"
diff --git a/packages/brand/src/Brand/BrandCollectiveIntelligence/index.ts b/packages/brand/src/Brand/BrandCollectiveIntelligence/index.ts
@@ -0,0 +1 @@
+export * from "./BrandCollectiveIntelligence"