nitro_sg 3.0.1 → 3.0.2

data/components/Badge/styles.scss

@@ -0,0 +1,4 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+@import "labels.scss";
+@import "badges.scss";

data/components/Badge/styles.scss.flow

@@ -0,0 +1,38 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'active': string;
+  +'badge': string;
+  +'badge-bitter': string;
+  +'badge-danger': string;
+  +'badge-default': string;
+  +'badge-info': string;
+  +'badge-inverse': string;
+  +'badge-primary': string;
+  +'badge-success': string;
+  +'badge-warning': string;
+  +'btn': string;
+  +'btn-group-xs': string;
+  +'btn-xs': string;
+  +'hidden-xxs': string;
+  +'label': string;
+  +'label-danger': string;
+  +'label-default': string;
+  +'label-info': string;
+  +'label-inverse': string;
+  +'label-primary': string;
+  +'label-success': string;
+  +'label-warning': string;
+  +'list-group-item': string;
+  +'nav-pills': string;
+  +'pill': string;
+  +'pill-bitter': string;
+  +'pill-danger': string;
+  +'pill-default': string;
+  +'pill-info': string;
+  +'pill-inverse': string;
+  +'pill-primary': string;
+  +'pill-success': string;
+  +'pill-warning': string;
+  +'visible-xxs': string;
+|};

data/components/Banner/Banner.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+
+import React from "react"
+import classnames from "classnames"
+
+import styles from "./styles.scss"
+
+export type BannerProps = {
+  closeable?: boolean,
+  children: string | React.Node | Array<React.Node>,
+  onClose: () => void,
+  position: "top" | "bottom",
+  show?: boolean,
+  style: "info" | "success" | "warning" | "danger",
+}
+
+const Banner = ({
+  closeable,
+  children,
+  onClose,
+  position,
+  show,
+  style,
+}: BannerProps) => {
+  const css = classnames([
+    styles[`banner-${style}`],
+    styles[show ? `show-${position}` : `hide-${position}`],
+  ])
+  return (
+    <div className={css}>
+
+      { children }
+
+      <If condition={closeable}>
+        <button
+            className={classnames(styles.close, "close")}
+            onClick={onClose}
+        >
+          {`×`}
+        </button>
+      </If>
+
+    </div>
+  )
+}
+
+Banner.defaultProps = {
+  closeable: true,
+  position: "top",
+  show: false,
+  style: "info",
+}
+
+export default Banner

data/components/Banner/styles.scss

@@ -0,0 +1,75 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+$notifyHeight: 64px;
+
+@mixin banner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  text-align: center;
+  height: $notifyHeight;
+  padding: $space-base * 1.5 $space-base * 2;
+  color: $sky-lighter;
+  font-size: $font-large;
+  @include transition-property(top, bottom);
+  @include transition-duration(.5s);
+  @include transition-timing-function(ease);
+
+  @include tablet-and-below {
+    font-size: $font-base;
+    padding: $space-base * 2;
+    &-close {
+      font-size: $font-small;
+    }
+  }
+
+  a {
+    color: $sky-lighter;
+    text-decoration: underline;
+  }
+}
+
+.banner {
+  &-info {
+    @include banner;
+    background: $power-blue;
+  }
+  &-success {
+    @include banner;
+    background: $power-green;
+  }
+  &-warning {
+    @include banner;
+    background: $dark-orange;
+  }
+  &-danger {
+    @include banner;
+    background: $power-red;
+  }
+}
+
+.close {
+  color: $sky-lighter;
+  opacity: 1;
+  font-size: $font-largest;
+  font-weight: 300;
+}
+
+.show {
+  &-top {
+    top: 0;
+  }
+  &-bottom {
+    bottom: 0;
+  }
+}
+.hide {
+  &-top {
+    top: -$notifyHeight;
+  }
+  &-bottom {
+    bottom: -$notifyHeight;
+  }
+}

data/components/Banner/styles.scss.flow

