playbook_ui 2.7.2 → 2.8.1

data/components/Milestones/milestones_item.scss.flow

@@ -1,13 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'background-dark': string;
-  +'background-light': string;
-  +'hidden-xxs': string;
-  +'icon': string;
-  +'milestone-item': string;
-  +'milestone-item-label': string;
-  +'status-done': string;
-  +'status-started': string;
-  +'visible-xxs': string;
-|};

data/components/Milestones/milestones_variables.scss

@@ -1,11 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-
-$step-progress-li-height: 70px;
-$step-progress-bubble-height: 34px;
-$step-progress-line-height: 4px;
-
-$bg-light-color: $sky;
-$bg-light-text: $ink;
-$bg-dark-color: $ink-lightest;
-$bg-dark-text: $white;

data/components/Modal/ModalStory.jsx

@@ -1,29 +0,0 @@
-import React from "react"
-import { Modal } from "react-bootstrap"
-
-import { select, boolean } from "@storybook/addon-knobs"
-
-export default function ModalStory(stories) {
-  stories.add("Modal",
-    () => {
-      const props = {
-        dialogClassName: select("dialogClassName", [null, 'full'], 'medium'),
-        show: boolean("show", false)
-      }
-      return (
-        <Modal {...props} >
-          <Modal.Header>
-            <Modal.Title>{'Modal Title'}</Modal.Title>
-            {'Header'}
-          </Modal.Header>
-          <Modal.Body>
-            {'Body'}
-          </Modal.Body>
-          <Modal.Footer>
-            {'Footer'}
-          </Modal.Footer>
-        </Modal>
-      )
-    }
-  )
-}

data/components/MonogramAvatar/MonogramAvatar.jsx

@@ -1,91 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { isEmpty, map } from 'lodash'
-
-import styles from './monogram_avatar.scss'
-
-import Avatar from '../Avatar/Avatar'
-import type AvatarSize from '../Avatar/Avatar'
-
-type Props = {
-  border: boolean,
-  className: string,
-  personName: string,
-  size: AvatarSize,
-  url: string,
-}
-
-type State = {
-  showInitials: boolean
-}
-
-const initials = function(name: string): string {
-  if (!name) {
-    return <i className="fa fa-user" />
-  }
-  return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
-}
-
-class MonogramAvatar extends React.Component<Props, State> {
-  static defaultProps = {
-    border: true,
-    size: 'base'
-  }
-  constructor(props: Props) {
-    super(props)
-    this.state = { showInitials: false }
-  }
-
-  state: State
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({ showInitials: isEmpty(nextProps.url) })
-  }
-
-  props: Props
-
-  handleImageLoadError = () => {
-    this.setState({ showInitials: true })
-  }
-
-  render() {
-    const {
-      url,
-      className,
-      personName,
-      size,
-      border,
-    } = this.props
-
-    const classes = [
-      className,
-      styles['monogram-avatar'],
-      (this.state.showInitials ? styles['initials'] : null),
-      (border ? styles['with-border'] : null),
-    ]
-
-    return (
-      <div className={classnames(classes, styles[`monogram-avatar-${size}`])}>
-        <Choose>
-          <When condition={!this.state.showInitials}>
-            <Avatar
-                alt={personName}
-                disableLink
-                onError={this.handleImageLoadError}
-                showPopover={false}
-                size={size}
-                thumb={url}
-            />
-          </When>
-          <Otherwise>
-            <p>{initials(personName)}</p>
-          </Otherwise>
-        </Choose>
-      </div>
-    )
-  }
-}
-
-export default MonogramAvatar

data/components/MonogramAvatar/MonogramAvatarStory.jsx

@@ -1,21 +0,0 @@
-import React from "react"
-import MonogramAvatar from "./MonogramAvatar"
-import { withInfo } from '@storybook/addon-info'
-
-import { select, text, boolean } from "@storybook/addon-knobs"
-
-export default function MonogramAvatarStory(stories) {
-  stories.add("MonogramAvatar",
-    withInfo("An avatar that will display user initials when an image is not available")(
-      () => {
-        const props = {
-          border: boolean("border", true),
-          personName: text("personName", "Jason Cypret"),
-          size: select("size", ["smaller", "small", "base", "large", "larger"], "base"),
-          url: text("url", "https://s3-hq.powerhrg.com/nitro-production/avatars/32825/badge/new-face.jpg?AWSAccessKeyId=IWSW00NEQHMEYQTLZ7E9&Signature=ut0dmlR/qzvaSRoW%2BS8NU8jNh2Q%3D&Expires=3018764254"),
-        }
-        return <MonogramAvatar {...props}/>
-      }
-    )
-  )
-}

data/components/MonogramAvatar/monogram_avatar.scss

@@ -1,54 +0,0 @@
-@import "base-variables/_colors.scss";
-@import "base-variables/_typography.sass";
-
-.monogram-avatar {
-
-  @mixin monogram-avatar($size, $border-width, $font-scale-factor) {
-    color: $white;
-    display: inline-block;
-    font-size: $size * $font-scale-factor;
-    height: $size;
-    line-height: $size;
-    overflow: hidden;
-    width: $size;
-    img, p {
-      background: $ink-lightest;
-      text-align: center;
-      border-radius: $border-width;
-    }
-    &.with-border {
-      border-color: $white;
-      border-radius: $border-width;
-      border-style: solid;
-      border-width: $border-width;
-      line-height: $size - (2 * $border-width);
-      img, p {
-        border-radius: 0;
-      }
-      img {
-        margin-left: -$border-width;
-        margin-top: -$border-width;
-      }
-    }
-  }
-
-  &-smaller {
-    @include monogram-avatar(30px, 2px, 0.4);
-  }
-
-  &-small {
-    @include monogram-avatar(60px, 2px, 0.32);
-  }
-
-  &-base {
-    @include monogram-avatar(90px, 4px, 0.32)
-  }
-
-  &-large {
-    @include monogram-avatar(115px, 4px, 0.32)
-  }
-
-  &-larger {
-    @include monogram-avatar(197px, 6px, 0.32)
-  }
-}

