docs ordering
This commit is contained in:
Jon McClure
parent
cd68e3c140
commit
a9955b29ce
15 changed files with 54 additions and 48 deletions
|
|
@ -63,12 +63,6 @@ export const parameters = {
|
|||
'Intro',
|
||||
'Typography',
|
||||
'*',
|
||||
'Layout', [
|
||||
'Main',
|
||||
'Spacers',
|
||||
'Flexbox',
|
||||
'*',
|
||||
],
|
||||
],
|
||||
],
|
||||
'Actions',
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@ let observer;
|
|||
let callbacks;
|
||||
|
||||
export default (element, onResize) => {
|
||||
if (!observer) {
|
||||
callbacks = new WeakMap();
|
||||
observer = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
const onResize = callbacks.get(entry.target);
|
||||
if (onResize) onResize(entry.target);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!observer) {
|
||||
callbacks = new WeakMap();
|
||||
observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const onResize = callbacks.get(entry.target);
|
||||
if (onResize) onResize(entry.target);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
callbacks.set(element, onResize);
|
||||
observer.observe(element);
|
||||
callbacks.set(element, onResize);
|
||||
observer.observe(element);
|
||||
|
||||
return {
|
||||
destroy: () => {
|
||||
callbacks.delete(element);
|
||||
observer.unobserve(element);
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
destroy: () => {
|
||||
callbacks.delete(element);
|
||||
observer.unobserve(element);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
22
src/actions/resizeObserver/resizeObserver.stories.mdx
Normal file
22
src/actions/resizeObserver/resizeObserver.stories.mdx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# `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>
|
||||
```
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/Analytics"
|
||||
title="Components/Analytics"
|
||||
component="{Analytics}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/EmbedPreviewerLink"
|
||||
title="Components/EmbedPreviewerLink"
|
||||
component="{EmbedPreviewerLink}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/Framer"
|
||||
title="Components/Framer"
|
||||
component="{Framer}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/PaddingReset"
|
||||
title="Components/PaddingReset"
|
||||
component="{PaddingReset}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/PymChild"
|
||||
title="Components/PymChild"
|
||||
component="{PymChild}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/Sharer"
|
||||
title="Components/Sharer"
|
||||
component="{Sharer}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</script>
|
||||
|
||||
<Meta
|
||||
title="Utilities/ToolsHeader"
|
||||
title="Components/ToolsHeader"
|
||||
component="{ToolsHeader}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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 }} />
|
||||
|
||||
|
||||
|
||||
|
|
@ -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 }} />
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }} />
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="Utilities/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# 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.
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue