Add tagline and subtitle to heading content element

REDMINE-20488

entry_types/scrolled/config/locales/new/heading_subtitles.de.yml

@@ -0,0 +1,5 @@
+de:
+  pageflow_scrolled:
+    inline_editing:
+      type_subtitle: "Untertitel eingeben"
+      type_tagline: "Tagline eingeben"

entry_types/scrolled/config/locales/new/heading_subtitles.en.yml

@@ -0,0 +1,5 @@
+en:
+  pageflow_scrolled:
+    inline_editing:
+      type_subtitle: "Type subtitle"
+      type_tagline: "Type tagline"

entry_types/scrolled/package/src/contentElements/heading/Heading.js

@@ -6,9 +6,11 @@ import {
   Text,
   EditableInlineText,
   useContentElementConfigurationUpdate,
+  useContentElementEditorState,
   useDarkBackground,
   useI18n,
-  contentElementWidths
+  contentElementWidths,
+  utils
 } from 'pageflow-scrolled/frontend';
 
 import styles from './Heading.module.css';
@@ -19,47 +21,78 @@ export function Heading({configuration, sectionProps, contentElementWidth}) {
   const updateConfiguration = useContentElementConfigurationUpdate();
   const {t} = useI18n({locale: 'ui'});
   const darkBackground = useDarkBackground();
+  const {isSelected} = useContentElementEditorState();
 
   const legacyValue = configuration.children;
   const Tag = firstSectionInEntry ? 'h1' : 'h2';
 
   const forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
 
-  return (
-    <Tag className={classNames(styles.root,
-                               'scope-headings',
-                               configuration.typographyVariant &&
-                               `typography-heading-${configuration.typographyVariant}`,
-                               darkBackground ? styles.light : styles.dark,
-                               {[styles.forcePaddingTop]: forcePaddingTop},
-                               {[styles[sectionProps.layout]]:
-                                 contentElementWidth > contentElementWidths.md ||
-                                 sectionProps.layout === 'centerRagged'},
-                               {[withShadowClassName]: !sectionProps.invert})}
-         style={{color: paletteColor(configuration.color)}}>
-      <Text scaleCategory={getScaleCategory(configuration, firstSectionInEntry)}
-            inline={true}>
-        <EditableInlineText value={configuration.value}
-                            defaultValue={legacyValue}
-                            hyphens={configuration.hyphens}
-                            placeholder={firstSectionInEntry ?
-                                         t('pageflow_scrolled.inline_editing.type_title') :
-                                         t('pageflow_scrolled.inline_editing.type_heading')}
-                            onChange={value => updateConfiguration({value})} />
+  function renderSubtitle(name) {
+    const value = configuration[name];
+
+    if (!isSelected && utils.isBlankEditableTextValue(value)) {
+      return null;
+    }
+
+    return (
+      <Text scaleCategory={getScaleCategory(configuration, firstSectionInEntry, name)}>
+        <div className={styles[name]}
+             role="doc-subtitle">
+          <EditableInlineText value={value}
+                              hyphens={configuration.hyphens}
+                              placeholder={t(`pageflow_scrolled.inline_editing.type_${name}`)}
+                              onChange={value => updateConfiguration({[name]: value})} />
+        </div>
       </Text>
-    </Tag>
+    );
+  }
+
+  return (
+    <header className={styles.root}>
+      {renderSubtitle('tagline')}
+      <Tag className={classNames(styles.main,
+                                 'scope-headings',
+                                 configuration.typographyVariant &&
+                                 `typography-heading-${configuration.typographyVariant}`,
+                                 darkBackground ? styles.light : styles.dark,
+                                 {[styles.forcePaddingTop]: forcePaddingTop},
+                                 {[styles[sectionProps.layout]]:
+                                   contentElementWidth > contentElementWidths.md ||
+                                  sectionProps.layout === 'centerRagged'},
+                                 {[withShadowClassName]: !sectionProps.invert})}
+           style={{color: paletteColor(configuration.color)}}>
+        <Text scaleCategory={getScaleCategory(configuration, firstSectionInEntry)}
+              inline={true}>
+          <EditableInlineText value={configuration.value}
+                              defaultValue={legacyValue}
+                              hyphens={configuration.hyphens}
+                              placeholder={firstSectionInEntry ?
+                                           t('pageflow_scrolled.inline_editing.type_title') :
+                                           t('pageflow_scrolled.inline_editing.type_heading')}
+                              onChange={value => updateConfiguration({value})} />
+        </Text>
+      </Tag>
+      {renderSubtitle('subtitle')}
+    </header>
   );
 }
 
-function getScaleCategory(configuration, firstSectionInEntry) {
+function getScaleCategory(configuration, firstSectionInEntry, suffix = '') {
+  const base = `heading${capitalize(suffix)}`;
+
   switch (configuration.textSize) {
     case 'large':
-      return 'heading-lg';
+      return `${base}-lg`;
     case 'medium':
-      return 'heading-md';
+      return `${base}-md`;
     case 'small':
-      return 'heading-sm';
+      return `${base}-sm`;
     default:
-      return firstSectionInEntry ? 'heading-lg' : 'heading-sm';
+      return firstSectionInEntry ? `${base}-lg` : `${base}-sm`;
   }
 }
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}

entry_types/scrolled/package/src/contentElements/heading/Heading.module.css

@@ -9,6 +9,29 @@
   padding-top: 0.3em;
 }
 
