diff --git a/src/components/ContentNode.vue b/src/components/ContentNode.vue
index c1eff4cd4..2fbb83ca6 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 = {
@@ -275,6 +277,11 @@ function renderNode(createElement, references) {
};
return createElement(DictionaryExample, { props }, renderChildren(node.summary || []));
}
+ case BlockType.small: {
+ return createElement('p', {}, [
+ createElement(Small, {}, renderChildren(node.inlineContent)),
+ ]);
+ }
case InlineType.codeVoice:
return createElement(CodeVoice, {}, (
node.code
@@ -310,7 +317,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/src/components/ContentNode/Small.vue b/src/components/ContentNode/Small.vue
new file mode 100644
index 000000000..2718357ca
--- /dev/null
+++ b/src/components/ContentNode/Small.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/core/typography/_font-styles.scss b/src/styles/core/typography/_font-styles.scss
index 3da9f04ce..d49e69646 100644
--- a/src/styles/core/typography/_font-styles.scss
+++ b/src/styles/core/typography/_font-styles.scss
@@ -194,5 +194,5 @@ $font-styles: (
),
nav-menu-collapsible: (
large: (nav_14_14, nav)
- )
+ ),
) !default;
diff --git a/tests/unit/components/ContentNode.spec.js b/tests/unit/components/ContentNode.spec.js
index 6c1230f6e..cf0b40804 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,24 @@ describe('ContentNode', () => {
});
});
+ describe('with type="small"', () => {
+ it('renders a ``', () => {
+ const wrapper = mountWithItem({
+ type: 'small',
+ inlineContent: [
+ {
+ type: 'text',
+ text: 'foo',
+ },
+ ],
+ });
+ const paragraph = wrapper.find('p');
+ const small = paragraph.find(Small);
+ expect(small.exists()).toBe(true);
+ expect(small.text()).toBe('foo');
+ });
+ });
+
describe('with type="codeVoice"', () => {
it('renders a `CodeVoice`', () => {
const wrapper = mountWithItem({