playbook_ui 2.5.0

data/components/FileCard/FileCardStory.jsx

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

@@ -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/FlipStory.jsx

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

@@ -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

data/components/FlyoutPanel/FlyoutPanelStory.jsx

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

@@ -0,0 +1,33 @@
+@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;
+    }
+  }
+}