nitro_sg 3.0.1 → 3.0.2

data/components/DateTimePicker/story-styles.scss

@@ -0,0 +1,3 @@
+.root {
+  margin-top: 250px;
+}

data/components/DateTimePicker/story-styles.scss.flow

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

data/components/DateTimePicker/styles.scss

@@ -0,0 +1 @@
+.dateTimePicker {}

data/components/DateTimePicker/styles.scss.flow

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

data/components/Errors/Errors.jsx

@@ -0,0 +1,38 @@
+/* @flow */
+
+import React from 'react'
+import { uniqueId } from 'lodash'
+import { Alert } from 'react-bootstrap'
+
+/**
+* Errors
+* Displays the given {@messages} in a list format, inside a red alert box.
+*
+* @param {Array<String>} props.messages The error messages to be displayed
+*/
+
+type Props = {
+  messages: Array<string>,
+}
+
+export default class Errors extends React.Component<Props> {
+  static defaultProps = {
+    messages: ["Something went wong"]
+  }
+  props: Props
+  render() {
+    const { messages } = this.props
+    return (
+      <Alert
+          bsStyle="danger"
+          className="errors"
+      >
+        <ul>
+          {messages.map(m => (
+            <li key={uniqueId()}>{m}</li>
+          ))}
+        </ul>
+      </Alert>
+    )
+  }
+}

data/components/FileCard/FileCard.jsx

@@ -0,0 +1,183 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import Icon from '../Icon/Icon'
+import Panel from '../Panel/Panel'
+import Text from '../Text/Text'
+
+import { Popover, OverlayTrigger } from 'react-bootstrap'
+
+import styles from './styles.scss'
+
+type FileType = 'file-excel' | 'file-pdf' | 'file-word' | 'file-image' | 'file-powerpoint' | 'file-video' | 'file-text' | 'file-zip' | 'file-code' | 'file-sound' | 'file'
+
+type Props = {
+  className: string,
+  description: string,
+  displayName: string,
+  downloadUrl: string,
+  layout: string,
+  openNewTab: boolean,
+  type: FileType,
+  hasProtection: boolean,
+  hasAccess: boolean,
+  children: Array<Component>
+}
+
+export default class FileCard extends React.Component<Props> {
+  static defaultProps = {
+    className: '',
+    layout: 'vertical',
+    openNewTab: false,
+    type: 'file',
+    hasProtection: false,
+    hasAccess: true,
+  }
+  props: Props
+
+  renderIcon() {
+    const {
+      downloadUrl,
+      openNewTab,
+      displayName,
+      type,
+      hasAccess,
+    } = this.props
+    const IconComponent = (
+      <Icon
+          className={styles[`icon-large`]}
+          label=''
+          name={`${type}`}
+          size='lg'
+          title={displayName}
+      />
+    )
+    return (
+      <If condition={downloadUrl && hasAccess}>
+        <a
+            href={downloadUrl}
+            target={openNewTab ? '_blank' : '_parent'}
+        >
+          {IconComponent}
+        </a>
+      <Else/>
+        {IconComponent}
+      </If>
+    )
+  }
+
+  renderDisplayName() {
+    const {
+      displayName,
+      downloadUrl,
+      openNewTab
+    } = this.props
+    const DisplayNameComponent = (
+      <Text
+          bold='true'
+          color={'ink-light'}
+      >{displayName}</Text>
+    )
+    return (
+      <h5 className='m-0'>
+        <If condition={downloadUrl}>
+          <a
+              href={downloadUrl}
+              target={openNewTab ? '_blank' : '_parent'}
+          >
+            {DisplayNameComponent}
+          </a>
+        <Else/>
+          {DisplayNameComponent}
+        </If>
+      </h5>
+    )
+  }
+
+  renderDescription() {
+    const {
+      description
+    } = this.props
+    return (
+      <p className='m-0'>
+        <Text color={'ink-lighter'}>{description}</Text>
+      </p>
+    )
+  }
+
+  renderLockIcon() {
+    const { hasAccess, hasProtection } = this.props
+    const lock = hasAccess ? 'unlock' : 'lock'
+
+    if (!hasProtection) {
+      return null
+    }
+
+    const popoverPrivacy = (
+      <Popover id="privacy-protected">
+        {'Privacy Protected'}
+      </Popover>
+    );
+
+    if (hasAccess) {
+      return (
+        <div>
+          <Icon
+              name={lock}
+              size={'lg'}
+          />
+        </div>
+      )
+    } else {
+      return (
+        <OverlayTrigger
+            overlay={popoverPrivacy}
+            placement="top"
+            trigger={['hover', 'focus']}
+        >
+          <div>
+            <Icon
+                name={lock}
+                size={'lg'}
+            />
+          </div>
+        </OverlayTrigger>
+      )
+    }
+
+  }
+
+  render() {
+    const {
+      className,
+      description,
+      displayName,
+      layout,
+      children
+    } = this.props
+    const css = [
+      className,
+      styles['file-card'],
+      styles[`layout-${layout}`],
+    ]
+    return (
+      <Panel bodyClass={'p-0'}>
+        <div className={classnames(css)}>
+          <div className={styles['lock']}>
+            {this.renderLockIcon()}
+          </div>
+          <div className={styles['file-type-box']}>
+            {this.renderIcon()}
+          </div>
+          <div className={styles['file-content-box']}>
+            <If condition={displayName}>{this.renderDisplayName()}</If>
+            <If condition={description}>{this.renderDescription()}</If>
+            <If condition={children}>{children}</If>
+          </div>
+        </div>
+      </Panel>
+    )
+  }
+}

