refactor: rename TopicStyles.js to TopicSectionsStyle.js

Author: Dobromir Hristov

src/components/DocumentationTopic.vue

@@ -107,7 +107,7 @@ import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
 import DocumentationHero from 'docc-render/components/DocumentationTopic/DocumentationHero.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
-import { TopicStyles } from 'docc-render/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import Abstract from './DocumentationTopic/Description/Abstract.vue';
 import ContentNode from './DocumentationTopic/ContentNode.vue';
 import CallToActionButton from './CallToActionButton.vue';
@@ -231,7 +231,7 @@ export default {
     },
     topicSectionsStyle: {
       type: String,
-      default: TopicStyles.list,
+      default: TopicSectionsStyle.list,
     },
     sampleCodeDownload: {
       type: Object,
@@ -373,7 +373,7 @@ export default {
     shouldRenderTopicSection: ({
       topicSectionsStyle,
       topicSections,
-    }) => topicSections && topicSectionsStyle !== TopicStyles.hidden,
+    }) => topicSections && topicSectionsStyle !== TopicSectionsStyle.hidden,
   },
   methods: {
     normalizePath(path) {

src/components/DocumentationTopic/Topics.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import TopicsTable from './TopicsTable.vue';
 
 export default {
@@ -33,7 +33,7 @@ export default {
     topicStyle: {
       type: String,
       required: true,
-      validator: v => Object.hasOwnProperty.call(TopicStyles, v),
+      validator: v => Object.hasOwnProperty.call(TopicSectionsStyle, v),
     },
   },
 };

src/components/DocumentationTopic/TopicsLinkCardGrid.vue

@@ -24,7 +24,7 @@
 <script>
 import Row from 'docc-render/components/ContentNode/Row.vue';
 import Column from 'docc-render/components/ContentNode/Column.vue';
-import { TopicStyles } from 'docc-render/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import TopicsLinkCardGridItem from './TopicsLinkCardGridItem.vue';
 
 export default {
@@ -37,12 +37,12 @@ export default {
     },
     topicStyle: {
       type: String,
-      default: TopicStyles.compactGrid,
-      validator: v => v === TopicStyles.compactGrid || v === TopicStyles.detailedGrid,
+      default: TopicSectionsStyle.compactGrid,
+      validator: v => v === TopicSectionsStyle.compactGrid || v === TopicSectionsStyle.detailedGrid,
     },
   },
   computed: {
-    compactCards: ({ topicStyle }) => topicStyle === TopicStyles.compactGrid,
+    compactCards: ({ topicStyle }) => topicStyle === TopicSectionsStyle.compactGrid,
   },
 };
 </script>

src/components/DocumentationTopic/TopicsTable.vue

@@ -50,7 +50,7 @@
 <script>
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
-import { TopicStyles } from 'docc-render/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import TopicsLinkCardGrid from 'docc-render/components/DocumentationTopic/TopicsLinkCardGrid.vue';
 import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import ContentTable from './ContentTable.vue';
@@ -102,11 +102,11 @@ export default {
     },
     topicStyle: {
       type: String,
-      default: TopicStyles.list,
+      default: TopicSectionsStyle.list,
     },
   },
   computed: {
-    shouldRenderList: ({ topicStyle }) => topicStyle === TopicStyles.list,
+    shouldRenderList: ({ topicStyle }) => topicStyle === TopicSectionsStyle.list,
     sectionsWithTopics() {
       return this.sections.map(section => ({
         ...section,

src/constants/TopicStyles.js renamed to src/constants/TopicSectionsStyle.js

@@ -9,7 +9,7 @@
 */
 
 /* eslint-disable import/prefer-default-export */
-export const TopicStyles = {
+export const TopicSectionsStyle = {
   list: 'list',
   compactGrid: 'compactGrid',
   detailedGrid: 'detailedGrid',

tests/unit/components/DocumentationTopic.spec.js

@@ -13,7 +13,7 @@ import DocumentationTopic from 'docc-render/components/DocumentationTopic.vue';
 import Language from 'docc-render/constants/Language';
 import { TopicTypes } from '@/constants/TopicTypes';
 import DocumentationHero from '@/components/DocumentationTopic/DocumentationHero.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 
 const {
   Abstract,
@@ -477,12 +477,12 @@ describe('DocumentationTopic', () => {
         identifiers: ['baz'],
       },
     ];
-    wrapper.setProps({ topicSections, topicSectionsStyle: TopicStyles.detailedGrid });
+    wrapper.setProps({ topicSections, topicSectionsStyle: TopicSectionsStyle.detailedGrid });
 
     const topics = wrapper.find(Topics);
     expect(topics.exists()).toBe(true);
     expect(topics.props('sections')).toBe(topicSections);
-    expect(topics.props('topicStyle')).toBe(TopicStyles.detailedGrid);
+    expect(topics.props('topicStyle')).toBe(TopicSectionsStyle.detailedGrid);
   });
 
   it('does not render the `Topics` if the `topicSectionsStyle` is `hidden`', () => {

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

@@ -10,7 +10,7 @@
 
 import { shallowMount } from '@vue/test-utils';
 import DefaultImplementations from 'docc-render/components/DocumentationTopic/DefaultImplementations.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 
 const { TopicsTable } = DefaultImplementations.components;
 
@@ -42,7 +42,7 @@ describe('DefaultImplementations', () => {
       isSymbolBeta: false,
       title: 'Default Implementations',
       wrapTitle: true,
-      topicStyle: TopicStyles.list,
+      topicStyle: TopicSectionsStyle.list,
     });
   });
 });

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

@@ -10,7 +10,7 @@
 
 import { shallowMount } from '@vue/test-utils';
 import SeeAlso from 'docc-render/components/DocumentationTopic/SeeAlso.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 
 const { TopicsTable } = SeeAlso.components;
 
@@ -27,7 +27,7 @@ describe('SeeAlso', () => {
       sections: [],
       title: 'See Also',
       wrapTitle: false,
-      topicStyle: TopicStyles.list,
+      topicStyle: TopicSectionsStyle.list,
     });
   });
 });

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

