feat(component): add Quote component (#82)

* feat(component): add Quote

Add new component Quote

Resolves #76

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* feat(stories): add stories for Quote

Add new stories for Quote component

Resolves #76

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/components/Quote/Quote.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Quote } from './Quote';
+
+export default {
+  component: Quote,
+} as ComponentMeta<typeof Quote>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Quote> = (args) => <Quote {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'This is a Text Quote',
+};

src/components/Quote/Quote.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { BaseStyleProp } from '../types';
+
+type QuoteStyles = 'root';
+
+export interface QuoteProps extends BaseStyleProp<QuoteStyles> {
+  children?: ReactNode;
+}
+
+const useStyles = makeStyles({
+  root: { margin: 0, padding: 0 },
+});
+
+export const Quote = ({ children, classes, className }: QuoteProps) => {
+  const styles = useStyles({ classes });
+
+  return (
+    <div style={styles.root} className={className}>
+      {children}
+    </div>
+  );
+};

src/components/Quote/index.ts

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

src/components/index.ts

@@ -7,3 +7,4 @@ export * from './Divider';
 export * from './Typography';
 export * from './Image';
 export * from './Preheader';
+export * from './Quote';