refactor the code after git repo integration

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.scss

+@import 'src/styles/common';
+
+.trackPanelList {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  width: 320px;
+
+  h4 {
+    border-bottom: 1px solid $ens-grey;
+    color: $ens-grey;
+    font-size: 10px;
+    padding-bottom: 2px;
+  }
+}

src/ensembl/src/scripts/components/layout/track-panel/TrackPanelList.tsx → src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx

@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 
 import TrackPanelListItem from './TrackPanelListItem';
 import {
-  TrackPanelConfig,
+  TrackPanelCategory,
+  TrackPanelItem,
   trackPanelConfig
-} from '../../../configs/trackPanelConfig';
+} from '../trackPanelConfig';
+
+import styles from './TrackPanelList.scss';
 
 type TrackPanelListProps = {
   currentTrack: string;
@@ -28,24 +31,39 @@ class TrackPanelList extends Component<TrackPanelListProps> {
 
   public render() {
     return (
-      <div className="track-panel-list">
-        <dl>
-          {trackPanelConfig.map((track: TrackPanelConfig) => (
+      <div className={styles.trackPanelList}>
+        <section>
+          <dl>
             <TrackPanelListItem
-              key={track.id}
-              className={this.getTrackClass(track.name)}
-              track={track}
+              className="main"
+              track={trackPanelConfig.main}
               changeTrack={this.changeTrack}
+              additionalInfo="MANE Select transcript /7"
             />
-          ))}
-        </dl>
+          </dl>
+        </section>
+        {trackPanelConfig.categories.map((category: TrackPanelCategory) => (
+          <section>
+            <h4>{category.name}</h4>
+            <dl>
+              {category.trackList.map((track: TrackPanelItem) => (
+                <TrackPanelListItem
+                  key={track.id}
+                  className={this.getTrackClass(track.name)}
+                  track={track}
+                  changeTrack={this.changeTrack}
+                />
+              ))}
+            </dl>
+          </section>
+        ))}
       </div>
     );
   }
 
   private getTrackClass(trackName: string): string {
     if (this.props.currentTrack === trackName) {
-      return 'current-track';
+      return 'currentTrack';
     } else {
       return '';
     }

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss

+@import 'src/styles/common';
+
+.listItem {
+  display: flex;
+  font-size: 12px;
+  margin-left: 0;
+  padding: 4px 10px;
+
+  button {
+    margin-left: 15px;
+  }
+
+  img {
+    height: 16px;
+    width: 16px;
+
+    &.expandIcon {
+      height: 12px;
+      width: 12px;
+    }
+  }
+
+  &:hover,
+  &.currentTrack {
+    background: lighten($ens-blue, 40%);
+  }
+
+  &.main {
+    font-weight: $bold;
+  }
+
+  label {
+    width: calc(100% - 50px);
+
+    button {
+      margin-left: 0;
+    }
+
+    .mainText {
+      margin-right: 10px;
+    }
+
+    .additionalInfo {
+      color: $ens-black;
+      display: inline-block;
+      font-weight: $light;
+      margin-right: 10px;
+    }
+  }
+
+  .box {
+    border: 1px solid;
+    display: inline-block;
+    height: 11px;
+    margin-right: 10px;
+    position: relative;
+    top: 1px;
+    width: 11px;
+
+    &.blue {
+      background: $ens-blue;
+      border-color: $ens-blue;
+    }
+
+    &.darkGrey {
+      background: $ens-dark-grey;
+      border-color: $ens-dark-grey;
+    }
+
+    &.grey {
+      background: $ens-grey;
+      border-color: $ens-grey;
+    }
+
+    &.white {
+      background: $white;
+    }
+  }
+}

src/ensembl/src/scripts/components/layout/track-panel/TrackPanelListItem.tsx → src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx

 import React, { PureComponent } from 'react';
-import {
-  TrackPanelConfig,
-  trackPanelIconConfig
-} from '../../../configs/trackPanelConfig';
+import { TrackPanelItem, trackPanelIconConfig } from '../trackPanelConfig';
+
+import chevronDownIcon from 'static/img/track-panel/chevron-down.svg';
+import chevronUpIcon from 'static/img/track-panel/chevron-up.svg';
+
+import styles from './TrackPanelListItem.scss';
 
 type TrackPanelListItemProps = {
   className: string;
-  track: TrackPanelConfig;
+  track: TrackPanelItem;
   changeTrack: (name: string) => void;
+  additionalInfo?: string;
 };
 
 class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
+  private expanded: boolean = false;
+
   constructor(props: TrackPanelListItemProps) {
     super(props);
 
@@ -22,13 +27,31 @@ class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
   }
 
   public render() {
+    const { className, track, additionalInfo } = this.props;
+    const listItemClass = styles[className] || '';
+
     return (
-      <dt className={this.props.className}>
-        <label>{this.props.track.label}</label>
+      <dd className={`${styles.listItem} ${listItemClass}`}>
+        <label>
+          {track.color && (
+            <span className={`${styles.box} ${styles[track.color]}`} />
+          )}
+          <span className={styles.mainText}>{track.label}</span>
+          {additionalInfo && (
+            <span className={styles.additionalInfo}>{additionalInfo}</span>
+          )}
+          <button>
+            <img
+              className={styles.expandIcon}
+              src={this.expanded ? chevronUpIcon : chevronDownIcon}
+              alt={this.expanded ? 'collapse' : 'expand'}
+            />
+          </button>
+        </label>
         <button onClick={this.changeTrackHandler}>
           <img
             src={trackPanelIconConfig.ellipsis.icon.on}
-            alt={`Go to ${this.props.track.label}`}
+            alt={`Go to ${track.label}`}
           />
         </button>
         <button>
@@ -37,7 +60,7 @@ class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
             alt={trackPanelIconConfig.ellipsis.description}
           />
         </button>
-      </dt>
+      </dd>
     );
   }
 }

src/ensembl/src/content/app/browser/track-panel/trackPanelConfig.ts

+import eyeOnIcon from 'static/img/track-panel/eye-on.svg';
+import eyeOffIcon from 'static/img/track-panel/eye-off.svg';
+
+import ellipsisOnIcon from 'static/img/track-panel/ellipsis-on.svg';
+import ellipsisOffIcon from 'static/img/track-panel/ellipsis-off.svg';
+
+enum TrackItemColour {
+  BLUE = 'blue',
+  DARK_GREY = 'darkGrey',
+  GREY = 'grey',
+  WHITE = 'white'
+}
+
+export type TrackPanelItem = {
+  color?: string;
+  id: number;
+  label: string;
+  name: string;
+};
+
+export type TrackPanelCategory = {
+  name: string;
+  trackList: TrackPanelItem[];
+};
+
+export type TrackPanelIcon = {
+  description: string;
+  icon: {
+    off: string;
+    on: string;
+  };
+};
+
+export type TrackPanelIcons = {
+  [key: string]: TrackPanelIcon;
+};
+
+export type TrackPanelConfig = {
+  main: TrackPanelItem;
+  categories: TrackPanelCategory[];
+};
+
+export const trackPanelConfig: TrackPanelConfig = {
+  categories: [
+    {
+      name: 'Genes & transcripts',
+      trackList: [
+        {
+          color: TrackItemColour.DARK_GREY,
+          id: 1,
+          label: 'Coding genes',
+          name: 'coding-genes'
+        },
+        {
+          color: TrackItemColour.GREY,
+          id: 2,
+          label: 'Non-coding-genes',
+          name: 'non-coding-genes'
+        },
+        {
+          color: TrackItemColour.WHITE,
+          id: 3,
+          label: 'Psuedogenes',
+          name: 'psuedogenes'
+        },
+        {
+          id: 4,
+          label: 'Gencode annotation',
+          name: 'gencode-annotation'
+        },
+        {
+          id: 5,
+          label: 'RefSeq',
+          name: 'refseq'
+        },
+        {
+          id: 6,
+          label: 'RNASeq',
+          name: 'rnaseq'
+        }
+      ]
+    },
+    {
+      name: 'Assembly',
+      trackList: [
+        {
+          id: 101,
+          label: 'Assembly exceptions',
+          name: 'assembly-exceptions'
+        },
+        {
+          id: 102,
+          label: 'Repeat regions',
+          name: 'repeat-regions'
+        },
+        {
+          id: 103,
+          label: 'Encoding regions',
+          name: 'encoding-regions'
+        },
+        {
+          id: 104,
+          label: 'Contigs',
+          name: 'contigs'
+        },
+        {
+          id: 105,
+          label: 'Tilepath',
+          name: 'tilepath'
+        },
+        {
+          id: 106,
+          label: 'ABC libraries',
+          name: 'abc-libraries'
+        }
+      ]
+    },
+    {
+      name: 'Experiment design',
+      trackList: [
+        {
+          id: 201,
+          label: 'Markers',
+          name: 'markers'
+        },
+        {
+          id: 202,
+          label: 'Oligo probes',
+          name: 'oligo-probes'
+        }
+      ]
+    }
+  ],
+  main: {
+    color: TrackItemColour.BLUE,
+    id: 0,
+    label: 'BRCA2-201',
+    name: 'main'
+  }
+};
+
+export const trackPanelIconConfig: TrackPanelIcons = {
+  ellipsis: {
+    description: 'open track',
+    icon: {
+      off: ellipsisOffIcon,
+      on: ellipsisOnIcon
+    }
+  },
+  eye: {
+    description: 'enable/disable track',
+    icon: {
+      off: eyeOffIcon,
+      on: eyeOnIcon
+    }
+  }
+};

src/ensembl/src/scripts/configs/globalConfig.ts → src/ensembl/src/globalConfig.ts

-export const assetsUrl = '/assets';
+export const assetsUrl = '/static';
 export const imgBaseUrl = `${assetsUrl}/img`;

src/ensembl/src/header/Header.scss

+@import 'src/styles/common';
+
+.topBar {
+  @include top-bar-container;
+  @include top-bar-unstack;
+
+  color: $white;
+  padding: 2px 20px;
+}
+
+.companyText {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: $global-weight-bold;
+}
+
+.strapline,
+.copyright {
+  display: none;
+  font-size: 11px;
+  margin-left: 30px;
+
+  @include breakpoint(960px) {
+    display: inline-block;
+  }
+}

src/ensembl/src/scripts/components/layout/header/Header.test.tsx → src/ensembl/src/header/Header.test.tsx

@@ -3,9 +3,9 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 import Header from './Header';
-import Account from './Account';
+import Account from './account/Account';
 import LaunchbarContainer from './launchbar/LaunchbarContainer';
-import Nav from './Nav';
+import HeaderButtons from './header-buttons/HeaderButtons';
 
 describe('<Header />', () => {
   let wrapper: any;
@@ -16,12 +16,12 @@ describe('<Header />', () => {
 
   describe('displays', () => {
     test('Ensembl', () => {
-      expect(wrapper.find('.logo').text()).toBe('Ensembl');
+      expect(wrapper.find('.companyText').text()).toBe('Ensembl');
     });
 
     test('strapline', () => {
       expect(wrapper.find('.strapline').text()).toBe(
-        'genome research database'
+        'Pre-release - March 2019'
       );
     });
   });
@@ -35,8 +35,8 @@ describe('<Header />', () => {
       expect(wrapper.contains(<LaunchbarContainer />)).toBe(true);
     });
 
-    test('Nav', () => {
-      expect(wrapper.contains(<Nav />)).toBe(true);
+    test('HeaderButtons', () => {
+      expect(wrapper.contains(<HeaderButtons />)).toBe(true);
     });
   });
 

src/ensembl/src/header/Header.tsx

+import React, { memo, FunctionComponent } from 'react';
+
+import HeaderButtons from './header-buttons/HeaderButtons';
+import LaunchbarContainer from './launchbar/LaunchbarContainer';
+import Account from './account/Account';
+
+import styles from './Header.scss';
+
+type HeaderProps = {};
+
+const Header: FunctionComponent<HeaderProps> = memo(() => (
+  <header>
+    <div className={styles.topBar}>
+      <div>
+        <div className={styles.companyText}>Ensembl</div>
+        <div className={styles.strapline}>Pre-release - March 2019</div>
+        <div className={styles.copyright}>
+          <a href="https://www.ebi.ac.uk">&copy; EMBL-EBI</a>
+        </div>
+      </div>
+      <HeaderButtons />
+    </div>
+    <Account />
+    <LaunchbarContainer />
+  </header>
+));
+
+export default Header;

src/ensembl/src/header/__snapshots__/Header.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> renders correctly 1`] = `undefined`;

src/ensembl/src/header/account/Account.scss

+@import 'src/styles/common';
+
+.account {
+  border-bottom: 1px solid $ens-medium-grey;
+  height: 300px;
+  @include flex;
+  @include flex-align(center, middle);
+
+  h2 {
+    color: $ens-grey;
+    text-align: center;
+  }
+}

src/ensembl/src/scripts/components/layout/header/Account.tsx → src/ensembl/src/header/account/Account.tsx

@@ -2,8 +2,10 @@ import React, { Component, ReactNode } from 'react';
 import SlideDown from 'react-slidedown';
 import { connect } from 'react-redux';
 
-import { RootState } from '../../../reducers';
-import { getAccountExpanded } from '../../../selectors/headerSelectors';
+import { RootState } from 'src/rootReducer';
+import { getAccountExpanded } from '../headerSelectors';
+
+import styles from './Account.scss';
 
 type StateProps = {
   accountExpanded: boolean;
@@ -16,7 +18,7 @@ type AccountProps = StateProps & OwnProps;
 export class Account extends Component<AccountProps> {
   public render() {
     const AccountChildren: ReactNode = (
-      <div className="account">
+      <div className={styles.account}>
         <h2>Account area placeholder</h2>
       </div>
     );

src/ensembl/src/scripts/components/layout/header/__snapshots__/Account.test.tsx.snap → src/ensembl/src/header/account/__snapshots__/Account.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`<Account /> renders correctly 1`] = `
 <ForwardRef>
-  <div
-    className="account"
-  >
+  <div>
     <h2>
       Account area placeholder
     </h2>

src/ensembl/src/header/header-buttons/HeaderButtons.scss

+.headerButtons {
+  button {
+    bottom: 1px;
+    display: inline-block;
+    height: 17px;
+    margin-left: 20px;
+    position: relative;
+    width: 17px;
+    vertical-align: middle;
+  }
+}

src/ensembl/src/scripts/components/layout/header/Nav.test.tsx → src/ensembl/src/header/header-buttons/HeaderButtons.test.tsx

@@ -2,18 +2,21 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
-import { Nav } from './Nav';
+import { HeaderButtons } from './HeaderButtons';
 
-describe('<Nav />', () => {
-  let launchbarFn: () => void;
-  let accountFn: () => void;
+describe('<HeaderButtons />', () => {
+  let toggleLaunchbarFn: () => void;
+  let toggleAccountFn: () => void;
   let wrapper: any;
 
   beforeEach(() => {