playbook_ui 2.7.2 → 2.8.1

data/components/Highlight/styles.scss

@@ -1,24 +0,0 @@
-@import '../../sass-mixins/base-variables/colors';
-@import '../../sass-mixins/base-mixins/all';
-//highlight
-$borderStyle: "solid";
-$sides: "top" "right" "bottom" "left" ;
-$borderWidth: 4px;
-
-@mixin config-highlight-colors($prefix) {
-  @each $color in $power-colors {
-    .#{$prefix}-#{nth($color, 1)} {
-      border-color: #{nth($color,2)} !important;
-    }
-  }
-}
-
-@include config-highlight-colors("highlight");
-@each $side in $sides {
-
-  .highlight-#{$side} {
-    border:0;
-    border-#{$side}-style: #{$borderStyle};
-    border-#{$side}-width: $borderWidth;
-  }
-}

data/components/Highlight/styles.scss.flow

@@ -1,17 +0,0 @@
-// @flow
-/* This file is automatically generated by css-modules-flow-types */
-declare module.exports: {|
-  +'hidden-xxs': string;
-  +'highlight-bottom': string;
-  +'highlight-left': string;
-  +'highlight-power-blue': string;
-  +'highlight-power-gold': string;
-  +'highlight-power-green': string;
-  +'highlight-power-navy': string;
-  +'highlight-power-navy-darker': string;
-  +'highlight-power-red': string;
-  +'highlight-power-royal': string;
-  +'highlight-right': string;
-  +'highlight-top': string;
-  +'visible-xxs': string;
-|};

data/components/Icon/Icon.jsx

@@ -1,54 +0,0 @@
-import React from "react"
-import FontAwesome from "react-fontawesome"
-import Text from '../Text/Text'
-
-/**
- * Icon renders a FontAwesome icon followed by a label.
- *
- * @param {string} name FontAwesome icon's name. For the icon 'fa-paperclip' for
- * example, its name would be 'paperclip'.
- * @param {string} label the text to use as a label.
- * @param {string} size an optional FontAwesome icon size ('lg', '2x', '3x', etc).
- * @param {func} onClick the function to be called when the React onClick event is triggered.
- * @param {string} className class name is an option on the FontAwesome package that adds a class to the FontAwesome span.
- * @param {string} title an optional title as a tooltip on mouse hover.
- * @returns {ReactElement} JSX.
- */
-
-export default class Icon extends React.Component<Props> {
-  static defaultProps = {
-    label: "",
-    spin: false,
-  }
-  props: IconType
-  render() {
-    const {
-      name,
-      label,
-      size,
-      spin,
-      onClick,
-      className,
-      title
-    } = this.props
-    return (
-      <span
-          className="icon"
-          onClick={onClick}
-          title={title}
-      >
-        <FontAwesome
-            className={`far ${className}`}
-            name={name}
-            size={size}
-            spin={spin}
-        />
-        <If condition={label}>
-          <span className="ml-2" >
-            {label}
-          </span>
-        </If>
-      </span>
-    )
-  }
-}

data/components/Icon/IconButtonStory.jsx

@@ -1,20 +0,0 @@
-import React from "react"
-import Icon from "./Icon"
-import { Button } from "react-bootstrap"
-
-import { text, boolean } from "@storybook/addon-knobs"
-
-export default function IconStory(stories) {
-  stories.add("Button With Icon",
-    () => {
-      let props = {
-        className: text("className", ""),
-        name: text("name", "plus-circle"),
-        label: text("label", "Add User"),
-      }
-      return (
-        <Button><Icon {...props}/></Button>
-      )
-    }
-  )
-}

data/components/Icon/IconStory.jsx

@@ -1,25 +0,0 @@
-import React from "react"
-import Icon from "./Icon"
-
-import { text, boolean } from "@storybook/addon-knobs"
-
-export default function IconStory(stories) {
-  stories.add("Icon",
-    () => {
-      let props = {
-        className: text("className", ""),
-        name: text("name", "battery-half"),
-        label: text("label", "50%"),
-        size: text("size", "lg"),
-        spin: boolean("spin", false),
-        onClick: () => {
-          alert("Whaa? Why u click me?!")
-        },
-        title: text("title", "Battery Percentage")
-      }
-      return (
-        <Icon {...props}/>
-      )
-    }
-  )
-}

data/components/IconToggle/IconToggle.jsx

