From 2cadea3dba2d1e905375d1cdfebd7ff452b10b9e Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 10:46:28 -0700 Subject: [PATCH 1/9] use badge for technology list use badge for technology list --- src/components/Badge.vue | 4 +- src/components/DocumentationTopic.vue | 16 ++++--- .../Summary/Availability.vue | 20 ++++++++- .../Summary/TechnologyList.vue | 43 +++++++++++-------- src/components/Icons/TechnologyIcon.vue | 24 +++++++++++ 5 files changed, 79 insertions(+), 28 deletions(-) create mode 100644 src/components/Icons/TechnologyIcon.vue diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 6f77c2e1d..0189ca34c 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -55,12 +55,12 @@ $badge-border-radius: $border-radius - 1px !default; @include badge-variation(default); @include font-styles(badge); - display: inline-block; + display: flex; + align-items: center; padding: 2px 10px; white-space: nowrap; background: none; border-radius: $badge-border-radius; - margin-left: 10px; border: 1px solid var(--badge-color); color: var(--badge-text-color); diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 713902c1c..8b152ba20 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -18,16 +18,20 @@
- + - - + + @@ -33,6 +40,7 @@ import { ChangeTypes } from 'docc-render/constants/Changes'; import { getAPIChanges } from 'docc-render/mixins/apiChangesHelpers'; import AvailabilityRange from './AvailabilityRange.vue'; import Section from './Section.vue'; +import TechnologyList from './TechnologyList.vue'; export default { name: 'Availability', @@ -41,6 +49,7 @@ export default { components: { Badge, AvailabilityRange, + TechnologyList, Section, }, props: { @@ -48,6 +57,13 @@ export default { type: Array, required: true, }, + modules: { + type: Array, + required: false, + }, + extendsTechnology: { + type: String, + }, }, data() { return { diff --git a/src/components/DocumentationTopic/Summary/TechnologyList.vue b/src/components/DocumentationTopic/Summary/TechnologyList.vue index 5a7668f90..9832ed5bd 100644 --- a/src/components/DocumentationTopic/Summary/TechnologyList.vue +++ b/src/components/DocumentationTopic/Summary/TechnologyList.vue @@ -14,36 +14,36 @@ role="complementary" :aria-label="computedTitle" > - {{ computedTitle }}: - - - {{ technology.name }} - {{ module }} - - - + + + {{ technology.name }} + {{ module }} + + From 44e8745ca34f2fb5bf48c162a36227717b70c552 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 13:02:03 -0700 Subject: [PATCH 2/9] WIP WIP --- src/components/Badge.vue | 7 +++++++ src/components/DocumentationTopic.vue | 2 +- .../Summary/TechnologyList.vue | 18 +++++++++++++----- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 0189ca34c..f5cda836c 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -68,12 +68,19 @@ $badge-border-radius: $border-radius - 1px !default; --badge-color: var(--badge-dark-color); } + .tech-icon { + fill: var(--badge-text-color) + } + + /* nav bar badge */ &-deprecated { @include badge-variation(deprecated); + margin-left: 10px; } &-beta { @include badge-variation(beta); + margin-left: 10px; } } diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 8b152ba20..a6903e5b9 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,7 +19,7 @@ diff --git a/src/components/DocumentationTopic/Summary/TechnologyList.vue b/src/components/DocumentationTopic/Summary/TechnologyList.vue index 9832ed5bd..1a684b517 100644 --- a/src/components/DocumentationTopic/Summary/TechnologyList.vue +++ b/src/components/DocumentationTopic/Summary/TechnologyList.vue @@ -14,19 +14,19 @@ role="complementary" :aria-label="computedTitle" > + {{ computedTech }} - {{ technology.name }} + @@ -34,7 +34,6 @@ From 7570ce70eb2dfeb290cc3e91230a5e598c0ef696 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 13:33:10 -0700 Subject: [PATCH 3/9] fix badge color/spacing and logic to hide tech list fix badge color/spacing and logic to hide tech list --- src/components/Badge.vue | 2 +- src/components/DocumentationTopic.vue | 19 ++++++++------ .../Summary/Availability.vue | 10 ++++++-- src/views/DocumentationTopic.vue | 1 + .../components/DocumentationTopic.spec.js | 25 ++++++++++++------- .../Summary/TechnologyList.spec.js | 7 ------ tests/unit/views/DocumentationTopic.spec.js | 2 ++ 7 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 722d2d121..4e8a8bede 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -68,7 +68,7 @@ $badge-border-radius: $border-radius - 1px !default; } .tech-icon { - fill: var(--badge-text-color) + fill: var(--badge-color) } /* nav bar badge */ diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index a6903e5b9..da8b8da6c 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,19 +19,12 @@ - objcPath && swiftPath, hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false), enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true), + showModules({ modules, rootTitle }) { + // show modules if page belongs to/require multiple technologies + // or if name doesn't match root of page + if (!modules) return false; + return rootTitle !== modules[0].name || modules[0].relatedModules || modules.length > 1; + }, }, methods: { normalizePath(path) { diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index 6f24e3c04..68012d352 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -10,9 +10,9 @@ diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 0c6bad57e..75251e5a6 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -107,7 +107,7 @@ const sampleCodeDownload = { const propsData = { abstract: [abstract], - conformance: { constraints: [], availabilityPrefx: [] }, + conformance: { constraints: [], availabilityPrefix: [] }, hierarchy: { paths: [ [ @@ -118,6 +118,7 @@ const propsData = { }, identifier: 'doc://fookit', interfaceLanguage: 'swift', + rootTitle: 'fookit', symbolKind: TopicTypes.module, objcPath: 'documentation/objc', swiftPath: 'documentation/swift', @@ -336,14 +337,6 @@ describe('DocumentationTopic', () => { expect(wrapper.contains(RequirementMetadata)).toBe(true); }); - it('hides the Summary, if the global settings say so', () => { - // this should really only mock the resolved value for the specific flag, - // but this is fine for now - getSetting.mockResolvedValueOnce(true); - wrapper = shallowMount(DocumentationTopic, { propsData }); - expect(wrapper.find(Summary).exists()).toBe(false); - }); - it('renders a `Availability` with platforms data', () => { const platforms = [ { @@ -363,6 +356,20 @@ describe('DocumentationTopic', () => { expect(list.props('platforms')).toEqual(platforms); }); + it('hides the Availability, if the global settings say so', () => { + // this should really only mock the resolved value for the specific flag, + // but this is fine for now + getSetting.mockResolvedValueOnce(true); + wrapper = shallowMount(DocumentationTopic, { propsData }); + expect(wrapper.find(Availability).exists()).toBe(false); + }); + + it('renders the Availability, if more than 1 module', () => { + const modules = ['FooKit', 'BarKit']; + wrapper.setProps({ modules }); + expect(wrapper.find(Summary).exists()).toBe(true); + }); + it('renders a `TechnologyList` with technologies data', () => { const modules = ['FooKit', 'BarKit']; wrapper.setProps({ modules }); diff --git a/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js b/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js index 50c5dcbd5..ec9e7a417 100644 --- a/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js +++ b/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js @@ -15,7 +15,6 @@ const { Item, List, Section, - Title, WordBreak, } = TechnologyList.components; @@ -43,12 +42,6 @@ describe('TechnologyList', () => { expect(section.attributes('role')).toBe('complementary'); }); - it('renders a `Title`', () => { - const title = wrapper.find(Title); - expect(title.exists()).toBe(true); - expect(title.text()).toBe('Technologies:'); - }); - it('allows overriding the title via a prop', () => { wrapper.setProps({ title: 'Foobars' }); const title = wrapper.find(Title); diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js index 74843d6a6..485cf0b30 100644 --- a/tests/unit/views/DocumentationTopic.spec.js +++ b/tests/unit/views/DocumentationTopic.spec.js @@ -65,6 +65,7 @@ const topicData = { interfaceLanguage: 'swift', url: 'doc://com.example.documentation/documentation/fookit', }, + rootTitle: 'FooTechnology', metadata: { roleHeading: 'Thing', role: 'article', @@ -295,6 +296,7 @@ describe('DocumentationTopic', () => { occ: ['documentation/objc'], swift: ['documentation/swift'], }, + rootTitle: topicData.rootTitle, }); }); From e654b0a97dff95fd33c93da14a3cc11d2aaf981f Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 15:48:36 -0700 Subject: [PATCH 4/9] Remove`TechnologyList` and fix tests Remove`TechnologyList` and fix tests --- src/components/DocumentationTopic.vue | 25 ++--- .../Summary/Availability.vue | 36 +++--- .../Summary/TechnologyList.vue | 106 ------------------ src/views/DocumentationTopic.vue | 4 +- .../components/DocumentationTopic.spec.js | 60 +++------- .../Summary/Availability.spec.js | 34 +++--- .../Summary/TechnologyList.spec.js | 94 ---------------- tests/unit/views/DocumentationTopic.spec.js | 3 +- 8 files changed, 66 insertions(+), 296 deletions(-) delete mode 100644 src/components/DocumentationTopic/Summary/TechnologyList.vue delete mode 100644 tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index da8b8da6c..358d402ef 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,9 +19,8 @@ @@ -93,7 +92,6 @@ import ContentNode from './DocumentationTopic/ContentNode.vue'; import CallToActionButton from './CallToActionButton.vue'; import DefaultImplementations from './DocumentationTopic/DefaultImplementations.vue'; import Description from './DocumentationTopic/Description.vue'; -// import TechnologyList from './DocumentationTopic/Summary/TechnologyList.vue'; import PrimaryContent from './DocumentationTopic/PrimaryContent.vue'; import Relationships from './DocumentationTopic/Relationships.vue'; import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue'; @@ -130,7 +128,6 @@ export default { DefaultImplementations, Description, DownloadButton: CallToActionButton, - // TechnologyList, LanguageSwitcher, PrimaryContent, Relationships, @@ -226,9 +223,6 @@ export default { type: Object, default: () => ({}), }, - extendsTechnology: { - type: String, - }, tags: { type: Array, required: true, @@ -257,8 +251,8 @@ export default { type: String, default: '', }, - rootTitle: { - type: String, + technology: { + type: Object, required: true, }, }, @@ -303,11 +297,16 @@ export default { shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath, hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false), enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true), - showModules({ modules, rootTitle }) { + technologies({ modules, technology }) { + if (!modules) return []; + const technologyList = modules.reduce((list, module) => { + list.push(module.name); + return list.concat(module.relatedModules || []); + }, []); // show modules if page belongs to/require multiple technologies // or if name doesn't match root of page - if (!modules) return false; - return rootTitle !== modules[0].name || modules[0].relatedModules || modules.length > 1; + return technologyList.length === 1 + && technologyList[0] === technology.title ? [] : technologyList; }, }, methods: { diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index 68012d352..a2e0a6faa 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -10,13 +10,15 @@ @@ -146,7 +146,6 @@ export default { url: identifier, }, metadata: { - extends: extendsTechnology, conformance, modules, platforms, @@ -188,7 +187,6 @@ export default { topicSections, seeAlsoSections, variantOverrides, - extendsTechnology, symbolKind, tags: tags.slice(0, 1), // make sure we only show the first tag }; diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 75251e5a6..3174c304f 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -26,7 +26,6 @@ const { Aside, Description, DownloadButton, - TechnologyList, LanguageSwitcher, PrimaryContent, Relationships, @@ -118,10 +117,21 @@ const propsData = { }, identifier: 'doc://fookit', interfaceLanguage: 'swift', - rootTitle: 'fookit', symbolKind: TopicTypes.module, objcPath: 'documentation/objc', swiftPath: 'documentation/swift', + technology: { title: 'fookit' }, + platforms: [ + { + introducedAt: '1.0', + name: 'fooOS', + }, + { + deprecatedAt: '2.0', + introducedAt: '1.0', + name: 'barOS', + }, + ], primaryContentSections: [ { kind: PrimaryContent.constants.SectionKind.content, @@ -338,22 +348,9 @@ describe('DocumentationTopic', () => { }); it('renders a `Availability` with platforms data', () => { - const platforms = [ - { - introducedAt: '1.0', - name: 'fooOS', - }, - { - deprecatedAt: '2.0', - introducedAt: '1.0', - name: 'barOS', - }, - ]; - wrapper.setProps({ platforms }); - const list = wrapper.find(Availability); expect(list.exists()).toBe(true); - expect(list.props('platforms')).toEqual(platforms); + expect(list.props('platforms')).toEqual(propsData.platforms); }); it('hides the Availability, if the global settings say so', () => { @@ -364,21 +361,6 @@ describe('DocumentationTopic', () => { expect(wrapper.find(Availability).exists()).toBe(false); }); - it('renders the Availability, if more than 1 module', () => { - const modules = ['FooKit', 'BarKit']; - wrapper.setProps({ modules }); - expect(wrapper.find(Summary).exists()).toBe(true); - }); - - it('renders a `TechnologyList` with technologies data', () => { - const modules = ['FooKit', 'BarKit']; - wrapper.setProps({ modules }); - - const list = wrapper.find(TechnologyList); - expect(list.exists()).toBe(true); - expect(list.props('technologies')).toEqual(modules); - }); - it('renders a `LanguageSwitcher`', () => { const switcher = wrapper.find(LanguageSwitcher); expect(switcher.exists()).toBe(true); @@ -388,22 +370,6 @@ describe('DocumentationTopic', () => { swiftPath: propsData.languagePaths.swift[0], }); }); - - it('renders an `TechnologyList` component', () => { - expect(wrapper.find('.extends-technology').exists()).toBe(false); - const extendsTechnology = 'FooTechnology'; - - wrapper.setProps({ - extendsTechnology, - }); - - const technologyList = wrapper.find('.extends-technology'); - expect(technologyList.exists()).toBe(true); - expect(technologyList.props()).toEqual({ - technologies: [{ name: extendsTechnology }], - title: 'Extends', - }); - }); }); it('renders `Topics` if there are topic sections', () => { diff --git a/tests/unit/components/DocumentationTopic/Summary/Availability.spec.js b/tests/unit/components/DocumentationTopic/Summary/Availability.spec.js index d84ce9d2e..ce03b9915 100644 --- a/tests/unit/components/DocumentationTopic/Summary/Availability.spec.js +++ b/tests/unit/components/DocumentationTopic/Summary/Availability.spec.js @@ -43,6 +43,7 @@ describe('Availability', () => { name: 'myOS', }, ], + technologies: ['fooTechnolog', 'booTechnology'], }; const store = { @@ -73,29 +74,34 @@ describe('Availability', () => { expect(section.attributes('role')).toBe('complementary'); }); - it('renders a `Badge` and `AvailabilityRange` for each platform', () => { - const { platforms } = propsData; + it('renders a `Badge` for technologies, a `Badge` and `AvailabilityRange` for each platform', () => { + const { platforms, technologies } = propsData; const badges = wrapper.findAll(Badge); - expect(badges.length).toBe(platforms.length); + expect(badges.length).toBe(technologies.length + platforms.length); - for (let i = 0; i < platforms.length; i += 1) { + for (let i = 0; i < technologies.length; i += 1) { + const badge = badges.at(i); + expect(badge.exists()).toBe(true); + } + + for (let i = technologies.length; i < platforms.length; i += 1) { const badge = badges.at(i); const range = badge.find(AvailabilityRange); expect(range.exists()).toBe(true); expect(range.props()).toEqual({ - deprecatedAt: platforms[i].deprecatedAt, - introducedAt: platforms[i].introducedAt, - platformName: platforms[i].name, + deprecatedAt: platforms[i - technologies.length].deprecatedAt, + introducedAt: platforms[i - technologies.length].introducedAt, + platformName: platforms[i - technologies.length].name, }); } }); it('renders deprecated text', () => { const badges = wrapper.findAll(Badge); - expect(badges.at(0).contains('.deprecated')).toBe(false); - expect(badges.at(1).contains('.deprecated')).toBe(true); - expect(badges.at(2).contains('.deprecated')).toBe(true); + expect(badges.at(2).contains('.deprecated')).toBe(false); expect(badges.at(3).contains('.deprecated')).toBe(true); + expect(badges.at(4).contains('.deprecated')).toBe(true); + expect(badges.at(5).contains('.deprecated')).toBe(true); const deprecated = wrapper.find('.deprecated'); expect(deprecated.text()).toBe('Deprecated'); @@ -177,10 +183,10 @@ describe('Availability', () => { const badges = wrapper.findAll(Badge); - expect(badges.at(0).classes()).toEqual(['platform', 'changed', 'changed-deprecated']); - expect(badges.at(1).classes()).toEqual(['platform', 'changed', 'changed-added']); - expect(badges.at(2).classes()).toEqual(['platform', 'changed', 'changed-modified']); - expect(badges.at(3).classes()).toEqual(['platform']); + expect(badges.at(2).classes()).toEqual(['platform', 'changed', 'changed-deprecated']); + expect(badges.at(3).classes()).toEqual(['platform', 'changed', 'changed-added']); + expect(badges.at(4).classes()).toEqual(['platform', 'changed', 'changed-modified']); + expect(badges.at(5).classes()).toEqual(['platform']); }); }); }); diff --git a/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js b/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js deleted file mode 100644 index ec9e7a417..000000000 --- a/tests/unit/components/DocumentationTopic/Summary/TechnologyList.spec.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * 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 -*/ - -import { shallowMount } from '@vue/test-utils'; -import TechnologyList from 'docc-render/components/DocumentationTopic/Summary/TechnologyList.vue'; - -const { - Item, - List, - Section, - WordBreak, -} = TechnologyList.components; - -describe('TechnologyList', () => { - let wrapper; - - const propsData = { - technologies: [ - { name: 'FooKit' }, - { name: 'BarKit' }, - ], - }; - - beforeEach(() => { - wrapper = shallowMount(TechnologyList, { propsData }); - }); - - it('renders a `Section', () => { - expect(wrapper.is('.technologies')).toBe(true); - - const section = wrapper.find(Section); - expect(section.exists()).toBe(true); - expect(section.classes('technologies')).toBe(true); - expect(section.attributes('aria-label')).toBe('Technologies'); - expect(section.attributes('role')).toBe('complementary'); - }); - - it('allows overriding the title via a prop', () => { - wrapper.setProps({ title: 'Foobars' }); - const title = wrapper.find(Title); - expect(title.exists()).toBe(true); - expect(title.text()).toBe('Foobars:'); - expect(wrapper.find(Section).attributes('aria-label')).toBe('Foobars'); - }); - - it('renders a `List` with an `Item/WordBreak` for each technology', () => { - const list = wrapper.find(List); - expect(list.exists()).toBe(true); - - const items = list.findAll(Item); - expect(items.length).toBe(propsData.technologies.length); - - propsData.technologies.forEach((technology, i) => { - const wbreak = items.at(i).find(WordBreak); - expect(wbreak.exists()).toBe(true); - expect(wbreak.text()).toBe(technology.name); - }); - }); - - it('uses the singular "Technology" title with only a single technology', () => { - wrapper.setProps({ technologies: [propsData.technologies[0]] }); - expect(wrapper.find(Section).attributes('aria-label')).toBe('Technology'); - expect(wrapper.find(Title).text()).toBe('Technology:'); - }); - - it('renders multiple names of any related modules', () => { - wrapper.setProps({ - technologies: [ - propsData.technologies[0], - { - name: 'BarKit', - relatedModules: ['BazKit', 'QuxKit'], - }, - ], - }); - - const items = wrapper.findAll(Item); - expect(items.length).toBe(2); - - const lastItem = items.at(items.length - 1); - const names = lastItem.findAll('.name'); - expect(names.length).toBe(3); - expect(names.at(0).text()).toBe('BarKit'); - expect(names.at(1).text()).toBe('BazKit'); - expect(names.at(2).text()).toBe('QuxKit'); - }); -}); diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js index 485cf0b30..ebec6fe2e 100644 --- a/tests/unit/views/DocumentationTopic.spec.js +++ b/tests/unit/views/DocumentationTopic.spec.js @@ -65,7 +65,6 @@ const topicData = { interfaceLanguage: 'swift', url: 'doc://com.example.documentation/documentation/fookit', }, - rootTitle: 'FooTechnology', metadata: { roleHeading: 'Thing', role: 'article', @@ -296,7 +295,7 @@ describe('DocumentationTopic', () => { occ: ['documentation/objc'], swift: ['documentation/swift'], }, - rootTitle: topicData.rootTitle, + technology: topicData.references['topic://foo'], }); }); From a22f2aaf8da4631e6cd04a854ca1a508a339399d Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 15:53:08 -0700 Subject: [PATCH 5/9] Remove unnecessary styling Remove unnecessary styling --- src/components/DocumentationTopic/Summary/Availability.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index a2e0a6faa..1957ff1a3 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -115,8 +115,6 @@ export default { .tech-icon { height: 12px; - position: relative; - align-items: center; padding-right: 5px; } From 8d50fabd5cb065b80f05f2633808fa62615eb638 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 17:11:25 -0700 Subject: [PATCH 6/9] Address PR feedback Address PR feedback --- src/components/Badge.vue | 6 ++---- src/components/DocumentationTopic.vue | 7 +++---- .../DocumentationTopic/Summary/Availability.vue | 7 +++++-- tests/unit/components/DocumentationTopic.spec.js | 16 ++++++++-------- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 4e8a8bede..63c2ecec8 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -54,12 +54,12 @@ $badge-border-radius: $border-radius - 1px !default; @include badge-variation(default); @include font-styles(badge); - display: flex; - align-items: center; + display: inline-block; padding: 2px 10px; white-space: nowrap; background: none; border-radius: $badge-border-radius; + margin-left: 10px; border: 1px solid var(--badge-color); color: var(--badge-color); @@ -74,12 +74,10 @@ $badge-border-radius: $border-radius - 1px !default; /* nav bar badge */ &-deprecated { @include badge-variation(deprecated); - margin-left: 10px; } &-beta { @include badge-variation(beta); - margin-left: 10px; } } diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 358d402ef..d63b1d0a3 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,11 +19,11 @@ - + objcPath && swiftPath, hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false), enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true), - technologies({ modules, technology }) { - if (!modules) return []; + technologies({ modules = [], technology }) { const technologyList = modules.reduce((list, module) => { list.push(module.name); return list.concat(module.relatedModules || []); diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index 1957ff1a3..535a54f8c 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -113,6 +113,11 @@ export default { margin: 0; } +.technology { + display: inline-flex; + align-items: center; +} + .tech-icon { height: 12px; padding-right: 5px; @@ -120,7 +125,6 @@ export default { .beta { color: var(--color-badge-beta); - padding-left: 5px; .theme-dark & { color: var(--color-badge-dark-beta); @@ -129,7 +133,6 @@ export default { .deprecated { color: var(--color-badge-deprecated); - padding-left: 5px; .theme-dark & { color: var(--color-badge-dark-deprecated); diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 3174c304f..742bc2797 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -347,18 +347,18 @@ describe('DocumentationTopic', () => { expect(wrapper.contains(RequirementMetadata)).toBe(true); }); - it('renders a `Availability` with platforms data', () => { - const list = wrapper.find(Availability); - expect(list.exists()).toBe(true); - expect(list.props('platforms')).toEqual(propsData.platforms); - }); - - it('hides the Availability, if the global settings say so', () => { + it('hides the Summary, if the global settings say so', () => { // this should really only mock the resolved value for the specific flag, // but this is fine for now getSetting.mockResolvedValueOnce(true); wrapper = shallowMount(DocumentationTopic, { propsData }); - expect(wrapper.find(Availability).exists()).toBe(false); + expect(wrapper.find(Summary).exists()).toBe(false); + }); + + it('renders a `Availability` with platforms data', () => { + const list = wrapper.find(Availability); + expect(list.exists()).toBe(true); + expect(list.props('platforms')).toEqual(propsData.platforms); }); it('renders a `LanguageSwitcher`', () => { From 6cab6fad716ff134585bb81be7532519ed4f16f4 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 17:26:47 -0700 Subject: [PATCH 7/9] Move style to `Availability` Move style to `Availability` --- src/components/Badge.vue | 4 ---- src/components/DocumentationTopic.vue | 2 +- src/components/DocumentationTopic/Summary/Availability.vue | 1 + 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 63c2ecec8..b79492582 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -67,10 +67,6 @@ $badge-border-radius: $border-radius - 1px !default; --badge-color: var(--badge-dark-color); } - .tech-icon { - fill: var(--badge-color) - } - /* nav bar badge */ &-deprecated { @include badge-variation(deprecated); diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index d63b1d0a3..05b3b7875 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,7 +19,7 @@ diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index 535a54f8c..1d5d72d40 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -121,6 +121,7 @@ export default { .tech-icon { height: 12px; padding-right: 5px; + fill: var(--badge-color); } .beta { From 77565e235282089f2f829858fe4324539c9f6191 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 14 Mar 2022 17:28:57 -0700 Subject: [PATCH 8/9] Add || [] check for platforms Add || [] check for platforms --- src/components/DocumentationTopic.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 05b3b7875..b6cca99b9 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,7 +19,7 @@ From ba353dcdcbeb90d43c28d1772d2efe9a6ee7c947 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Mon, 14 Mar 2022 17:32:42 -0700 Subject: [PATCH 9/9] Override dark theme rule for tech icon. --- src/components/DocumentationTopic/Summary/Availability.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/DocumentationTopic/Summary/Availability.vue b/src/components/DocumentationTopic/Summary/Availability.vue index 1d5d72d40..c831e4f78 100644 --- a/src/components/DocumentationTopic/Summary/Availability.vue +++ b/src/components/DocumentationTopic/Summary/Availability.vue @@ -122,6 +122,10 @@ export default { height: 12px; padding-right: 5px; fill: var(--badge-color); + + .theme-dark & { + fill: var(--badge-color); + } } .beta {