feat: migrate blockquote component

Author: araujogui

components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockQuote component should render correctly 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  />
+</div>
+`;
+
+exports[`BlockQuote component should support passing children into the component 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  >
+    This is a block quote
+  </div>
+</div>
+`;
+
+exports[`BlockQuote component should support passing multiple children into the component 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  >
+    <p>
+      This is a block quote
+    </p>
+    <p>
+      This is a block quote
+    </p>
+  </div>
+</div>
+`;

components/Article/BlockQuote/__tests__/index.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import BlockQuote from '../index';
+
+describe('BlockQuote component', () => {
+  it('should render correctly', () => {
+    const { container } = render(<BlockQuote />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing children into the component', () => {
+    const { container } = render(
+      <BlockQuote>This is a block quote</BlockQuote>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing multiple children into the component', () => {
+    const { container } = render(
+      <BlockQuote>
+        <p>This is a block quote</p>
+        <p>This is a block quote</p>
+      </BlockQuote>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/BlockQuote/index.module.scss

@@ -0,0 +1,18 @@
+.blockQuote {
+  background-color: var(--color-fill-banner);
+  border-radius: 5px;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-body1);
+  margin: var(--space-16) auto;
+  max-width: 90vw;
+  padding: var(--space-12);
+  position: relative;
+
+  @media (max-width: 900px) {
+    margin: var(--space-08) auto;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+}

components/Article/BlockQuote/index.stories.tsx

@@ -0,0 +1,18 @@
+import BlockQuote from './index';
+
+export default { component: BlockQuote };
+
+export const Default = {
+  args: {
+    children: 'This is a block quote',
+  },
+};
+
+export const MultipleParagraph = {
+  args: {
+    children: [
+      <p key={1}>This is a block quote 1</p>,
+      <p key={2}>This is a block quote 2</p>,
+    ],
+  },
+};

components/Article/BlockQuote/index.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+import styles from './index.module.scss';
+
+const BlockQuote = ({ children }: PropsWithChildren) => (
+  <div className={styles.blockQuote}>{children}</div>
+);
+
+export default BlockQuote;