Merge pull request #2077 from tf/misc-theme-options

Additional theme options and properties
codevise · Feb 16, 2024 · cf3437e · cf3437e
2 parents e5f92b1 + 31d8854
commit cf3437e
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 36 deletions.
diff --git a/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md b/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md
@@ -231,6 +231,22 @@ System](https://material.io/design/color/the-color-system.html#color-theme-creat
 | `default_navigation_separator_color` | Color of separator lines between chapters. |
 | `default_navigation_desktop_logo_height` | Height of the logo in the desktop layout. |
 | `default_navigation_mobile_logo_height` | Height of the logo in the mobile layout. |
+| `default_navigation_unmute_animation_color` | Color of the animated circle that is displayed when sound is unmuted. |
+
+The following theme options are supported:
+
+``` ruby
+entry_type_config.themes.register(
+  :my_custom_theme,
+  # ...
+
+  # Use lighter version of menu icon
+  default_navigation_menu_icon_variant: 'small',
+
+  # Center logo in mobile navigation bar
+  default_navigation_mobile_logo_position: 'center'
+)
+```
 
 ## Palette Colors
 

diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md
@@ -65,7 +65,9 @@ The following rule names are supported:
 | `heading_xs` | Applies to headings in text block content elements. |
 | `body` | Applies to text blocks (paragraphs, lists, block quotes) in the entry content. |
 | `caption` | Applies to captions of content elements like inline images or inline videos. |
+| `content_link` | Applies to text links in text blocks, figures, quotes and counters. |
 | `default_navigation_chapter_link` | Applies to chapter links in the default navigation. |
+| `default_navigation_chapter_summary` | Applies to chapter summary texts in the default navigation. |
 | `default_navigation_active_chapter_link` | Applies to the chapter link representing the current chapter. |
 
 ### Responsive Breakpoints

diff --git a/entry_types/scrolled/package/spec/frontend/EditableText-spec.js b/entry_types/scrolled/package/spec/frontend/EditableText-spec.js
@@ -115,6 +115,7 @@ describe('EditableText', () => {
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', 'https://example.com')
+    expect(getByRole('link')).toHaveClass('typography-contentLink')
     expect(getByRole('link')).not.toHaveAttribute('target')
     expect(getByRole('link')).not.toHaveAttribute('rel')
   });
@@ -166,6 +167,7 @@ describe('EditableText', () => {
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', '#the-intro')
+    expect(getByRole('link')).toHaveClass('typography-contentLink')
     expect(getByRole('link')).not.toHaveAttribute('target')
     expect(getByRole('link')).not.toHaveAttribute('rel')
   });
@@ -193,6 +195,7 @@ describe('EditableText', () => {
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', '#section-10')
+    expect(getByRole('link')).toHaveClass('typography-contentLink')
     expect(getByRole('link')).not.toHaveAttribute('target')
     expect(getByRole('link')).not.toHaveAttribute('rel')
   });
@@ -224,6 +227,7 @@ describe('EditableText', () => {
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', '000/000/001/original/image.jpg')
+    expect(getByRole('link')).toHaveClass('typography-contentLink')
     expect(getByRole('link')).toHaveAttribute('target', '_blank')
     expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
   });

diff --git a/entry_types/scrolled/package/src/contentElements/counter/Counter.module.css b/entry_types/scrolled/package/src/contentElements/counter/Counter.module.css
@@ -1,13 +1,7 @@
-@value contentLinkColor from "pageflow-scrolled/values/colors.module.css";
-
 .wrapper p {
   margin: 0;
 }
 
-.wrapper a {
-  color: contentLinkColor;
-}
-
 .number {
   display: inline-block;
   word-break: break-word;

diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.module.css b/entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.module.css
@@ -1,6 +1,5 @@
 @value (
-  lightContentTextColor,
-  contentLinkColor
+  lightContentTextColor
 ) from "pageflow-scrolled/values/colors.module.css";
 
 .wrapper {

diff --git a/entry_types/scrolled/package/src/contentElements/question/Question.module.css b/entry_types/scrolled/package/src/contentElements/question/Question.module.css
@@ -1,5 +1,3 @@
-@value contentLinkColor from "pageflow-scrolled/values/colors.module.css";
-
 .details {
   position: relative;
   padding-left: 22px;
@@ -34,10 +32,6 @@
   margin: 1.375rem 0 0 0;
 }
 
-.answer a {
-  color: contentLinkColor;
-}
-
 .layout-centerRagged {
   text-align: center;
 }
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
@@ -1,5 +1,4 @@
 @value breakpoint-sm from 'pageflow-scrolled/values/breakpoints.module.css';
-@value contentLinkColor from "pageflow-scrolled/values/colors.module.css";
 
 .figure {
   margin: 0;
@@ -15,10 +14,6 @@
   align-items: center;
 }
 
-.figure a {
-  color: var(--palette-color, contentLinkColor);
-}
-
 .text {
   --quote-indent: var(--theme-quote-indent, 0);
   --quote-large-mark-font-size: var(--theme-quote-large-mark-font-size, 2em);

diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/TextBlock.module.css b/entry_types/scrolled/package/src/contentElements/textBlock/TextBlock.module.css
@@ -1,4 +1,3 @@
-@value contentLinkColor from "pageflow-scrolled/values/colors.module.css";
 @value breakpoint-sm from 'pageflow-scrolled/values/breakpoints.module.css';
 
 .text {
@@ -26,7 +25,6 @@
 }
 
 .text a {
-  color: contentLinkColor;
   word-wrap: break-word;
 }
 

diff --git a/entry_types/scrolled/package/src/frontend/EditableText.js b/entry_types/scrolled/package/src/frontend/EditableText.js
@@ -132,7 +132,11 @@ function renderLink({attributes, children, element}) {
     );
   }
   else if (element?.href?.section) {
-    return <a {...attributes} href={`#section-${element.href.section}`}>{children}</a>;
+    return <a {...attributes}
+              className={styles.link}
+              href={`#section-${element.href.section}`}>
+      {children}
+    </a>;
   }
   if (element?.href?.file) {
     const {key, ...otherAttributes} = attributes;
@@ -150,20 +154,30 @@ function renderLink({attributes, children, element}) {
                              {target: '_blank', rel: 'noopener noreferrer'} :
                              {};
 
-    return <a {...attributes} {...targetAttributes} href={element.href}>{children}</a>;
+    return <a {...attributes}
+              {...targetAttributes}
+              className={styles.link}
+              href={element.href}>
+      {children}
+    </a>;
   }
 }
 
 function ChapterLink({attributes, children, chapterPermaId}) {
   const chapter = useChapter({permaId: chapterPermaId});
 
-  return <a {...attributes} href={`#${chapter?.chapterSlug || ''}`}>{children}</a>;
+  return <a {...attributes}
+            className={styles.link}
+            href={`#${chapter?.chapterSlug || ''}`}>
+    {children}
+  </a>;
 }
 
 function FileLink({attributes, children, fileOptions}) {
   const file = useFile(fileOptions);
 
   return <a {...attributes}
+            className={styles.link}
             target="_blank"
             rel="noopener noreferrer"
             href={file?.urls.original || '#'}>

diff --git a/entry_types/scrolled/package/src/frontend/EditableText.module.css b/entry_types/scrolled/package/src/frontend/EditableText.module.css
@@ -1,6 +1,7 @@
 @value (
   darkContentTextColor,
-  lightContentTextColor
+  lightContentTextColor,
+  contentLinkColor
 ) from "pageflow-scrolled/values/colors.module.css";
 
 .root {
@@ -14,3 +15,8 @@
 .dark {
   color: darkContentTextColor;
 }
+
+.link {
+  composes: typography-contentLink from global;
+  color: contentLinkColor;
+}
diff --git a/entry_types/scrolled/package/src/frontend/Figure.module.css b/entry_types/scrolled/package/src/frontend/Figure.module.css
@@ -1,8 +1,7 @@
 @value (
   darkContentSurfaceColor, lightContentSurfaceColor,
   darkContentTextColor, lightContentTextColor,
-  contentColorScope,
-  contentLinkColor
+  contentColorScope
 ) from "pageflow-scrolled/values/colors.module.css";
 
 .root {
@@ -20,10 +19,6 @@
   margin: 0;
 }
 
-.root > figcaption a {
-  color: contentLinkColor;
-}
-
 .invert > figcaption {
   background-color: darkContentSurfaceColor;
   color: lightContentTextColor;

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/ChapterLink.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/ChapterLink.js
@@ -20,7 +20,7 @@ export function ChapterLink(props) {
          onClick={() => props.handleMenuClick(props.chapterLinkId)}>
         {presence(props.title) || t('pageflow_scrolled.public.navigation.chapter', {number: props.chapterIndex})}
       </a>
-      {!isBlank(props.summary) && <p className={styles.summary}
+      {!isBlank(props.summary) && <p className={classNames(styles.summary, styles.inlineSummary) }
                                      dangerouslySetInnerHTML={{__html: props.summary}} />}
     </div>
   );
@@ -30,7 +30,7 @@ export function ChapterLink(props) {
   }
 
   const content = (
-    <p dangerouslySetInnerHTML={{__html: props.summary}} />
+    <p className={styles.summary} dangerouslySetInnerHTML={{__html: props.summary}} />
   );
 
   return (

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/ChapterLink.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/ChapterLink.module.css
@@ -26,15 +26,20 @@
 }
 
 .summary {
+  composes: typography-defaultNavigationChapterSummary from global;
+}
+
+.inlineSummary {
   color: var(--theme-widget-on-background-color);
+  padding: 0 10px;
 }
 
 .tooltipBubble {
   display: none;
 }
 
 @media breakpoint-md {
-  .summary {
+  .inlineSummary {
     display: none;
   }
 

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css
@@ -171,6 +171,11 @@ div:focus-within > .contextIcon,
     left: 65px;
   }
 
+  .centerMobileLogo.logo {
+    left: 50%;
+    transform: translate(-50%);
+  }
+
   .navigationChapters {
     display: block;
     position: fixed;

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js
@@ -11,7 +11,12 @@ export function Logo() {
     <a target="_blank"
        rel="noopener noreferrer"
        href={theme.options.logoUrl}
-       className={classNames(styles.menuIcon, styles.logo)}>
+       className={classNames(
+         styles.menuIcon,
+         styles.logo,
+         {[styles.centerMobileLogo]:
+           theme.options.defaultNavigationMobileLogoPosition === 'center'}
+       )}>
       <picture>
         <source media="(max-width: 780px)" srcSet={theme.assets.logoMobile} />
         <source media="(min-width: 781px)" srcSet={theme.assets.logoDesktop} />

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/ToggleMuteButton.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/ToggleMuteButton.module.css
@@ -16,7 +16,7 @@
   z-index: -1;
   width: 10px;
   height: 10px;
-  background-color: #ddd;
+  background-color: var(--theme-default-navigation-unmute-animation-color, #ddd);
   border-radius: 5px;
   animation: pulse 0.5s ease 0.2s 1;
   animation-fill-mode: forwards;

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js
@@ -80,3 +80,23 @@ stories.add(
     }
   }
 );
+
+stories.add(
+  'Mobile - Centered Logo',
+  () =>
+    <RootProviders seed={normalizeAndMergeFixture({
+      ...getSeed({chapterCount: 3}),
+      themeOptions: {defaultNavigationMobileLogoPosition: 'center'}
+    })}>
+      <Entry />
+    </RootProviders>,
+  {
+    percy: {
+      widths: [320]
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6'
+    }
+  }
+);
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/themes_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/themes_helper_spec.rb
@@ -120,6 +120,23 @@ module PageflowScrolled
           }
         CSS
       end
+
+      it 'support pseudo classes' do
+        theme = Pageflow::Theme.new(:test,
+                                    typography: {
+                                      'contentLink:hover': {
+                                        color: 'blue'
+                                      }
+                                    })
+
+        css = helper.scrolled_theme_typography_rules(theme)
+
+        expect(css).to include(<<~CSS)
+          .typography-contentLink:hover {
+            color: blue;
+          }
+        CSS
+      end
     end
 
     describe '#scrolled_theme_properties_rules' do