/* eslint-disable import/no-extraneous-dependencies */

import { css } from 'docz-plugin-css';

export default {
  public: '/public',
  hashRouter: true,
  title: 'Personio Design System',
  description: 'Personio components',
  htmlContext: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: '//fonts.googleapis.com/css?family=Open+Sans:400,600,700',
        },
        {
          ref: 'stylesheet',
          href: 'https://use.fontawesome.com/releases/v5.6.3/css/all.css',
        },
      ],
      raw: `
      <style>
        * {
          box-sizing: border-box;
        }
        #root > div > div:first-child {
          border-right: 1px solid #DDD;
        }
        #root > div > div:first-child nav a {
          font-size: 14px;
        }
        #root > div > div:first-child > div > div:first-of-type a:after {
          content: 'Design System';
          font-size: 22px;
          font-weight: 600;
          color: #000 !important;
          position: relative;
          top: -15px;
          left: 10px;
        }
        #root > div > div:first-child > div > div:last-of-type {
          display: none;
        }
        #root p {
          font-size: 16px;
        }
      </style>
      `,
    },
  },
  themeConfig: {
    showPlaygroundEditor: true,
    logo: {
      src: '/public/logo-small.png',
      width: 40,
    },
    colors: {
      primary: '#0DB6DF',
      link: '#0db6df',
      sidebarBg: '#FFFFFF',
      border: '#DDDDDD',
    },
    styles: {
      body: {
        fontFamily: 'Open Sans, helvetica neue, helvetica, arial, sans-serif',
      },
      h1: {
        fontFamily: 'Open Sans, helvetica neue, helvetica, arial, sans-serif',
        fontSize: '1.75em',
        fontWeight: 600,
      },
      h2: {
        fontSize: '1.25em',
        fontFamily: 'Open Sans, helvetica neue, helvetica, arial, sans-serif',
      },
    },
  },
  menu: [
    {
      name: 'Overview',
      menu: ['Introduction'],
    },
    {
      name: 'Components',
      menu: [
        'Alert',
        'ArrowButton',
        'Avatar',
        'Button',
        'CloseButton',
        'DatePicker',
        'Dot',
        'Drawer',
        'Dropdown',
        'EmptyState',
        'Form',
        'Icon',
        'Overlay',
        'Pagination',
        'Table',
        'Tab',
        'Toast',
        'Section',
        'SearchBar',
      ],
    },
  ],
  plugins: [
    css({
      preprocessor: 'sass',
    }),
  ],
};