data/components/MonogramAvatar/monogram_avatar.scss.flow

@@ -1,10 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'monogram-avatar-base': string;
-  +'monogram-avatar-large': string;
-  +'monogram-avatar-larger': string;
-  +'monogram-avatar-small': string;
-  +'monogram-avatar-smaller': string;
-  +'with-border': string;
-|};

data/components/Panel/Panel.jsx

@@ -1,159 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react'
-import classnames from 'classnames'
-import { isEmpty } from 'lodash'
-import FontAwesome from 'react-fontawesome'
-import Text from '../Text/Text'
-
-type Props = {
-  bodyClass?: string,
-  children: Array<Component>,
-  className?: string,
-  collapsed?: boolean,
-  collapsible?: boolean,
-  headingLinks?: Array<Component>,
-  title?: string,
-  titleIcon?: string,
-  subTitle?: string,
-}
-
-import styles from './panel.scss'
-
-export default class Panel extends Component<Props> {
-  static defaultProps = {
-    className: "panel-default",
-    collapsed: false,
-    collapsible: false,
-  }
-
-  state = {
-    collapsed: false,
-  }
-
-  componentWillMount() {
-    this.setState({collapsed: this.props.collapsed})
-  }
-
-  props: Props
-
-  renderHeadingLinks() {
-    const {
-      headingLinks,
-    } = this.props
-    if(!headingLinks) return null
-    return (
-      <div className="panel-links">
-        {headingLinks.map()}
-      </div>
-    )
-  }
-
-  renderHeadingTitle() {
-    const {
-      title,
-      titleIcon,
-      subTitle,
-    } = this.props
-    return (
-      <h3 className={classnames("panel-title", styles["panel-title"])}>
-        <If condition={titleIcon}>
-          <FontAwesome
-              className={classnames("mr-3 ml-4", styles.icon)}
-              name={titleIcon}
-          />
-        </If>
-        <div>
-          <Text
-              bold
-              className={titleIcon ? styles[`${subTitle ? 'panel-title-main-subtitled' : 'panel-title-main'}`] : null}
-              size="large"
-          >
-            {title}
-          </Text>
-          <If condition={subTitle}>
-            <Text
-                className={classnames("clearfix", styles["panel-title-subtitle"])}
-                size="smallest"
-            >
-              {subTitle}
-            </Text>
-          </If>
-        </div>
-      </h3>
-    )
-  }
-
-  renderToggle() {
-    const {collapsed} = this.state
-    return (
-      <FontAwesome
-          className={styles.toggle}
-          name={`chevron-circle-${collapsed ? 'down' : 'up'}`}
-      />
-    )
-  }
-
-  renderBody() {
-    const {
-      children,
-      collapsible,
-      bodyClass,
-    } = this.props
-
-    if (collapsible && this.state.collapsed) return
-
-    return (
-      <div className={classnames("panel-body", bodyClass)}>
-        {children}
-      </div>
-    )
-  }
-
-  render() {
-    const {
-      className,
-      collapsible,
-      title,
-      headingLinks,
-    } = this.props
-
-    const {
-      collapsed,
-    } = this.state
-
-    const css = [
-      styles.panel,
-      "panel",
-      collapsed ? styles["panel-collapsed"] : null,
-      collapsible ? styles["panel-collapsible"] : null,
-      className,
-    ]
-
-    const toggleCollapsed = () => {
-      this.setState({collapsed: !this.state.collapsed})
-    }
-
-    return (
-      <div className={classnames(css)}>
-        <If condition={!isEmpty(title) || !isEmpty(headingLinks)}>
-          <div
-              className="panel-heading clearfix"
-              onClick={toggleCollapsed}
-          >
-            <div className={`p-0 ${collapsible ? 'col-xs-6 col-sm-6 col-md-6' : 'col-sm-12 col-md-12'}`}>
-              {this.renderHeadingLinks()}
-              {this.renderHeadingTitle()}
-            </div>
-            <If condition={collapsible}>
-              <div className="p-0 col-md-6 text-right">
-                {this.renderToggle()}
-              </div>
-            </If>
-          </div>
-        </If>
-        {this.renderBody()}
-      </div>
-    )
-  }
-}

data/components/Panel/PanelStory.jsx

@@ -1,23 +0,0 @@
-import React from "react"
-import Panel from "./Panel"
-import Text from "../Text/Text"
-
-import { boolean, text } from "@storybook/addon-knobs"
-
-export default function PanelStory(stories) {
-  stories.add("Panel",
-    () => {
-      let props = {
-        collapsible: boolean("collapsible", false),
-        title: text("title", "Hi, World."),
-        titleIcon: text("titleIcon", "apple"),
-        subTitle: text("subTitle", null),
-      }
-      return (
-        <Panel {...props}>
-          <Text>{`It's gunna be yuge!`}</Text>
-        </Panel>
-      )
-    }
-  )
-}

data/components/Panel/panel.scss

@@ -1,32 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-
-.panel {
-  &-collapsible {
-
-  }
-  &-title {
-    display: flex;
-    &-main {
-      line-height: $space-base;
-      vertical-align: text-bottom;
-      &-subtitled {
-        vertical-align: middle;
-      }
-    }
-    &-subtitle {
-      line-height: $space-base;
-      vertical-align: top;
-    }
-  }
-}
-
-
-.icon {
-  font-size: $font-largest;
-}
-
-.toggle {
-  font-size: $font-large;
-  padding: $space-large;
-}