feat(coachmark): create coachmark web component wrapper

package.json

@@ -105,7 +105,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
-    "@momentum-design/components": "0.33.2",
+    "@momentum-design/components": "0.39.1",
     "@momentum-design/fonts": "0.0.8",
     "@momentum-design/icons": "0.10.0",
     "@momentum-design/tokens": "0.5.0",

src/components/Coachmark/Coachmark.stories.args.ts

@@ -1,101 +1,66 @@
-import { commonStyles, extendArgTypes } from '../../storybook/helper.stories.argtypes';
-
-import { popoverArgTypes } from '../Popover/Popover.stories.args';
+import { commonStyles } from '../../storybook/helper.stories.argtypes';
 
 const coachmarkArgTypes = {
-  actions: {
-    description: 'Action buttons to use with this component.',
-    control: { type: 'none' },
-    table: {
-      type: {
-        summary: 'ReactElement<ButtonSimpleProps> | Array<ReactElement<ButtonSimpleProps>>',
-      },
-      defaultValue: {
-        summary: 'undefined',
-      },
-    },
-  },
   children: {
-    description: 'Content of this component.',
+    description: 'Content of the coachmark.',
     control: { type: 'text' },
     table: {
       type: {
         summary: 'ReactNode',
       },
-      defaultValue: {
-        summary: 'undefined',
-      },
-    },
-  },
-  onDismiss: {
-    description: 'Event handler that is triggered when the user dismisses this component.',
-    control: { type: 'none' },
-    table: {
-      type: {
-        summary: '() => void',
-      },
-      defaultValue: {
-        summary: 'undefined',
-      },
     },
   },
-  icon: {
-    description: 'Icon to display to the left of the title.',
+  triggerID: {
+    description: 'ID of the element that triggers the coachmark.',
     control: { type: 'text' },
     table: {
       type: {
         summary: 'string',
       },
-      defaultValue: {
-        summary: 'undefined',
-      },
     },
   },
-  image: {
-    description: 'Image to display on this component.',
-    control: { type: 'none' },
+  'close-button': {
+    description: 'Whether the close button should be shown.',
+    control: { type: 'boolean' },
     table: {
       type: {
-        summary: 'HTMLImageElement',
+        summary: 'boolean',
       },
       defaultValue: {
-        summary: 'undefined',
+        summary: true,
       },
     },
   },
-  isVisible: {
-    description: 'Whether or not this component should be visible.',
-    control: { type: 'boolean' },
+  'close-button-aria-label': {
+    description: 'Arial label for the close button.',
+    control: { type: 'text' },
     table: {
       type: {
-        summary: 'boolean',
-      },
-      defaultValue: {
-        summary: 'undefined',
+        summary: 'string',
       },
     },
   },
-  target: {
-    description: 'The element this component should target when rendering its location.',
-    control: { type: 'none' },
+  placement: {
+    description: 'Placement of the coachmark.',
+    control: { type: 'text' },
     table: {
       type: {
-        summary: 'ReactElement',
+        summary: 'string',
       },
       defaultValue: {
-        summary: 'undefined',
+        summary: 'bottom',
       },
     },
   },
-  title: {
-    description: 'Title to display on this component.',
-    control: { type: 'text' },
+  'focus-back-to-trigger': {
+    description: 'Whether the focus should shift to trigger on hide.',
+    control: { type: 'boolean' },
     table: {
       type: {
-        summary: 'string',
+        summary: 'boolean',
       },
       defaultValue: {
-        summary: 'undefined',
+        summary: false,
       },
     },
   },
@@ -105,6 +70,5 @@ export { coachmarkArgTypes };
 
 export default {
   ...commonStyles,
-  ...extendArgTypes('Popover', popoverArgTypes, ['interactive', 'trigger']),
   ...coachmarkArgTypes,
 };

src/components/Coachmark/Coachmark.stories.docs.mdx

@@ -1,6 +1 @@
-The `<Coachmark />` component.
-
-This component should be used with experience-driven flows, such as the "First Time Experience"
-[FTE] for a feature. The visibility of each `<Coachmark />` must be controlled by the `isVisible`
-prop, and can be dismissed by changing this prop to `false` or if the user clicks the `dismiss`
-button. The `dismiss` button triggers the `onDismiss()` event handler.
+The `<Coachmark />` component.

src/components/Coachmark/Coachmark.stories.tsx

@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
-import { Story } from '@storybook/react';
-
 import { DocumentationPage } from '../../storybook/helper.stories.docs';
 import StyleDocs from '../../storybook/docs.stories.style.mdx';
+import { Story } from '@storybook/react';
 
 import Coachmark, { CoachmarkProps } from './';
-import ButtonSimple from '../ButtonSimple';
-import ButtonHyperlink from '../ButtonHyperlink';
-import ButtonPill from '../ButtonPill';
 import argTypes from './Coachmark.stories.args';
 import Documentation from './Coachmark.stories.docs.mdx';
+import ButtonPill from '../ButtonPill';
+import React from 'react';
+import Text from '../Text';
 
 export default {
   title: 'Momentum UI/Coachmark',
@@ -22,115 +20,30 @@ export default {
   },
 };
 
-const Template: Story<CoachmarkProps> = (args: CoachmarkProps) => {
-  return (
-    <Coachmark
-      triggerComponent={<div style={{ width: 'fit-content' }}>Target Element</div>}
-      {...args}
-    />
-  );
-};
-
-const Example = Template.bind({});
+const Example: Story<CoachmarkProps> = (args: CoachmarkProps) => (
+  <div style={{ minHeight: '300px', display: 'inline-block' }}>
+    <ButtonPill onPress={() => document.getElementById(args.id)?.showPopover()}>open</ButtonPill>
+    <ButtonPill onPress={() => document.getElementById(args.id)?.hidePopover()}>close</ButtonPill>
+    <ButtonPill id={args.triggerID}>Trigger (dummy)</ButtonPill>
+    <Coachmark {...args} />
+  </div>
+);
 
 Example.argTypes = { ...argTypes };
-
 Example.args = {
-  children: 'Example',
-};
-
-const TemplateCommon: Story = () => {
-  const [index, setIndex] = useState<number>();
-
-  const next = () => {
-    setIndex(index + 1);
-  };
-
-  const start = () => {
-    setIndex(1);
-  };
-
-  const reset = () => {
-    setIndex(0);
-  };
-
-  interface LocalProps {
-    targetIndex: number;
-    content?: boolean;
-    icon?: boolean;
-    image?: boolean;
-    title?: boolean;
-    trigger: string;
-  }
-
-  const CommonCoachmark = ({ content, icon, image, targetIndex, title, trigger }: LocalProps) => (
-    <Coachmark
-      actions={[
-        <ButtonPill key={0} size={28}>
-          Button
-        </ButtonPill>,
-        <ButtonPill key={1} outline size={28}>
-          Button
-        </ButtonPill>,
-        <ButtonHyperlink key={2}>Hyperlink</ButtonHyperlink>,
-      ]}
-      icon={icon ? 'placeholder' : undefined}
-      image={
-        image && (
-          <img
-            alt="example"
-            src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder-1024x1024.png"
-          />
-        )
-      }
-      isVisible={index === targetIndex}
-      title={title && 'Example Title'}
-      triggerComponent={<div style={{ width: 'fit-content' }}>{trigger}</div>}
-      onDismiss={next}
-    >
-      {content && (
-        <div>Example Coachmark {targetIndex}. Close this Coachmark to continue the experience.</div>
-      )}
-    </Coachmark>
-  );
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <CommonCoachmark
-        content
-        icon
-        image
-        targetIndex={1}
-        title
-        trigger="[ Content / Icon / Image / Title ]"
-      />
-      <CommonCoachmark content image targetIndex={2} title trigger="[ Content / Image / Title ]" />
-      <CommonCoachmark content icon targetIndex={3} title trigger="[ Content / Icon / Title ]" />
-      <CommonCoachmark content targetIndex={4} title trigger="[ Content / Title ]" />
-      <CommonCoachmark content image targetIndex={5} trigger="[ Content / Image ]" />
-      <CommonCoachmark content targetIndex={6} trigger="[ Content ]" />
-      <CommonCoachmark image targetIndex={7} trigger="[ Image ]" />
-      <CommonCoachmark title targetIndex={8} trigger="[ Title ]" />
-      <CommonCoachmark icon targetIndex={9} title trigger="[ Icon Title ]" />
-      <ButtonSimple onPress={start}>Start Experience</ButtonSimple>
-      <ButtonSimple onPress={reset}>Reset Experience</ButtonSimple>
+  id: 'coachmark',
+  triggerID: 'trigger',
+  'close-button-aria-label': 'Close',
+  children: (
+    <div>
+      <Text tagName="p" type="header-primary">
+        Coachmark title
+      </Text>
+      <Text tagName="p" type="body-secondary">
+        Some content in here, blah blah.
+      </Text>
     </div>
-  );
+  ),
 };
 
-const Common = TemplateCommon.bind({});
-
-Common.argTypes = Object.entries({ ...argTypes }).reduce((types, entry) => {
-  const [key, value] = entry;
-  const mutable = { ...types };
-
-  mutable[key] = { ...value };
-
-  mutable[key].control = { type: 'none' };
-
-  return mutable;
-}, {});
-
-Common.args = {};
-
-export { Example, Common };
+export { Example };