playbook_ui 2.5.0

data/components/Milestones/MilestoneItemStory.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import MilestoneItem from "./MilestoneItem"
+
+import { text, select } from "@storybook/addon-knobs"
+
+export default function MilestoneItemStory(stories) {
+  stories.add("Milestone Item",
+    () => {
+      let props = {
+        className: text("className", ""),
+        name: text("name", "Milestone"),
+        background: select("background", ["light", "dark"], "light"),
+        status: select("status", ["done", "started", "none"], "done"),
+      }
+      return (
+        <MilestoneItem
+            background={props.background}
+            className={props.className}
+            name={props.name}
+            status={props.status}
+        />
+      )
+    }
+  )
+}

data/components/Milestones/Milestones.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import MilestoneItem from './MilestoneItem'
+import styles from './milestones.scss'
+
+type Props = {
+  background: string,
+  className: string,
+  steps: any,
+}
+
+export default class Milestones extends React.Component<Props> {
+  static defaultProps = {
+    className: "",
+    background: "light"
+  }
+  props: Props
+
+  render() {
+    const {
+      background,
+      className,
+      steps,
+    } = this.props
+    const css = [
+      className,
+      styles[`milestones`],
+    ]
+    return (
+      <span className={classnames(css)}>
+        <ul>
+          {
+            [...steps].map((item, index) => {
+              return (
+                <MilestoneItem
+                    background={background}
+                    key={index}
+                    name={item.name}
+                    status={item.status}
+                />
+              )
+            })
+          }
+        </ul>
+      </span>
+    )
+  }
+}

data/components/Milestones/MilestonesStory.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Milestones from "./Milestones"
+
+import { text, select } from "@storybook/addon-knobs"
+
+export default function MilestonesStory(stories) {
+  stories.add("Milestones",
+    () => {
+      let props = {
+        className: text("className", ""),
+        background: select("background", ["dark", "light"], "light"),
+        steps: [
+          {
+            name: "First",
+            status: select("1 Status", ["done", "started", "none"], "done")
+          },
+          {
+            name: "Second",
+            status: select("2 Status", ["done", "started", "none"], "started")
+          },
+          {
+            name: "Third",
+            status: select("3 Status", ["done", "started", "none"], "none")
+          }
+        ]
+      }
+      return <Milestones {...props}/>
+    }
+  )
+}

data/components/Milestones/milestones.scss

@@ -0,0 +1,19 @@
+@import "./milestones_variables";
+
+.milestones {
+  ul {
+    list-style: none;
+    position: relative;
+    padding: $space-small 0 0;
+    margin: $space-small 0 0;
+    text-align: center;
+
+    &::after {
+      content: '';
+      clear: both;
+      float: none;
+      display: block;
+      width: 100%;
+    }
+  }
+}

data/components/Milestones/milestones.scss.flow

@@ -0,0 +1,7 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'hidden-xxs': string;
+  +'milestones': string;
+  +'visible-xxs': string;
+|};

data/components/Milestones/milestones_item.scss

@@ -0,0 +1,157 @@
+@import "./milestones_variables";
+
+.milestone-item {
+  position: relative;
+  vertical-align: top;
+  display: inline-block;
+  text-align: center;
+  padding: 0 $space-larger;
+  height: $step-progress-li-height;
+  line-height: $step-progress-bubble-height;
+
+
+  .milestone-item-label {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: $opacity-5;
+    font-size: $font-small;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    font-size: $font-small;
+  }
+
+
+  &::before {
+    content: '';
+    display: block;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+    font-family: $icon-font;
+    font-size: $font-small;
+    width: $step-progress-bubble-height;
+    height: $step-progress-bubble-height;
+    border: $step-progress-line-height solid $ink-lightest;
+    border-radius: $step-progress-bubble-height/2;
+    line-height: calc(#{$step-progress-bubble-height} - (#{$step-progress-line-height} * 2));
+    font-weight: $bold;
+    margin: 0 auto $space-smaller;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    width: calc(100% - (#{$step-progress-bubble-height} - #{$step-progress-line-height}));
+    height: $step-progress-line-height;
+    top: calc((#{$step-progress-bubble-height}/2) - (#{$step-progress-line-height}/2));
+    left: calc(-50% + (#{$step-progress-bubble-height}/2));
+    z-index: 0;
+  }
+  &:first-child {
+    &::after {
+      display: none;
+    }
+  }
+
+  &::before {
+    background: transparent;
+  }
+
+  &.status-{
+    &done {
+      &::before {
+        border-color: $power-green !important;
+      }
+      .icon {
+        color: $power-green !important;
+      }
+    }
+    &started {
+      .milestone-item-label {
+        opacity: 1;
+      }
+      &::before {
+        border-color: $power-blue !important;
+      }
+      .icon {
+        color: $power-blue !important;
+      }
+    }
+  }
+
+  &.background-dark {
+    .milestone-item-label {
+      color: $bg-dark-text;
+    }
+
+    &::before {
+      background: $bg-dark-color;
+      color: $bg-dark-text;
+    }
+    &::after {
+      background: $bg-dark-color;
+    }
+
+    &.status-{
+      &done {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-green;
+        }
+      }
+      &started {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-blue;
+        }
+      }
+    }
+  }
+
+  &.background-light {
+    .milestone-item-label {
+      color: $bg-light-text;
+    }
+
+    &::before {
+      background: $bg-light-color;
+      border-color: $bg-light-color;
+      color: $bg-light-text;
+    }
+    &::after {
+      background: $bg-light-color;
+    }
+
+    &.status-{
+      &done {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-green;
+        }
+      }
+      &started {
+        &::before {
+          background: transparent;
+        }
+        &::after {
+          background: $power-blue;
+        }
+      }
+    }
+  }
+}

data/components/Milestones/milestones_item.scss.flow

@@ -0,0 +1,13 @@
+// @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

@@ -0,0 +1,11 @@
+@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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,91 @@
+/* @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