From 5298f23a8f9d86f9b817cf6a8a3c8736220ee0b7 Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Mon, 28 Feb 2022 12:10:54 +0200 Subject: [PATCH 01/72] feat: add a hero to the DocumentationTopic.vue --- src/components/DocumentationTopic.vue | 10 +- .../DocumentationTopic/DocumentationHero.vue | 126 ++++++++++++++++++ src/components/DocumentationTopic/Title.vue | 9 +- .../components/DocumentationTopic.spec.js | 31 ++++- .../DocumentationHero.spec.js | 76 +++++++++++ 5 files changed, 236 insertions(+), 16 deletions(-) create mode 100644 src/components/DocumentationTopic/DocumentationHero.vue create mode 100644 tests/unit/components/DocumentationTopic/DocumentationHero.spec.js diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index cb48aad23..c9ea9c32b 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -11,11 +11,13 @@ @@ -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 35/72] 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 36/72] 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 37/72] 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 38/72] 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 39/72] 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 40/72] 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 41/72] 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 { From a7e62ac0a2f2c0c4e71b2c085b2df8bfd1b3aeab Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Wed, 16 Mar 2022 13:22:38 -0700 Subject: [PATCH 42/72] WIP: Add language switcher for TargetIDE WIP: Add language switcher for TargetIDE, remove hideSummary, fix test --- app/public/theme-settings.json | 3 --- src/components/DocumentationTopic.vue | 20 ++++++---------- .../DocumentationTopic/DocumentationHero.vue | 4 ---- .../DocumentationTopic/DocumentationNav.vue | 3 ++- .../Summary/Availability.vue | 6 +---- .../Summary/LanguageSwitcher.vue | 24 ++++++++++++------- .../DocumentationTopic/Summary/Section.vue | 3 +-- .../DocumentationTopic/Summary/Title.vue | 8 +++++-- .../components/DocumentationTopic.spec.js | 23 ++++-------------- 9 files changed, 37 insertions(+), 57 deletions(-) diff --git a/app/public/theme-settings.json b/app/public/theme-settings.json index 729decd5e..4b841880e 100644 --- a/app/public/theme-settings.json +++ b/app/public/theme-settings.json @@ -54,9 +54,6 @@ }, "features": { "docs": { - "summary": { - "hide": false - }, "navigator": { "enable": false } diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index b6cca99b9..bb3683f0e 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -1,7 +1,7 @@ + + + + + + diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue index d2546bd0d..6ec9126c7 100644 --- a/src/components/NavMenuItems.vue +++ b/src/components/NavMenuItems.vue @@ -1,7 +1,7 @@ - - - - - - diff --git a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue index 225f8d22b..05dfe401c 100644 --- a/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue +++ b/src/components/DocumentationTopic/Summary/LanguageSwitcher.vue @@ -124,7 +124,7 @@ export default { .language { padding-bottom: 10px; - justify-content: right; + justify-content: flex-end; } .language, .language-list { diff --git a/src/components/NavMenuItems.vue b/src/components/NavMenuItems.vue index 6ec9126c7..8368de712 100644 --- a/src/components/NavMenuItems.vue +++ b/src/components/NavMenuItems.vue @@ -41,7 +41,6 @@ $vertical-padding: $nav-height-small - $nav-padding-small; .nav-menu-items { display: flex; justify-content: flex-end; - align-items: center; // adds a subtle fade-in animation effect on mobile @include nav-in-breakpoint { diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 518d1c0ac..7aaa8f0fc 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -345,17 +345,15 @@ describe('DocumentationTopic', () => { }); }); - describe('isTargetIDE', () => { + it('renders a `LanguageSwitcher` if TargetIDE', () => { const provide = { isTargetIDE: true }; - it('renders a `LanguageSwitcher`', () => { - wrapper = shallowMount(DocumentationTopic, { propsData, provide }); - const switcher = wrapper.find(LanguageSwitcher); - expect(switcher.exists()).toBe(true); - expect(switcher.props()).toEqual({ - interfaceLanguage: propsData.interfaceLanguage, - objcPath: propsData.languagePaths.occ[0], - swiftPath: propsData.languagePaths.swift[0], - }); + wrapper = shallowMount(DocumentationTopic, { propsData, provide }); + const switcher = wrapper.find(LanguageSwitcher); + expect(switcher.exists()).toBe(true); + expect(switcher.props()).toEqual({ + interfaceLanguage: propsData.interfaceLanguage, + objcPath: propsData.languagePaths.occ[0], + swiftPath: propsData.languagePaths.swift[0], }); }); diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js index defb6b3df..f1a82cb54 100644 --- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js +++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js @@ -63,7 +63,7 @@ describe('DocumentationNav', () => { }], interfaceLanguage: 'swift', swiftPath: 'documentation/foo', - objcPath: 'documentation/foo', + objcPath: 'documentation/bar', references, }; @@ -208,8 +208,8 @@ describe('DocumentationNav', () => { expect(toggle.exists()).toBe(true); expect(toggle.props()).toEqual({ interfaceLanguage: propsData.interfaceLanguage, - objcPath: propsData.swiftPath, - swiftPath: propsData.objcPath, + swiftPath: propsData.swiftPath, + objcPath: propsData.objcPath, }); }); diff --git a/tests/unit/components/DocumentationTopic/Summary.spec.js b/tests/unit/components/DocumentationTopic/Summary.spec.js deleted file mode 100644 index 63153961d..000000000 --- a/tests/unit/components/DocumentationTopic/Summary.spec.js +++ /dev/null @@ -1,29 +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 Summary from 'docc-render/components/DocumentationTopic/Summary.vue'; - -describe('Summary', () => { - it('renders a `.summary` class at the root', () => { - const wrapper = shallowMount(Summary); - - expect(wrapper.classes('summary')).toBe(true); - }); - - it('renders slot content', () => { - const wrapper = shallowMount(Summary, { - slots: { default: '

foobar

' }, - }); - - expect(wrapper.contains('p')).toBe(true); - expect(wrapper.text()).toBe('foobar'); - }); -}); From 6761db97ed4a2aa9b300e615d9eeb597c9052fe4 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Thu, 17 Mar 2022 11:39:13 -0700 Subject: [PATCH 48/72] Add test for `menu-items` slot Add test for `menu-items` slot --- .../DocumentationTopic/DocumentationNav.spec.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js index f1a82cb54..bd34ea181 100644 --- a/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js +++ b/tests/unit/components/DocumentationTopic/DocumentationNav.spec.js @@ -219,6 +219,19 @@ describe('DocumentationNav', () => { expect(wrapper.contains(LanguageToggle)).toBe(false); }); + it('exposes a `menu-items` slot ', () => { + const menuItems = 'Menu Items'; + wrapper = shallowMount(DocumentationNav, { + stubs, + propsData, + mocks, + slots: { + 'menu-items': menuItems, + }, + }); + expect(wrapper.text()).toContain(menuItems); + }); + it('exposes a `after-content` slot ', () => { const afterContent = 'After Content'; wrapper = shallowMount(DocumentationNav, { From ff5bc89912ecf3cd6c167413efe24f5e24375e2a Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Thu, 17 Mar 2022 23:09:42 -0700 Subject: [PATCH 49/72] Remove 'No Overview` from Description and fix test Remove 'No Overview` from Description and fix test --- src/components/DocumentationTopic.vue | 6 ++--- .../DocumentationTopic/Description.vue | 11 +------- .../components/DocumentationTopic.spec.js | 21 +++++++++++++++- .../DocumentationTopic/Description.spec.js | 25 +------------------ 4 files changed, 25 insertions(+), 38 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index a303894ad..73b8af9a0 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -30,7 +30,7 @@ />
- + primaryContentSections.filter(section => ( + ({ primaryContentSections = [] }) => primaryContentSections.filter(section => ( section.kind === PrimaryContent.constants.SectionKind.content - )).length > 0 || abstract.length > 0, + )).length > 0, onThisPageSections() { return this.topicState.onThisPageSections; }, diff --git a/src/components/DocumentationTopic/Description.vue b/src/components/DocumentationTopic/Description.vue index dd4ab53a0..4b65cfa08 100644 --- a/src/components/DocumentationTopic/Description.vue +++ b/src/components/DocumentationTopic/Description.vue @@ -1,7 +1,7 @@ - - + + + + +
+
+ + + + + + +
@@ -366,6 +368,13 @@ export default { @include dynamic-content-container; } +// remove border-top for first item of the supplement section if no overview +.first-section .contenttable:first-child { + /deep/ .title { + border-top-width: 0px; + } +} + .sample-download { margin-top: 20px; } From 3ef7919d50758ba7eb612f17a31fc0a782055724 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 01:05:03 -0700 Subject: [PATCH 52/72] replace `hasOverview` with `hasDescription` replace `hasOverview` with `hasDescription` --- src/components/DocumentationTopic.vue | 51 ++++++++++--------- .../DocumentationTopic/Description.vue | 6 --- .../components/DocumentationTopic.spec.js | 29 ++++------- 3 files changed, 37 insertions(+), 49 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 73b8af9a0..1a1ce9c66 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -29,28 +29,28 @@ :platforms="platforms" :technologies="technologies" /> -
- - - - - - + + + + + +
primaryContentSections.filter(section => ( - section.kind === PrimaryContent.constants.SectionKind.content - )).length > 0, + hasDescription: + ({ isRequirement, deprecationSummary, downloadNotAvailableSummary }) => ( + isRequirement || (deprecationSummary && deprecationSummary.length) + || (downloadNotAvailableSummary && downloadNotAvailableSummary.length) + ), onThisPageSections() { return this.topicState.onThisPageSections; }, diff --git a/src/components/DocumentationTopic/Description.vue b/src/components/DocumentationTopic/Description.vue index 4b65cfa08..112013816 100644 --- a/src/components/DocumentationTopic/Description.vue +++ b/src/components/DocumentationTopic/Description.vue @@ -27,12 +27,6 @@ export default { margin-bottom: $contenttable-spacing-single-side; } -.nodocumentation { - @include font-styles(body-large); - color: var(--colors-secondary-label, var(--color-secondary-label)); - margin-bottom: 0; -} - /deep/ .content + * { margin-top: $stacked-margin-large; } diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 3ac6d7808..7d2355a74 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -275,30 +275,23 @@ describe('DocumentationTopic', () => { expect(abstractComponent.props('content')).toEqual(emptyParagraph); }); - it('renders a `Description` if has overview', () => { + it('does not render a `Description` if no description', () => { const description = wrapper.find(Description); - expect(description.exists()).toBe(true); - - expect(wrapper.find(PrimaryContent).exists()).toBe(true); + expect(description.exists()).toBe(false); }); - it('does not render a `Description` if no overview', () => { - // no overview if SectionKind is not content - wrapper.setProps({ - primaryContentSections: [ - { - kind: PrimaryContent.constants.SectionKind.declarations, - content: [foo], - }, - ], - }); - const description = wrapper.find(Description); - expect(description.exists()).toBe(false); + it('renders a `Description` if has description', () => { + // Description includes: + // RequirementMetaData, DeprecationSummary, downloadNotAvailableSummary + wrapper.setProps({ isRequirement: true }); + expect(wrapper.contains(Description)).toBe(true); wrapper.setProps({ - primaryContentSections: [], + isRequirement: false, + downloadNotAvailableSummary, + deprecationSummary, }); - expect(wrapper.contains(Description)).toBe(false); + expect(wrapper.contains(Description)).toBe(true); }); it('renders a `PrimaryContent`', () => { From dbe754fcf00543942194d4af12bca8695f2d4cc3 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 01:42:34 -0700 Subject: [PATCH 53/72] Remove `Description` component Remove `Description` component --- src/components/DocumentationTopic.vue | 13 +++----- .../DocumentationTopic/Description.vue | 33 ------------------- .../components/DocumentationTopic.spec.js | 20 ----------- .../DocumentationTopic/Description.spec.js | 29 ---------------- 4 files changed, 4 insertions(+), 91 deletions(-) delete mode 100644 src/components/DocumentationTopic/Description.vue delete mode 100644 tests/unit/components/DocumentationTopic/Description.spec.js diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 1a1ce9c66..fcd34f6ff 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -30,7 +30,7 @@ />
- +
- +
( - isRequirement || (deprecationSummary && deprecationSummary.length) - || (downloadNotAvailableSummary && downloadNotAvailableSummary.length) - ), onThisPageSections() { return this.topicState.onThisPageSections; }, @@ -368,6 +361,8 @@ export default { @include dynamic-content-container; } +.description:empty { display: none; } + .sample-download { margin-top: 20px; } diff --git a/src/components/DocumentationTopic/Description.vue b/src/components/DocumentationTopic/Description.vue deleted file mode 100644 index 112013816..000000000 --- a/src/components/DocumentationTopic/Description.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 7d2355a74..79f7dbb9c 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -19,7 +19,6 @@ const { ContentNode, DefaultImplementations, Aside, - Description, DownloadButton, LanguageSwitcher, PrimaryContent, @@ -275,25 +274,6 @@ describe('DocumentationTopic', () => { expect(abstractComponent.props('content')).toEqual(emptyParagraph); }); - it('does not render a `Description` if no description', () => { - const description = wrapper.find(Description); - expect(description.exists()).toBe(false); - }); - - it('renders a `Description` if has description', () => { - // Description includes: - // RequirementMetaData, DeprecationSummary, downloadNotAvailableSummary - wrapper.setProps({ isRequirement: true }); - expect(wrapper.contains(Description)).toBe(true); - - wrapper.setProps({ - isRequirement: false, - downloadNotAvailableSummary, - deprecationSummary, - }); - expect(wrapper.contains(Description)).toBe(true); - }); - it('renders a `PrimaryContent`', () => { const primary = wrapper.find(PrimaryContent); expect(primary.exists()).toBe(true); diff --git a/tests/unit/components/DocumentationTopic/Description.spec.js b/tests/unit/components/DocumentationTopic/Description.spec.js deleted file mode 100644 index 2f5d4941c..000000000 --- a/tests/unit/components/DocumentationTopic/Description.spec.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * This source file is part of the Swift.org open source project - * - * 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 - * See https://swift.org/CONTRIBUTORS.txt for Swift project authors -*/ - -import { shallowMount } from '@vue/test-utils'; -import Description from 'docc-render/components/DocumentationTopic/Description.vue'; - -describe('Description', () => { - it('renders `.description` at the root', () => { - const wrapper = shallowMount(Description); - expect(wrapper.classes('description')).toBe(true); - }); - - it('renders slot content', () => { - const wrapper = shallowMount(Description, { - slots: { default: '

foobar

' }, - }); - - expect(wrapper.contains('.nodocumentation')).toBe(false); - expect(wrapper.contains('p')).toBe(true); - expect(wrapper.find('p').text()).toBe('foobar'); - }); -}); From 01a382be5fe7f51835a01c5b586d0d9679677393 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 02:10:11 -0700 Subject: [PATCH 54/72] Move over CSS from `Description` Component Move over CSS from `Description` Component --- src/components/DocumentationTopic.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index fcd34f6ff..768238f83 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -361,7 +361,17 @@ export default { @include dynamic-content-container; } -.description:empty { display: none; } +.description { + &:empty { display: none; } + + &:not(:empty) { + margin-bottom: $contenttable-spacing-single-side; + } + + /deep/ .content + * { + margin-top: $stacked-margin-large; + } +} .sample-download { margin-top: 20px; From 350ee7a1808d870d96caa573cbe00aa1f1fbc77b Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 02:28:04 -0700 Subject: [PATCH 55/72] fix tabbing fix tabbing --- 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 768238f83..43fc3d168 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -51,7 +51,7 @@ :conformance="conformance" :sections="primaryContentSections" /> -
+ Date: Fri, 18 Mar 2022 12:41:32 -0700 Subject: [PATCH 56/72] Remove border for first section Remove border for first section --- src/components/DocumentationTopic.vue | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 281ca0668..0abc7eeb1 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -29,7 +29,7 @@ :platforms="platforms" :technologies="technologies" /> -
+
-
+
( + isRequirement || (deprecationSummary && deprecationSummary) + || (downloadNotAvailableSummary && downloadNotAvailableSummary.length) + || (primaryContentSections && primaryContentSections.length) + ), }, methods: { normalizePath(path) { @@ -362,11 +370,6 @@ export default { @include dynamic-content-container; } -// remove border-top for first item of the supplement section if no overview -.first-section .contenttable:first-child { - /deep/ .title { - border-top-width: 0px; - .description { &:empty { display: none; } @@ -379,6 +382,15 @@ export default { } } +// remove border-top for first section of the page +.documentation-hero + .secondary-content { + .contenttable:first-child { + /deep/ .title { + border-top: none; + } + } +} + .sample-download { margin-top: 20px; } From 6730067eb06495e1ab40118fe96535b6ddf715af Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 13:24:08 -0700 Subject: [PATCH 57/72] Remove unnecessary div Remove unnecessary div --- src/components/DocumentationTopic.vue | 51 +++++++++++++-------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 0abc7eeb1..8437dd76f 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -29,7 +29,7 @@ :platforms="platforms" :technologies="technologies" /> -
+
-
- - - - - - -
+ + + + + +
@@ -383,10 +381,11 @@ export default { } // remove border-top for first section of the page -.documentation-hero + .secondary-content { - .contenttable:first-child { - /deep/ .title { +/deep/ { + .documentation-hero + .contenttable { + .container > .title { border-top: none; + // background: red; } } } From 2f4464bc760d780bb1db6f9a2631647880e0eca6 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 13:24:54 -0700 Subject: [PATCH 58/72] remove comment remove comment --- src/components/DocumentationTopic.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 8437dd76f..e47713d78 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -385,7 +385,6 @@ export default { .documentation-hero + .contenttable { .container > .title { border-top: none; - // background: red; } } } From b080772e06c35ef72c59d2f8cd9f9c644a26549e Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 18 Mar 2022 13:50:06 -0700 Subject: [PATCH 59/72] fix style fix style --- src/components/DocumentationTopic.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index e47713d78..b706dc55b 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -29,7 +29,7 @@ :platforms="platforms" :technologies="technologies" /> -
+
( - isRequirement || (deprecationSummary && deprecationSummary) + isRequirement + || (deprecationSummary && deprecationSummary) || (downloadNotAvailableSummary && downloadNotAvailableSummary.length) || (primaryContentSections && primaryContentSections.length) ), From 81c93267f80397a64f1a7cae620e26331bf26a02 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Fri, 18 Mar 2022 15:20:46 -0700 Subject: [PATCH 60/72] Fix whitespace. --- 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 43fc3d168..c3c03db4c 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -369,7 +369,7 @@ export default { } /deep/ .content + * { - margin-top: $stacked-margin-large; + margin-top: $stacked-margin-large; } } From 7a2f2bc8a8427249a2338d0683e1560e351a1a55 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Fri, 18 Mar 2022 15:36:35 -0700 Subject: [PATCH 61/72] Fix typo. --- 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 b706dc55b..072d1b4fa 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -299,7 +299,7 @@ export default { primaryContentSections, }) => ( isRequirement - || (deprecationSummary && deprecationSummary) + || (deprecationSummary && deprecationSummary.length) || (downloadNotAvailableSummary && downloadNotAvailableSummary.length) || (primaryContentSections && primaryContentSections.length) ), From 667d5a01c039d0201e961adeb1b5b3a371e1586f Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 21 Mar 2022 22:50:05 -0700 Subject: [PATCH 62/72] add margin right to language toggle add margin right to language toggle --- src/components/DocumentationTopic/DocumentationNav.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue index 31f22bce6..282cce0b6 100644 --- a/src/components/DocumentationTopic/DocumentationNav.vue +++ b/src/components/DocumentationTopic/DocumentationNav.vue @@ -196,6 +196,14 @@ $sidenav-icon-size: 19px; &-settings { @include font-styles(nav-toggles); + .nav-menu-setting:first-child:not(:only-child) { + margin-right: $nav-space-between-elements; + + @include nav-in-breakpoint() { + margin-right: 0; + } + } + @include breakpoint-only-largenav() { margin-left: $nav-space-between-elements; } From 2190be7cde6f327caf1ed0fa12651a40ed77a0ed Mon Sep 17 00:00:00 2001 From: Dobromir Hristov Date: Tue, 22 Mar 2022 19:12:48 +0200 Subject: [PATCH 63/72] fix: forgotten code, after fixing a merge conflict --- src/components/DocumentationTopic.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index c3f44e819..633949f3f 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -350,8 +350,9 @@ export default { height: 100%; @include with-adjustable-sidebar { - border-left: 1px solid var(--color-grid); - border-right: 1px solid var(--color-grid); + @include breakpoints-from(xlarge) { + border-right: 1px solid var(--color-grid); + } } @include inTargetIde { From b4f97c50183d6dd9560962e99b3997b250df4d23 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Tue, 22 Mar 2022 15:02:05 -0700 Subject: [PATCH 64/72] Override link color in always-dark hero. --- src/components/DocumentationTopic/DocumentationHero.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue index e0ed8147d..d533ae498 100644 --- a/src/components/DocumentationTopic/DocumentationHero.vue +++ b/src/components/DocumentationTopic/DocumentationHero.vue @@ -152,4 +152,8 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default; content: none; } } + +/deep/ a { + color: dark-color(figure-blue); +} From a5c8aff2ab7bc98ef09e01df49b9f4544f234a5f Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Wed, 23 Mar 2022 10:49:00 -0700 Subject: [PATCH 65/72] Only override link color for dark theme hero. --- src/components/DocumentationTopic/DocumentationHero.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue index d533ae498..c19ee56d7 100644 --- a/src/components/DocumentationTopic/DocumentationHero.vue +++ b/src/components/DocumentationTopic/DocumentationHero.vue @@ -153,7 +153,7 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default; } } -/deep/ a { +.theme-dark /deep/ a { color: dark-color(figure-blue); } From 47f2f6268a40141c755c2cd57d4fe3a5dc188094 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Thu, 24 Mar 2022 15:17:43 -0700 Subject: [PATCH 66/72] Render "Beta" or "Deprecated" in documentation title. --- src/components/DocumentationTopic.vue | 6 ++- src/components/DocumentationTopic/Title.vue | 25 +++++++++++- .../components/DocumentationTopic.spec.js | 40 +++++++++++++++++++ 3 files changed, 69 insertions(+), 2 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 633949f3f..2e1cf06c6 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -19,7 +19,11 @@ :objcPath="objcPath" :swiftPath="swiftPath" /> - {{ title }} + + {{ title }} + <small v-if="isSymbolDeprecated" slot="after" class="deprecated">Deprecated</small> + <small v-else-if="isSymbolBeta" slot="after" class="beta">Beta</small> +
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue index b13f8ec37..c08b356ac 100644 --- a/src/components/DocumentationTopic/Title.vue +++ b/src/components/DocumentationTopic/Title.vue @@ -11,7 +11,10 @@ @@ -53,4 +56,24 @@ export default { color: var(--colors-header-text, var(--color-header-text)); } } + +small { + @include font-styles(eyebrow); + + &.beta { + color: var(--color-badge-beta); + + .theme-dark & { + color: var(--color-badge-dark-beta); + } + } + + &.deprecated { + color: var(--color-badge-deprecated); + + .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 79f7dbb9c..7a3994c24 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -248,6 +248,46 @@ describe('DocumentationTopic', () => { expect(title.text()).toBe(propsData.title); }); + it('renders smaller "Beta" and "Deprecated" text in title when relevant', () => { + const title = wrapper.find(Title); + expect(title.exists()).toBe(true); + let smalls = title.findAll('small'); + expect(smalls.length).toBe(0); + + // both beta _and_ deprecated — deprecated has priority + wrapper.setProps({ + isSymbolDeprecated: true, + isSymbolBeta: true, + }); + smalls = title.findAll('small'); + expect(smalls.length).toBe(1); + expect(smalls.at(0).is('.beta')).toBe(false); + expect(smalls.at(0).is('.deprecated')).toBe(true); + expect(smalls.at(0).text()).toBe('Deprecated'); + + // only beta + wrapper.setProps({ + isSymbolDeprecated: false, + isSymbolBeta: true, + }); + smalls = title.findAll('small'); + expect(smalls.length).toBe(1); + expect(smalls.at(0).is('.beta')).toBe(true); + expect(smalls.at(0).is('.deprecated')).toBe(false); + expect(smalls.at(0).text()).toBe('Beta'); + + // both beta _and_ deprecated — deprecated has priority + wrapper.setProps({ + isSymbolDeprecated: true, + isSymbolBeta: false, + }); + smalls = title.findAll('small'); + expect(smalls.length).toBe(1); + expect(smalls.at(0).is('.beta')).toBe(false); + expect(smalls.at(0).is('.deprecated')).toBe(true); + expect(smalls.at(0).text()).toBe('Deprecated'); + }); + it('renders an abstract', () => { const hero = wrapper.find(DocumentationHero); const abstractComponent = hero.find(Abstract); From 5fb5b1cfc2a2edaaaf1e9e11277cc3986aa8e44b Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Thu, 24 Mar 2022 16:45:35 -0700 Subject: [PATCH 67/72] Move CSS Move CSS --- .../DocumentationTopic/DocumentationNav.vue | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue index 282cce0b6..d0af81928 100644 --- a/src/components/DocumentationTopic/DocumentationNav.vue +++ b/src/components/DocumentationTopic/DocumentationNav.vue @@ -196,26 +196,39 @@ $sidenav-icon-size: 19px; &-settings { @include font-styles(nav-toggles); - .nav-menu-setting:first-child:not(:only-child) { - margin-right: $nav-space-between-elements; - - @include nav-in-breakpoint() { - margin-right: 0; - } - } - @include breakpoint-only-largenav() { margin-left: $nav-space-between-elements; } - @include nav-in-breakpoint { - padding-top: 0; + .nav-menu-setting { + display: flex; + align-items: center; + color: var(--color-nav-current-link); + margin-left: 0; + + &:first-child:not(:only-child) { + margin-right: $nav-space-between-elements; + + @include nav-in-breakpoint() { + margin-right: 0; + } + } + + @include nav-dark() { + color: var(--color-nav-dark-current-link); + } + + @include nav-in-breakpoint() { + &:not([data-previous-menu-children-count="0"]) { + &:first-child { + border-top: 1px solid dark-color(figure-gray-tertiary); + display: flex; + align-items: center; + } + } - &:not([data-previous-menu-children-count="0"]) { - .nav-menu-setting:first-child { - border-top: 1px solid dark-color(figure-gray-tertiary); - display: flex; - align-items: center; + &:not(:first-child) { + border-top: 1px solid dark-color(fill-gray-tertiary); } } } From 861f45f4f3647ff0c8055bccdcb7d92816849528 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Fri, 25 Mar 2022 09:38:57 -0700 Subject: [PATCH 68/72] Apply CSS to correct class Apply CSS to correct class --- .../DocumentationTopic/DocumentationNav.vue | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue index d0af81928..b7eafae0e 100644 --- a/src/components/DocumentationTopic/DocumentationNav.vue +++ b/src/components/DocumentationTopic/DocumentationNav.vue @@ -200,6 +200,17 @@ $sidenav-icon-size: 19px; margin-left: $nav-space-between-elements; } + @include nav-in-breakpoint { + // do not apply border if no item are above setting links + &:not([data-previous-menu-children-count="0"]) { + .nav-menu-setting:first-child { + border-top: 1px solid dark-color(figure-gray-tertiary); + display: flex; + align-items: center; + } + } + } + .nav-menu-setting { display: flex; align-items: center; @@ -219,14 +230,6 @@ $sidenav-icon-size: 19px; } @include nav-in-breakpoint() { - &:not([data-previous-menu-children-count="0"]) { - &:first-child { - border-top: 1px solid dark-color(figure-gray-tertiary); - display: flex; - align-items: center; - } - } - &:not(:first-child) { border-top: 1px solid dark-color(fill-gray-tertiary); } From ec4e42d08d23a403c21aa09654436525a9b69e97 Mon Sep 17 00:00:00 2001 From: Marcus Ortiz Date: Fri, 25 Mar 2022 15:03:43 -0700 Subject: [PATCH 69/72] Fix inaccurate comment from copy/paste error. --- tests/unit/components/DocumentationTopic.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js index 7a3994c24..5742969ce 100644 --- a/tests/unit/components/DocumentationTopic.spec.js +++ b/tests/unit/components/DocumentationTopic.spec.js @@ -276,7 +276,7 @@ describe('DocumentationTopic', () => { expect(smalls.at(0).is('.deprecated')).toBe(false); expect(smalls.at(0).text()).toBe('Beta'); - // both beta _and_ deprecated — deprecated has priority + // only deprecated wrapper.setProps({ isSymbolDeprecated: true, isSymbolBeta: false, From ffc961e07609e81f554b9b7721542027d3f4a9f5 Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Mon, 28 Mar 2022 22:19:39 -0700 Subject: [PATCH 70/72] Add margin to relationship-list Add margin to relationship-list --- src/components/DocumentationTopic/RelationshipsList.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/DocumentationTopic/RelationshipsList.vue b/src/components/DocumentationTopic/RelationshipsList.vue index 35a161358..dac77f317 100644 --- a/src/components/DocumentationTopic/RelationshipsList.vue +++ b/src/components/DocumentationTopic/RelationshipsList.vue @@ -128,6 +128,11 @@ export default { .relationships-list { list-style: none; + &.column { + margin-left: 0; + margin-top: 15px; + } + // The "inline" style displays items on a single line as a // comma-separated list with a maximum number of 3 items. This style should // not be used for a list that contains any items with availability From 3c85fd8c4c4d13c6830266331538aa68d0c7327a Mon Sep 17 00:00:00 2001 From: Hanqing Huang Date: Tue, 29 Mar 2022 16:11:07 -0700 Subject: [PATCH 71/72] Style changes Style changes --- src/components/DocumentationTopic.vue | 16 +++++++++++----- .../DocumentationTopic/DocumentationNav.vue | 2 +- .../Summary/LanguageSwitcher.vue | 10 +++++++--- .../DocumentationTopic/DocumentationHero.spec.js | 4 +++- 4 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue index 2e1cf06c6..06c6434df 100644 --- a/src/components/DocumentationTopic.vue +++ b/src/components/DocumentationTopic.vue @@ -1,7 +1,7 @@