@kaizen/components 1.61.2 → 1.62.0

package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as GuidanceBlockStories from "./GuidanceBlock.stories"
-
-<Meta of={GuidanceBlockStories} />
-
-# GuidanceBlock (V2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/GuidanceBlock"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=622%3A149926&t=P1w10jr2cpPuaayw-1"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block"
-
-/>
-
-<KAIOInstallation exportNames="GuidanceBlock" version="2" family="containers" />
-
-## Overview
-
-A Guidance Block provides a familiar layout that is visually prominent to draw attention to related content.
-It guides people to new actions they haven't done before or connects them to relevant content they can view on another page.
-
-<Canvas of={GuidanceBlockStories.Playground} />
-<Controls of={GuidanceBlockStories.Playground} />
-
-## API
-
-<DocsStory of={GuidanceBlockStories.Actions} />
-
-<DocsStory of={GuidanceBlockStories.Tooltip} />
-
-<DocsStory of={GuidanceBlockStories.CustomContent} />
-
-<DocsStory of={GuidanceBlockStories.Stacked} />
-
-<DocsStory of={GuidanceBlockStories.SceneExample} />
-
-<DocsStory of={GuidanceBlockStories.Variants} />

package/src/__containers__/GuidanceBlock/v2/_docs/GuidanceBlock.stickersheet.stories.tsx

