fix: callout styling (#891)

| [![PR App][icn]][demo] | Fixes RM-9863, RM-9864 |
| :--------------------: | :--------------------: |

## 🧰 Changes

Fixes empty header callout styling.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/components/Callout.test.tsx

@@ -12,6 +12,19 @@ describe('Callout', () => {
         <p>Second Paragraph</p>
       </Callout>,
     );
+
     expect(screen.getByText('Second Paragraph')).toBeVisible();
   });
+
+  it("doesn't render all its children if it's **empty**", () => {
+    render(
+      <Callout icon="icon" theme="theme" empty>
+        <p>Title</p>
+        <p>First Paragraph</p>
+        <p>Second Paragraph</p>
+      </Callout>,
+    );
+
+    expect(screen.queryByText('Title')).toBeNull();
+  });
 });

__tests__/components/index.test.ts

@@ -68,7 +68,9 @@ describe('Components', () => {
     component = await run(code1);
     ({ container } = render(React.createElement(component)));
 
-    expect(container.innerHTML).toMatchInlineSnapshot(`"<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p></p><p>Callout with no title.</p></blockquote>"`);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p>Callout with no title.</p></blockquote>"`,
+    );
 
     cleanup();
   });

__tests__/transformers/callouts.test.ts

@@ -24,4 +24,16 @@ describe('callouts transformer', () => {
 
     expect(tree.children[0].children[0].children[1].type).toBe('strong');
   });
+
+  it('can parse callouts with markdown in the heading immediately following the emoji', () => {
+    const md = `
+> 🚧 **It works!**
+>
+> And, it no longer deletes your content!
+`;
+    const tree = mdast(md);
+
+    expect(tree.children[0].data.hProperties.empty).toBe(false);
+    expect(tree.children[0].children[0].children[1].type).toBe('strong');
+  });
 });

components/Callout/index.tsx

@@ -31,9 +31,9 @@ const Callout = (props: Props) => {
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
       <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
         <span className="callout-icon">{icon}</span>
-        {empty || children[0]}
+        {empty || React.Children.toArray(children)[0]}
       </h3>
-      {empty ? children : React.Children.toArray(children).slice(1)}
+      {React.Children.toArray(children).slice(1)}
     </blockquote>
   );
 };

components/Callout/style.scss

@@ -1,4 +1,4 @@
-@mixin callout ($l-offset: 1.33rem) {
+@mixin callout($l-offset: 1.33rem) {
   --background: #{lighten(#dfe2e5, 8.75%)};
   --border: #{lighten(#6a737d, 12.5%)};
 
@@ -16,32 +16,37 @@
     --border: #{lighten($color, 5%)}; // should be #5bc0de
   }
 
-  &_warn, &_warning {
+  &_warn,
+  &_warning {
     $color: #eea236;
     --background: #fcf8f2;
     --title: #{$color};
     --border: #{lighten($color, 5%)};
   }
 
-  &_ok, &_okay, &_success {
+  &_ok,
+  &_okay,
+  &_success {
     $color: #489e49;
     --background: #f3f8f3;
     --title: #{$color};
     --border: #{lighten($color, 5%)}; // should be #50af51
   }
 
-  &_err, &_error {
+  &_err,
+  &_error {
     $color: #d43f3a;
     --background: #fdf7f7;
     --title: #{$color};
-    --border: #{lighten($color, 5%)};  // should be #d9534f
+    --border: #{lighten($color, 5%)}; // should be #d9534f
   }
 
   > * {
     margin-left: $l-offset;
     position: relative;
   }
-  ul, ol {
+  ul,
+  ol {
     padding-left: 1.3em;
   }
 
@@ -55,18 +60,20 @@
     color: var(--text);
     border-color: var(--border);
     border-width: 3px;
-    padding: 0 0 0 .8em;
+    padding: 0 0 0 0.8em;
   }
 
   .callout-heading {
     color: var(--title, --text);
-    margin-bottom: calc(#{$l-offset} * .5);
+    margin-bottom: calc(#{$l-offset} * 0.5);
+
     &:only-child {
       margin-bottom: 0;
     }
+
     &.empty {
       float: left;
-      margin-top: calc(#{$l-offset} * .5);
+      margin-top: calc(#{$l-offset} * 0.5);
       .callout-icon {
         line-height: 0;
       }
@@ -85,8 +92,8 @@
   }
   .callout-icon {
     float: left;
-    margin-left: calc(-#{$l-offset} - .5em);
-    margin-right: -.25rem;
+    margin-left: calc(-#{$l-offset} - 0.5em);
+    margin-right: -0.25rem;
   }
 }
 @mixin calloutCustomIcons($R: callout) {
@@ -113,19 +120,19 @@
     --emoji: unset;
     &_okay {
       /* thumbs up */
-      --icon: "\f164";
+      --icon: '\f164';
     }
     &_info {
       /* info circle */
-      --icon: "\f05a";
+      --icon: '\f05a';
     }
     &_warn {
       /* warning triangle */
-      --icon: "\f071";
+      --icon: '\f071';
     }
     &_error {
       /* warning circle */
-      --icon: "\f06a";
+      --icon: '\f06a';
     }
     &_default {
       /* warning circle */
@@ -135,7 +142,8 @@
 }
 
 .callout {
-  &.callout { // bump specificity
+  &.callout {
+    // bump specificity
     @include callout;
   }
   @include calloutCustomIcons;

docs/callout-tests.md

@@ -22,3 +22,9 @@ Now with MDX
 
 Much _wow_
 </Callout>
+
+> ❗
+>
+> Does it still look good?!
+
+> ❔ Does _this_ look good?!