@@ -1,56 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import Icon from '../Icon/Icon'
-
-
-type Props = {
-    children?: Array<React.Node>,
-    className?: string,
-    iconOption1?:string,
-    iconOption2?:string,
-    size:string,
-    color:string,
-}
-
-export default class IconToggle extends React.Component<Props> {
-
-  static defaultProps = {
-    color: "text-sky",
-    className: "icon-toggle",
-    iconOption1:"minus-circle",
-    iconOption2:"plus-circle",
-    size:"text-larger",
-  }
-
-  props: Props
-
-  render() {
-    const{
-      className,
-      iconOption1,
-      iconOption2,
-      color,
-      size,
-    } = this.props
-
-
-    return (
-      <div>
-          <label className={`icon-toggle ${size} m-0`}>
-          <input className=""
-              type="checkbox"
-          />
-         <Icon className={`${className,color}`}
-             name={iconOption1}
-             title={`icon-1`}
-         />
-          <Icon className={`ml-4 ${className,color}`}
-              name={iconOption2}
-              title={`icon-2`}
-          />
-        </label>
-    </div>
-   )
-  }
-}

data/components/IconToggle/IconToggleStory.jsx

@@ -1,24 +0,0 @@
-import React from "react"
-import IconToggle from "./IconToggle"
-
-import { text, select, } from "@storybook/addon-knobs"
-
-
-export default function IconToggleStory(stories) {
-  stories.add("IconToggle",
-    () => {
-      let props = {
-        className: text("className", ""),
-        size: select("size", ["text-smallest", "text-smaller", "text-small","text-base","text-large","text-larger","text-largest","text-jumbo"],"text-larger"),
-        iconOption1:text("iconOption1","minus-circle"),
-        iconOption2:text("iconOption2","plus-circle"),
-        color:text("defaultColor","text-sky")
-      }
-      return (
-
-        <IconToggle {...props}/>
-
-      )
-    }
-  )
-}

data/components/Milestones/MilestoneItem.jsx

@@ -1,47 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import Icon from '../Icon/Icon'
-
-import styles from './milestones_item.scss'
-
-type Props = {
-  className: string,
-  name: string,
-  status: string,
-  background: string,
-}
-
-
-const statusToIconName = (status: string): string => {
-  if (status == 'done') { return 'check' }
-  if (status == 'started') { return 'dot-circle' }
-  return 'dot-circle'
-}
-
-export default class MilestoneItem extends React.Component<Props> {
-  static defaultProps = {
-    className: "",
-    background: "light"
-  }
-  props: Props
-  render() {
-    const {
-      className,
-      name,
-      status,
-      background,
-    } = this.props
-    const css = [
-      className,
-      styles[`milestone-item`],
-      styles[`background-${background}`],
-      styles[`status-${status}`],
-    ]
-    return <li className={classnames(css)}>
-      <Icon name={statusToIconName(status)} className={styles[`icon`]}/>
-      <span className={styles[`milestone-item-label`]}>{name}</span>
-      </li>
-  }
-}

data/components/Milestones/MilestoneItemStory.jsx

@@ -1,25 +0,0 @@
-import React from "react"
-import MilestoneItem from "./MilestoneItem"
-
-import { text, select } from "@storybook/addon-knobs"
-
-export default function MilestoneItemStory(stories) {
-  stories.add("Milestone Item",
-    () => {
-      let props = {
-        className: text("className", ""),
-        name: text("name", "Milestone"),
-        background: select("background", ["light", "dark"], "light"),
-        status: select("status", ["done", "started", "none"], "done"),
-      }
-      return (
-        <MilestoneItem
-            background={props.background}
-            className={props.className}
-            name={props.name}
-            status={props.status}
-        />
-      )
-    }
-  )
-}

data/components/Milestones/Milestones.jsx

@@ -1,51 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import MilestoneItem from './MilestoneItem'
-import styles from './milestones.scss'
-
-type Props = {
-  background: string,
-  className: string,
-  steps: any,
-}
-
-export default class Milestones extends React.Component<Props> {
-  static defaultProps = {
-    className: "",
-    background: "light"
-  }
-  props: Props
-
-  render() {
-    const {
-      background,
-      className,
-      steps,
-    } = this.props
-    const css = [
-      className,
-      styles[`milestones`],
-    ]
-    return (
-      <span className={classnames(css)}>
-        <ul>
-          {
-            [...steps].map((item, index) => {
-              return (
-                <MilestoneItem
-                    background={background}
-                    key={index}
-                    name={item.name}
-                    status={item.status}
-                />
-              )
-            })
-          }
-        </ul>
-      </span>
-    )
-  }
-}

