Merge pull request #4986 from open-formulieren/chore/4908-document-bo…

…olean-icons

📝 Document boolean icons in admin

.storybook/main.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
 
 const config = {
   core: {
@@ -51,6 +52,8 @@ const config = {
       path.resolve(__dirname, '../src/openforms/js'),
     ];
 
+    config.plugins.push(new webpack.DefinePlugin({STATIC_URL: JSON.stringify('./static/')}));
+
     if (isEnvProduction) {
       config.plugins.push(new MiniCssExtractPlugin({filename: 'static/bundles/[name].css'}));
     }

src/openforms/js/components/admin/BooleanIcons.mdx

@@ -0,0 +1,16 @@
+import {ArgTypes, Canvas, Meta} from '@storybook/addon-docs';
+
+import * as BooleanIconsStories from './BooleanIcons.stories';
+
+<Meta of={BooleanIconsStories} />
+
+# Boolean icons
+
+You can use boolean icons to quickly represent the state of a boolean. Booleans are tri-state:
+`true`, `false` or `null`.
+
+<Canvas of={BooleanIconsStories.Yes} />
+
+<Canvas of={BooleanIconsStories.No} />
+
+<Canvas of={BooleanIconsStories.Unknown} />

src/openforms/js/components/admin/BooleanIcons.stories.js

@@ -0,0 +1,18 @@
+import BooleanIcon, {IconNo, IconUnknown, IconYes} from './BooleanIcons';
+
+export default {
+  title: 'Admin / Django / BooleanIcons',
+  component: BooleanIcon,
+};
+
+export const Yes = {
+  render: () => <IconYes />,
+};
+
+export const No = {
+  render: () => <IconNo />,
+};
+
+export const Unknown = {
+  render: () => <IconUnknown />,
+};