From d5fe6e6c14d848ae7bdff623cd46bdd70f0b3886 Mon Sep 17 00:00:00 2001 From: Cassandra Date: Mon, 15 Jul 2024 10:13:09 +1000 Subject: [PATCH] feat(Brand): update asset for collective intelligence (#4796) * chore(prettier): lint mjs files * test(ExpertAdviceCollapsible): disable chromatic snapshot for playground * feat(Brand): update source image for Collective Intelligence --------- Co-authored-by: Geoffrey Chong --- .changeset/wise-plums-lay.md | 5 ++ .prettierignore | 1 + packages/components/rollup.config.mjs | 4 +- packages/components/src/Brand/Brand.tsx | 63 +++++++++++++++---- .../BrandCollectiveIntelligence.tsx | 60 ++++++++++++++++++ .../BrandCollectiveIntelligence/index.ts | 1 + .../_docs/Brand.stickersheet.stories.tsx | 12 ++-- .../_docs/ExpertAdviceCollapsible.stories.tsx | 1 - 8 files changed, 125 insertions(+), 22 deletions(-) create mode 100644 .changeset/wise-plums-lay.md create mode 100644 packages/components/src/Brand/BrandCollectiveIntelligence/BrandCollectiveIntelligence.tsx create mode 100644 packages/components/src/Brand/BrandCollectiveIntelligence/index.ts diff --git a/.changeset/wise-plums-lay.md b/.changeset/wise-plums-lay.md new file mode 100644 index 00000000000..e5925d2fc4a --- /dev/null +++ b/.changeset/wise-plums-lay.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": patch +--- + +Update source image for Brand Collective Intelligence diff --git a/.prettierignore b/.prettierignore index 62c93b6f426..1771e511616 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,6 +6,7 @@ !*.ts !*.tsx !*.js +!*.mjs !*.json !*.yaml !*.yml diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 2004ea63c79..0cb81646bf0 100644 --- a/packages/components/rollup.config.mjs +++ b/packages/components/rollup.config.mjs @@ -1,4 +1,4 @@ -import { pluginsSharedUi, rollupConfig } from "@kaizen/package-bundler"; +import { pluginsSharedUi, rollupConfig } from "@kaizen/package-bundler" export default rollupConfig({ input: { @@ -10,7 +10,7 @@ export default rollupConfig({ utilitiesV3: "./src/__utilities__/v3.ts", reactAriaV3: "./src/__react-aria__/index.ts", reactAriaComponentsV3: "./src/__react-aria-components__/index.ts", - }, + }, plugins: pluginsSharedUi, alias: { entries: [ diff --git a/packages/components/src/Brand/Brand.tsx b/packages/components/src/Brand/Brand.tsx index 73ef18d9f54..d9b77ff4fb0 100644 --- a/packages/components/src/Brand/Brand.tsx +++ b/packages/components/src/Brand/Brand.tsx @@ -1,29 +1,68 @@ -import React, { HTMLAttributes } from "react" +import React, { HTMLAttributes, SVGAttributes } from "react" import { assetUrl } from "@kaizen/hosted-assets" import { OverrideClassName } from "~types/OverrideClassName" +import { BrandCollectiveIntelligence } from "./BrandCollectiveIntelligence" import styles from "./Brand.module.scss" -export type BrandProps = { - 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> & + (MeaningfulSVG | DecorativeSVG) + +type SVGBackwardsCompatible = { role?: never; alt: string } +type SVGProps = OverrideClassName> & + (MeaningfulSVG | DecorativeSVG | SVGBackwardsCompatible) +type VariantSVG = { + variant: "collective-intelligence" +} & SVGProps + +type PictureProps = OverrideClassName> & { alt: string +} +type VariantPicture = { + variant: "logo-horizontal" | "logo-vertical" | "enso" +} & PictureProps + +export type BrandProps = { reversed?: boolean -} & OverrideClassName> +} & (VariantSVG | VariantPicture) + +const isSVG = ( + variant: VariantSVG["variant"] | VariantPicture["variant"], + restProps: SVGProps | PictureProps +): restProps is SVGProps => variant === "collective-intelligence" 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 + } + if (role === "img") { + return ( + + ) + } + + return ( + + ) + } + + const { alt, classNameOverride } = restProps const brandTheme = reversed ? "-reversed" : "-default" return ( - + { + const props = { + role, + "aria-hidden": role === "presentation" ? true : undefined, + className: classNameOverride, + ...restProps, + } + + return ( + + + + + + + + + ) +} + +BrandCollectiveIntelligence.displayName = "Brand.CollectiveIntelligence" diff --git a/packages/components/src/Brand/BrandCollectiveIntelligence/index.ts b/packages/components/src/Brand/BrandCollectiveIntelligence/index.ts new file mode 100644 index 00000000000..18225d8781e --- /dev/null +++ b/packages/components/src/Brand/BrandCollectiveIntelligence/index.ts @@ -0,0 +1 @@ +export * from "./BrandCollectiveIntelligence" diff --git a/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx b/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx index 236d06f4a8c..2194dca1bde 100644 --- a/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx +++ b/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx @@ -36,13 +36,11 @@ const StickerSheetTemplate: StickerSheetStory = { -
- -
+ diff --git a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stories.tsx b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stories.tsx index 1e13eb571eb..16f727b3a7e 100644 --- a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stories.tsx +++ b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stories.tsx @@ -6,7 +6,6 @@ import { ExpertAdviceCollapsible } from "../index" const meta = { title: "Components/Collapsibles/ExpertAdviceCollapsible", component: ExpertAdviceCollapsible, - parameters: { chromatic: { disable: false } }, args: { title: "Expert advice collapsible", children: (