feat(quote): default styles for quote (#107)

Add default styles inside defaultTheme config object and update stories and snapshots of Quote component Resolves #101 Signed-off-by: Niloy Sikdar <[email protected]> Signed-off-by: Niloy Sikdar <[email protected]>
leopardslab · Sep 9, 2022 · a35fdbb · a35fdbb
1 parent d4aea35
commit a35fdbb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/components/DefaultTheme/index.ts b/src/components/DefaultTheme/index.ts
@@ -95,5 +95,14 @@ export const defaultTheme: ThemeOptions = {
     imageColumn: {},
   },
   preheader: { root: {} },
-  quote: { root: {} },
+  quote: {
+    root: {
+      borderLeft: '4px solid #d0d7de',
+      padding: '6px',
+      paddingLeft: '10px',
+      color: '#7e8698',
+      fontStyle: 'italic',
+      fontSize: '1.1em',
+    },
+  },
 };
diff --git a/src/components/Quote/Quote.stories.tsx b/src/components/Quote/Quote.stories.tsx
@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Email } from '../Email/Email';
 
 import { Quote } from './Quote';
 
@@ -7,10 +8,14 @@ export default {
 } as ComponentMeta<typeof Quote>;
 
 //“template” of how args map to rendering
-const Template: ComponentStory<typeof Quote> = (args) => <Quote {...args} />;
+const Template: ComponentStory<typeof Quote> = (args) => (
+  <Email>
+    <Quote {...args} />
+  </Email>
+);
 
 export const Default = Template.bind({});
 
 Default.args = {
-  children: 'This is a Text Quote',
+  children: 'This is a Text Quote Component written in TypeScript',
 };
diff --git a/src/components/Quote/__snapshots__/Quote.stories.tsx.snap b/src/components/Quote/__snapshots__/Quote.stories.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Quote Default smoke-test 1`] = `
-<div id="quote"
-     style="margin: 0px; padding: 0px;"
->
-  This is a Text Quote
+<div style="margin: 0px auto; max-width: 600px;">
+  <div id="quote"
+       style="margin: 0px; padding: 6px 6px 6px 10px; border-left: 4px solid rgb(208, 215, 222); color: rgb(126, 134, 152); font-style: italic; font-size: 1.1em;"
+  >
+    This is a Text Quote Component written in TypeScript
+  </div>
 </div>
 `;