playbook_ui 2.5.0

data/components/MonogramAvatar/MonogramAvatarStory.jsx

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

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

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

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

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

@@ -0,0 +1,32 @@
+@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;
+}

data/components/Panel/panel.scss.flow

@@ -0,0 +1,12 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'hidden-xxs': string;
+  +'icon': string;
+  +'panel-title': string;
+  +'panel-title-main': string;
+  +'panel-title-main-subtitled': string;
+  +'panel-title-subtitle': string;
+  +'toggle': string;
+  +'visible-xxs': string;
+|};

data/components/PanelGroup/PanelGroup.jsx

@@ -0,0 +1,121 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Icon from "../Icon/Icon"
+
+import {
+  Panel as BootstrapPanel,
+  PanelGroup as BootstrapPanelGroup
+} from "react-bootstrap"
+
+import Text from '../Text/Text'
+
+import "./PanelGroup.scss"
+
+type PanelProps = {
+  children?: string,
+  icon?: any,
+  name?: string,
+  subtitle?: string,
+  title?: string,
+  toggleIconName?: string,
+}
+
+type PanelGroupProps = {
+  activePanel?: string,
+  className?: string,
+  id?: string,
+  inner?: boolean,
+}
+
+const Panel = ({ children, icon, name = Math.random(), subtitle, title, notification }: PanelProps, context) => {
+  const collapsed = context.activePanel !== name
+  const rotateProps = collapsed ? { rotate: 180 } : {}
+  const css = collapsed ? "panel-collapsed" : ""
+
+  return (
+    <BootstrapPanel eventKey={name} className={css}>
+      <BootstrapPanel.Heading bsStyle="default">
+        <BootstrapPanel.Toggle className="panel-toggle">
+          <If condition={icon}>
+            <div className="heading-icon">{icon}</div>
+          </If>
+
+          <BootstrapPanel.Title>
+            <Text className="title" bold>{title}</Text>
+
+            <If condition={subtitle}>
+              <Text color="ink-lightest" className="subtitle">{subtitle}</Text>
+            </If>
+          </BootstrapPanel.Title>
+
+          <If condition={notification}>
+            {notification}
+          </If>
+
+          <Icon className="icon-toggle" size="lg" {...rotateProps} name={context.toggleIconName} />
+        </BootstrapPanel.Toggle>
+      </BootstrapPanel.Heading>
+
+      <BootstrapPanel.Body collapsible>{children}</BootstrapPanel.Body>
+    </BootstrapPanel>
+  )
+}
+
+Panel.defaultProps = {
+  title: "",
+  toggleIconName: "chevron-up"
+}
+
+Panel.contextTypes = {
+  activePanel: PropTypes.string,
+  toggleIconName: PropTypes.string,
+}
+
+export default class PanelGroup extends React.Component<PanelGroupProps> {
+  static Panel = Panel
+
+  static childContextTypes = {
+    activePanel: PropTypes.string,
+    toggleIconName: PropTypes.string,
+  }
+
+  static defaultProps = {
+    id: `${Math.random()}`,
+    inner: false,
+    onPanelChange: () => {},
+  }
+
+  state = {
+    activePanel: this.props.activePanel,
+  }
+
+  getChildContext() {
+    return {
+      activePanel: this.state.activePanel,
+      toggleIconName: this.props.inner ? "angle-up" : "chevron-down "
+    }
+  }
+
+  handleSelect = (activePanel) => {
+    this.setState({ activePanel }, () => this.props.onPanelChange(activePanel));
+  }
+
+  componentWillReceiveProps({ activePanel }) {
+    if (activePanel !== this.props.activePanel) {
+      this.setState({ activePanel })
+    }
+  }
+
+  render() {
+    const { children, id, inner, className } = this.props
+    return (
+      <BootstrapPanelGroup id={id} accordion
+        activeKey={this.state.activePanel}
+        className={`nitro-panel-group ${className} ${inner ? "inner-panel-group": ""}`}
+        onSelect={this.handleSelect}
+      >
+        {children}
+      </BootstrapPanelGroup>
+    );
+  }
+}

data/components/PanelGroup/PanelGroup.scss

@@ -0,0 +1,96 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+:global {
+  .nitro-panel-group {
+    margin-bottom: 0px;
+
+    .panel {
+      box-shadow: none;
+      margin-bottom: $space-base;
+
+      .panel-heading {
+        background-color: $white;
+
+      }
+
+      .panel-body{
+        padding-top: $space-largest;
+
+        .title {
+          font-size: $font-size-base;
+          font-weight: $bold;
+        }
+      }
+    }
+
+    &.inner-panel-group {
+      .panel {
+        box-shadow: $shadow-default;
+
+        .panel-toggle {
+          padding-top: $space-small;
+          padding-bottom: $space-small;
+        }
+
+        &.panel-collapsed {
+          box-shadow: none;
+          margin-bottom: $space-base;
+
+            .panel-heading {
+              background-color: $sky-lighter;
+            }
+        }
+          .panel-body {
+            padding-top: $space-largest;
+
+          }
+      }
+    }
+
+    .panel-heading {
+      padding: 0;
+      border-color: $sky;
+
+        .heading-icon {
+          margin-right: $space-large;
+        }
+
+        .panel-title {
+          display: flex;
+          flex-direction: column;
+          flex-grow: 1;
+          line-height: $space-large;
+
+        }
+
+        .heading-icon, .title, .subtitle {
+          color: $ink-light;
+        }
+
+        .title {
+          font-size: $font-size-large;
+          font-weight: $regular;
+          line-height: $space-larger;
+        }
+        .subtitle {
+          font-size: $font-size-small;
+        }
+    }
+
+    .panel-toggle {
+      display: flex;
+      padding: 6px 16px;
+      align-items: center;
+      padding-top: $space-large;
+      padding-bottom: $space-large;
+
+    }
+
+    .icon-toggle {
+      color: $ink-lightest;
+      transition: all 0.5s ease;
+      margin-left: $space-large;
+    }
+  }
+}