diff --git a/packages/react/src/components/Quote/Quote.module.css b/packages/react/src/components/Quote/Quote.module.css new file mode 100644 index 0000000..fca2288 --- /dev/null +++ b/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); +} diff --git a/packages/react/src/components/Quote/Quote.stories.tsx b/packages/react/src/components/Quote/Quote.stories.tsx new file mode 100644 index 0000000..c214772 --- /dev/null +++ b/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', + }, +}; diff --git a/packages/react/src/components/Quote/Quote.test.tsx b/packages/react/src/components/Quote/Quote.test.tsx new file mode 100644 index 0000000..a62a80b --- /dev/null +++ b/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({props.children}); diff --git a/packages/react/src/components/Quote/Quote.tsx b/packages/react/src/components/Quote/Quote.tsx new file mode 100644 index 0000000..d37a666 --- /dev/null +++ b/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 ( +
+
+

{children}

+ {author} +
+
+ ); +}; + +export { Quote }; +export type { QuoteProps }; diff --git a/packages/react/src/components/Quote/index.ts b/packages/react/src/components/Quote/index.ts new file mode 100644 index 0000000..03163d6 --- /dev/null +++ b/packages/react/src/components/Quote/index.ts @@ -0,0 +1,2 @@ +export { Quote } from './Quote'; +export type { QuoteProps } from './Quote';