Merge pull request #197 from reuters-graphics/component-structure

Component structure

.changeset/rare-queens-rush.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Patches up component docs links

.storybook/preview.ts

@@ -27,6 +27,7 @@ export const parameters = {
   options: {
     // https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
     storySort: {
+      method: 'alphabetical-by-kind',
       includeNames: true,
       order: [
         'Intro',

src/components/AdSlot/InlineAd.stories.svelte

@@ -5,7 +5,7 @@
   import { withComponentDocs } from './../../docs/utils/withParams';
 
   export const meta = {
-    title: 'Components/InlineAd',
+    title: 'Components/Ads & analytics/InlineAd',
     component: InlineAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/InlineAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
+<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
   import type { InlineAd } from './@types/ads';

src/components/AdSlot/LeaderboardAd.stories.svelte

@@ -5,7 +5,7 @@
   import { withComponentDocs } from './../../docs/utils/withParams';
 
   export const meta = {
-    title: 'Components/LeaderboardAd',
+    title: 'Components/Ads & analytics/LeaderboardAd',
     component: LeaderboardAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/LeaderboardAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
 <script lang="ts">
   import type { LeaderboardAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';

src/components/AdSlot/SponsorshipAd.stories.svelte

@@ -5,7 +5,7 @@
   import { withComponentDocs } from './../../docs/utils/withParams';
 
   export const meta = {
-    title: 'Components/SponsorshipAd',
+    title: 'Components/Ads & analytics/SponsorshipAd',
     component: SponsorshipAd,
     ...withComponentDocs(adDocs),
   };

src/components/AdSlot/SponsorshipAd.svelte

@@ -1,4 +1,4 @@
-<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
   import type { SponsorshipAd } from './@types/ads';

src/components/Analytics/Analytics.stories.svelte

@@ -10,7 +10,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Analytics',
+    title: 'Components/Ads & analytics/Analytics',
     component: Analytics,
     ...withComponentDocs(componentDocs),
   };

src/components/Analytics/Analytics.svelte

@@ -11,7 +11,7 @@
   }
 </script>
 
-<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) -->
+<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
 <script lang="ts">
   interface Author {
     name: string;

src/components/Article/Article.stories.svelte

@@ -8,7 +8,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Article',
+    title: 'Components/Page Layout/Article',
     component: Article,
     ...withComponentDocs(componentDocs),
   };

src/components/Article/Article.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->
+<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-article--docs) -->
 <script lang="ts">
   /** Set to true for embeddables. */
   export let embedded: boolean = false;

src/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -10,7 +10,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/BeforeAfter',
+    title: 'Components/Graphics/BeforeAfter',
     component: BeforeAfter,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/BeforeAfter/BeforeAfter.svelte

@@ -1,4 +1,4 @@
-<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) -->
+<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
 <script lang="ts">
   import { throttle } from 'lodash-es';
   import { onMount } from 'svelte';

src/components/Block/Block.stories.svelte

@@ -11,7 +11,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Block',
+    title: 'Components/Page layout/Block',
     component: Block,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/Block/Block.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->
+<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-block--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 

src/components/BodyText/BodyText.stories.svelte

@@ -6,7 +6,7 @@
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/BodyText',
+    title: 'Components/Text elements/BodyText',
     component: BodyText,
     ...withComponentDocs(componentDocs),
   };

src/components/BodyText/BodyText.svelte

@@ -1,4 +1,4 @@
-<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->
+<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
 <script lang="ts">
   import Markdown from '../Markdown/Markdown.svelte';
   /**

src/components/Byline/Byline.stories.svelte

@@ -6,7 +6,7 @@
   import { withComponentDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Byline',
+    title: 'Components/Text elements/Byline',
     component: Byline,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/Byline/Byline.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
   import slugify from 'slugify';

src/components/DatawrapperChart/DatawrapperChart.stories.svelte

@@ -11,7 +11,7 @@
   } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/DatawrapperChart',
+    title: 'Components/Graphics/DatawrapperChart',
     component: DatawrapperChart,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/DatawrapperChart/DatawrapperChart.svelte

@@ -1,4 +1,4 @@
-<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DatawrapperChart--default) -->
+<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';

src/components/DocumentCloud/DocumentCloud.stories.svelte

@@ -6,7 +6,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/DocumentCloud',
+    title: 'Components/Multimedia/DocumentCloud',
     component: DocumentCloud,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/DocumentCloud/DocumentCloud.svelte

@@ -1,4 +1,4 @@
-<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->
+<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
   /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */

src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte

@@ -6,7 +6,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/EmbedPreviewerLink',
+    title: 'Components/Utilities/EmbedPreviewerLink',
     component: EmbedPreviewerLink,
     ...withComponentDocs(componentDocs),
   };

src/components/EndNotes/EndNotes.stories.svelte

