Merge pull request #2221 from tf/teaser-scale-categories

Add scale categories for teaser title and tagline

Author: tf

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js

@@ -6,6 +6,7 @@ import {
   EditableInlineText,
   EditableText,
   InlineFileRights,
+  Text,
   useFileWithInlineRights,
   useContentElementConfigurationUpdate,
   useContentElementEditorState,
@@ -15,6 +16,12 @@ import {
 
 import {Thumbnail} from './Thumbnail';
 
+const scaleCategorySuffixes = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg'
+};
+
 export function ExternalLink({id, configuration, ...props}) {
   const {isEditable, isSelected} = useContentElementEditorState();
   const updateConfiguration = useContentElementConfigurationUpdate();
@@ -77,6 +84,8 @@ export function ExternalLink({id, configuration, ...props}) {
   const href = itemLinks[id] ? itemLinks[id]?.href : ensureAbsolute(props.url);
   const openInNewTab = itemLinks[id] ? itemLinks[id]?.openInNewTab : props.open_in_new_tab;
 
+  const scaleCategorySuffix = scaleCategorySuffixes[props.textSize || 'small'];
+
   return (
     <li className={classNames(styles.item,
                               styles[`textPosition-${props.textPosition}`],
@@ -93,7 +102,6 @@ export function ExternalLink({id, configuration, ...props}) {
         <div className={classNames(
           styles.card,
           styles[`thumbnailSize-${props.thumbnailSize}`],
-          styles[`textSize-${props.textSize}`],
           {[styles.invert]: props.invert
         })}>
           <div className={styles.thumbnail}>
@@ -109,20 +117,20 @@ export function ExternalLink({id, configuration, ...props}) {
             <InlineFileRights context="afterElement" items={[{file: thumbnailImageFile, label: 'image'}]} />
             <div className={styles.details}>
               {presentOrEditing('tagline') &&
-               <div className={styles.tagline}>
+               <Text scaleCategory={`teaserTagline-${scaleCategorySuffix}`}>
                  <EditableInlineText value={itemTexts[id]?.tagline}
                                      placeholder={t('pageflow_scrolled.inline_editing.type_tagline')}
                                      onChange={value => handleTextChange('tagline', value)} />
-               </div>}
-              <div className={styles.title}>
+               </Text>}
+              <Text scaleCategory={`teaserTitle-${scaleCategorySuffix}`}>
                 <EditableInlineText value={itemTexts[id]?.title || legacyTexts.title}
                                     placeholder={t('pageflow_scrolled.inline_editing.type_heading')}
                                     onChange={value => handleTextChange('title', value)} />
-              </div>
+              </Text>
               {presentOrEditing('description') &&
                <div className={styles.link_desc}>
                  <EditableText value={itemTexts[id]?.description || legacyTexts.description}
-                               scaleCategory="teaserDescription"
+                               scaleCategory={`teaserDescription-${scaleCategorySuffix}`}
                                placeholder={t('pageflow_scrolled.inline_editing.type_text')}
                                onChange={value => handleTextChange('description', value)} />
                </div>}

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css

@@ -119,7 +119,6 @@
   opacity: calc(0.9 * var(--overlay-opacity, 0.7));
 }
 
-
 .textPosition-none .background {
   display: none;
 }
@@ -141,41 +140,7 @@
   padding: 10px 10px 10px 15px;
 }
 
-.tagline {
-  composes: typography-externalLinkTagline from global;
-  line-height: 1.3;
-  margin: 0 0 0.25rem;
-}
-
-.title {
-  composes: typography-externalLinkTitle from global;
-  line-height: 1.3;
-  font-weight: bold;
-  margin: 0 0 1rem;
-}
-
+.details p,
 .textPosition-overlay .title:last-child {
   margin-bottom: 0;
 }
-
-.details p {
-  margin-bottom: 0;
-}
-
-.textSize-medium {
-  font-size: 18px;
-}
-
-.textSize-large {
-  font-size: 20px;
-}
-
-@media screen and breakpoint-sm {
-  .textSize-small .title {
-    font-size: 1.2em;
-  }
-
-  .textSize-medium .title {
-    font-size: 1.1em;
-  }
-}

entry_types/scrolled/package/src/frontend/Text.js

@@ -20,7 +20,9 @@ import styles from './Text.module.css';
  *   `'counterNumber-xs'`, `'counterDescription`'.
  *   `'infoTableLabel'`, `'infoTableValue`'.
  *   `'hotspotsTooltipTitle'`, `'hotspotsTooltipDescription`', `'hotspotsTooltipLink`',
- *   `'teaserDescription'`.
+ *   `'teaserTitle-lg'`, `'teaserTitle-md'`, `'teaserTitle-sm'`,
+ *   `'teaserTagline-lg'`, `'teaserTagline-md'`, `'teaserTagline-sm'`,
+ *   `'teaserDescription-lg'`, `'teaserDescription-md'`, `'teaserDescription-sm'`.
  * @param {string} [props.typographyVariant] - Suffix for variant class name.
  * @param {string} [props.typographySize] - Suffix for size class name.
  * @param {string} [props.inline] - Render a span instread of a div.
@@ -54,7 +56,9 @@ Text.propTypes = {
     'quoteText-lg', 'quoteText-md', 'quoteText-sm', 'quoteText-xs',
     'quoteAttribution-lg', 'quoteAttribution-md', 'quoteAttribution-sm', 'quoteAttribution-xs',
     'hotspotsTooltipTitle', 'hotspotsTooltipDescription', 'hotspotsTooltipLink',
-    'teaserDescription',
+    'teaserTitle-lg', 'teaserTitle-md', 'teaserTitle-sm',
+    'teaserTagline-lg', 'teaserTagline-md', 'teaserTagline-sm',
+    'teaserDescription-lg', 'teaserDescription-md', 'teaserDescription-sm',
     'counterNumber-lg', 'counterNumber-md', 'counterNumber-sm', 'counterNumber-xs',
     'counterDescription',
     'infoTableLabel', 'infoTableValue',

entry_types/scrolled/package/src/frontend/Text.module.css

@@ -218,9 +218,73 @@
   font-weight: bold;
 }
 
-.teaserDescription {
+.teaserTitle-lg {
+  composes: typography-externalLinkTitle from global;
+  composes: typography-externalLinkTitleLg from global;
+  line-height: 1.3;
+  font-weight: bold;
+  font-size: text-s;
+  margin-bottom: 1rem;
+}
+
+.teaserTitle-md {
+  composes: typography-externalLinkTitle from global;
+  composes: typography-externalLinkTitleMd from global;
+  line-height: 1.3;
+  font-weight: bold;
+  font-size: 19.8px;
+  margin-bottom: 1rem;
+}
+
+.teaserTitle-sm {
+  composes: typography-externalLinkTitle from global;
+  composes: typography-externalLinkTitleSm from global;
+  line-height: 1.3;
+  font-weight: bold;
+  font-size: 19.2px;
+  margin-bottom: 1rem;
+}
+
+.teaserTagline-lg {
+  composes: typography-externalLinkTagline from global;
+  composes: typography-externalLinkTaglineLg from global;
+  line-height: 1.3;
+  font-size: text-s;
+  margin-bottom: 0.25rem;
+}
+
+.teaserTagline-md {
+  composes: typography-externalLinkTagline from global;
+  composes: typography-externalLinkTaglineMd from global;
+  line-height: 1.3;
+  font-size: text-xs;
+  margin-bottom: 0.25rem;
+}
+
+.teaserTagline-sm {
+  composes: typography-externalLinkTagline from global;
+  composes: typography-externalLinkTaglineSm from global;
+  line-height: 1.3;
+  font-size: text-2xs;
+  margin-bottom: 0.25rem;
+}
+
+.teaserDescription-lg {
+  composes: typography-externalLinkDescription from global;
+  line-height: 1.3;
+  font-size: text-s;
+}
+
+.teaserDescription-md {
+  composes: typography-externalLinkDescription from global;
+  line-height: 1.3;
+  font-size: text-xs;
+}
+
+.teaserDescription-sm {
   composes: typography-externalLinkDescription from global;
   line-height: 1.3;
+  font-size: text-2xs;
 }
 
 .infoTableLabel {
@@ -251,7 +315,6 @@
     font-size: text-l;
   }
 
-
   .headingTagline-lg {
     font-size: 26px;
     line-height: 1.2;
@@ -310,4 +373,12 @@
     font-size: text-l;
     line-height: 1.1;
   }
+
+  .teaserTitle-md {
+    font-size: text-xs;
+  }
+
+  .teaserTitle-sm {
+    font-size: text-2xs;
+  }
 }