QUIC-1590-widget-markdown-card

package.json

@@ -29,7 +29,9 @@
     "preact": "^10.8.1",
     "preactement": "^1.8.2",
     "react-cool-dimensions": "^2.0.7",
-    "react-spring": "^9.4.5"
+    "react-markdown": "^6.0.0",
+    "react-spring": "^9.4.5",
+    "remark-gfm": "^1.0.0"
   },
   "devDependencies": {
     "@mdx-js/preact": "^2.1.2",

src/components/ContentCards/ContentCards.test.tsx

@@ -105,5 +105,25 @@ describe('<ContentCards />', () => {
 
       expect(getByAltText('mock alt text')).toBeInTheDocument();
     });
+
+    it('renders markdown text when the card type is markdown', () => {
+      const { getByText } = customRender([
+        {
+          id: 'id',
+          type: 'markdown',
+          data: {
+            text: `# Heading 1
+
+- List item 1
+- List item 2
+`,
+          },
+        },
+      ]);
+
+      expect(getByText('Heading 1')).toBeInTheDocument();
+      expect(getByText('List item 1')).toBeInTheDocument();
+      expect(getByText('List item 2')).toBeInTheDocument();
+    });
   });
 });

src/components/ContentCards/ContentCards.tsx

@@ -5,6 +5,7 @@ import { useTransition, animated, config } from 'react-spring';
 import { useSoulMachines } from '../../contexts/SoulMachinesContext';
 import { ImageCard } from '../ImageCard';
 import { LinkCard } from '../LinkCard';
