refactor: callout titles h2 (#829)

* Revert "fix: use semantic h3 (#828)" This reverts commit 372ca7b. * feat: use h2 for callout heading * test: fix
readmeio · Dec 18, 2023 · be8b901 · be8b901
1 parent cd73094
commit be8b901
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/__tests__/components/__snapshots__/test.js.snap b/__tests__/components/__snapshots__/test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components Callout 1`] = `"<blockquote class=\\"callout callout_error\\" theme=\\"❗️\\"><h3 class=\\"callout-heading\\"><span class=\\"callout-icon\\">❗️</span><p>Error Callout</p></h3><p>Lorem ipsum dolor.</p></blockquote>"`;
+exports[`Components Callout 1`] = `"<blockquote class=\\"callout callout_error\\" theme=\\"❗️\\"><h2 class=\\"callout-heading\\"><span class=\\"callout-icon\\">❗️</span><p>Error Callout</p></h2><p>Lorem ipsum dolor.</p></blockquote>"`;
 
 exports[`Components Embed 1`] = `"<div class=\\"embed embed_hasImg\\"><div class=\\"embed-media\\"><iframe class=\\"embedly-embed\\" src=\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fcenter%3D37.829698%252C-122.258166%26key%3DAIzaSyD9HrlRuI1Ani0-MTZ7pvzxwxi4pgW0BCY%26zoom%3D16%26q%3D4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609&amp;display_name=Google+Maps&amp;url=https%3A%2F%2Fwww.google.com%2Fmaps%2Fplace%2F4126%2BOpal%2BSt%2C%2BOakland%2C%2BCA%2B94609%2F%4037.829698%2C-122.258166%2C16z%2Fdata%3D%214m5%213m4%211s0x80857dfb145a04ff%3A0x96b17d967421636f%218m2%213d37.8296978%214d-122.2581661%3Fhl%3Den&amp;image=http%3A%2F%2Fmaps-api-ssl.google.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D37.829698%2C-122.258166%26zoom%3D15%26size%3D250x250%26sensor%3Dfalse&amp;key=02466f963b9b4bb8845a05b53d3235d7&amp;type=text%2Fhtml&amp;schema=google\\" width=\\"600\\" height=\\"450\\" scrolling=\\"no\\" title=\\"Google Maps embed\\" frameborder=\\"0\\" allow=\\"autoplay; fullscreen\\" allowfullscreen=\\"true\\"></iframe></div></div>"`;
 

diff --git a/__tests__/components/test.js b/__tests__/components/test.js
@@ -74,7 +74,7 @@ describe('Components', () => {
     cleanup();
 
     const noTitleExpectation =
-      '<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p>Callout with no title.</p></blockquote>';
+      '<blockquote class="callout callout_warn" theme="🚧"><h2 class="callout-heading empty"><span class="callout-icon">🚧</span></h2><p>Callout with no title.</p></blockquote>';
 
     ({ container } = render(markdown.react(callout[1])));
     expect(container).toContainHTML(noTitleExpectation);

diff --git a/components/Callout/index.jsx b/components/Callout/index.jsx
@@ -8,10 +8,10 @@ const Callout = props => {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={`callout-heading${title ? '' : ' empty'}`}>
+      <h2 className={`callout-heading${title ? '' : ' empty'}`}>
         <span className="callout-icon">{icon}</span>
         {title}
-      </h3>
+      </h2>
       {content}
     </blockquote>
   );

diff --git a/components/Callout/style.scss b/components/Callout/style.scss
@@ -74,6 +74,10 @@
 
   .callout-heading {
     color: var(--title, --text);
+    font-size: 1.25em; // match h3
+    font-family: var(--markdown-title-font); // match h3
+    font-weight: var(--markdown-title-weight, 600); // match h3
+    line-height: 1.25; // match h3
     margin-bottom: calc(#{$l-offset} * 0.5);
 
     &:only-child {