@@ -6,7 +6,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/EndNotes',
+    title: 'Components/Text elements/EndNotes',
     component: EndNotes,
     ...withComponentDocs(componentDocs),
   };

src/components/EndNotes/EndNotes.svelte

@@ -1,4 +1,4 @@
-<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->
+<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) -->
 <script lang="ts">
   interface EndNote {
     /**

src/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -14,7 +14,7 @@
   } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/FeaturePhoto',
+    title: 'Components/Multimedia/FeaturePhoto',
     component: FeaturePhoto,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,4 +1,4 @@
-<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) -->
+<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
 <script lang="ts">
   import { onMount } from 'svelte';
   import Block from '../Block/Block.svelte';

src/components/Framer/Framer.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Framer',
+    title: 'Components/Utilities/Framer',
     component: Framer,
     ...withComponentDocs(componentDocs),
   };

src/components/GraphicBlock/GraphicBlock.stories.svelte

@@ -15,7 +15,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/GraphicBlock',
+    title: 'Components/Graphics/GraphicBlock',
     component: GraphicBlock,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/GraphicBlock/GraphicBlock.svelte

@@ -1,4 +1,4 @@
-<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) -->
+<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 

src/components/Headline/Headline.stories.svelte

@@ -20,7 +20,7 @@
   } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Headline',
+    title: 'Components/Text elements/Headline',
     component: Headline,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/Headline/Headline.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
+<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
   import type { HeadlineSize } from './../@types/global';
 

src/components/HeroHeadline/Hero.stories.svelte

@@ -22,7 +22,7 @@
   } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/HeroHeadline',
+    title: 'Components/Text elements/HeroHeadline',
     component: HeroHeadline,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/HeroHeadline/Hero.svelte

@@ -1,4 +1,4 @@
-<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
 <script lang="ts">
   import type { HeadlineSize } from '../@types/global';
 

src/components/InfoBox/InfoBox.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/InfoBox',
+    title: 'Components/Text elements/InfoBox',
     component: InfoBox,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/InfoBox/InfoBox.svelte

@@ -1,4 +1,4 @@
-<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) -->
+<!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 

src/components/Markdown/Markdown.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/Markdown',
+    title: 'Components/Text elements/Markdown',
     component: Markdown,
     ...withComponentDocs(componentDocs),
   };

src/components/Markdown/Markdown.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) -->
+<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) -->
 <script lang="ts">
   import type { Action } from 'svelte/action';
   import { marked } from 'marked';

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/PaddingReset',
+    title: 'Components/Page layout/PaddingReset',
     component: PaddingReset,
     ...withComponentDocs(componentDocs),
   };

src/components/PaddingReset/PaddingReset.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
 <script>
   /**
    * If parent container is fluid, which resets the padding around contained elements.

src/components/PhotoCarousel/PhotoCarousel.stories.svelte

@@ -9,7 +9,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/PhotoCarousel',
+    title: 'Components/Multimedia/PhotoCarousel',
     component: PhotoCarousel,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -1,4 +1,4 @@
-<!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoCarousel--default) -->
+<!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photocarousel--docs) -->
 <script lang="ts">
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 

src/components/PhotoPack/PhotoPack.stories.svelte

@@ -11,7 +11,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/PhotoPack',
+    title: 'Components/Multimedia/PhotoPack',
     component: PhotoPack,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/PhotoPack/PhotoPack.svelte

@@ -1,4 +1,4 @@
-<!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) -->
+<!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photopack--docs) -->
 <script lang="ts">
   interface Image {
     src: string;

src/components/PymChild/PymChild.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/PymChild',
+    title: 'Components/Utilities/PymChild',
     component: PymChild,
     ...withComponentDocs(componentDocs),
   };

src/components/PymChild/PymChild.svelte

@@ -1,4 +1,4 @@
-<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) -->
+<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
   /** Pym.js polling interval */
   export let polling: number = 500;

src/components/ReferralBlock/ReferralBlock.stories.svelte

@@ -9,7 +9,7 @@
   import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/ReferralBlock',
+    title: 'Components/Page furniture/ReferralBlock',
     component: ReferralBlock,
     ...withComponentDocs(componentDocs),
     argTypes: {

src/components/ReferralBlock/ReferralBlock.svelte

@@ -1,4 +1,4 @@
-<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
+<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
 <script lang="ts">
   /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
 

src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte

@@ -7,7 +7,7 @@
   import { withComponentDocs } from '$lib/docs/utils/withParams.js';
 
   export const meta = {
-    title: 'Components/ReutersGraphicsLogo',
+    title: 'Components/Logos/ReutersGraphicsLogo',
     component: ReutersGraphicsLogo,
     ...withComponentDocs(componentDocs),
   };

src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte

@@ -1,4 +1,4 @@
-<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersGraphicsLogo--default) -->
+<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
 <script lang="ts">
   /** "Kinesis" colour */
   export let logoColour: string = '#FA6400';