refactor(Quote):rename Pullquote component to Quote

eea · Apr 29, 2022 · 9384a0c · 9384a0c
1 parent 904594b
commit 9384a0c
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 44 deletions.
diff --git a/src/semantic.less b/src/semantic.less
@@ -206,7 +206,7 @@
 }
 
 & {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/pullquote';
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/quote';
 }
 
 & {

diff --git a/src/ui/Pullquote/Pullquote.jsx → src/ui/Quote/Quote.jsx b/src/ui/Pullquote/Pullquote.jsx → src/ui/Quote/Quote.jsx
@@ -2,21 +2,21 @@ import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
-Pullquote.propTypes = {
+Quote.propTypes = {
   quote: PropTypes.string,
   source: PropTypes.string,
   quotePosition: PropTypes.oneOf(['left', 'right', 'none', 'inherit']),
 };
 
-function Pullquote({ children, ...rest }) {
+function Quote({ children, ...rest }) {
   return (
-    <blockquote className={`eea pullquote ${rest.quotePosition}`}>
+    <blockquote className={`eea quote ${rest.quotePosition}`}>
       <div className="content">{children}</div>
     </blockquote>
   );
 }
 
-Pullquote.Quote = ({ children, as: As, ...rest }) => (
+Quote.Quote = ({ children, as: As, ...rest }) => (
   <div className="quotes wrapper">
     <Icon className="ri-double-quotes-l"></Icon>
     {As ? (
@@ -30,15 +30,15 @@ Pullquote.Quote = ({ children, as: As, ...rest }) => (
   </div>
 );
 
-Pullquote.Author = ({ children, ...rest }) => (
+Quote.Author = ({ children, ...rest }) => (
   <p className="author" {...rest}>
     {children}
   </p>
 );
 
-Pullquote.Metadata = ({ children, ...rest }) => (
+Quote.Metadata = ({ children, ...rest }) => (
   <p className="meta" {...rest}>
     {children}
   </p>
 );
-export default Pullquote;
+export default Quote;
diff --git a/src/ui/Pullquote/Pullquote.stories.jsx → src/ui/Quote/Quote.stories.jsx b/src/ui/Pullquote/Pullquote.stories.jsx → src/ui/Quote/Quote.stories.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import Pullquote from './Pullquote';
+import Quote from './Quote';
 import { Container } from 'semantic-ui-react';
 
 export default {
-  title: 'Components/Pullquote',
-  component: Pullquote,
+  title: 'Components/Quote',
+  component: Quote,
   argTypes: {
     quote: {
-      description: 'Pullquote content',
+      description: 'Quote content',
       type: { name: 'string' },
       table: {
         defaultValue: { summary: '""' },
@@ -51,11 +51,11 @@ export default {
 export const Default = (args) => (
   <Container>
     <p>{args.content}</p>
-    <Pullquote quotePosition={args.quotePosition}>
-      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
-      <Pullquote.Author>{args.source}</Pullquote.Author>
-      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
-    </Pullquote>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+      <Quote.Author>{args.source}</Quote.Author>
+      <Quote.Metadata>{args.metadata}</Quote.Metadata>
+    </Quote>
     <p>{args.content}</p>
     <p>{args.content}</p>
     <p>{args.content}</p>
@@ -77,11 +77,11 @@ Default.args = {
 export const Reversed = (args) => (
   <Container>
     <p>{args.content}</p>
-    <Pullquote quotePosition={args.quotePosition}>
-      <Pullquote.Author>{args.source}</Pullquote.Author>
-      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
-      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
-    </Pullquote>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Author>{args.source}</Quote.Author>
+      <Quote.Metadata>{args.metadata}</Quote.Metadata>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+    </Quote>
     <p>{args.content}</p>
     <p>{args.content}</p>
     <p>{args.content}</p>

diff --git a/src/ui/Testimonial/Testimonial.jsx b/src/ui/Testimonial/Testimonial.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Divider from '../Divider/Divider';
 
-import Pullquote from '../Pullquote/Pullquote';
+import Quote from '../Quote/Quote';
 import { Grid, Card, Image } from 'semantic-ui-react';
 
 Testimonial.propTypes = {
@@ -44,10 +44,10 @@ Testimonial.Content = ({ children }) => {
 };
 
 Testimonial.Title = ({ children }) => <h3 className="title">{children}</h3>;
-Testimonial.Pullquote = ({ children, ...rest }) => (
-  <Pullquote quotePosition="none">
-    <Pullquote.Quote>{children}</Pullquote.Quote>
-  </Pullquote>
+Testimonial.Quote = ({ children, ...rest }) => (
+  <Quote quotePosition="none">
+    <Quote.Quote>{children}</Quote.Quote>
+  </Quote>
 );
 
 export default Testimonial;
diff --git a/src/ui/index.js b/src/ui/index.js
@@ -16,7 +16,7 @@ export InpageNavigation from './InpageNavigation/InpageNavigation';
 
 export Logo from './Logo/Logo';
 
-export Pullquote from './Pullquote/Pullquote';
+export Quote from './Quote/Quote';
 
 export Timeline from './Timeline/Timeline';
 

diff --git a/theme/theme.config b/theme/theme.config
@@ -78,7 +78,7 @@
 @custom      : 'eea';
 /* EEA Design system custom components */
 @blockquote  : 'eea';
-@pullquote   : 'eea';
+@quote   : 'eea';
 @banner      : 'eea';
 @timeline    : 'eea';
 @footer      : 'eea';

diff --git a/theme/themes/eea/extras/pullquote.less → theme/themes/eea/extras/quote.less b/theme/themes/eea/extras/pullquote.less → theme/themes/eea/extras/quote.less
@@ -1,15 +1,15 @@
 @type: 'extra';
-@element: 'pullquote';
+@element: 'quote';
 
 @import (multiple) '../../theme.config';
 
 /*******************************
-            Pullquote
+            Quote
 *******************************/
 
-.eea.pullquote {
-  padding: @pullquotePadding;
-  margin: @pullquoteMargin;
+.eea.quote {
+  padding: @quotePadding;
+  margin: @quoteMargin;
   word-break: @contentWordBreak;
   hyphens: @contentWordBreakHyphens;
 
@@ -52,7 +52,7 @@
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .eea.pullquote {
+  .eea.quote {
     .quotes.wrapper {
       .quote {
         padding: @tabletQuotePadding;
@@ -63,14 +63,14 @@
       }
     }
   }
-  .eea.pullquote.left {
+  .eea.quote.left {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatLeftPadding;
+    padding: @quoteFloatLeftPadding;
     float: left;
   }
-  .eea.pullquote.right {
+  .eea.quote.right {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatRightPadding;
+    padding: @quoteFloatRightPadding;
     float: right;
   }
 }
diff --git a/theme/themes/eea/extras/pullquote.variables → theme/themes/eea/extras/quote.variables b/theme/themes/eea/extras/pullquote.variables → theme/themes/eea/extras/quote.variables
@@ -1,12 +1,12 @@
 /*******************************
-            Pullquote
+            Quote
 *******************************/
 
 /* Body */
-@pullquotePadding           : @largeGap 0;
-@pullquoteFloatLeftPadding  : @largeGap @largeGap @largeGap 0;
-@pullquoteFloatRightPadding : @largeGap 0 @largeGap @largeGap;
-@pullquoteMargin            : 0;
+@quotePadding           : @largeGap 0;
+@quoteFloatLeftPadding  : @largeGap @largeGap @largeGap 0;
+@quoteFloatRightPadding : @largeGap 0 @largeGap @largeGap;
+@quoteMargin            : 0;
 @maxWidthOnFloat            : 50%;
 @contentWordBreak           : break-word;
 @contentWordBreakHyphens    : manual;