playbook_ui 2.7.2 → 2.8.1

data/components/DateTimePicker/story-styles.scss

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

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

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

data/components/DateTimePicker/styles.scss

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

data/components/DateTimePicker/styles.scss.flow

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

data/components/Errors/Errors.jsx

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

@@ -1,183 +0,0 @@
-/* @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/FileCardStory.jsx

@@ -1,62 +0,0 @@
-import React from "react"
-
-import FileCard from "./FileCard"
-import Button from "../Button/Button"
-import UserStamp from '../UserStamp/UserStamp'
-
-import { boolean, text, select } from "@storybook/addon-knobs"
-
-export default function FileCardStory(stories) {
-  stories.add("File Card",
-    () => {
-      let props = {
-        className: text("className", ""),
-        layout: select("layout", ["vertical", "horizontal"], "vertical"),
-        displayName: text('displayName', 'Resume'),
-        description: text('description', 'Amazing file'),
-        downloadUrl: text('downloadUrl', 'http://google.com'),
-        openNewTab: boolean('openNewTab', false),
-        type: select(
-          "type",
-          [
-            "file-excel",
-            "file-pdf",
-            "file-word",
-            "file-image",
-            "file-powerpoint",
-            "file-video",
-            "file-text",
-            "file-zip",
-            "file-code",
-            "file-sound",
-            "file",
-          ],
-          "file"
-        ),
-        hasProtection: boolean('hasProtection', false),
-        hasAccess: boolean('hasAccess', false),
-      }
-      return (
-        <div className="container">
-          <div className="row my-4">
-            <div className="col-sm-3">
-              <FileCard {...props}>
-                <UserStamp
-                    action="Uploaded"
-                    date="2017-11-28"
-                    name="John Galt"
-                    thumbUrl="http://i.pravatar.cc/46"
-                />
-                <Button
-                    className="mt-2 btn-sm btn-power-royal"
-                    text="Download"
-                    type="button"
-                />
-              </FileCard>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  )
-}

data/components/FileCard/styles.scss

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

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

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