<commit_before>/* eslint jsx-a11y/no-static-element-interactions: 0 */
/* eslint jsx-a11y/click-events-have-key-events: 0 */
/* eslint jsx-a11y/no-noninteractive-tabindex: 0 */

/**
 * Plan:
 *
 * Create a 1-dimensional grid of new notebook types for clicking
 * to create new notebooks
 *
 * Create a listing of running notebooks
 * Showcase the directory navigator
 */

import { AppState, KernelspecProps, KernelspecRecord } from "@nteract/types";
import * as Immutable from "immutable";
import * as React from "react";
import { connect } from "react-redux";
import styled from "styled-components";

import { default as Logo } from "./logos";

export interface AvailableNotebook {
  kernelspec: KernelspecRecord | KernelspecProps;
}

export type AvailableNotebooks =
  | AvailableNotebook[]
  | Immutable.List<AvailableNotebook>;

const DisplayNameLong = styled.p`
  margin: 0;
  color: var(--theme-primary-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const NewNotebookDiv = styled.div`
  color: var(--nt-color-midnight-light);
  cursor: pointer;

  font-family: var(--nt-font-family-normal);
  color: var(--nt-color-midnight-light);
  margin: 20px 20px 0 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 100px;

  a {
    padding-top: 20px;
  }

  :hover {
    box-shadow: var(--theme-primary-shadow-hover);
    & ${DisplayNameLong} {
      white-space: initial;
      overflow: initial;
      text-overflow: initial;
    }
  }

  :focus {
    box-shadow: var(--theme-primary-shadow-focus);
    & ${DisplayNameLong} {
      white-space: initial;
      overflow: initial;
      text-overflow: initial;
    }
  }
`;

const LogoBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background-color: var(--theme-app-bg);
  flex: 1;

  .logo {
    width: 2em;
    box-sizing: border-box;
    margin: 0 auto;
  }
`;

const TextBox = styled.div`
  padding: 8px 6px 8px 6px;
  font-size: 0.8em;
  width: 100px;
  box-sizing: border-box;
  background-color: var(--theme-primary-bg);
  border-top: 1px solid var(--theme-app-border);
`;

const DisplayNameShort = styled.p`
  text-transform: capitalize;
  margin: 0 5px 0 0;
  font-weight: 600;
  color: var(--theme-app-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const NewNotebook = (
  props: AvailableNotebook & {
    href?: string;
    onClick?: (ks: KernelspecRecord | KernelspecProps) => void;<commit_msg>Adds styling back to kernel carsds. The issue is that the var --them-app-bg, etc are not being injected into this component. As a workaround, I simply added defaults that line up with the light theme values. Closes #4153.<commit_after>/* eslint jsx-a11y/no-static-element-interactions: 0 */
/* eslint jsx-a11y/click-events-have-key-events: 0 */
/* eslint jsx-a11y/no-noninteractive-tabindex: 0 */

/**
 * Plan:
 *
 * Create a 1-dimensional grid of new notebook types for clicking
 * to create new notebooks
 *
 * Create a listing of running notebooks
 * Showcase the directory navigator
 */

import { AppState, KernelspecProps, KernelspecRecord } from "@nteract/types";
import * as Immutable from "immutable";
import * as React from "react";
import { connect } from "react-redux";
import styled, { StyledComponent } from "styled-components";

import { default as Logo } from "./logos";

export interface AvailableNotebook {
  kernelspec: KernelspecRecord | KernelspecProps;
}

export type AvailableNotebooks =
  | AvailableNotebook[]
  | Immutable.List<AvailableNotebook>;

const DisplayNameLong = styled.p`
  margin: 0;
  color: var(--theme-primary-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const NewNotebookDiv = styled.div`
  color: var(--nt-color-midnight-light);
  cursor: pointer;

  font-family: var(--nt-font-family-normal);
  color: var(--nt-color-midnight-light);
  margin: 20px 20px 0 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 100px;

  a {
    padding-top: 20px;
  }

  :hover {
    box-shadow: var(--theme-primary-shadow-hover);
    & ${DisplayNameLong} {
      white-space: initial;
      overflow: initial;
      text-overflow: initial;
    }
  }

  :focus {
    box-shadow: var(--theme-primary-shadow-focus);
    & ${DisplayNameLong} {
      white-space: initial;
      overflow: initial;
      text-overflow: initial;
    }
  }
`;

const LogoBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background-color: var(--theme-app-bg, white);
  flex: 1;

  .logo {
    width: 2em;
    box-sizing: border-box;
    margin: 0 auto;
  }
`;

const TextBox = styled.div`
  padding: 8px 6px 8px 6px;
  font-size: 0.8em;
  width: 100px;
  box-sizing: border-box;
  background-color: var(--theme-primary-bg, hsl(0, 0%, 98%));
  border-top: 1px solid var(--theme-app-border);
`;

const DisplayNameShort = styled.p`
  text-transform: capitalize;
  margin: 0 5px 0 0;
  font-weight: 600;
  color: var(--theme-app-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

export const NewNotebook = (
  props: AvailableNotebook & {
    href?: string;
    onClick?: (ks: KernelspecRecord | KernelspecProps) => void;
{'fraction_non_alphanumeric': 0.13423069732660312, 'fraction_numerical': 0.01981678818470742, 'mean_word_length': 3.36734693877551, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6987924', 'n_tokens_mistral': 1975, 'n_tokens_neox': 1865, 'n_words': 475}