Add stories for ContactButton

packages/components/src/components/contact-us.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import {
+  ContactButton,
+  ContactButtonProps,
+  ContactTextLink,
+  ContactTextLinkProps,
+} from './contact-us';
+
+export default {
+  title: 'Components/ContactUs',
+  component: ContactButton,
+  decorators: [hiveThemeDecorator],
+  parameters: {
+    padding: true,
+  },
+} satisfies Meta<ContactButtonProps>;
+
+export const Default: StoryObj<ContactButtonProps> = {
+  name: 'ContactButton',
+  args: {
+    // `children` is optional
+    children: 'Contact us',
+  },
+};
+
+export const TextLink: StoryObj<ContactTextLinkProps> = {
+  name: 'ContactTextLink',
+  render: args => <ContactTextLink {...args} />,
+  args: {
+    children: 'Reach out to us about the Enterprise plan',
+  },
+};

packages/components/src/components/contact-us.tsx

@@ -10,10 +10,10 @@ const openCrisp = (event: React.MouseEvent<HTMLAnchorElement>) => {
   }
 };
 
-// the errors are more readable if you add an interface for this
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ContactTextLinkProps
-  extends Omit<React.HTMLAttributes<HTMLAnchorElement>, 'href' | 'onClick'> {}
+  extends Omit<React.HTMLAttributes<HTMLAnchorElement>, 'href' | 'onClick'> {
+  children?: React.ReactNode;
+}
 
 export function ContactTextLink(props: ContactTextLinkProps) {
   return (
@@ -31,9 +31,10 @@ export function ContactTextLink(props: ContactTextLinkProps) {
   );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ContactButtonProps
-  extends Omit<CallToActionProps.AnchorProps, 'onClick' | 'href'> {}
+  extends Omit<CallToActionProps.AnchorProps, 'onClick' | 'href' | 'children'> {
+  children?: React.ReactNode;
+}
 
 export function ContactButton(props: ContactButtonProps) {
   return (