feat(quote): Generated skeleton for Quote component

packages/react/src/components/Quote/Quote.module.css

@@ -0,0 +1,27 @@
+.quoteWrapper {
+  border-radius: var(--fds-border_radius-interactive);
+  background: var(--fds-brand-tertiary-600);
+  padding-left: var(--fds-spacing-2);
+  box-shadow: 0 1px 4px 0 rgba(0 0 0 / 0.1);
+  overflow: hidden;
+  width: 100%;
+}
+
+.quoteInfo {
+  display: flex;
+  background: var(--fds-semantic-background-default);
+  flex-direction: column;
+  padding: var(--fds-spacing-8);
+}
+
+.quote {
+  color: var(--semantic-text-neutral-default);
+  font: var(--fds-typography-interactive-large);
+  margin-top: 0;
+  margin-bottom: var(--fds-spacing-2);
+}
+
+.author {
+  font: var(--fds-typography-paragraph-small);
+  color: var(--semantic-text-neutral-subtle);
+}

packages/react/src/components/Quote/Quote.stories.tsx

@@ -0,0 +1,34 @@
+import { Quote } from './Quote';
+
+export default {
+  title: 'Components/Quote',
+  component: Quote,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'Light',
+      values: [
+        {
+          name: 'Dark',
+          value: '#1E2B3C',
+        },
+        {
+          name: 'Light',
+          value: '#00000',
+        },
+      ],
+    },
+  },
+};
+
+export const Normal = {
+  args: {
+    children:
+      'Do not go where the path may lead, go instead where there is no path and leave a trail.',
+    author: 'Ralph Waldo Emerson',
+  },
+};

packages/react/src/components/Quote/Quote.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render as renderRtl, screen } from '@testing-library/react';
+
+import type { QuoteProps } from './Quote';
+import { Quote } from './Quote';
+
+describe('Quote', () => {
+  it('should render the quote text and author correctly', () => {
+    const author = 'John Doe';
+    const quoteText = 'This is a test quote';
+
+    render({
+      author: author,
+      children: quoteText,
+    });
+    expect(screen.getByText(quoteText)).toBeInTheDocument();
+    expect(screen.getByText(author)).toBeInTheDocument();
+  });
+
+  it('should apply the "quoteWrapper" class', () => {
+    const { container } = render({
+      author: 'Author',
+      children: 'Quote Text',
+    });
+    expect(container.querySelector('.quoteWrapper')).toBeInTheDocument();
+  });
+});
+
+const render = (props: QuoteProps) =>
+  renderRtl(<Quote {...props}>{props.children}</Quote>);

packages/react/src/components/Quote/Quote.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+
+import classes from './Quote.module.css';
+
+interface QuoteProps {
+  author: string;
+  children: React.ReactNode;
+}
+
+const Quote = ({ children, author }: QuoteProps) => {
+  return (
+    <div className={cn(classes.quoteWrapper)}>
+      <div className={cn(classes.quoteInfo)}>
+        <p className={cn(classes.quote)}>{children}</p>
+        <span className={cn(classes.author)}>{author}</span>
+      </div>
+    </div>
+  );
+};
+
+export { Quote };
+export type { QuoteProps };

packages/react/src/components/Quote/index.ts

@@ -0,0 +1,2 @@
+export { Quote } from './Quote';
+export type { QuoteProps } from './Quote';