@@ -0,0 +1,19 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'banner-danger': string;
+  +'banner-danger-close': string;
+  +'banner-info': string;
+  +'banner-info-close': string;
+  +'banner-success': string;
+  +'banner-success-close': string;
+  +'banner-warning': string;
+  +'banner-warning-close': string;
+  +'close': string;
+  +'hidden-xxs': string;
+  +'hide-bottom': string;
+  +'hide-top': string;
+  +'show-bottom': string;
+  +'show-top': string;
+  +'visible-xxs': string;
+|};

data/components/Button/Button.jsx

@@ -0,0 +1,75 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { IconType } from "../types"
+
+type Props = {
+  className: string,
+  disabled: boolean,
+  icon: IconType,
+  onClick: () => mixed,
+  text: string,
+  type: "anchor" | "button" | "submit" | "",
+}
+
+export default class Button extends React.Component<Props> {
+  static defaultProps = {
+    text: "button",
+  }
+  props: Props
+  createElementTag = () => {
+    const {
+      className,
+      disabled,
+      icon,
+      onClick,
+      text,
+      type
+    } = this.props
+    let tag
+    let props = {}
+    switch(type) {
+      case "anchor":
+        tag = "a"
+      break
+      case "button":
+        tag = "input"
+        props.type = "button"
+        props.value = text
+      break
+      case "submit":
+        tag = "input"
+        props.type = "submit"
+        props.value = text
+      break
+      default:
+        tag = "span"
+      break
+    }
+    const css = [
+      "btn",
+      className,
+
+    ]
+    props.onClick = onClick
+    props.className = classnames(css)
+    if(disabled) props.disabled = true
+
+    const element = React.createElement(tag, props)
+
+    if(tag === "input") {
+      return <element.type {...element.props} />
+    } else {
+      return (
+        <element.type {...element.props}>
+          <If condition={icon}>{icon}</If>
+          {text}
+        </element.type>
+      )
+    }
+  }
+  render() {
+    return this.createElementTag()
+  }
+}

data/components/Card/Card.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import classnames from 'classnames'
+
+
+export type CardProps = {
+  children: string | React.Node | Array<React.Node>,
+  shadow?: Boolean,
+  shadowShallow?: Boolean,
+  shadowDeep?: Boolean,
+  shadowDeeper?: Boolean,
+  shadowDeepest?: Boolean,
+}
+
+export default class Card extends React.Component<Props> {
+  static defaultProps = {
+    children: null,
+    shadow: false,
+    shadowShallow: false,
+    shadowDeep: false,
+    shadowDeeper: false,
+    shadowDeepest: false,
+  }
+  props: Props
+  render() {
+    const {
+      children,
+      className,
+      shadow,
+      shadowShallow,
+      shadowDeep,
+      shadowDeeper,
+      shadowDeepest,
+    } = this.props
+    const css = classnames([
+      "card",
+      className,
+    ])
+    return (
+      <div className={css}>
+        { children }
+      </div>
+    )
+  }
+}

data/components/CircleButton/CircleButton.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react'
+import Icon from '../Icon/Icon.jsx'
+import classnames from 'classnames'
+
+type Props = {
+  className:string,
+  iconName:string,
+  size:string,
+  color: string,
+  iconColor:string,
+  name:string,
+
+}
+
+export default class CircleButton extends React.Component<Props> {
+  static defaultProps = {
+    color:"",
+    size:"",
+    textColor:"",
+    iconName:"",
+    className:"circlebutton",
+
+
+  }
+  props: Props
+
+  render() {
+
+    const {
+      size,
+      color,
+      iconName,
+      iconColor,
+      className,
+    } = this.props
+
+
+
+    return (
+
+        <div>
+          <button className={`${classnames(color,iconColor,className)} circlebutton-${size} border-0 shadow-default`}>
+            <Icon name={iconName}/>
+          </button>
+        </div>
+    )
+
+  }
+}

data/components/CircleButton/CircleButtonStory.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import CircleButton from "./CircleButton"
+import { text, select,} from "@storybook/addon-knobs"
+
+
+
+
+export default function CircleButtonStory(stories) {
+  stories.add("Circle Button",
+    () => {
+      const props = {
+        className: text("className", "circlebutton"),
+        size: select("sizeOption",['md','lg',],'md'),
+        iconColor:text("iconColor","text-white"),
+        iconName: text("iconName","plus"),
+        color:text("color","bg-power-green"),
+      }
+
+
+
+      return (<CircleButton {...props}/>
+      )
+    }
+  )
+}

