From 9ac52ccd61da35be6b215b9d0d338c5af476303e Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 1 Jul 2021 14:46:17 -0700 Subject: [PATCH] Refine the Dot Leader list code example (#1356) --- .../dot-leader/dot-leader.stories.mdx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/dot-leader/dot-leader.stories.mdx b/src/components/dot-leader/dot-leader.stories.mdx index 24b133669..5577fe52f 100644 --- a/src/components/dot-leader/dot-leader.stories.mdx +++ b/src/components/dot-leader/dot-leader.stories.mdx @@ -1,4 +1,13 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; +// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax. +// See: https://github.com/webpack-contrib/raw-loader#examples +// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are +// okay with the following Webpack-specific raw loader syntax. It's better to leave +// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g. +// within a Storybook docs page and not within an actual component). +// This can be revisited in the future if Storybook no longer relies on Webpack. +// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax +import listDemoSource from '!!raw-loader!./demo/list.twig'; import listDemo from './demo/list.twig'; import topics from './demo/topics.json'; import template from './dot-leader.twig'; @@ -44,5 +53,16 @@ If `c-dot-leader` is an `` element, it will gain some additional styles. Although `c-dot-leader` applies to a single row, the pattern works best as part of [a list object](/docs/objects-list--default-story). The dotted lines clearly associate each column even when content lengths vary. - {listDemo({ topics })} + + {listDemo({ topics })} +