@kaizen/components 1.74.2 → 1.75.0

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

@@ -6,7 +6,14 @@ import {
   Informative,
   SkillsCoachEssentialFeedback,
 } from '~components/Illustration'
+import { LinkButton } from '~components/LinkButton'
 import { Text } from '~components/Text'
+import { Button } from '~components/__next__/Button'
+import { Icon } from '~components/__next__/Icon'
+import {
+  Tooltip as TooltipNext,
+  TooltipTrigger as TooltipTriggerNext,
+} from '~components/__next__/Tooltip'
 import { GuidanceBlock } from '../index'
 import { variantsMap } from '../types'
 
@@ -52,6 +59,64 @@ const meta = {
       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.',
     },
+    actionsSlot: {
+      control: {
+        type: 'select',
+      },
+
+      options: [
+        'Primary action',
+        'Primary and Secondary action',
+        'Action with Icon',
+        'Action with Tooltip',
+      ],
+      mapping: {
+        'Primary action': (
+          <Button variant="secondary" onPress={() => alert('tada: 🎉')}>
+            Label
+          </Button>
+        ),
+        'Primary and Secondary action': (
+          <>
+            <Button variant="secondary" onPress={() => alert('tada: 🎉')}>
+              Label
+            </Button>
+            <LinkButton variant="tertiary" href="#link">
+              Secondary action
+            </LinkButton>
+          </>
+        ),
+        'Action with Icon': (
+          <TooltipTriggerNext defaultOpen>
+            <Button
+              size="large"
+              variant="secondary"
+              onPress={() => alert('tada: 🎉')}
+              iconPosition="end"
+              icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />}
+            >
+              Label
+            </Button>
+            <TooltipNext>Tooltip content</TooltipNext>
+          </TooltipTriggerNext>
+        ),
+        'Action with Tooltip': (
+          <TooltipTriggerNext defaultOpen>
+            <LinkButton
+              variant="secondary"
+              href="#lorem"
+              target="_blank"
+              rel="noopener noreferrer"
+              size="large"
+              iconPosition="end"
+            >
+              Label
+            </LinkButton>
+            <TooltipNext>Tooltip content</TooltipNext>
+          </TooltipTriggerNext>
+        ),
+      },
+    },
     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.',
@@ -81,11 +146,11 @@ export const Actions: Story = {
     content: <ContentComponent />,
     actions: {
       primary: {
-        label: 'Learn more',
+        label: 'Label',
         onClick: () => alert('tada: 🎉'),
       },
       secondary: {
-        label: 'Dismiss',
+        label: 'Label',
         href: '#',
       },
     },
@@ -97,7 +162,7 @@ export const Tooltip: Story = {
     content: <ContentComponent />,
     actions: {
       primary: {
-        label: 'Hover me for a tooltip',
+        label: 'Label',
         onClick: () => alert('tada: 🎉'),
         tooltip: {
           text: 'Opens in a new tab',
@@ -105,7 +170,7 @@ export const Tooltip: Story = {
         },
       },
       secondary: {
-        label: 'Dismiss',
+        label: 'Label',
         href: '#',
       },
     },
@@ -151,3 +216,139 @@ export const Variants: Story = {
     text: defaultText,
   },
 }
+
+export const ActionsVsActionsSlot: Story = {
+  args: {
+    layout: 'default',
+    illustration: <Informative alt="" />,
+    content: <ContentComponent />,
+    actions: {
+      dismiss: {
+        onClick: () => {
+          alert('Dismissed')
+        },
+      },
+      primary: {
+        label: 'Label',
+        onClick: () => alert('tada: 🎉'),
+      },
+      secondary: {
+        label: 'Label',
+        href: '#',
+      },
+    },
+    secondaryDismiss: true,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<ContentComponent />}
+        actions={args.actions}
+        secondaryDismiss
+      />
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<ContentComponent />}
+        secondaryDismiss={true}
+        actionsSlot={
+          <>
+            <Button size="large" onPress={() => alert('tada: 🎉')} slot="primary">
+              Label
+            </Button>
+            <Button variant="tertiary" size="large" onPress={() => alert('tada: 🎉')}>
+              Label
+            </Button>
+          </>
+        }
+      />
+    </div>
+  ),
+}
+
+export const ActionsSlot: Story = {
+  args: {
+    layout: 'default',
+    illustration: <Informative alt="" />,
+    content: <ContentComponent />,
+    actionsSlot: (
+      <>
+        <Button
+          variant="secondary"
+          size="large"
+          onPress={() => alert('tada: 🎉')}
+          iconPosition="end"
+          slot="primary"
+        >
+          Label
+        </Button>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <GuidanceBlock {...args} />
+    </div>
+  ),
+}
+
+export const MultipleActions: Story = {
+  args: {
+    layout: 'default',
+    illustration: <Informative alt="" />,
+    content: <ContentComponent />,
+    actionsSlot: (
+      <>
+        <Button
+          variant="secondary"
+          size="large"
+          onPress={() => alert('tada: 🎉')}
+          iconPosition="end"
+          slot="primary"
+          icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />}
+        >
+          Label
+        </Button>
+        <LinkButton slot="secondary" variant="tertiary" size="large" href="#">
+          Label
+        </LinkButton>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <GuidanceBlock {...args} />
+    </div>
+  ),
+}
+
+export const ActionsSlotWithTooltips: Story = {
+  args: {
+    layout: 'default',
+    illustration: <Informative alt="" />,
+    content: <ContentComponent />,
+    actionsSlot: (
+      <>
+        <TooltipTriggerNext>
+          <Button variant="secondary" size="large" onPress={() => alert('tada: 🎉')}>
+            Label
+          </Button>
+          <TooltipNext>Tooltip Content</TooltipNext>
+        </TooltipTriggerNext>
+        <TooltipTriggerNext>
+          <LinkButton variant="tertiary" size="large" href="#">
+            Label
+          </LinkButton>
+          <TooltipNext>Tooltip secondary content</TooltipNext>
+        </TooltipTriggerNext>
+      </>
+    ),
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <GuidanceBlock {...args} />
+    </div>
+  ),
+}

package/src/Notification/InlineNotification/_docs/InlineNotification.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { InlineNotification } from '../InlineNotification'
 

package/src/__next__/Button/_docs/Button--migration-guide.mdx

@@ -41,7 +41,7 @@ This will loop through the given directory and update all instances of Button to
 pnpm kaizen-codemod src upgradeV1Buttons
 ```
 
-Note that there are cases where an props that no longer exist will be left in the codebase to throw type error and provide feedback to the engineer. This is intentional and identifies area's where manual updates are required.
+Note that there are cases where props that no longer exist will be left in the codebase to throw type error and provide feedback to the engineer. This is intentional and identifies area's where manual updates are required.
 
 ### Pre-requisites
 
@@ -61,7 +61,7 @@ Based off Metabase queries, `component` render props is used in consuming reposi
 
 #### `badge` props type errors
 
-The codemod will continue to passed `badge` props into the new implementation so it will throw a type error and provide feedback to engineers. This will need to be manually composed within the `Children` if required, ie:
+The codemod will continue to pass `badge` props into the new implementation so it will throw a type error and provide feedback to engineers. This will need to be manually composed within the `Children` if required, ie:
 
 ```
 import { Badge } from "@kaizen/components"
@@ -74,7 +74,7 @@ import { Button } from "@kaizen/components/next"
 
 If no `href` or `component` props are passed to the component you may get type errors for having anchor related props passed into a Button, ie: `target`, `rel`.
 
-This will cause a type error that can be corrected by either using the `LinkButton` (if intended) or removing all anchor related props as they should exist on semantic buttons.
+This will cause a type error that can be corrected by either using the `LinkButton` (if intended) or removing all anchor related props as they shouldn't exist on semantic buttons.
 
 ## More information
 

package/src/__next__/Tag/Tag/_docs/Tag.stories.tsx

@@ -10,6 +10,16 @@ const meta = {
   args: {
     children: 'My tag',
   },
+  argTypes: {
+    icon: {
+      options: ['delete', 'arrow', 'add'],
+      mapping: {
+        delete: <Icon isPresentational name="delete" />,
+        arrow: <Icon isPresentational name="arrow_forward" />,
+        add: <Icon isPresentational name="add" />,
+      },
+    },
+  },
 } satisfies Meta<typeof Tag>
 
 export default meta