data/components/FileCard/styles.scss

@@ -0,0 +1,81 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+$file-icon-size: 80px;
+
+.file-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .lock {
+    position: absolute;
+    top: $space-small;
+    right: $space-small;
+    color: $gray-5;
+  }
+
+  .file-type-box {
+    padding: $space-largest $space-large $space-jumbo;
+    text-align: center;
+
+    .icon-large {
+      font-size: $file-icon-size;
+      line-height: $file-icon-size;
+      display: block;
+      color: $power-royal;
+    }
+  }
+
+  .file-content-box {
+    padding: $space-large $space-large;
+    border-top: 1px solid $gray-2;
+
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;  
+  }
+
+  &.layout-{
+    &vertical {}
+    &horizontal {
+      display: flex;
+      flex-direction: row;
+
+      .file-type-box {
+        width: $file-icon-size;
+        box-sizing: border-box;
+        border-right: 1px solid $gray-2;
+        vertical-align: middle;
+        padding: $space-large;
+        flex: 0 0 $file-icon-size;
+
+        .icon-large {
+          font-size: $file-icon-size/2.5;
+          line-height: $file-icon-size - $space-large;
+        }
+      }
+      .file-content-box {
+        border-top: 0;
+        vertical-align: middle;
+        padding: $space-base $space-large;
+        flex: 0 0 calc(100% - #{$file-icon-size});
+
+        h5 {
+          line-height: 17.5px;
+          height: 17.5px;
+        }
+      }
+
+      &::after {
+        content: '';
+        clear: both;
+        float: none;
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}

data/components/FileCard/styles.scss.flow

@@ -0,0 +1,12 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'file-card': string;
+  +'file-content-box': string;
+  +'file-type-box': string;
+  +'hidden-xxs': string;
+  +'icon-large': string;
+  +'layout-horizontal': string;
+  +'lock': string;
+  +'visible-xxs': string;
+|};

data/components/Flip/Flip.jsx

@@ -0,0 +1,50 @@
+/* @flow */
+
+import React from 'react'
+import classname from 'classnames'
+
+import styles from './styles.scss'
+
+type FlipProps = {
+  children: React.ChildrenArray<React.Element<typeof FlipFront | typeof FlipBack>>,
+  flipped: boolean,
+}
+
+type FlipSideProps = {
+  children?: React.Node,
+  className?: string,
+}
+
+const Flip = ({ children, flipped }: FlipProps) => (
+  <div className={styles['flip-container']}>
+    <div className={
+        classname({
+          [styles['flip']]: flipped,
+          [styles['flap']]: !flipped,
+        })
+      }
+    >
+      {children}
+    </div>
+  </div>
+)
+
+// eslint-disable-next-line react/no-multi-comp
+const FlipFront = ({
+  children,
+  className,
+}: FlipSideProps) => (
+  <div className={classname(styles.front, className)}>{children}</div>
+)
+
+// eslint-disable-next-line react/no-multi-comp
+const FlipBack = ({
+  children,
+  className,
+}: FlipSideProps) => (
+  <div className={classname(styles.back, className)}>{children}</div>
+)
+
+Flip.Front = FlipFront
+Flip.Back = FlipBack
+export default Flip

data/components/Flip/styles.scss

@@ -0,0 +1,41 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+.flip-container {
+  perspective: 1000px;
+  height: 100%;
+}
+
+.flip {
+  @include rotateY(180deg);
+  @include transition(0.6s);
+  transform-style: preserve-3d;
+
+  position: relative;
+}
+
+.flap {
+  @include rotateY(0deg);
+  @include transition(0.6s);
+  transform-style: preserve-3d;
+
+  position: relative;
+  height: 100%;
+}
+
+.front, .back {
+  @include backface-visibility(hidden);
+  height: 100%;
+}
+
+.front {
+  z-index: 2;
+  @include rotateY(0deg);
+}
+
+.back {
+  @include rotateY(180deg);
+  position: absolute;
+  top: 0;
+  left: 0;
+}

data/components/Flip/styles.scss.flow

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

data/components/FlyoutPanel/FlyoutPanel.jsx

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from 'react'
+import classNames from 'classnames'
+
+import styles from './flyout_panel.scss'
+
+type FlyoutPanelProps = {|
+  className: ?string,
+  position: "left" | "right",
+  show: ?boolean,
+  children: string,
+|}
+
+const FlyoutPanel = ({ position, show, children, className }: FlyoutPanelProps) => {
+  const positionClass = position == "right" ? styles.right : styles.left
+  const classes = classNames(
+    styles['flyout-panel'],
+    positionClass,
+    className,
+    "col-md-5",
+    show ? styles.open : null
+  )
+  const scrollClasses = classNames(styles['scroll-inner-box'], 'p-5', 'pt-2')
+  return (
+    <div className={classes}>
+      <div className={scrollClasses}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default FlyoutPanel