Storybook css fixes (#139)

* Fix: Keyboard shortcuts window positioning

* Fix: Settings panel alignment

* Task: storybook/options is deprecated - pulled in parameters function instead

Author: jamesdools

.storybook/config.js

@@ -1,5 +1,4 @@
-import { configure } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
+import { addParameters, configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
 // https://webpack.js.org/guides/dependency-management/
@@ -13,10 +12,11 @@ function loadStories() {
   styles.keys().forEach((filename) => styles(filename));
 }
 
-setOptions({
-  name: 'react-transcript-editor',
-  url: 'https://github.com/bbc/react-transcript-editor',
-  addonPanelInRight: true
+addParameters({
+  options: {
+    panelPosition: 'right',
+    sidebarAnimations: true
+  },
 });
 
 configure(loadStories, module);

.storybook/styles/main.scss

@@ -1,4 +1,4 @@
 body * {
-  // font-family: ReithSans, Helvetica, sans-serif !important;
   font-family: ReithSerif, Fallback, sans-serif;
+  // font-family: ReithSans, Helvetica, sans-serif !important;
 }

package.json

@@ -65,7 +65,6 @@
     "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "^5.0.6",
     "@storybook/addon-links": "^5.0.6",
-    "@storybook/addon-options": "^5.0.6",
     "@storybook/addons": "^5.0.6",
     "@storybook/react": "^5.0.6",
     "babel-eslint": "^10.0.1",

packages/components/keyboard-shortcuts/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import returnHotKeys from './hot-keys';
 
 import style from './index.module.css';
@@ -27,9 +29,8 @@ class KeyboardShortcuts extends React.Component {
         <h2 className={ style.header }>Shortcuts</h2>
         <div
           className={ style.closeButton }
-          onClick={ this.props.handleShortcutsToggle }
-        >
-          <FontAwesomeIcon icon="window-close" />
+          onClick={ this.props.handleShortcutsToggle }>
+          <FontAwesomeIcon icon={ faWindowClose } />
         </div>
         <ul className={ style.list }>{hotKeysCheatsheet}</ul>
       </div>

packages/components/keyboard-shortcuts/index.module.css

@@ -9,6 +9,9 @@
   color: black;
   background: color-lightest-grey;
   z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .header {
@@ -23,12 +26,13 @@
   right: 0;
   padding: 1em;
   cursor: pointer;
+  z-index: 3;
 }
 
 .list {
   list-style: none;
   padding: 1em;
-  margin: 0;
+  margin: 0 auto;
 }
 
 .listItem {

packages/components/settings/index.module.css

@@ -31,9 +31,9 @@
 .controlsContainer {
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   align-content: flex-start;
   align-items: center;
+  margin: 0 auto;
 }
 
 .settingElement {