playbook_ui 2.5.0

data/components/Survey/survey.scss.flow

@@ -0,0 +1,11 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'overlay': string;
+  +'submit': string;
+  +'survey': string;
+  +'survey-question': string;
+  +'survey-question-answer': string;
+  +'survey-question-answer-list': string;
+  +'survey-question-list': string;
+|};

data/components/Tab/Tab.jsx

@@ -0,0 +1,70 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import Icon from '../Icon/Icon'
+
+export type TabType = {
+  active: boolean,
+  className?: string,
+  href?: string,
+  icon?: string,
+  onClick?: () => mixed,
+  target?: '_blank' | '_top',
+  text: string,
+}
+
+import styles from './tab.scss'
+
+export default class Tab extends Component<TabType> {
+  props: TabType
+
+  renderIcon() {
+    const { icon } = this.props
+    if (icon) return (<Icon name={icon} />)
+    return null
+  }
+
+  render() {
+    const {
+      active,
+      className,
+      href,
+      onClick,
+      target,
+      text,
+    } = this.props
+
+    const css = [
+      "tab",
+      styles.tab,
+      active ? styles[`tab-active`] : null,
+      className,
+    ]
+
+    return (
+      <Choose>
+        <When condition={href}>
+          <a
+              className={classnames(css)}
+              href={href}
+              target={target}
+          >
+            { this.renderIcon() }
+            {text}
+          </a>
+        </When>
+        <When condition={!href}>
+          <div
+              className={classnames(css)}
+              onClick={onClick}
+          >
+            { this.renderIcon() }
+            {text}
+          </div>
+        </When>
+      </Choose>
+    )
+  }
+}

data/components/Tab/tab.scss

@@ -0,0 +1,25 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_spacing.sass";
+@import "base-variables/_typography.sass";
+
+@mixin tab($orient: "horizontal") {
+  color: $gray-4;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: $bold;
+  padding: $space-base $space-larger;
+  &-active {
+    border-bottom: 6px solid $power-royal;
+    color: $ink-dark;
+  }
+  &:link, &:visited {
+    color: $gray-4;
+  }
+  &:hover {
+    color: $ink-dark;
+  }
+}
+
+.tab {
+  @include tab;
+}

data/components/Tab/tab.scss.flow

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

data/components/TabList/TabList.jsx

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+import { TabType } from '../Tab/Tab'
+
+type Props = {
+  className?: string,
+  children: Array<TabType>,
+}
+
+import styles from './tabList.scss'
+
+export default class TabList extends Component<Props> {
+  props: Props
+
+  render() {
+    const {
+      className,
+      children,
+    } = this.props
+
+    const css = [
+      className,
+      styles[`tabList`],
+    ]
+
+    return (
+      <div className={classnames(css)}>
+        {children}
+      </div>
+    )
+  }
+}

data/components/TabList/TabListStory.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import Tab from "../Tab/Tab"
+import TabList from "./TabList"
+
+export default function TabListStory(stories) {
+  stories.add("Tabbed List",
+    () => {
+      return (
+        <div className="container my-5">
+          <TabList>
+            <Tab
+                active={true}
+                text="Normal Tab"
+            />
+            <Tab
+                active={false}
+                target="_blank"
+                text="GitHub"
+                href="https://www.github.com"
+            />
+            <Tab
+                active={false}
+                onClick={function(){alert("Hey, who clicked me?!")}}
+                text="Click Tab"
+            />
+          </TabList>
+        </div>
+      )
+    }
+  )
+}

data/components/TabList/tabList.scss

@@ -0,0 +1,5 @@
+@import "base-variables/_colors.scss";
+
+.tabList {
+  border-bottom: 1px solid $gray-2;
+}

data/components/TabList/tabList.scss.flow

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

data/components/Text/Text.jsx

