diff --git a/.storybook/main.js b/.storybook/main.js index e85e681d..dd2a7cc1 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,11 +1,9 @@ module.exports = { stories: ['../**/*.stories.tsx'], addons: [ - '@storybook/addon-postcss', '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-links', - '@storybook/addon-knobs', { name: '@storybook/addon-storysource', options: { @@ -14,24 +12,54 @@ module.exports = { }, }, }, - '@storybook/preset-scss', ], - webpackFinal: async (config) => { - config.module.rules.unshift({ - test: /\.svg$/i, - use: [ - { - loader: '@svgr/webpack', - options: { - prettier: false, - svgo: true, - svgoConfig: { plugins: [{ removeViewBox: false }] }, - titleProp: true, + core: { + builder: 'webpack5', + }, + webpackFinal: (config) => { + const svgrOptions = { + prettier: false, + svgo: true, + svgoConfig: { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + removeViewBox: false, + minifyStyles: false, + }, + }, }, - }, - ], - }) + 'convertStyleToAttrs', + ], + }, + titleProp: true, + } - return config + return { + ...config, + module: { + ...config.module, + rules: [ + { + oneOf: [ + { + test: /\.svg$/i, + use: [ + { + loader: '@svgr/webpack', + options: svgrOptions, + }, + ], + }, + { + rules: [...config.module.rules], + }, + ], + }, + ], + }, + } }, } diff --git a/.storybook/preview.js b/.storybook/preview.js index 8ba3594d..fa8e6702 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,15 @@ -import '@defencedigital/css-framework/index.scss' import '@defencedigital/fonts' +import { GlobalStyleProvider } from '@defencedigital/react-component-library' + export const parameters = { layout: 'fullscreen', } + +export const decorators = [ + (Story) => ( + + + + ), +] diff --git a/components/adapters/Framework/ApiTableAdapter.tsx b/components/adapters/Framework/ApiTableAdapter.tsx index ce6e0bea..433190c0 100644 --- a/components/adapters/Framework/ApiTableAdapter.tsx +++ b/components/adapters/Framework/ApiTableAdapter.tsx @@ -28,14 +28,14 @@ interface ApiTableAdapterProps extends ComponentWithClass { function renderDefaultValue( defaultValue: ApiFieldDefaultValueType ): React.ReactElement { - const { value, args } = defaultValue || {} + const { value, args, type } = defaultValue || {} if (args) { return ( - - {args.map(({ type, name }) => { + + {args.map(({ type: argType, name }) => { return ( - + {name} ) diff --git a/components/layouts/Framework/Framework.tsx b/components/layouts/Framework/Framework.tsx index 56f60fff..856386f6 100644 --- a/components/layouts/Framework/Framework.tsx +++ b/components/layouts/Framework/Framework.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import Head from 'next/head' +import Script from 'next/script' import { Masthead } from '../../presenters/Framework/Masthead' import { Sidebar } from '../../presenters/Framework/Sidebar' @@ -22,11 +23,11 @@ export const LayoutFramework: React.FC = ({ return ( <> +