+import { MarkdownCard } from '../MarkdownCard';
 import { OptionsCard } from '../OptionsCard';
 
 export type CardComponent = {
@@ -25,6 +26,7 @@ export function ContentCards() {
     image: ImageCard,
     externalLink: (props) => <LinkCard {...props} isExternal={true} />,
     internalLink: (props) => <LinkCard {...props} isExternal={false} />,
+    markdown: MarkdownCard,
   };
 
   useEffect(() => {

src/components/Heading/Heading.tsx

@@ -1,15 +1,25 @@
 import { createElement } from 'preact';
+import classNames from 'classnames';
 
 export type HeadingProps = {
   children: string;
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 };
 
-export function Heading({ type, children }: HeadingProps) {
+export function Heading({ type, children, size = 'lg' }: HeadingProps) {
+  const sizeClass = classNames({
+    'sm-text-2xs md:sm-text-xs': size === 'xs',
+    'sm-text-xs md:sm-text-sm': size === 'sm',
+    'sm-text-sm md:sm-text-base': size === 'md',
+    'sm-text-base md:sm-text-lg': size === 'lg',
+    'sm-text-lg md:sm-text-xl': size === 'xl',
+    'sm-text-xl md:sm-text-2xl': size === '2xl',
+  });
   return createElement(
     type,
     {
-      className: 'sm-text-2xl sm-font-primary sm-font-medium sm-m-0 sm-text-neutral-700',
+      className: `sm-font-primary sm-font-medium sm-m-0 sm-text-neutral-700 ${sizeClass}`,
     },
     children,
   );

src/components/MarkdownCard/MarkdownCard.stories.tsx

@@ -0,0 +1,83 @@
+import { MarkdownCard, MarkdownCardProps } from '.';
+
+const content = {
+  id: 'id',
+  type: 'markdown',
+  data: {
+    text: `# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+1. Most interesting
+   1. Sublist 1
+   2. Sublist 2
+2. Less interesting
+   1. Sublist 1
+   2. Sublist 2
+3. Least Interesting
+
+**bold**
+- item 1
+- item 2
+
+[External Link](https://www.google.com)
+
+[Internal Link](http://localhost:3000)
+
+*emphasis*
+
+---
+Horizontal Rule
+
+---
+
+### Checkboxes
+
+- [ ] Checkbox 1
+- [ ] Checkbox 2
+
+#### Image Example
+
+![Image Alt Text](https://assets.gocomics.com/uploads/collection_images/collection_image_large_1628638_dilbert-inventions-content-admin-2048x1280_201809101600.jpg)
+
+#### Image with Link
+
+[![Image Alt Text](https://assets.gocomics.com/uploads/collection_images/collection_image_large_1628638_dilbert-inventions-content-admin-2048x1280_201809101600.jpg)](https://www.google.com)
+
+### Table
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+### Fenced Code Block
+
+\`\`\`
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+\`\`\`
+`,
+  },
+};
+
+export default {
+  title: `Components / MarkdownCard`,
+  component: MarkdownCard,
+  argTypes: {
+    content: { control: 'object', defaultValue: content },
+  },
+  parameters: {
+    docs: {
+      page: <MarkdownCard content={content} />,
+    },
+  },
+};
+
+export const Basic = ({ content }: MarkdownCardProps) => <MarkdownCard content={content} />;

src/components/MarkdownCard/MarkdownCard.test.tsx

@@ -0,0 +1,110 @@
+import { MarkdownCard } from '.';
+import { render } from '@testing-library/preact';
+import { ContentCard } from '@soulmachines/smwebsdk';
+
+describe('<MarkdownCard />', () => {
+  function markdownData(markdown: string): ContentCard {
+    return {
+      id: 'mockId',
+      type: 'markdown',
+      data: {
+        text: markdown,
+      },
+    };
+  }
+
+  const mockCard: ContentCard = {
+    id: 'mockId',
+    type: 'markdown',
+    data: {
+      text: '## An Interesting List\r\n 1. Most interesting\r\n 2. Less interesting\r\n 3. Least Interesting\r\n\r\n**bold**\r\n- item 1\r\n- item 2\r\n\r\n[test link](https://google.com)',
+    },
+  };
+
+  it('renders data-sm-content with the card id', () => {
+    const { container } = render(<MarkdownCard content={mockCard} />);
+    expect(container.querySelector('[data-sm-content="mockId"]')).toBeInTheDocument();
+  });
+
+  it('renders headings 1 to 6 individually', () => {
+    for (let hlevel = 1; hlevel < 7; hlevel++) {
+      console.log(hlevel);
+      const { container } = render(
+        <MarkdownCard content={markdownData(`${'#'.repeat(hlevel)} Heading`)} />,
+      );
+
+      expect(container.querySelector(`h${hlevel}`)).toBeInTheDocument();
+    }
+  });
+
+  it('renders unordered list', () => {
+    const markdown = `- item 1
+- item 2
+- item 3
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelectorAll('li').length).toBe(3);
+  });
+
+  it('renders ordered list', () => {
+    const markdown = `1. item 1
+2. item 2
+3. item 3
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(container.querySelector('li')).toBeInTheDocument();
+    expect(container.querySelectorAll('li').length).toBe(3);
+  });
+
+  it('renders bold', () => {
+    const markdown = `**bold text**
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('strong')).toBeInTheDocument();
+    expect(container.querySelectorAll('strong').length).toBe(1);
+  });
+
+  it('renders emphasis', () => {
+    const markdown = `*emphasized text*
+`;
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container.querySelector('em')).toBeInTheDocument();
+    expect(container.querySelectorAll('em').length).toBe(1);
+  });
+
+  it('renders external link', () => {
+    Object.defineProperty(window, 'location', { value: { hostname: 'mycurrentwebpage.com' } });
+
+    const markdown = `[external link](https://www.google.com)
+`;
+    const { getByRole } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(getByRole('link', { name: 'external link' })).toHaveAttribute(
+      'href',
+      'https://www.google.com',
+    );
+    expect(getByRole('link', { name: 'external link' })).toHaveAttribute('target', '_blank');
+  });
+
+  it('renders internal link', () => {
+    Object.defineProperty(window, 'location', { value: { hostname: 'mycurrentwebpage.com' } });
+
+    const markdown = `[internal link](http://mycurrentwebpage.com/moreinfo);
+`;
+    const { getByRole } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(getByRole('link', { name: 'internal link' })).toHaveAttribute(
+      'href',
+      'http://mycurrentwebpage.com/moreinfo',
+    );
+    expect(getByRole('link', { name: 'internal link' })).not.toHaveAttribute('target');
+  });
+
+  it('renders nothing if nothing received', () => {
+    const markdown = '';
+
+    const { container } = render(<MarkdownCard content={markdownData(markdown)} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});