playbook_ui 2.7.2 → 2.8.1

data/components/Flip/FlipStory.jsx

@@ -1,85 +0,0 @@
-import React from "react"
-
-import Flip from "./Flip"
-import FileCard from "../FileCard/FileCard"
-import Button from "../Button/Button"
-import UserStamp from '../UserStamp/UserStamp'
-import Panel from '../Panel/Panel'
-
-class FlipStoryContainer extends React.Component {
-  constructor() {
-    super()
-    this.state = { flip: false }
-  }
-
-  state: { flip: boolean }
-
-  handleFlip() {
-    this.setState({ flip: !this.state.flip })
-  }
-
-  render() {
-    let props = {
-      fileCard: {
-        layout: 'vertical',
-        displayName: 'Some File',
-        description: '2 pages',
-        downloadUrl: 'http://google.com',
-        openNewTab: false,
-        type: 'file-pdf',
-        hasProtection: true,
-        hasAccess: true,
-      }
-    }
-
-    return (
-      <div className="container">
-        <div className="row">
-          <div className="col-sm-3">
-            <Flip flipped={this.state.flip}>
-              <Flip.Front>
-                <FileCard {...props.fileCard}>
-                  <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"
-                      onClick={() => this.handleFlip()}
-                      text="Flip"
-                      type="button"
-                  />
-                </FileCard>
-              </Flip.Front>
-              <Flip.Back>
-                <Panel
-                    bodyClass={'p-0'}
-                >
-                  <div style={{ height: '260px', padding: '15px' }}>
-                    <p>{'This is the back, wanna go to the front?'}</p>
-                    <Button
-                        className="mt-2 btn-sm btn-power-royal"
-                        onClick={() => this.handleFlip()}
-                        text="Yes, flip to the front"
-                        type="button"
-                    />
-                  </div>
-                </Panel>
-              </Flip.Back>
-            </Flip>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default function FlipStory(stories) {
-  stories.add("Flip", () => {
-    return (
-      <FlipStoryContainer />
-    )
-  })
-}

data/components/Flip/styles.scss

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

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

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

data/components/FlyoutPanel/FlyoutPanelStory.jsx

@@ -1,36 +0,0 @@
-import React from "react"
-import FlyoutPanel from "./FlyoutPanel"
-import { Modal } from "react-bootstrap"
-
-import { withInfo } from '@storybook/addon-info'
-import { select, text, boolean } from "@storybook/addon-knobs"
-
-export default function AvatarStory(stories) {
-  stories.add(
-    "FlyoutPanel",
-    withInfo("Panel that flies from the left or right side")(() => {
-      let props = {
-        position: select("position", ["left", "right"]),
-        show: boolean("show", true),
-      }
-      return (
-        <Modal dialogClassName="full" show={true}>
-          <FlyoutPanel {...props}>
-            <h1>Content</h1>
-            <input />
-          </FlyoutPanel>
-          <Modal.Header>
-            <Modal.Title>{'Modal Title'}</Modal.Title>
-            {'Header'}
-          </Modal.Header>
-          <Modal.Body>
-            <h1>Modal Content</h1>
-          </Modal.Body>
-          <Modal.Footer>
-            {'Footer'}
-          </Modal.Footer>
-        </Modal>
-      )
-    })
-  )
-}

data/components/FlyoutPanel/flyout_panel.scss

@@ -1,33 +0,0 @@
-@import "base-mixins/_all.scss";
-@import "base-variables/_all.scss";
-
-.flyout-panel {
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  z-index: 99999;
-  transition: all ease 0.5s;
-  background-color: $white;
-  border-left: 1px solid $gray-2;
-  box-shadow: $shadow-deep;
-
-  .scroll-inner-box {
-    height: 100%;
-    overflow: auto;
-  }
-
-  &.right {
-    right: -100%;
-    border-left: 1px solid $gray-2;
-    &.open {
-      right: 0;
-    }
-  }
-  &.left {
-    left: -100%;
-    border-right: 1px solid $gray-2;
-    &.open {
-      left: 0;
-    }
-  }
-}

data/components/FlyoutPanel/flyout_panel.scss.flow

@@ -1,11 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'flyout-panel': string;
-  +'hidden-xxs': string;
-  +'left': string;
-  +'open': string;
-  +'right': string;
-  +'scroll-inner-box': string;
-  +'visible-xxs': string;
-|};

data/components/Grade/Grade.jsx

@@ -1,55 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import Icon from '../Icon/Icon'
-import classnames from 'classnames'
-
-import styles from './grade.scss'
-
-type Props = {
-  className: string,
-  label: string,
-  grade: number,
-  starFullAt: number,
-  starEmptyAt: number,
-}
-
-const gradeToStarIconName = (grade: number, starFullAt: number, starEmptyAt: number): string => {
-  if (grade >= starFullAt) { return 'trophy-alt' }
-  if (grade <= starEmptyAt) { return 'star' }
-
-  return 'star-half'
-}
-
-class Grade extends React.Component<Props> {
-  static defaultProps = {
-    starFullAt: 10,
-    starEmptyAt: 0,
-    label: 'Grade'
-  }
-  props: Props
-
-  render() {
-    const { grade, label, starFullAt, starEmptyAt, className } = this.props
-    const classes = [
-      className,
-      styles.grade
-    ]
-
-    return (
-      <div className={classnames(classes)}>
-        <Icon
-            className={styles.star}
-            label=""
-            name={gradeToStarIconName(grade, starFullAt, starEmptyAt)}
-        />
-        <div>
-          <p>{grade}</p>
-          <label>{label}</label>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Grade

data/components/Grade/GradeStory.jsx

@@ -1,18 +0,0 @@
-import React from "react"
-import Grade from "./Grade"
-
-import { number, text } from "@storybook/addon-knobs"
-
-export default function GradeStory(stories) {
-  stories.add("Grade",
-    () => {
-      let props = {
-        grade: number("grade", 8.5, { range: true, min: 0, max: 10, step: 0.5 }),
-        starFullAt: number("starFullAt", 10, { range: true, min: 0, max: 10, step: 0.5 }),
-        starEmptyAt: number("starEmptyAt", 0, { range: true, min: 0, max: 10, step: 0.5 }),
-        label: text("label", "Grade")
-      }
-      return <Grade {...props}/>
-    }
-  )
-}

data/components/Grade/grade.scss

@@ -1,39 +0,0 @@
-@import "base-variables/_colors.scss";
-@import "base-variables/_spacing.sass";
-@import "base-variables/_typography.sass";
-
-.grade {
-  display: flex;
-  flex-direction: row;
-
-  .star {
-    font-size: $font-largest;
-    line-height: 36px;
-    margin-right: $space-base;
-    color: $ink-lighter;
-  }
-
-  div {
-    display: flex;
-    flex-direction: column;
-    
-    p {
-      font-size: $font-large;
-      color: $ink-light;
-      font-weight: $bold;
-      margin: 0;
-      padding: 0;
-      line-height: $font-large + 2;
-      text-align: center;
-    }
-    label {
-      margin: 0;
-      padding: 0;
-      color: $ink-lightest;
-      text-transform: uppercase;
-      font-weight: $regular;
-      font-size: $font-smaller;
-      line-height: $font-smaller + 2;
-    }
-  }
-}

data/components/Grade/grade.scss.flow

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

data/components/Highlight/Highlight.jsx

@@ -1,39 +0,0 @@
-/* @flow */
-import styles from './styles.scss'
-import React from 'react'
-import classnames from 'classnames'
-
-type Props = {
-
-  side: "top" | "bottom" | "left" | "right"| null,
-  color: "power-navy" | "power-navy-darker" | "power-red" | "power-gold" | "power-blue" | "power-green" | "power-royal",
-
-}
-
-export default class Highlight extends React.Component<Props> {
-  static defaultProps = {
-    side: "",
-    color: "",
-  }
-  props: Props
-  render() {
-    const {
-      side,
-      color,
-    } = this.props
-
-    const css = [
-      styles[`highlight-${side}`],
-      styles[`highlight-${color}`],
-    ]
-
-    return (
-      <div>
-        <span className={classnames(css,'well')} >{`I'm a ${side} highlight ${color}`}</span>
-      </div>
-
-
-
-    )
-  }
-}

data/components/Highlight/HighlightStory.jsx

@@ -1,22 +0,0 @@
-import React from "react"
-import Highlight from "./Highlight"
-import { select, } from "@storybook/addon-knobs"
-import classnames from 'classnames'
-
-export default function HighlightStory(stories) {
-  stories.add("Highlight",
-    () => {
-      let props = {
-        side: select("side",['left','right','top','bottom'], 'left'),
-        color: select('color',['power-navy','power-red','power-blue','power-gold','power-green','power-navy-darker','power-royal'],'power-blue'),
-      }
-
-        const highlightSide = `highlight-${props.side}`
-        const highlightColor = `highlight-${props.color}`
-
-
-      return <Highlight {...props} className={classnames(highlightSide,highlightColor)}/>
-
-    }
-  )
-}