data/components/CircleButton/styles.scss

@@ -0,0 +1,33 @@
+$circleButtonSizes:
+  "md" 48px 16px,
+  "lg" 56px 20px;
+
+// @mixin config-sizes($prefix){
+//   @each $size in $circleButtonSizes($prefix) {
+//     .#{$prefix}-#{nth($size,1)} {
+//       text-align: center;
+//       border-radius: 100%;
+//       height: #{nth($size, 1)};
+//       width: #{nth($size, 1)};
+//       font-size: #{nth($size, 2)};
+//     }
+//   }
+// }
+//
+// @include config-sizes("circleButton");
+
+    .circleButton-md {
+      text-align: center;
+      border-radius: 100%;
+      height: 48px;
+      width: 48px;
+      font-size: 16px;
+    }
+
+    .circleButton-lg {
+      text-align: center;
+      border-radius: 100%;
+      height: 56px;
+      width: 56px;
+      font-size: 20px;
+    }

data/components/CircleButton/styles.scss.flow

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

data/components/CollapsibleCard/CollapsibleCard.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import classnames from 'classnames'
+import Card from '../Card/Card'
+import Icon from '../Icon/Icon'
+import AnimateHeight from 'react-animate-height'
+import { Button } from "react-bootstrap"
+
+
+export type CollapsibleCardProps = {
+  children: React.ChildrenArray<React.Element<typeof Main | Content >>,
+  className: string,
+}
+
+const CollapsibleCardMain = () => null;
+const CollapsibleCardContent = () => null;
+
+class CollapsibleCard extends React.Component<Props> {
+  static CollapsibleCardMain: Function
+  static CollapsibleCardContent: Function
+
+  static defaultProps = {
+    children: null,
+  }
+
+  props: Props
+
+  state = {
+    height: 0,
+  }
+
+  constructor() {
+    super()
+  }
+
+  toggleExpand() {
+    const { height } = this.state;
+
+    this.setState({
+      height: height === 0 ? 'auto' : 0,
+    })
+  }
+
+  renderTop() {
+    const { children } = this.props;
+    const content = React.Children.map(children, child => {
+      if (child.type.displayName === 'CollapsibleCardMain' || child.type.name === 'CollapsibleCardMain') {
+        return React.cloneElement(child)
+      }
+    });
+    return (
+      <div className="collapsible-card-top-content">{content.length > 0 ? content[0].props.children : '' }</div>
+    );
+  }
+
+  renderContent() {
+    const { children } = this.props;
+    const height = this.state.height;
+    const content = React.Children.map(children, child => {
+      if (child.type.displayName === 'CollapsibleCardContent' || child.type.name === 'CollapsibleCardContent') {
+        return React.cloneElement(child)
+      }
+    });
+    return (
+      <AnimateHeight
+        duration={ 500 }
+        height={ height }
+        className="collapsible-card-hidden"
+      >
+        <div className="collapsible-card-hidden-content">
+          {content.length > 0 ? content[0].props.children : '' }
+        </div>
+      </AnimateHeight>
+    );
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      main,
+    } = this.props
+    const { height } = this.state
+    const css = classnames([
+      "collapsible-card",
+      className
+    ])
+
+
+
+    return (
+      <Card className={css}>
+        {this.renderTop()}
+        <Button className={'btn-default btn-card-toggle'} onClick={() => this.toggleExpand()} >
+          <If condition={height === 0}>
+            <Icon name="chevron-down" />
+          <Else/>
+            <Icon name="chevron-up" />
+          </If>
+        </Button>
+        {this.renderContent()}
+      </Card>
+    )
+  }
+}
+
+CollapsibleCard.Main = CollapsibleCardMain
+CollapsibleCard.Content = CollapsibleCardContent
+export default CollapsibleCard