@@ -1,118 +0,0 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { EmptyStatesPositive, Informative } from "~components/Illustration"
-import { Tag } from "~components/Tag"
-import { Text } from "~components/Text"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { GuidanceBlock, GuidanceBlockProps } from "../index"
-
-export default {
-  title: "Containers/GuidanceBlock/v2",
-  parameters: {
-    chromatic: { disable: false },
-    controls: { disable: true },
-  },
-} satisfies Meta
-
-const GENERIC_PROPS = {
-  persistent: true,
-  illustration: <Informative alt="" />,
-  actions: {
-    primary: {
-      label: "Action",
-      onClick: () => {
-        alert("tada: 🎉")
-      },
-    },
-    secondary: {
-      label: "Pass",
-      onClick: () => {
-        alert("tada: 🎉")
-      },
-    },
-  },
-}
-
-const TEXT_PROPS: GuidanceBlockProps = {
-  ...GENERIC_PROPS,
-  text: {
-    title: "This is the Guidance block title",
-    description:
-      "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis, " +
-      "qui tem lupuliz, matis, aguis e fermentis. Mé faiz elementum girarzis, nisi eros vermeio.",
-  },
-}
-
-const CONTENT_PROPS: GuidanceBlockProps = {
-  ...GENERIC_PROPS,
-  content: (
-    <>
-      <Tag>Early Access</Tag>
-      <Heading variant="heading-3">{TEXT_PROPS.text.title}</Heading>
-      <Text variant="body">{TEXT_PROPS.text.description}</Text>
-    </>
-  ),
-}
-
-const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <GuidanceBlock {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Expert advice">
-          <GuidanceBlock variant="expert-advice" {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="No arrow">
-          <GuidanceBlock withActionButtonArrow={false} {...TEXT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Custom Content">
-          <GuidanceBlock {...CONTENT_PROPS} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Tooltip">
-          <GuidanceBlock
-            {...TEXT_PROPS}
-            actions={{
-              primary: {
-                ...GENERIC_PROPS.actions.primary,
-                tooltip: {
-                  text: "Opens in a new tab",
-                  mood: "cautionary",
-                  isInitiallyVisible: true,
-                },
-              },
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Scene Illustration">
-          <GuidanceBlock
-            {...TEXT_PROPS}
-            illustration={<EmptyStatesPositive alt="" />}
-            illustrationType="scene"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="No Max Width">
-          <GuidanceBlock {...TEXT_PROPS} noMaxWidth />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
-}
-
-export const StickerSheetDefault: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
-}
-
-export const StickerSheetRTL: StickerSheetStory = {
-  ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: {
-    textDirection: "rtl",
-  },
-}

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

@@ -1,152 +0,0 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import {
-  BrandMomentPositiveOutro,
-  Informative,
-  SkillsCoachEssentialFeedback,
-} from "~components/Illustration"
-import { Text } from "~components/Text"
-import { GuidanceBlock } from "../index"
-
-const ContentComponent = (): JSX.Element => (
-  <>
-    <Heading tag="h3" variant="heading-3">
-      This is the Guidance block title
-    </Heading>
-    <Text variant="body">
-      Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite
-      divinis,
-    </Text>
-  </>
-)
-
-const defaultText = {
-  description:
-    "Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Mé faiz elementum girarzis, nisi eros vermeio.",
-  title: "This is the Guidance block title",
-}
-
-const meta = {
-  title: "Containers/GuidanceBlock/v2",
-  component: GuidanceBlock,
-  args: {
-    layout: "default",
-    illustration: <Informative alt="" />,
-  },
-  argTypes: {
-    actions: {
-      control: false,
-    },
-    illustrationType: {
-      description:
-        "Sets the how the width and aspect ratio will respond to the Illustration passed in.",
-    },
-    illustration: {
-      control: { type: "radio" },
-      options: ["spot", "scene"],
-      mapping: {
-        spot: <Informative alt="" />,
-        scene: <BrandMomentPositiveOutro alt="" />,
-      },
-      description:
-        "This takes a scene scene or spot element, ie: `<Informative />`. This radio button implementation is a storybook only representation to toggle between the two illustration styles.",
-    },
-    content: {
-      description:
-        "If you need to render custom content inside of the `GuidanceBlock` that is more than just a title and description use this prop instead of the default `text` option.",
-    },
-  },
-} satisfies Meta<typeof GuidanceBlock>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  args: {
-    text: defaultText,
-  },
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: "shown",
-      },
-    },
-  },
-}
-
-export const Actions: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: "Learn more",
-        onClick: () => alert("tada: 🎉"),
-      },
-      secondary: {
-        label: "Dismiss",
-        href: "#",
-      },
-    },
-  },
-}
-
-export const Tooltip: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: "Hover me for a tooltip",
-        onClick: () => alert("tada: 🎉"),
-        tooltip: {
-          text: "Opens in a new tab",
-          mood: "cautionary",
-        },
-      },
-      secondary: {
-        label: "Dismiss",
-        href: "#",
-      },
-    },
-  },
-}
-
-export const CustomContent: Story = {
-  args: {
-    content: <ContentComponent />,
-  },
-}
-
-export const Stacked: Story = {
-  render: args => (
-    <div style={{ display: "flex", gap: "36px" }}>
-      <GuidanceBlock {...args} />
-      <GuidanceBlock {...args} />
-    </div>
-  ),
-  args: {
-    layout: "stacked",
-    content: <ContentComponent />,
-  },
-}
-
-export const SceneExample: Story = {
-  args: {
-    illustration: <SkillsCoachEssentialFeedback alt="" />,
-    illustrationType: "scene",
-    text: defaultText,
-  },
-}
-
-export const Variants: Story = {
-  render: args => (
-    <div className="flex flex-col gap-16">
-      <GuidanceBlock {...args} />
-      <GuidanceBlock variant="expert-advice" {...args} />
-    </div>
-  ),
-  args: {
-    text: defaultText,
-  },
-}

package/src/__containers__/GuidanceBlock/v2/index.ts

@@ -1 +0,0 @@
-export * from "./GuidanceBlock"

package/src/__containers__/v1.ts

@@ -1 +0,0 @@
-export * from "./GuidanceBlock/v1"

package/src/__containers__/v2.ts

@@ -1 +0,0 @@
-export * from "./GuidanceBlock/v2"

package/v1/containers/package.json

@@ -1,5 +0,0 @@
-{
-  "main": "../../dist/cjs/containersV1.cjs",
-  "module": "../../dist/esm/containersV1.mjs",
-  "types": "../../dist/types/__containers__/v1.d.ts"
-}

package/v2/containers/package.json

@@ -1,5 +0,0 @@
-{
-  "main": "../../dist/cjs/containersV2.cjs",
-  "module": "../../dist/esm/containersV2.mjs",
-  "types": "../../dist/types/__containers__/v2.d.ts"
-}