docs ordering

.storybook/preview.ts

@@ -63,12 +63,6 @@ export const parameters = {
             'Intro',
             'Typography',
             '*',
-            'Layout', [
-              'Main',
-              'Spacers',
-              'Flexbox',
-              '*',
-            ],
           ],
         ],
         'Actions',

src/actions/resizeObserver/index.js

@@ -3,23 +3,23 @@ let observer;
 let callbacks;
 
 export default (element, onResize) => {
-   if (!observer) {
+  if (!observer) {
-      callbacks = new WeakMap();
+    callbacks = new WeakMap();
-      observer = new ResizeObserver(entries => {
+    observer = new ResizeObserver((entries) => {
-         for (const entry of entries) {
+      for (const entry of entries) {
-            const onResize = callbacks.get(entry.target);
+        const onResize = callbacks.get(entry.target);
-            if (onResize) onResize(entry.target);
+        if (onResize) onResize(entry.target);
-         }
+      }
-      });
+    });
-   }
+  }
 
-   callbacks.set(element, onResize);
+  callbacks.set(element, onResize);
-   observer.observe(element);
+  observer.observe(element);
 
-   return {
+  return {
-      destroy: () => {
+    destroy: () => {
-         callbacks.delete(element);
+      callbacks.delete(element);
-         observer.unobserve(element);
+      observer.unobserve(element);
-      },
+    },
-   };
+  };
-}
+};

src/actions/resizeObserver/resizeObserver.stories.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# `resizeObserver`
+
+An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:
+
+```svelte
+<script>
+  import { resizeObserver } from '@reuters-graphics/graphics-components';
+
+  let elementWidth = 0;
+</script>
+
+<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
+  My width is: {elementWidth}
+</div>
+```

src/components/Analytics/Analytics.stories.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <Meta
-  title="Utilities/Analytics"
+  title="Components/Analytics"
   component="{Analytics}"
   {...withComponentDocs(componentDocs)}
 />

src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/EmbedPreviewerLink"
+  title="Components/EmbedPreviewerLink"
   component="{EmbedPreviewerLink}"
   {...withComponentDocs(componentDocs)}
 />

src/components/Framer/Framer.stories.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/Framer"
+  title="Components/Framer"
   component="{Framer}"
   {...withComponentDocs(componentDocs)}
 />

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <Meta
-  title="Utilities/PaddingReset"
+  title="Components/PaddingReset"
   component="{PaddingReset}"
   {...withComponentDocs(componentDocs)}
 />

src/components/PymChild/PymChild.stories.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/PymChild"
+  title="Components/PymChild"
   component="{PymChild}"
   {...withComponentDocs(componentDocs)}
 />

src/components/Sharer/Sharer.stories.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/Sharer"
+  title="Components/Sharer"
   component="{Sharer}"
   {...withComponentDocs(componentDocs)}
 />

src/components/ToolsHeader/ToolsHeader.stories.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <Meta
-  title="Utilities/ToolsHeader"
+  title="Components/ToolsHeader"
   component="{ToolsHeader}"
   {...withComponentDocs(componentDocs)}
 />

src/docs/styles/tokens/flexbox/main.stories.mdx

@@ -36,7 +36,7 @@ import justifyItems from '$lib/scss/tokens/layout/flex/\_justify-items.scss?raw'
 {/* @ts-ignore */}
 import justifySelf from '$lib/scss/tokens/layout/flex/\_justify-self.scss?raw';
 
-<Meta title="Styles/Tokens/Layout/Flexbox" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/styles/tokens/layout/main.stories.mdx

@@ -24,7 +24,7 @@ import overflow from '$lib/scss/tokens/layout/\_overflow.scss?raw';
 {/* @ts-ignore */}
 import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
-<Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/styles/tokens/spacers/main.stories.mdx

@@ -15,7 +15,7 @@ import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
 {/* @ts-ignore */}
 import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
 
-<Meta title="Styles/Tokens/Layout/Spacers" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/utilities/intro.stories.mdx

@@ -1,14 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
-
-<Meta title="Utilities/Intro" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
-# Utilities
-
-Utility components are a bit of a catch-all.
-
-They include components you're less likely to need to implement yourself, like development tools for the Graphics Kit.
-
-Either way, they're good to know about, even if they may not be the most common you'll use.

src/index.js

@@ -1,3 +1,7 @@
+// Actions
+export { default as cssVariables } from './actions/cssVariables/index.js';
+export { default as resizeObserver } from './actions/resizeObserver/index.js';
+
 // Components
 export { default as Analytics, registerPageview } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';