qpp-style 0.0.9 → 0.0.10

package/test/components/SessionDialogUI.test.js

@@ -37,6 +37,60 @@ describe('SessionDialogUI', () => {
     clock.restore();
   });
 
+  it('closes the dialog when Refresh button is clicked', () => {
+    const refreshSpy = sinon.spy(SessionDialogUI.prototype, 'refreshSession');
+    const dialog = ReactTestUtils.renderIntoDocument(
+      <SessionDialogUI
+        showImmediate={true}
+        startTimer={sinon.spy()}
+        appElement="body"
+      />
+    );
+    const refresh = sinon.stub(refreshModule, 'default').yieldsTo('onSuccess');
+
+    sinon.spy(dialog, 'startTimer');
+    sinon.spy(dialog, 'handleCloseModal');
+
+    const button = document.querySelector("[data-testid='modal-primary-btn']");
+    ReactTestUtils.Simulate.click(button);
+
+    expect(refreshSpy.calledOnce).to.be.true;
+    expect(refresh.calledOnce).to.be.true;
+    expect(dialog.handleCloseModal.calledOnce).to.be.true;
+    expect(dialog.startTimer.calledOnce).to.be.true;
+
+    refreshSpy.restore();
+    dialog.startTimer.restore();
+    dialog.handleCloseModal.restore();
+    refresh.restore();
+  });
+
+  it('closes the dialog when Sign Out button is clicked', () => {
+    const signOutSpy = sinon.spy(SessionDialogUI.prototype, 'signOut');
+    const dialog = ReactTestUtils.renderIntoDocument(
+      <SessionDialogUI
+        showImmediate={true}
+        startTimer={sinon.spy()}
+        appElement="body"
+      />
+    );
+    const logout = sinon.stub(logoutModule, 'default');
+
+    sinon.spy(dialog, 'handleCloseModal');
+
+    const button = document.querySelector(
+      "[data-testid='modal-secondary-btn']"
+    );
+    ReactTestUtils.Simulate.click(button);
+
+    expect(signOutSpy.calledOnce).to.be.true;
+    expect(dialog.handleCloseModal.calledOnce).to.be.true;
+    expect(logout.calledOnce).to.be.true;
+
+    signOutSpy.restore();
+    dialog.handleCloseModal.restore();
+  });
+
   it('renders the dialog HTML', () => {
     const dialog = ReactTestUtils.renderIntoDocument(
       <SessionDialogUI
@@ -50,7 +104,7 @@ describe('SessionDialogUI', () => {
 
     // The dialog gets rendered as a sibling of the composite
     // component, so check for it in the document instead
-    const node = document.querySelector('.ReactModalPortal');
+    const node = document.querySelector('.ReactModal__Overlay');
 
     expect(node).to.exist;
   });
@@ -69,23 +123,6 @@ describe('SessionDialogUI', () => {
     expect(dialog.props).to.have.property('warningTimeout', 666);
   });
 
-  it('warningTimeout can only be set to a number', () => {
-    sinon.stub(console, 'error');
-
-    const dialog = ReactTestUtils.renderIntoDocument(
-      <SessionDialogUI warningTimeout="fiddlesticks!" appElement="body" />
-    );
-
-    expect(console.error.calledOnce).to.be.true;
-
-    const message =
-      'Warning: Failed prop type: Invalid prop `warningTimeout` of type `string` supplied to `SessionDialogUI`, expected `number`.';
-    const actual = console.error.getCall(0).args[0];
-
-    expect(actual).to.include(message);
-    console.error.restore();
-  });
-
   it('calls #startTimer by default', () => {
     const spy = sinon.spy(SessionDialogUI.prototype, 'startTimer');
     const dialog = ReactTestUtils.renderIntoDocument(
@@ -107,58 +144,6 @@ describe('SessionDialogUI', () => {
     spy.restore();
   });
 
-  it('closes the dialog when Refresh button is clicked', () => {
-    const refreshSpy = sinon.spy(SessionDialogUI.prototype, 'refreshSession');
-    const dialog = ReactTestUtils.renderIntoDocument(
-      <SessionDialogUI
-        showImmediate={true}
-        startTimer={sinon.spy()}
-        appElement="body"
-      />
-    );
-    const refresh = sinon.stub(refreshModule, 'default').yieldsTo('onSuccess');
-
-    sinon.spy(dialog, 'startTimer');
-    sinon.spy(dialog, 'handleCloseModal');
-
-    const button = document.querySelectorAll('.btn.primary-action')[1];
-    ReactTestUtils.Simulate.click(button);
-
-    expect(refreshSpy.calledOnce).to.be.true;
-    expect(refresh.calledOnce).to.be.true;
-    expect(dialog.handleCloseModal.calledOnce).to.be.true;
-    expect(dialog.startTimer.calledOnce).to.be.true;
-
-    refreshSpy.restore();
-    dialog.startTimer.restore();
-    dialog.handleCloseModal.restore();
-    refresh.restore();
-  });
-
-  it('closes the dialog when Sign Out button is clicked', () => {
-    const signOutSpy = sinon.spy(SessionDialogUI.prototype, 'signOut');
-    const dialog = ReactTestUtils.renderIntoDocument(
-      <SessionDialogUI
-        showImmediate={true}
-        startTimer={sinon.spy()}
-        appElement="body"
-      />
-    );
-    const logout = sinon.stub(logoutModule, 'default');
-
-    sinon.spy(dialog, 'handleCloseModal');
-
-    const button = document.querySelectorAll('.btn.secondary-action')[1];
-    ReactTestUtils.Simulate.click(button);
-
-    expect(signOutSpy.calledOnce).to.be.true;
-    expect(dialog.handleCloseModal.calledOnce).to.be.true;
-    expect(logout.calledOnce).to.be.true;
-
-    signOutSpy.restore();
-    dialog.handleCloseModal.restore();
-  });
-
   describe('#shouldShowDialog', () => {
     it('time_remaining returns true within warning timeout', () => {
       let expiry = 1800; // 30 minutes reminaing

package/test-setup.js

@@ -1,9 +1 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import 'regenerator-runtime/runtime';
-
-configure({ adapter: new Adapter() });
-
-const fetch = require('node-fetch');
-
-global.fetch = fetch;

package/webpack.config.js

@@ -3,18 +3,13 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 const pkg = require('./package.json');
 const entry = ['./index.js'];
 
 const _module = {
   rules: [
-    {
-      enforce: 'pre',
-      test: /\.(js|jsx)?$/,
-      loader: 'eslint-loader',
-      exclude: /node_modules/,
-    },
     {
       test: /\.(js|jsx)?$/,
       loader: 'babel-loader',
@@ -41,26 +36,15 @@ const _module = {
     },
     {
       test: /\.(ttf|eot|woff|otf|woff2)$/,
-      loader: 'file-loader',
-      options: {
-        name: 'fonts/[name].[ext]',
+      type: 'asset/resource',
+      generator: {
+        filename: 'fonts/[name].[ext]',
       },
     },
     {
-      test: /\.svg$/,
-      use: [
-        'raw-loader',
-        {
-          loader: 'svgo-loader',
-          options: {
-            plugins: [
-              { removeTitle: true },
-              { convertColors: { shorthex: false } },
-              { convertPathData: false },
-            ],
-          },
-        },
-      ],
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
     },
   ],
 };
@@ -70,22 +54,24 @@ const plugins = [
     filename: 'default.css',
   }),
   // copy styles, images, fonts from shared directory
-  new CopyWebpackPlugin([
-    {
-      from: path.join(__dirname, '..', 'shared', 'styles'),
-      to: path.resolve(__dirname, 'styles'),
-    },
-    {
-      from: path.join(__dirname, '..', 'shared', 'images'),
-      to: path.resolve(__dirname, 'images'),
-      force: true,
-    },
-    {
-      from: path.join(__dirname, '..', 'shared', 'fonts'),
-      to: path.resolve(__dirname, 'fonts'),
-      force: true,
-    },
-  ]),
+  new CopyWebpackPlugin({
+    patterns: [
+      {
+        from: path.join(__dirname, '..', 'shared', 'styles'),
+        to: path.resolve(__dirname, 'styles'),
+      },
+      {
+        from: path.join(__dirname, '..', 'shared', 'images'),
+        to: path.resolve(__dirname, 'images'),
+        force: true,
+      },
+      {
+        from: path.join(__dirname, '..', 'shared', 'fonts'),
+        to: path.resolve(__dirname, 'fonts'),
+        force: true,
+      },
+    ],
+  }),
   new webpack.DefinePlugin({
     'process.env': {
       NODE_ENV: JSON.stringify('production'),
@@ -94,6 +80,10 @@ const plugins = [
   new webpack.DefinePlugin({
     buildVersion: JSON.stringify(pkg.version),
   }),
+  new ESLintPlugin({
+    extensions: ['js', 'jsx'],
+    exclude: 'node_modules',
+  }),
 ];
 
 const resolve = {

package/webpack.config.react.js

@@ -32,26 +32,15 @@ const _module = {
     },
     {
       test: /\.(ttf|eot|woff|otf|woff2)$/,
-      loader: 'file-loader',
-      options: {
-        name: 'fonts/[name].[ext]',
+      type: 'asset/resource',
+      generator: {
+        filename: 'fonts/[name].[ext]',
       },
     },
     {
-      test: /\.svg$/,
-      use: [
-        'raw-loader',
-        {
-          loader: 'svgo-loader',
-          options: {
-            plugins: [
-              { removeTitle: true },
-              { convertColors: { shorthex: false } },
-              { convertPathData: false },
-            ],
-          },
-        },
-      ],
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
     },
   ],
 };
@@ -72,7 +61,7 @@ module.exports = {
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'dist/react'),
-    library: '',
+    library: 'QPPStyle',
     libraryTarget: 'umd',
   },
   devtool: 'source-map',

package/.storybook/.babelrc

@@ -1,4 +0,0 @@
-{
-    "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["transform-class-properties"]
-}

package/.storybook/main.js

@@ -1,88 +0,0 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-module.exports = {
-  stories: [
-    '../components/**/*.stories.@(js|jsx|mdx)',
-    '../lib/**/*.stories.@(js|jsx|mdx)',
-  ],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-knobs',
-    '@storybook/addon-a11y',
-    '@storybook/addon-docs',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-viewport',
-  ],
-  webpackFinal: async (config) => {
-    // do mutation to the config
-
-    config.plugins.push(
-      new CopyWebpackPlugin([
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
-          to: 'fonts/',
-        },
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'images/'),
-          to: 'images/',
-          force: true,
-        },
-      ])
-    );
-
-    config.module.rules.push({
-      test: /\.scss$/,
-      resolve: {
-        extensions: ['.scss', '.sass'],
-      },
-      use: [
-        { loader: 'style-loader' },
-        {
-          loader: 'css-loader',
-          options: { sourceMap: true, importLoaders: 1 },
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-      ],
-    });
-
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: [
-        'raw-loader',
-        {
-          loader: 'svgo-loader',
-          options: {
-            plugins: [
-              { removeTitle: true },
-              { convertColors: { shorthex: false } },
-              { convertPathData: false },
-            ],
-          },
-        },
-      ],
-    });
-
-    // Modify default storybook SVG loader so we can use the one expected by qpp-style
-    // NOTE: When updating storybook dependency, double check this override.
-    const staticAssetLoader = config.module.rules.find((rule) => {
-      const regExp = rule.test;
-      const isRegExp = typeof regExp.test === 'function';
-      return isRegExp && regExp.test('.svg');
-    });
-
-    if (staticAssetLoader) {
-      // remove svg matching from storybook's default static asset loader
-      staticAssetLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
-    }
-
-    return config;
-  },
-};

package/.storybook/preview-head.html

@@ -1,9 +0,0 @@
-<!--
-  Boottrap navbar and dropdowns used by <Header> component require jQuery
-  TODO: <Header> should be refactored to no longer rely on bootstrap.
--->
-<script
-  src="https://code.jquery.com/jquery-3.5.1.min.js"
-  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
-  crossorigin="anonymous"
-></script>

package/.storybook/preview.js

@@ -1,5 +0,0 @@
-import '../../shared/styles/_main.scss';
-
-export const parameters = {
-  layout: 'fullscreen',
-};

package/Session.vim

@@ -1,83 +0,0 @@
-let SessionLoad = 1
-let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1
-let v:this_session=expand("<sfile>:p")
-silent only
-silent tabonly
-cd ~/Projects/qpp-style/react
-if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
-  let s:wipebuf = bufnr('%')
-endif
-set shortmess=aoO
-badd +3 components/SideNav/index.js
-badd +1 components/SideNav/UI/index.js
-badd +87 components/SideNav/UI/SideNavUI.jsx
-badd +21 components/SideNav/Content/LevelOneContent.jsx
-badd +215 term://~/Projects/qpp-style/react//58606:/bin/zsh
-argglobal
-%argdel
-set stal=2
-tabnew
-tabrewind
-edit components/SideNav/Content/LevelOneContent.jsx
-set splitbelow splitright
-wincmd t
-set winminheight=0
-set winheight=1
-set winminwidth=0
-set winwidth=1
-argglobal
-setlocal fdm=manual
-setlocal fde=0
-setlocal fmr={{{,}}}
-setlocal fdi=#
-setlocal fdl=99
-setlocal fml=1
-setlocal fdn=20
-setlocal fen
-silent! normal! zE
-let s:l = 21 - ((20 * winheight(0) + 18) / 37)
-if s:l < 1 | let s:l = 1 | endif
-exe s:l
-normal! zt
-21
-normal! 09|
-lcd ~/Projects/qpp-style/react
-tabnext
-edit ~/Projects/qpp-style/react/components/SideNav/UI/SideNavUI.jsx
-set splitbelow splitright
-wincmd t
-set winminheight=0
-set winheight=1
-set winminwidth=0
-set winwidth=1
-argglobal
-setlocal fdm=manual
-setlocal fde=0
-setlocal fmr={{{,}}}
-setlocal fdi=#
-setlocal fdl=99
-setlocal fml=1
-setlocal fdn=20
-setlocal fen
-silent! normal! zE
-let s:l = 87 - ((30 * winheight(0) + 18) / 36)
-if s:l < 1 | let s:l = 1 | endif
-exe s:l
-normal! zt
-87
-normal! 041|
-tabnext 2
-set stal=1
-if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0&& getbufvar(s:wipebuf, '&buftype') isnot# 'terminal'
-  silent exe 'bwipe ' . s:wipebuf
-endif
-unlet! s:wipebuf
-set winheight=1 winwidth=20 winminheight=1 winminwidth=1 shortmess=aoOtTIc
-let s:sx = expand("<sfile>:p:r")."x.vim"
-if filereadable(s:sx)
-  exe "source " . fnameescape(s:sx)
-endif
-let &g:so = s:so_save | let &g:siso = s:siso_save
-doautoall SessionLoadPost
-unlet SessionLoad
-" vim: set ft=vim :

package/components/Accordion/Accordion.stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Accordion from '.';
-
-export default {
-  title: 'Accordion',
-  component: Accordion,
-};
-
-export const Example = () => (
-  <div style={{ padding: '20px', maxWidth: '500px' }}>
-    <Accordion title="Accordion title">My accordion content</Accordion>
-  </div>
-);
-
-export const Focus = () => (
-  <div style={{ padding: '20px', maxWidth: '500px' }}>
-    <input />
-    <Accordion title="Accordion title">My accordion content</Accordion>
-  </div>
-);

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import Breadcrumb from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-
-export default {
-  title: 'Breadcrumb',
-  component: Breadcrumb,
-  decorators: [withKnobs],
-};
-
-export const ExampleLightBreadcrumb = () => (
-  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
-    <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
-      crumbs={[
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Home',
-          title: 'Home',
-        },
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Mips Overview',
-          title: 'Mips Overview',
-        },
-      ]}
-    />
-  </div>
-);
-
-ExampleLightBreadcrumb.storyName = 'Light';
-
-export const ExampleDarkBreadcrumb = () => (
-  <div className="qppds qpp-u-padding--16">
-    <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
-      dark
-      crumbs={[
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Home',
-          title: 'Home',
-        },
-        {
-          url: '/',
-          category: 'MainContent',
-          label: 'Mips Overview',
-          title: 'Mips Overview',
-        },
-      ]}
-    />
-  </div>
-);
-
-ExampleDarkBreadcrumb.storyName = 'Dark';