feat: quote types for Quote block (#663)

* feat: quoteType for Quote block
gravity-ui · Oct 27, 2023 · bc6245c · bc6245c
1 parent 7d57714
commit bc6245c
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 16 deletions.
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -55,6 +55,11 @@ export enum MediaVideoControlsType {
     Custom = 'custom',
 }
 
+export enum QuoteType {
+    Chevron = 'chevron', // « »
+    EnglishDouble = 'english-double', // “ ”
+}
+
 // types
 export type TextTheme = 'light' | 'dark';
 export type TextSize = 'xs' | 's' | 'm' | 'l';

diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -1,4 +1,4 @@
-import {ClassNameProps} from '../../models';
+import {ClassNameProps, QuoteType} from '../../models';
 import {ThemeSupporting} from '../../utils';
 import {HubspotEventData, HubspotEventHandlers} from '../../utils/hubspot';
 import {AnalyticsEventsBase, PixelEvent} from '../common';
@@ -96,6 +96,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
     author?: AuthorItem;
     buttonText?: string;
     theme?: TextTheme;
+    quoteType?: QuoteType;
 }
 
 export interface BackgroundCardProps

diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts
@@ -3,6 +3,7 @@ import {
     CustomControlsButtonPositioning,
     CustomControlsType,
     MediaVideoControlsType,
+    QuoteType,
     Theme,
 } from '../../models';
 
@@ -25,6 +26,7 @@ export const fileLinkTypes = ['vertical', 'horizontal'];
 export const dividerEnum = {enum: [0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']};
 export const sizeNumber = {type: 'number', maximum: 12, minimum: 1};
 export const contentThemes = ['default', 'dark', 'light'];
+export const quoteTypes = Object.values(QuoteType);
 export const customControlsType = [
     CustomControlsType.WithMuteButton,
     CustomControlsType.WithPlayPauseButton,

diff --git a/src/sub-blocks/Quote/Quote.scss b/src/sub-blocks/Quote/Quote.scss
@@ -3,6 +3,23 @@
 
 $block: '.#{$ns}quote';
 
+@mixin comma-type($name, $opening, $closing, $left-offset) {
+    &_#{$name} {
+        &::before {
+            position: absolute;
+            top: -1px;
+            left: $left-offset;
+            content: $opening;
+        }
+
+        #{$block}__text {
+            &::after {
+                content: $closing;
+            }
+        }
+    }
+}
+
 #{$block} {
     $arrowWidth: 16px;
     $gap: 5px;
@@ -41,17 +58,9 @@ $block: '.#{$ns}quote';
         position: relative;
         @include text-size(body-3);
 
-        &::before {
-            position: absolute;
-            top: -1px;
-            left: -10px;
-            content: '«';
-        }
-    }
-
-    &__text {
-        &::after {
-            content: '».';
+        &_quote-type {
+            @include comma-type('chevron', '«', '»', -10px);
+            @include comma-type('english-double', '“', '”', -8px);
         }
     }
 

diff --git a/src/sub-blocks/Quote/Quote.tsx b/src/sub-blocks/Quote/Quote.tsx
@@ -6,7 +6,7 @@ import {Author, HTML, Image} from '../../components';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import {useTheme} from '../../context/theme';
 import {useAnalytics} from '../../hooks';
-import {AuthorType, DefaultEventNames, QuoteProps} from '../../models';
+import {AuthorType, DefaultEventNames, QuoteProps, QuoteType} from '../../models';
 import {block, getThemedValue} from '../../utils';
 
 import './Quote.scss';
@@ -24,6 +24,7 @@ const Quote = (props: QuoteProps) => {
         author,
         url,
         buttonText,
+        quoteType = QuoteType.Chevron,
     } = props;
     const theme = useTheme();
     const imageThemed = getThemedValue(image, theme);
@@ -65,7 +66,7 @@ const Quote = (props: QuoteProps) => {
             <div key={text} className={b('content-wrapper')}>
                 <div>
                     <Image className={b('logo')} {...logoProps} />
-                    <div className={b('content')}>
+                    <div className={b('content', {'quote-type': quoteType})}>
                         <span className={b('text')}>
                             <HTML>{text}</HTML>
                         </span>

diff --git a/src/sub-blocks/Quote/__stories__/Quote.stories.tsx b/src/sub-blocks/Quote/__stories__/Quote.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
-import {QuoteProps} from '../../../models';
+import {QuoteProps, QuoteType} from '../../../models';
 import Quote from '../Quote';
 
 import data from './data.json';
@@ -22,11 +22,19 @@ const DefaultTemplate: StoryFn<QuoteProps> = (args) => (
         <Quote {...args} />
     </div>
 );
+const QuoteTypesTemplate: StoryFn<QuoteProps> = (args) => (
+    <div style={{maxWidth: '1248px', display: 'flex', flexDirection: 'column', gap: '24px'}}>
+        <Quote {...args} quoteType={QuoteType.Chevron} />
+        <Quote {...args} quoteType={QuoteType.EnglishDouble} />
+    </div>
+);
 export const Default = DefaultTemplate.bind({});
+export const QuoteTypes = QuoteTypesTemplate.bind({});
 export const BorderLine = DefaultTemplate.bind({});
 export const DarkTheme = DefaultTemplate.bind({});
 
 Default.args = data.default.content as QuoteProps;
+QuoteTypes.args = data.default.content as QuoteProps;
 BorderLine.args = {
     ...data.default.content,
     ...data.borderLine.content,

diff --git a/src/sub-blocks/Quote/schema.ts b/src/sub-blocks/Quote/schema.ts
@@ -1,5 +1,11 @@
 import {ImageProps} from '../../components/Image/schema';
-import {BaseProps, ThemeProps, authorItem, withTheme} from '../../schema/validators/common';
+import {
+    BaseProps,
+    ThemeProps,
+    authorItem,
+    quoteTypes,
+    withTheme,
+} from '../../schema/validators/common';
 
 export const Quote = {
     quote: {
@@ -24,6 +30,10 @@ export const Quote = {
             },
             theme: ThemeProps,
             author: authorItem,
+            quoteType: {
+                type: 'string',
+                enum: quoteTypes,
+            },
         },
     },
 };