@@ -10,7 +10,7 @@
 
 import { shallowMount } from '@vue/test-utils';
 import Topics from 'docc-render/components/DocumentationTopic/Topics.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 
 const { TopicsTable } = Topics.components;
 
@@ -19,7 +19,7 @@ describe('Topics', () => {
     const wrapper = shallowMount(Topics, {
       propsData: {
         sections: [],
-        topicStyle: TopicStyles.list,
+        topicStyle: TopicSectionsStyle.list,
       },
     });
 
@@ -32,13 +32,13 @@ describe('Topics', () => {
       sections: [],
       title: 'Topics',
       wrapTitle: false,
-      topicStyle: TopicStyles.list,
+      topicStyle: TopicSectionsStyle.list,
     });
     table.setProps({ isSymbolDeprecated: true });
     expect(table.props('isSymbolDeprecated')).toBe(true);
     table.setProps({ isSymbolBeta: true });
     expect(table.props('isSymbolBeta')).toBe(true);
-    table.setProps({ topicStyle: TopicStyles.compactGrid });
-    expect(table.props('topicStyle')).toBe(TopicStyles.compactGrid);
+    table.setProps({ topicStyle: TopicSectionsStyle.compactGrid });
+    expect(table.props('topicStyle')).toBe(TopicSectionsStyle.compactGrid);
   });
 });

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

@@ -10,7 +10,7 @@
 
 import TopicsLinkCardGrid from '@/components/DocumentationTopic/TopicsLinkCardGrid.vue';
 import { shallowMount } from '@vue/test-utils';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import Row from '@/components/ContentNode/Row.vue';
 import Column from '@/components/ContentNode/Column.vue';
 import TopicsLinkCardGridItem from '@/components/DocumentationTopic/TopicsLinkCardGridItem.vue';
@@ -48,7 +48,7 @@ describe('TopicsLinkCardGrid', () => {
     const wrapper = createWrapper({
       propsData: {
         ...defaultProps,
-        topicStyle: TopicStyles.detailedGrid,
+        topicStyle: TopicSectionsStyle.detailedGrid,
       },
     });
     expect(wrapper.find(Row).props()).toEqual({

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

@@ -10,7 +10,7 @@
 
 import { shallowMount } from '@vue/test-utils';
 import TopicsTable from 'docc-render/components/DocumentationTopic/TopicsTable.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import TopicsLinkCardGrid from '@/components/DocumentationTopic/TopicsLinkCardGrid.vue';
 
 const {
@@ -112,21 +112,21 @@ describe('TopicsTable', () => {
   });
 
   it('renders a `TopicsLinkCardGrid` if `topicStyle` is not `list`', () => {
-    wrapper.setProps({ topicStyle: TopicStyles.compactGrid });
+    wrapper.setProps({ topicStyle: TopicSectionsStyle.compactGrid });
     expect(wrapper.findAll(TopicsLinkBlock)).toHaveLength(0);
     const sections = wrapper.findAll(ContentTableSection);
 
     const firstGrid = sections.at(0).find(TopicsLinkCardGrid);
     expect(firstGrid.classes('topic')).toBe(true);
     expect(firstGrid.props()).toEqual({
-      topicStyle: TopicStyles.compactGrid,
+      topicStyle: TopicSectionsStyle.compactGrid,
       items: [foo],
     });
 
     const secondGrid = sections.at(1).find(TopicsLinkCardGrid);
     expect(secondGrid.classes('topic')).toBe(true);
     expect(secondGrid.props()).toEqual({
-      topicStyle: TopicStyles.compactGrid,
+      topicStyle: TopicSectionsStyle.compactGrid,
       items: [baz],
     });
   });

tests/unit/views/DocumentationTopic.spec.js

@@ -17,7 +17,7 @@ import AdjustableSidebarWidth from '@/components/AdjustableSidebarWidth.vue';
 import NavigatorDataProvider from '@/components/Navigator/NavigatorDataProvider.vue';
 import Language from '@/constants/Language';
 import Navigator from '@/components/Navigator.vue';
-import { TopicStyles } from '@/constants/TopicStyles';
+import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import { storage } from '@/utils/storage';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import StaticContentWidth from 'docc-render/components/DocumentationTopic/StaticContentWidth.vue';
@@ -541,20 +541,20 @@ describe('DocumentationTopic', () => {
         occ: ['documentation/objc'],
         swift: ['documentation/swift'],
       },
-      topicSectionsStyle: TopicStyles.list, // default value
+      topicSectionsStyle: TopicSectionsStyle.list, // default value
     });
   });
 
   it('passes `topicSectionsStyle`', () => {
     wrapper.setData({
       topicData: {
         ...topicData,
-        topicSectionsStyle: TopicStyles.detailedGrid,
+        topicSectionsStyle: TopicSectionsStyle.detailedGrid,
       },
     });
 
     const topic = wrapper.find(Topic);
-    expect(topic.props('topicSectionsStyle')).toEqual(TopicStyles.detailedGrid);
+    expect(topic.props('topicSectionsStyle')).toEqual(TopicSectionsStyle.detailedGrid);
   });
 
   it('provides an empty languagePaths, even if no variants', () => {