@@ -0,0 +1,53 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import styles from './styles.scss'
+
+
+type Props = {
+  children?: Array<React.Node>,
+  color: "sky-lighter" | "sky-light" | "sky" | "sky-dark" | "ink-lightest" | "ink-lighter" | "ink-light"| "ink" | "ink-dark",
+  size: "base" | "large" | "larger" | "largest" | "small" | "smaller" | "smallest",
+  bold: boolean,
+  italic: boolean,
+  className: string,
+}
+
+export default class Text extends React.Component<Props> {
+  static defaultProps = {
+    children: <span/>,
+    size: "base",
+    color: "ink",
+    bold: false,
+    italic: false,
+    className: "",
+  }
+  props: Props
+  render() {
+    const {
+      children,
+      className,
+      bold,
+      italic,
+      size,
+      color,
+    } = this.props
+    const css = [
+      className,
+      styles.badge,
+      styles[`text-${color}`],
+      styles[`text-${size}`],
+      bold ? styles["font-weight-bold"] : null,
+      italic ? styles["font-italic"] : null,
+    ]
+    return (
+      <span
+          className={classnames(css)}
+      >
+        {children}
+      </span>
+    )
+  }
+}

data/components/Text/TextStory.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Text from "./Text"
+
+import { text, select, boolean } from "@storybook/addon-knobs"
+
+export default function TextStory(stories) {
+  stories.add("Text",
+    () => {
+      let props = {
+        className: text("className", ""),
+        color: select("color", ["sky-lighter", "sky-light", "sky", "sky-dark", "ink-lightest", "ink-lighter", "ink-light", "ink", "ink-dark"], "ink"),
+        size: select("size", ["base", "large", "larger", "largest", "small", "smaller", "smallest"], "base"),
+        bold: boolean("bold", false),
+        italic: boolean("italic", false),
+      }
+      return (
+        <Text {...props}>
+          {`She stared through the window at the stars.`}
+        </Text>
+      )
+    }
+  )
+}

data/components/Text/styles.scss

@@ -0,0 +1,3 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+@import "text.scss";

data/components/Text/styles.scss.flow

