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({