From 90ae7c1d5722bd65e44dc7fd66c8cae10b7e3acb Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Mon, 1 Aug 2022 14:19:57 +0300
Subject: [PATCH 1/6] feat: add @Small directive support

---
 src/components/ContentNode.vue               |  5 ++++
 src/components/ContentNode/Small.vue         | 30 ++++++++++++++++++++
 src/styles/core/typography/_font-styles.scss |  3 ++
 tests/unit/components/ContentNode.spec.js    | 17 +++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/ContentNode/Small.vue

diff --git a/src/components/ContentNode.vue b/src/components/ContentNode.vue
index cfee850d9..f4b6fbfd6 100644
--- a/src/components/ContentNode.vue
+++ b/src/components/ContentNode.vue
@@ -20,6 +20,7 @@ import InlineImage from './ContentNode/InlineImage.vue';
 import Reference from './ContentNode/Reference.vue';
 import Table from './ContentNode/Table.vue';
 import StrikeThrough from './ContentNode/StrikeThrough.vue';
+import Small from './ContentNode/Small.vue';
 
 const BlockType = {
   aside: 'aside',
@@ -32,6 +33,7 @@ const BlockType = {
   termList: 'termList',
   unorderedList: 'unorderedList',
   dictionaryExample: 'dictionaryExample',
+  small: 'small',
 };
 
 const InlineType = {
@@ -274,6 +276,9 @@ function renderNode(createElement, references) {
       };
       return createElement(DictionaryExample, { props }, renderChildren(node.summary || []));
     }
+    case BlockType.small: {
+      return createElement(Small, renderChildren(node.content));
+    }
     case InlineType.codeVoice:
       return createElement(CodeVoice, {}, (
         node.code
diff --git a/src/components/ContentNode/Small.vue b/src/components/ContentNode/Small.vue
new file mode 100644
index 000000000..12692e7dc
--- /dev/null
+++ b/src/components/ContentNode/Small.vue
@@ -0,0 +1,30 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <small>
+    <slot />
+  </small>
+</template>
+
+<script>
+export default {
+  name: 'Small',
+};
+</script>
+
+<style scoped lang='scss'>
+@import 'docc-render/styles/_core.scss';
+
+small {
+ @include font-styles(small-text);
+  color: var(--color-figure-gray);
+}
+</style>
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 3da9f04ce..57638fb9c 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -194,5 +194,8 @@ $font-styles: (
   ),
   nav-menu-collapsible: (
     large: (nav_14_14, nav)
+  ),
+  small-text: (
+    large: 14_18
   )
 ) !default;
diff --git a/tests/unit/components/ContentNode.spec.js b/tests/unit/components/ContentNode.spec.js
index 2cdaee03e..7a96f5e9b 100644
--- a/tests/unit/components/ContentNode.spec.js
+++ b/tests/unit/components/ContentNode.spec.js
@@ -21,6 +21,7 @@ import InlineImage from 'docc-render/components/ContentNode/InlineImage.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Table from 'docc-render/components/ContentNode/Table.vue';
 import StrikeThrough from 'docc-render/components/ContentNode/StrikeThrough.vue';
+import Small from '@/components/ContentNode/Small.vue';
 
 const { TableHeaderStyle } = ContentNode.constants;
 
@@ -320,6 +321,22 @@ describe('ContentNode', () => {
     });
   });
 
