nitro_sg 3.0.1 → 3.0.2

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;
+    }
+  }
+}

data/components/PanelGroup/PanelGroup.scss.flow

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

data/components/SearchCollectionSelect/SearchCollectionSelect.jsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react'
+
+import Select from 'react-select'
+
+type Props = {
+  multi?: boolean,
+  autosize?: boolean,
+  autoload?: boolean,
+  async?: boolean,
+  disabled?: boolean,
+}
+
+export default class SearchCollectionSelect extends Component<Props> {
+  static defaultProps = {
+    multi: true,
+    autosize: true,
+    autoload: true,
+    async: true,
+    disabled: false,
+  }
+  props: Props
+  render() {
+    if(this.props.async) {
+      return <Select.Async {...this.props}/>;
+    } else {
+      return <Select {...this.props}/>;
+    }
+  }
+}

data/components/Spinner/Spinner.jsx

@@ -0,0 +1,80 @@
+import React from "react"
+import classnames from "classnames"
+
+import spinnerStyles from "./spinner.scss"
+
+type Props = {
+   position?: 'centered',
+   top?: number,
+   right?: number,
+   bottom?: number,
+   left?: number,
+   active?: boolean,
+}
+
+export default class Spinner extends React.Component<Props> {
+  static defaultProps = {
+    top: 90,
+    right: 15,
+    bottom: null,
+    left: null,
+    active: true,
+  }
+  props: Props
+  render() {
+    const {
+      active,
+      position,
+      top,
+      right,
+      bottom,
+      left
+    } = this.props
+
+    let styles
+    if(!position) styles = { top: top, right: right, bottom: bottom, left: left }
+
+    const css = classnames([
+      "Spinner",
+      active ? "visible" : "hidden",
+      position ? spinnerStyles[position] : null,
+    ])
+
+    return (
+      <div
+          className={css}
+          style={styles}
+      >
+        <span className="badge">
+          <svg
+              height="30px"
+              id="loader-1"
+              style={{ enableBackground: "new 0 0 50 50" }}
+              version="1.1"
+              viewBox="0 0 50 50"
+              width="30px"
+              x="0px"
+              xmlSpace="preserve"
+              y="0px"
+          >
+            <path
+                d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+                fill="#004976"
+                transform="rotate(70 25 25)"
+            >
+              <animateTransform
+                  attributeName="transform"
+                  attributeType="xml"
+                  dur="0.6s"
+                  from="0 25 25"
+                  repeatCount="indefinite"
+                  to="360 25 25"
+                  type="rotate"
+              />
+            </path>
+          </svg>
+        </span>
+      </div>
+    )
+  }
+}

data/components/Spinner/spinner.scss

@@ -0,0 +1,6 @@
+.centered {
+  position: absolute;
+  text-align: center;
+  bottom: 50%;
+  right: 50%;
+}

data/components/Spinner/spinner.scss.flow

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

data/components/StepMeter/StepMeter.jsx

@@ -0,0 +1,75 @@
+/* @flow */
+
+import React from 'react'
+import { map } from 'lodash'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import classnames from 'classnames'
+
+import Icon from '../Icon/Icon'
+import styles from './step_meter.scss'
+
+type States = 'done' | 'started' | 'none'
+
+type Step = {|
+  id: number,
+  name: string,
+  state: States,
+|}
+
+type Props = {
+  className: string,
+  steps: Array<Step>,
+  type: string,
+}
+
+const StepMeter = ({
+  steps,
+  type,
+  className
+}: Props) => {
+  const classes = [
+    className,
+    styles['step-meter'],
+    styles[`type-${type}`],
+  ]
+  return (
+    <ul className={classnames(classes)}>
+      {
+        map(steps, (step, idx) => (
+          <Choose>
+            <When condition={type == 'simple'}>
+              <OverlayTrigger
+                  key={idx}
+                  overlay={<Tooltip id={`tooltip-step.name`}>{step.name}</Tooltip>}
+                  placement="bottom"
+                  trigger={['hover', 'focus']}
+              >
+                <li
+                    className={`text-uppercase ${styles[step.state]}`}
+                />
+              </OverlayTrigger>
+            </When>
+            <Otherwise>
+              <li
+                  className={`text-uppercase ${styles[step.state]}`}
+                  key={idx}
+              >
+                <If condition={step.state == 'done'}>
+                  <Icon
+                      label=""
+                      name="check"
+                  />
+                </If>
+                <span>
+                  {step.name}
+                </span>
+              </li>
+            </Otherwise>
+          </Choose>
+        ))
+      }
+    </ul>
+  )
+}
+
+export default StepMeter