Render top-level "Attributes" primary content section when relevant (#797)

Resolves: rdar://123114458

Author: mportiz08

src/components/DocumentationTopic/PrimaryContent.vue

@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import Attributes
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/Attributes.vue';
 import PossibleValues
   from 'docc-render/components/DocumentationTopic/PrimaryContent/PossibleValues.vue';
 import RestEndpoint
@@ -37,6 +39,7 @@ import Mentions from './PrimaryContent/Mentions.vue';
 export default {
   name: 'PrimaryContent',
   components: {
+    Attributes,
     ContentNode,
     Parameters,
     PropertyListKeyDetails,
@@ -70,6 +73,7 @@ export default {
   methods: {
     componentFor(section) {
       return {
+        [SectionKind.attributes]: Attributes,
         [SectionKind.content]: ContentNode,
         [SectionKind.details]: PropertyListKeyDetails,
         [SectionKind.parameters]: Parameters,
@@ -86,6 +90,7 @@ export default {
     },
     propsFor(section) {
       const {
+        attributes,
         bodyContentType,
         content,
         details,
@@ -99,6 +104,7 @@ export default {
         mentions,
       } = section;
       return {
+        [SectionKind.attributes]: { attributes },
         [SectionKind.content]: { content },
         [SectionKind.details]: { details },
         [SectionKind.parameters]: { parameters },

src/components/DocumentationTopic/PrimaryContent/Attributes.vue

@@ -0,0 +1,55 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2024 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <section class="attributes">
+    <LinkableHeading :anchor="section.anchor" :level="section.level">
+      {{ $t(section.title) }}
+    </LinkableHeading>
+    <ParameterAttributes :attributes="attributes" />
+  </section>
+</template>
+
+<script>
+import { PrimaryContentSectionAnchors } from 'docc-render/constants/ContentSectionAnchors';
+import { SectionKind } from 'docc-render/constants/PrimaryContentSection';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
+import ParameterAttributes from 'docc-render/components/DocumentationTopic/PrimaryContent/ParameterAttributes.vue';
+
+export default {
+  name: 'Attributes',
+  components: {
+    LinkableHeading,
+    ParameterAttributes,
+  },
+  props: {
+    attributes: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    section: ({ sectionKind }) => PrimaryContentSectionAnchors[sectionKind],
+    sectionKind: () => SectionKind.attributes,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/_core.scss';
+
+.parameter-attributes {
+  margin-left: 1rem;
+}
+
+:deep(.property-metadata) {
+  color: currentColor;
+}
+</style>

src/constants/ContentSectionAnchors.js

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2022-2024 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
@@ -34,6 +34,11 @@ export const MainContentSectionAnchors = {
 };
 
 export const PrimaryContentSectionAnchors = {
+  [SectionKind.attributes]: {
+    title: 'sections.attributes',
+    anchor: 'attributes',
+    level: 2,
+  },
   [SectionKind.details]: {
     title: 'sections.details',
     anchor: 'details',

src/constants/PrimaryContentSection.js

@@ -10,6 +10,7 @@
 
 // eslint-disable-next-line import/prefer-default-export
 export const SectionKind = {
+  attributes: 'attributes',
   content: 'content',
   declarations: 'declarations',
   mentions: 'mentions',

src/lang/locales/en-US.json

@@ -95,6 +95,7 @@
     "close": "Close"
   },
   "sections": {
+    "attributes": "Attributes",
     "title": "Section {number}",
     "on-this-page": "On this page",
     "topics": "Topics",

tests/unit/components/DocumentationTopic/PrimaryContent.spec.js

@@ -12,6 +12,7 @@ import { shallowMount } from '@vue/test-utils';
 import PrimaryContent from 'docc-render/components/DocumentationTopic/PrimaryContent.vue';
 
 const {
+  Attributes,
   ContentNode,
   Parameters,
   PossibleValues,
@@ -23,6 +24,17 @@ const {
 } = PrimaryContent.components;
 const { SectionKind } = PrimaryContent.constants;
 
+const attributesSection = {
+  kind: SectionKind.attributes,
+  attributes: [
+    {
+      kind: 'default',
+      title: 'Default',
+      value: 'foobar',
+    },
+  ],
+};
+
 const genericContentSection = {
   kind: SectionKind.content,
   content: [
@@ -139,6 +151,7 @@ const propsData = {
   conformance: { availbilityPrefix: [], constraints: [] },
   source: { url: 'foo.com' },
   sections: [
+    attributesSection,
     detailsSection,
     genericContentSection,
     parametersSection,
@@ -174,6 +187,7 @@ describe('PrimaryContent', () => {
     });
   }
 
+  checkProps(Attributes, { attributes: attributesSection.attributes });
   checkProps(PropertyListKeyDetails, { details: detailsSection.details });
   checkProps(ContentNode, { content: genericContentSection.content, tag: 'div' });
   checkProps(Parameters, { parameters: parametersSection.parameters });

tests/unit/components/DocumentationTopic/PrimaryContent/Attributes.spec.js

@@ -0,0 +1,61 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2024 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 { PrimaryContentSectionAnchors } from 'docc-render/constants/ContentSectionAnchors';
+import { SectionKind } from 'docc-render/constants/PrimaryContentSection';
+import Attributes from 'docc-render/components/DocumentationTopic/PrimaryContent/Attributes.vue';
+import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
+import ParameterAttributes from 'docc-render/components/DocumentationTopic/PrimaryContent/ParameterAttributes.vue';
+
+const propsData = {
+  attributes: [
+    {
+      kind: 'default',
+      title: 'Default',
+      value: 'foobar',
+    },
+  ],
+};
+
+const createWrapper = (opts = {}) => shallowMount(Attributes, {
+  propsData,
+  ...opts,
+});
+
+describe('Attributes', () => {
+  it('renders a section', () => {
+    const wrapper = createWrapper();
+    const section = wrapper.find('section.attributes');
+    expect(section.exists()).toBe(true);
+  });
+
+  it('renders a linkable heading', () => {
+    const wrapper = createWrapper();
+    const heading = wrapper.find(LinkableHeading);
+
+    const {
+      anchor,
+      level,
+      title,
+    } = PrimaryContentSectionAnchors[SectionKind.attributes];
+    expect(heading.exists()).toBe(true);
+    expect(heading.props('anchor')).toBe(anchor);
+    expect(heading.props('level')).toBe(level);
+    expect(heading.text()).toBe(title);
+  });
+
+  it('renders a `ParameterAttributes`', () => {
+    const wrapper = createWrapper();
+    const attrs = wrapper.find(ParameterAttributes);
+    expect(attrs.exists()).toBe(true);
+    expect(attrs.props('attributes')).toEqual(propsData.attributes);
+  });
+});