diff --git a/.storybook/main.js b/.storybook/main.js index b1da495bb..266fd0374 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -16,5 +16,16 @@ module.exports = { * @see https://github.com/storybookjs/storybook/tree/master/addons/google-analytics */ '@storybook/addon-google-analytics', + + /** + * Adds support for CSS Modules. + * + * Even though Next Right Now doesn't encourage the use of CSS Modules, + * we thought it's an interesting feature to support, which is natively supported by Next.js. + * + * @see https://www.npmjs.com/package/storybook-css-modules-preset How to configure Storybook to support CSS Modules + * @see https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css How to use CSS Modules with Next.js + */ + 'storybook-css-modules-preset', ], }; diff --git a/package.json b/package.json index a1692d128..8ce0d6258 100644 --- a/package.json +++ b/package.json @@ -229,6 +229,7 @@ "open-cli": "6.0.1", "react-test-renderer": "17.0.1", "storybook-addon-next-router": "2.0.3", + "storybook-css-modules-preset": "1.0.5", "ts-jest": "26.4.4", "typescript": "4.1.3", "vercel": "21.0.1" diff --git a/src/stories/nrn/utilities/I18nLink.module.css b/src/stories/nrn/utilities/I18nLink.module.css new file mode 100644 index 000000000..174aa2559 --- /dev/null +++ b/src/stories/nrn/utilities/I18nLink.module.css @@ -0,0 +1,6 @@ +/* This is a basic example to check Storybook supports using CSS Modules */ +.red { + margin: 10px; + padding: 10px; + background-color: red; +} diff --git a/src/stories/nrn/utilities/I18nLink.stories.tsx b/src/stories/nrn/utilities/I18nLink.stories.tsx index 0a8a56945..f61791962 100644 --- a/src/stories/nrn/utilities/I18nLink.stories.tsx +++ b/src/stories/nrn/utilities/I18nLink.stories.tsx @@ -1,6 +1,7 @@ import { Meta } from '@storybook/react/types-6-0'; import React from 'react'; import I18nLink, { Props } from '../../../components/i18n/I18nLink'; +import styles from './I18nLink.module.css'; export default { title: 'Utilities/I18nLink', @@ -18,6 +19,17 @@ export const SimpleLink: React.VFC = () => { ); }; +export const LinkWithCSSModule: React.VFC = () => { + return ( + + Homepage (red) + + ); +}; + export const LinkWithClass: React.VFC = () => { return (