@@ -0,0 +1,123 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'font-italic': string;
+  +'font-weight-bold': string;
+  +'font-weight-normal': string;
+  +'hidden-xxs': string;
+  +'text-black': string;
+  +'text-black-opacity-1': string;
+  +'text-black-opacity-2': string;
+  +'text-black-opacity-3': string;
+  +'text-black-opacity-4': string;
+  +'text-black-opacity-5': string;
+  +'text-black-opacity-6': string;
+  +'text-black-opacity-7': string;
+  +'text-black-opacity-8': string;
+  +'text-black-opacity-9': string;
+  +'text-danger': string;
+  +'text-gray-1': string;
+  +'text-gray-2': string;
+  +'text-gray-3': string;
+  +'text-gray-4': string;
+  +'text-gray-5': string;
+  +'text-gray-6': string;
+  +'text-gray-7': string;
+  +'text-gray-8': string;
+  +'text-gray-9': string;
+  +'text-gray-dark': string;
+  +'text-info': string;
+  +'text-ink': string;
+  +'text-ink-dark': string;
+  +'text-ink-light': string;
+  +'text-ink-lighter': string;
+  +'text-ink-lightest': string;
+  +'text-jumbo': string;
+  +'text-large': string;
+  +'text-larger': string;
+  +'text-largest': string;
+  +'text-muted': string;
+  +'text-normal': string;
+  +'text-p-blue-opacity-1': string;
+  +'text-p-blue-opacity-2': string;
+  +'text-p-blue-opacity-3': string;
+  +'text-p-blue-opacity-4': string;
+  +'text-p-blue-opacity-5': string;
+  +'text-p-blue-opacity-6': string;
+  +'text-p-blue-opacity-7': string;
+  +'text-p-blue-opacity-8': string;
+  +'text-p-blue-opacity-9': string;
+  +'text-p-gold-opacity-1': string;
+  +'text-p-gold-opacity-2': string;
+  +'text-p-gold-opacity-3': string;
+  +'text-p-gold-opacity-4': string;
+  +'text-p-gold-opacity-5': string;
+  +'text-p-gold-opacity-6': string;
+  +'text-p-gold-opacity-7': string;
+  +'text-p-gold-opacity-8': string;
+  +'text-p-gold-opacity-9': string;
+  +'text-p-green-opacity-1': string;
+  +'text-p-green-opacity-2': string;
+  +'text-p-green-opacity-3': string;
+  +'text-p-green-opacity-4': string;
+  +'text-p-green-opacity-5': string;
+  +'text-p-green-opacity-6': string;
+  +'text-p-green-opacity-7': string;
+  +'text-p-green-opacity-8': string;
+  +'text-p-green-opacity-9': string;
+  +'text-p-navy-opacity-1': string;
+  +'text-p-navy-opacity-2': string;
+  +'text-p-navy-opacity-3': string;
+  +'text-p-navy-opacity-4': string;
+  +'text-p-navy-opacity-5': string;
+  +'text-p-navy-opacity-6': string;
+  +'text-p-navy-opacity-7': string;
+  +'text-p-navy-opacity-8': string;
+  +'text-p-navy-opacity-9': string;
+  +'text-p-red-opacity-1': string;
+  +'text-p-red-opacity-2': string;
+  +'text-p-red-opacity-3': string;
+  +'text-p-red-opacity-4': string;
+  +'text-p-red-opacity-5': string;
+  +'text-p-red-opacity-6': string;
+  +'text-p-red-opacity-7': string;
+  +'text-p-red-opacity-8': string;
+  +'text-p-red-opacity-9': string;
+  +'text-p-royal-opacity-1': string;
+  +'text-p-royal-opacity-2': string;
+  +'text-p-royal-opacity-3': string;
+  +'text-p-royal-opacity-4': string;
+  +'text-p-royal-opacity-5': string;
+  +'text-p-royal-opacity-6': string;
+  +'text-p-royal-opacity-7': string;
+  +'text-p-royal-opacity-8': string;
+  +'text-p-royal-opacity-9': string;
+  +'text-power-blue': string;
+  +'text-power-gold': string;
+  +'text-power-green': string;
+  +'text-power-navy': string;
+  +'text-power-navy-darker': string;
+  +'text-power-red': string;
+  +'text-power-royal': string;
+  +'text-primary': string;
+  +'text-sky': string;
+  +'text-sky-dark': string;
+  +'text-sky-light': string;
+  +'text-sky-lighter': string;
+  +'text-small': string;
+  +'text-smaller': string;
+  +'text-smallest': string;
+  +'text-success': string;
+  +'text-warning': string;
+  +'text-white': string;
+  +'text-white-opacity-1': string;
+  +'text-white-opacity-2': string;
+  +'text-white-opacity-3': string;
+  +'text-white-opacity-4': string;
+  +'text-white-opacity-5': string;
+  +'text-white-opacity-6': string;
+  +'text-white-opacity-7': string;
+  +'text-white-opacity-8': string;
+  +'text-white-opacity-9': string;
+  +'visible-xxs': string;
+|};

data/components/Text/text.scss

@@ -0,0 +1,35 @@
+@mixin text-color-classes($colors-list) {
+  @each $name, $color in $colors-list {
+    @include text-emphasis-variant(".text-#{$name}", $color);
+  }
+}
+
+@include text-color-classes($power-colors);
+@include text-color-classes($gray-colors);
+@include text-color-classes($opacity-colors);
+@include text-color-classes($interface-colors);
+
+// TEXT COLOR IN COLORS
+@include text-emphasis-variant('.text-muted', $gray-6);
+@include text-emphasis-variant('.text-primary', $brand-primary);
+@include text-emphasis-variant('.text-success', $brand-success);
+@include text-emphasis-variant('.text-info', $brand-info);
+@include text-emphasis-variant('.text-warning', $power-gold);
+@include text-emphasis-variant('.text-danger', $brand-danger);
+@include text-emphasis-variant('.text-gray-dark', $gray-8);
+
+
+// Text Size
+.text-jumbo { font-size: $font-jumbo }
+.text-largest { font-size: $font-largest }
+.text-larger { font-size: $font-larger }
+.text-large { font-size: $font-large }
+.text-normal {font-size: $font-base }
+.text-small { font-size: $font-small }
+.text-smaller { font-size: $font-smaller }
+.text-smallest { font-size: $font-smallest }
+
+// text decoration
+.font-weight-normal { font-weight: $regular; }
+.font-weight-bold   { font-weight: $bold; }
+.font-italic        { font-style: italic; }