refactor(Pullquote): divide Pullquote to sub components

eea · Feb 15, 2022 · 34413c4 · 34413c4
1 parent e5f9c4c
commit 34413c4
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 10 deletions.
diff --git a/src/ui/Pullquote/Pullquote.jsx b/src/ui/Pullquote/Pullquote.jsx
@@ -8,17 +8,28 @@ Pullquote.propTypes = {
   quotePosition: PropTypes.oneOf(['left', 'right', 'none', 'inherit']),
 };
 
-function Pullquote({ quote, source, quotePosition }) {
+function Pullquote({ children, ...rest }) {
   return (
-    <blockquote className={`eea pullquote ${quotePosition}`}>
+    <blockquote className={`eea pullquote ${rest.quotePosition}`}>
       <Icon name="quote left"></Icon>
-      <div className="content">
-        <h4 className="quote">{quote}</h4>
-        <p className="author">{source}</p>
-      </div>
+      <div className="content">{children}</div>
       <Icon className="quote right" name="quote right"></Icon>
     </blockquote>
   );
 }
 
+Pullquote.Quote = ({ children, as: As, ...rest }) =>
+  As ? (
+    <As className="quote" {...rest}>
+      {children}
+    </As>
+  ) : (
+    <h4 className="quote">{children}</h4>
+  );
+
+Pullquote.Author = ({ children, ...rest }) => (
+  <p className="author" {...rest}>
+    {children}
+  </p>
+);
 export default Pullquote;
diff --git a/src/ui/Pullquote/Pullquote.stories.jsx b/src/ui/Pullquote/Pullquote.stories.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import Pullquote from './Pullquote';
-import { Container } from 'semantic-ui-react';
+import { Container, Image } from 'semantic-ui-react';
+
+const IMG = 'https://react.semantic-ui.com/images/avatar/large/matthew.png';
 
 export default {
   title: 'Components/Pullquote',
@@ -41,10 +43,13 @@ export default {
   },
 };
 
-const Template = (args) => (
+export const Default = (args) => (
   <Container>
     <p>{args.content}</p>
-    <Pullquote {...args}></Pullquote>
+    <Pullquote quotePosition={args.quotePosition}>
+      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
+      <Pullquote.Author>{args.source}</Pullquote.Author>
+    </Pullquote>
     <p>{args.content}</p>
     <p>{args.content}</p>
     <p>{args.content}</p>
@@ -53,7 +58,6 @@ const Template = (args) => (
   </Container>
 );
 
-export const Default = Template.bind({});
 Default.args = {
   quote:
     'Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.',
@@ -62,3 +66,27 @@ Default.args = {
     'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
   quotePosition: 'left',
 };
+
+export const Reversed = (args) => (
+  <Container>
+    <p>{args.content}</p>
+    <Pullquote quotePosition={args.quotePosition}>
+      <Pullquote.Author>{args.source}</Pullquote.Author>
+      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
+    </Pullquote>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+  </Container>
+);
+
+Reversed.args = {
+  quote:
+    'Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.',
+  source: 'President Juncker',
+  content:
+    'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
+  quotePosition: 'left',
+};