feat: implement quote component

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -12,6 +12,7 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { QuoteStyles } from '../Quote/Quote.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +27,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    QuoteStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/components/Quote/Quote.classes.ts

@@ -0,0 +1,8 @@
+export const quoteClasses = {
+  root: `lsd-quote`,
+
+  indentedInline: 'lsd-quote--indented-inline',
+  parentheses: 'lsd-quote--parentheses',
+
+  text: 'lsd-quote__text',
+}

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

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react'
+import { Quote, QuoteProps } from './Quote'
+
+export default {
+  title: 'Quote',
+  component: Quote,
+  argTypes: {
+    mode: {
+      type: {
+        name: 'enum',
+        value: ['indented-line', 'parentheses'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<QuoteProps> = (args) => <Quote {...args}>Quote</Quote>
+Root.args = {
+  text: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
+  mode: 'indented-line',
+}

packages/lsd-react/src/components/Quote/Quote.styles.ts

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react'
+import { quoteClasses } from './Quote.classes'
+
+export const QuoteStyles = css`
+  .${quoteClasses.root} {
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    white-space: break-spaces;
+    width: 600px;
+  }
+
+  .${quoteClasses.indentedInline} {
+    border-left: 1px solid rgb(var(--lsd-border-primary));
+    padding: 4px 8px 4px 28px;
+  }
+
+  .${quoteClasses.parentheses} {
+    padding: 0px;
+    text-align: center;
+  }
+
+  .${quoteClasses.text} {
+    font-size: 16px;
+    line-height: 24px;
+  }
+`

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

@@ -0,0 +1,39 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { quoteClasses } from './Quote.classes'
+
+export type QuoteProps = React.HTMLAttributes<HTMLDivElement> & {
+  text?: string
+  mode?: 'indented-line' | 'parentheses'
+}
+
+export const Quote: React.FC<QuoteProps> & {
+  classes: typeof quoteClasses
+} = ({ text = '', mode = 'indented-line', ...props }) => {
+  return (
+    <>
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          quoteClasses.root,
+          mode && mode === 'parentheses'
+            ? quoteClasses.parentheses
+            : quoteClasses.indentedInline,
+        )}
+      >
+        <Typography
+          color="primary"
+          component="label"
+          variant={'label1'}
+          className={quoteClasses.text}
+        >
+          {mode === 'parentheses' ? `***\n${text}\n***` : text}
+        </Typography>
+      </div>
+    </>
+  )
+}
+
+Quote.classes = quoteClasses

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

@@ -0,0 +1 @@
+export * from './Quote'