data/components/Milestones/MilestonesStory.jsx

@@ -1,30 +0,0 @@
-import React from "react"
-import Milestones from "./Milestones"
-
-import { text, select } from "@storybook/addon-knobs"
-
-export default function MilestonesStory(stories) {
-  stories.add("Milestones",
-    () => {
-      let props = {
-        className: text("className", ""),
-        background: select("background", ["dark", "light"], "light"),
-        steps: [
-          {
-            name: "First",
-            status: select("1 Status", ["done", "started", "none"], "done")
-          },
-          {
-            name: "Second",
-            status: select("2 Status", ["done", "started", "none"], "started")
-          },
-          {
-            name: "Third",
-            status: select("3 Status", ["done", "started", "none"], "none")
-          }
-        ]
-      }
-      return <Milestones {...props}/>
-    }
-  )
-}

data/components/Milestones/milestones.scss

@@ -1,19 +0,0 @@
-@import "./milestones_variables";
-
-.milestones {
-  ul {
-    list-style: none;
-    position: relative;
-    padding: $space-small 0 0;
-    margin: $space-small 0 0;
-    text-align: center;
-
-    &::after {
-      content: '';
-      clear: both;
-      float: none;
-      display: block;
-      width: 100%;
-    }
-  }
-}

data/components/Milestones/milestones.scss.flow

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

data/components/Milestones/milestones_item.scss

@@ -1,157 +0,0 @@
-@import "./milestones_variables";
-
-.milestone-item {
-  position: relative;
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
-  padding: 0 $space-larger;
-  height: $step-progress-li-height;
-  line-height: $step-progress-bubble-height;
-
-
-  .milestone-item-label {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    opacity: $opacity-5;
-    font-size: $font-small;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .icon {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    width: 100%;
-    font-size: $font-small;
-  }
-
-
-  &::before {
-    content: '';
-    display: block;
-    text-align: center;
-    position: relative;
-    z-index: 1;
-    font-family: $icon-font;
-    font-size: $font-small;
-    width: $step-progress-bubble-height;
-    height: $step-progress-bubble-height;
-    border: $step-progress-line-height solid $ink-lightest;
-    border-radius: $step-progress-bubble-height/2;
-    line-height: calc(#{$step-progress-bubble-height} - (#{$step-progress-line-height} * 2));
-    font-weight: $bold;
-    margin: 0 auto $space-smaller;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    width: calc(100% - (#{$step-progress-bubble-height} - #{$step-progress-line-height}));
-    height: $step-progress-line-height;
-    top: calc((#{$step-progress-bubble-height}/2) - (#{$step-progress-line-height}/2));
-    left: calc(-50% + (#{$step-progress-bubble-height}/2));
-    z-index: 0;
-  }
-  &:first-child {
-    &::after {
-      display: none;
-    }
-  }
-
-  &::before {
-    background: transparent;
-  }
-
-  &.status-{
-    &done {
-      &::before {
-        border-color: $power-green !important;
-      }
-      .icon {
-        color: $power-green !important;
-      }
-    }
-    &started {
-      .milestone-item-label {
-        opacity: 1;
-      }
-      &::before {
-        border-color: $power-blue !important;
-      }
-      .icon {
-        color: $power-blue !important;
-      }
-    }
-  }
-
-  &.background-dark {
-    .milestone-item-label {
-      color: $bg-dark-text;
-    }
-
-    &::before {
-      background: $bg-dark-color;
-      color: $bg-dark-text;
-    }
-    &::after {
-      background: $bg-dark-color;
-    }
-
-    &.status-{
-      &done {
-        &::before {
-          background: transparent;
-        }
-        &::after {
-          background: $power-green;
-        }
-      }
-      &started {
-        &::before {
-          background: transparent;
-        }
-        &::after {
-          background: $power-blue;
-        }
-      }
-    }
-  }
-
-  &.background-light {
-    .milestone-item-label {
-      color: $bg-light-text;
-    }
-
-    &::before {
-      background: $bg-light-color;
-      border-color: $bg-light-color;
-      color: $bg-light-text;
-    }
-    &::after {
-      background: $bg-light-color;
-    }
-
-    &.status-{
-      &done {
-        &::before {
-          background: transparent;
-        }
-        &::after {
-          background: $power-green;
-        }
-      }
-      &started {
-        &::before {
-          background: transparent;
-        }
-        &::after {
-          background: $power-blue;
-        }
-      }
-    }
-  }
-}