+  describe('with type="small"', () => {
+    it('renders a `<Small>`', () => {
+      const wrapper = mountWithItem({
+        type: 'small',
+        content: [
+          {
+            type: 'text',
+            text: 'foo',
+          },
+        ],
+      });
+      const small = wrapper.find(Small);
+      expect(small.text()).toBe('foo');
+    });
+  });
+
   describe('with type="codeVoice"', () => {
     it('renders a `CodeVoice`', () => {
       const wrapper = mountWithItem({

From 684f642db4439cf4408e39c4b3fd31ba7dc9779e Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dobromir92@gmail.com>
Date: Wed, 10 Aug 2022 10:19:48 +0300
Subject: [PATCH 2/6] Update src/components/ContentNode/Small.vue

---
 src/components/ContentNode/Small.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContentNode/Small.vue b/src/components/ContentNode/Small.vue
index 12692e7dc..83c4f8772 100644
--- a/src/components/ContentNode/Small.vue
+++ b/src/components/ContentNode/Small.vue
@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2022 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information

From 49d70c00465065858918932ace56bcbb03f76a27 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Wed, 10 Aug 2022 10:22:13 +0300
Subject: [PATCH 3/6] chore: fix indentation

---
 src/components/ContentNode/Small.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContentNode/Small.vue b/src/components/ContentNode/Small.vue
index 12692e7dc..c8a3d964c 100644
--- a/src/components/ContentNode/Small.vue
+++ b/src/components/ContentNode/Small.vue
@@ -24,7 +24,7 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 small {
- @include font-styles(small-text);
+  @include font-styles(small-text);
   color: var(--color-figure-gray);
 }
 </style>

From 4a6f171f7a36f2c806ebd66823a9649702501b10 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Tue, 13 Sep 2022 17:27:03 +0300
Subject: [PATCH 4/6] refactor: wrap small tags with a paragraph

---
 src/components/ContentNode.vue            |  6 ++++--
 tests/unit/components/ContentNode.spec.js | 11 ++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentNode.vue b/src/components/ContentNode.vue
index f4b6fbfd6..7956f3e52 100644
--- a/src/components/ContentNode.vue
+++ b/src/components/ContentNode.vue
@@ -277,7 +277,9 @@ function renderNode(createElement, references) {
       return createElement(DictionaryExample, { props }, renderChildren(node.summary || []));
     }
     case BlockType.small: {
-      return createElement(Small, renderChildren(node.content));
+      return createElement('p', {}, [
+        createElement(Small, {}, renderChildren(node.inlineContent)),
+      ]);
     }
     case InlineType.codeVoice:
       return createElement(CodeVoice, {}, (
@@ -314,7 +316,7 @@ function renderNode(createElement, references) {
       const reference = references[node.identifier];
       if (!reference) return null;
       const titleInlineContent = node.overridingTitleInlineContent
-          || reference.titleInlineContent;
+        || reference.titleInlineContent;
       const titlePlainText = node.overridingTitle || reference.title;
       return createElement(Reference, {
         props: {
diff --git a/tests/unit/components/ContentNode.spec.js b/tests/unit/components/ContentNode.spec.js
index 7a96f5e9b..448194006 100644
--- a/tests/unit/components/ContentNode.spec.js
+++ b/tests/unit/components/ContentNode.spec.js
@@ -325,15 +325,20 @@ describe('ContentNode', () => {
     it('renders a `<Small>`', () => {
       const wrapper = mountWithItem({
         type: 'small',
-        content: [
+        inlineContent: [
           {
             type: 'text',
             text: 'foo',
           },
         ],
       });
-      const small = wrapper.find(Small);
-      expect(small.text()).toBe('foo');
+      const paragraph = wrapper.find('p');
+      // assert the small tag is wrapped in a paragraph
+      expect(paragraph.html()).toMatchInlineSnapshot(`
+        <p>
+          <small-stub>foo</small-stub>
+        </p>
+      `);
     });
   });
 

From 2dac7e573d2077bc66e07924154f35d0aedd756f Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Wed, 14 Sep 2022 10:46:36 +0300
Subject: [PATCH 5/6] refactor: remove extra font-style

---
 src/components/ContentNode/Small.vue         | 2 +-
 src/styles/core/typography/_font-styles.scss | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ContentNode/Small.vue b/src/components/ContentNode/Small.vue
index 3a88b59fa..2718357ca 100644
--- a/src/components/ContentNode/Small.vue
+++ b/src/components/ContentNode/Small.vue
@@ -24,7 +24,7 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 small {
-  @include font-styles(small-text);
+  @include font-styles(body-reduced-tight);
   color: var(--color-figure-gray);
 }
 </style>
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 57638fb9c..d49e69646 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -195,7 +195,4 @@ $font-styles: (
   nav-menu-collapsible: (
     large: (nav_14_14, nav)
   ),
-  small-text: (
-    large: 14_18
-  )
 ) !default;

From a5f0048de77a8846c449b2a77673fa827ce23675 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Thu, 15 Sep 2022 10:41:56 +0300
Subject: [PATCH 6/6] chore: cleanup test

---
 tests/unit/components/ContentNode.spec.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/tests/unit/components/ContentNode.spec.js b/tests/unit/components/ContentNode.spec.js
index 5bf8ed88a..cf0b40804 100644
--- a/tests/unit/components/ContentNode.spec.js
+++ b/tests/unit/components/ContentNode.spec.js
@@ -333,12 +333,9 @@ describe('ContentNode', () => {
         ],
       });
       const paragraph = wrapper.find('p');
-      // assert the small tag is wrapped in a paragraph
-      expect(paragraph.html()).toMatchInlineSnapshot(`
-        <p>
-          <small-stub>foo</small-stub>
-        </p>
-      `);
+      const small = paragraph.find(Small);
+      expect(small.exists()).toBe(true);
+      expect(small.text()).toBe('foo');
     });
   });