+.main {
+  margin: 0;
+}
+
+.tagline {
+  margin-bottom: 0.8em;
+}
+
+.subtitle {
+  margin-top: 0.6em;
+  margin-bottom: 2em;
+}
+
+@media (max-width: 600px) {
+  .tagline {
+    margin-bottom: 0.4em;
+  }
+
+  .subtitle {
+    margin-top: 0.4em;
+  }
+}
+
 @media (min-width: 951px) {
   .right {
     text-align: right;

entry_types/scrolled/package/src/contentElements/heading/stories.js

@@ -1,5 +1,6 @@
 import '../frontend';
 import {storiesOfContentElement} from 'pageflow-scrolled/spec/support/stories';
+import {contentElementWidths} from 'pageflow-scrolled/frontend';
 
 storiesOfContentElement(module, {
   typeName: 'heading',
@@ -27,11 +28,38 @@ storiesOfContentElement(module, {
       }
     },
     {
-      name: 'Small',
+      name: 'Small ',
       configuration: {
         textSize: 'small'
       }
     },
+    {
+      name: 'With subtitles - Large',
+      configuration: {
+        tagline: [{type: 'heading', children: [{text: 'Some Tagline'}]}],
+        subtitle: [{type: 'heading', children: [{text: 'Some Subtitle'}]}],
+        width: contentElementWidths.xl,
+        textSize: 'large'
+      }
+    },
+    {
+      name: 'With subtitles - Medium',
+      configuration: {
+        tagline: [{type: 'heading', children: [{text: 'Some Tagline'}]}],
+        subtitle: [{type: 'heading', children: [{text: 'Some Subtitle'}]}],
+        width: contentElementWidths.xl,
+        textSize: 'medium'
+      }
+    },
+    {
+      name: 'With subtitles - Small',
+      configuration: {
+        tagline: [{type: 'heading', children: [{text: 'Some Tagline'}]}],
+        subtitle: [{type: 'heading', children: [{text: 'Some Subtitle'}]}],
+        width: contentElementWidths.xl,
+        textSize: 'small'
+      }
+    },
     {
       name: 'With custom content text colors',
       themeOptions: {

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

@@ -8,11 +8,13 @@ import styles from './Text.module.css';
  *
  * @param {Object} props
  * @param {string} props.scaleCategory -
- *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
- *   `'heading-xs'`, `'body'`, `'caption'`, `'question'`,
- *   `'quoteText-lg`', `'quoteText-md`', `'quoteText-sm`', `'quoteText-xs`', `'quoteAttribution`',
- *   `'counterNumber-lg`', `'counterNumber-md`', `'counterNumber-sm`',
- *   `'counterNumber-xs`', `'counterDescription`'.
+ *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,`'heading-xs'`,
+ *   `'headingTagline-lg'`, `'headingTagline-md'`, `'headingTagline-sm'`,
+ *   `'headingSubtitle-lg'`, `'headingSubtitle-md'`, `'headingSubtitle-sm'`,
+ *   `'body'`, `'caption'`, `'question'`,
+ *   `'quoteText-lg'`, `'quoteText-md'`, `'quoteText-sm'`, `'quoteText-xs'`, `'quoteAttribution'`,
+ *   `'counterNumber-lg'`, `'counterNumber-md'`, `'counterNumber-sm'`,
+ *   `'counterNumber-xs'`, `'counterDescription`'.
  * @param {string} [props.inline] - Render a span instread of a div.
  * @param {string} props.children - Nodes to render with specified typography.
  */
@@ -27,6 +29,8 @@ Text.propTypes = {
   inline: PropTypes.bool,
   scaleCategory: PropTypes.oneOf([
     'heading-lg', 'heading-md', 'heading-sm', 'heading-xs',
+    'headingTagline-lg', 'headingTagline-md', 'headingTagline-sm',
+    'headingSubtitle-lg', 'headingSubtitle-md', 'headingSubtitle-sm',
     'quoteText-lg', 'quoteText-md', 'quoteText-sm', 'quoteText-xs', 'quoteAttribution',
     'counterNumber-lg', 'counterNumber-md', 'counterNumber-sm', 'counterNumber-xs',
     'counterDescription',

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

@@ -39,6 +39,45 @@
   margin-bottom: 0;
 }
 
+
+.headingTagline-lg {
+  composes: typography-headingTagline from global;
+  font-size: text-md;
+  line-height: 1.2;
+}
+
+.headingTagline-md {
+  composes: typography-headingTagline from global;
+  font-size: text-md;
+  line-height: 1.2;
+}
+
+.headingTagline-sm {
+  composes: typography-headingTagline from global;
+  font-size: text-base;
+  line-height: 1.4;
+}
+
+
+.headingSubtitle-lg {
+  composes: typography-headingSubtitle from global;
+  font-size: 44px;
+  line-height: 1.2;
+}
+
+.headingSubtitle-md {
+  composes: typography-headingSubtitle from global;
+  font-size: 44px;
+  line-height: 1.2;
+}
+
+.headingSubtitle-sm {
+  composes: typography-headingSubtitle from global;
+  font-size: 26px;
+  line-height: 1.2;
+}
+
+
 .body {
   composes: typography-body from global;
   font-size: text-base;
@@ -137,6 +176,30 @@
     font-size: text-l;
   }
 
+
+  .headingTagline-lg {
+    font-size: 26px;
+    line-height: 1.2;
+  }
+
+  .headingTagline-md,
+  .headingTagline-sm {
+    font-size: text-base;
+    line-height: 1.4;
+  }
+
+  .headingSubtitle-lg {
+    font-size: text-md;
+    line-height: 1.2;
+  }
+
+  .headingSubtitle-md,
+  .headingSubtitle-sm {
+    font-size: 26px;
+    line-height: 1.2;
+  }
+
+
   .quoteText-lg {
     font-size: text-l;
     line-height: 1.1;