playbook_ui 2.5.0

data/app/views/playbook/guides/create_kit/_kit_rails.html.md

@@ -0,0 +1,2 @@
+## Rails Partial
+How to setup kit partial

data/app/views/playbook/guides/create_kit/_kit_react.html.md

@@ -0,0 +1,2 @@
+## React Component
+How to setup kit component for react

data/app/views/playbook/guides/create_kit/_layout.html.md

@@ -0,0 +1,2 @@
+## Layout and structure
+A a kit should be able to function without external utility classes and libraries. A kit should handle layout for it’s children.

data/app/views/playbook/guides/create_kit/_view_objects.html.md

@@ -0,0 +1,2 @@
+## View Objects
+Understanding view objects

data/app/views/playbook/guides/create_kit/_writing_sass.md

@@ -0,0 +1,10 @@
+## Writing Sass
+---
+#### Class names, chaining, and SASS
+A kit should be named using prefixed complex classes to try and avoid naming collision and style bleed. Class chaining should be avoided if possible.
+
+---
+
+1. Use extend a class using & when possible and avoid class chaining when possible.
+2. When you must use a chained class try to avoid setting multiple properties.
+3. If your using chained classes have simple names make sure they don't collide with our utilities, and try to nest them under a parent class to avoid bleed

data/app/views/playbook/guides/use_nitro.html.slim

@@ -0,0 +1,6 @@
+.markdown
+  = render 'playbook/guides/use_nitro/nitro_components'
+  br
+  = render 'playbook/guides/use_nitro/local'
+  br
+  = render 'playbook/guides/use_nitro/versions'

data/app/views/playbook/guides/use_nitro/_local.html.md

@@ -0,0 +1,2 @@
+## Local Development
+How to use on local development environment

data/app/views/playbook/guides/use_nitro/_nitro_components.html.md

@@ -0,0 +1,2 @@
+## Nitro Components
+How to add to Nitro Component

data/app/views/playbook/guides/use_nitro/_versions.html.md

@@ -0,0 +1,2 @@
+## Versions
+How to update version

data/app/views/playbook/pages/fullscreen.html.slim

@@ -0,0 +1,10 @@
+= pb_rails("layout", props: {full: true, size: "md"})
+  = pb_rails("layout/sidebar")
+    h1 Sidebar
+  = pb_rails("layout/body")
+
+    = pb_rails("layout", props: {position: "right", size: "xl", collapse: "xl", full: true})
+      = pb_rails("layout/sidebar")
+        h1 Sidebar
+      = pb_rails("layout/body")
+        h1 Body

data/app/views/playbook/pages/grid.html.slim

@@ -0,0 +1,2 @@
+h1 Grid Test Example
+= pb_react("image", props: {"url": "https://images.unsplash.com/photo-1546554137-f86b9593a222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"})

data/app/views/playbook/pages/home.html.slim

@@ -0,0 +1,4 @@
+
+/ PagesController.action_methods
+
+h1 Welcome to Playbook

data/app/views/playbook/pages/kit_show.html.slim

@@ -0,0 +1,14 @@
+.pb--kit-show
+  = pb_rails("title", props: { text: pb_title(@kit), tag: "h1", size: "1" })
+
+  .pb--kit-type-nav
+    - if has_kit_type?(@kit, "rails")
+      a href="#{kit_show_rails_path(@kit)}" class="#{'active' if action_name == 'kit_show_rails'}" Rails
+    - if has_kit_type?(@kit, "react")
+      a href="#{kit_show_reacts_path(@kit)}" class="#{'active' if action_name == 'kit_show_react'}" React
+
+  - if(action_name == "kit_show_rails")
+    = pb_kit(kit: @kit)
+    = pb_kit_api(@kit)
+  - else
+    = pb_kit(kit: @kit, type: "react")

data/app/views/playbook/pages/kits.html.slim

@@ -0,0 +1,10 @@
+.pb--kits
+  = pb_rails("title", props: { text: "Kits", tag: "h1", size: "1" })
+
+  .pb--kit-type-nav
+    a href="#{kits_path('', type: 'rails')}" class="#{'active' if @type == 'rails'}" Rails
+    a href="#{kits_path('', type: 'react')}" class="#{'active' if @type == 'react'}" React
+
+  br
+
+  == pb_kits(type: @type)

data/app/views/playbook/pages/principals/_getting_started.html.md

@@ -0,0 +1,12 @@
+### Getting Started
+---
+
+#### Commands to get you started.
+
+To watch for changes run:
+
+`./bin/webpack --watch --colors --progress`
+
+To spin up the app run:
+
+`bundle exec rails s`

data/app/views/playbook/pages/principles.html.slim

@@ -0,0 +1,5 @@
+head
+  link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"
+body
+  div class="markdown"
+    = render 'playbook/pages/principals/getting_started'

data/app/views/playbook/pages/tokens.html.slim

@@ -0,0 +1,15 @@
+= pb_rails("title", props: { text: "Tokens", tag: "h1", size: "1" })
+
+br
+
+= pb_rails("title", props: { text: "Spacing", tag: "h3", size: "3" })
+
+br
+= render :partial => "playbook/pages/tokens/pb_doc_spacing",
+    locals:{ title: "Spacing Options",
+    usage: "Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow.",
+    sizes:[{name:"Extra Small",variable:"space_xs"},
+      {name:"Small",variable:"space_sm"},
+      {name:"Medium",variable:"space_md"},
+      {name:"Large",variable:"space_lg"},
+      {name:"Extra Large",variable:"space_xl"}]}

data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim

@@ -0,0 +1,16 @@
+br
+= pb_rails("title", props: { text: title, tag: "h4", size: "4" })
+
+- if defined?(usage) && usage.present?
+  = pb_rails("body", props: {"tag": "p", "text": usage})
+
+br
+ul.pb--tokens-spacing
+  - sizes.each do |item|
+    - variable = (defined?(item[:variable]) && !item[:variable].nil?) ? "$#{item[:variable]}" : ""
+    - item[:dark] ||= false
+    - item[:class] ||= item[:variable]
+
+    li class=(item[:dark] == true ? "dark" : "") data-name="#{item[:name]}" data-variable="#{variable}"
+      div
+        div class="pb--spacing_#{item[:class]}"

data/app/views/playbook/pages/utilities.html.slim

@@ -0,0 +1,89 @@
+= pb_rails("title", props: { text: "Utilities", tag: "h1", size: "1" })
+
+br
+= pb_rails("title", props: { text: "Colors", tag: "h3", size: "3" })
+
+// Text ----------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Text Colors",
+    usage: "Used for text",
+    colors: [{name: "Default", variable: "text_lt_default"},
+        {name: "Light", variable: "text_lt_light"},
+        {name: "Lighter", variable: "text_lt_lighter"},
+        {name: "Default Dk", variable: "text_dk_default", dark: true},
+        {name: "Light Dk", variable: "text_dk_light", dark: true},
+        {name: "Lighter Dk", variable: "text_dk_lighter", dark: true}]}
+
+// Backgrounds ---------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Backgrounds",
+    usage: "Used for backgrounds",
+    colors: [{name: "Bg Light", variable: "bg_light"},
+        {name: "Bg Dark", variable: "bg_dark"},
+        {name: "Bg Gradient", class: "bg_gradient"}]}
+
+// Cards ---------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Cards",
+    usage: "Used for card backgrounds",
+    colors: [{name: "Card Light", variable: "card_light"},
+        {name: "Card Dark", variable: "card_dark"}]}
+
+// Status --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Status",
+    usage: "Used for status indicators",
+    colors: [{name: "Success", variable: "success"},
+        {name: "Warning", variable: "warning"},
+        {name: "Error", variable: "error"},
+        {name: "Info", variable: "info"},
+        {name: "Neutral", variable: "neutral"}]}
+
+// Data ----------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Data",
+    usage: "Used in graphs, charts and stats",
+    colors: [{name: "Data 1", variable: "data_1"},
+        {name: "Data 2", variable: "data_2"},
+        {name: "Data 3", variable: "data_3"},
+        {name: "Data 4", variable: "data_4"},
+        {name: "Data 5", variable: "data_5"},
+        {name: "Data 6", variable: "data_6"},
+        {name: "Data 7", variable: "data_7"}]}
+
+// Actions -------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Actions",
+    usage: "Used for links and action buttons",
+    colors: [{name: "Primary", variable: "primary_action"},
+        {name: "Primary Dark", variable: "primary_action_dk", dark: true}]}
+
+// Active --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Active",
+    usage: "Used for active or selected states",
+    colors: [{name: "Active Light", variable: "active_light"},
+        {name: "Active Dark", variable: "active_dark", dark: true}]}
+
+// Border --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Border",
+    colors: [{name: "Border Light", variable: "border_light"},
+        {name: "Border Dark", variable: "border_dark", dark: true}]}
+
+// Shadow --------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Shadow",
+    colors: [{name: "Shadow Light", variable: "shadow_light"},
+        {name: "Shadow Dark", variable: "shadow_dark", dark: true}]}
+
+// Products ------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Product Colors",
+    usage: "Used for specific product indicators",
+    colors: [{name: "Windows", variable: "windows"},
+        {name: "Siding", variable: "siding"},
+        {name: "Doors", variable: "doors"},
+        {name: "Solar", variable: "solar"},
+        {name: "Roofs", variable: "roofs"},
+        {name: "Gutters", variable: "gutters"}]}

data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim

@@ -0,0 +1,14 @@
+
+br
+= pb_rails("title", props: { text: title, tag: "h4", size: "4" })
+- if defined?(usage) && usage.present?
+  = pb_rails("body", props: {"tag": "p", "text": usage})
+
+ul.pb--utlities-color
+  - colors.each do |item|
+    - variable = (defined?(item[:variable]) && !item[:variable].nil?) ? "$#{item[:variable]}" : ""
+    - item[:dark] ||= false
+    - item[:class] ||= item[:variable]
+
+    li class=(item[:dark] == true ? "dark" : "") data-name="#{item[:name]}" data-variable="#{variable}"
+      div class="pb--color_#{item[:class]}"

data/components/Avatar/Avatar.jsx

@@ -0,0 +1,96 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames/bind'
+
+import {OverlayTrigger, Popover} from 'react-bootstrap'
+
+import styles from './styles.scss'
+
+export type AvatarSize = "smaller" | "small" | "base" | "large" | "larger"
+
+type Props = {
+  alt: string,
+  disableLink: boolean,
+  showPopover: boolean,
+  size: "smaller" | "small" | "base" | "large" | "larger",
+  thumb: string,
+  url: string,
+  onError: () => void,
+}
+
+/**
+ * Avatar renders a user avatar thumbnail image. Upon click, it opens the orinal
+ * image on a new tab.
+ *
+ * @param {string} alt the text to display when hovering over the image.
+ * @param {bool} disableLink whether to disable the anchor link
+ * @param {bool} showPopover whether to show the popover image on hover
+ * @param {string} size the pre-defined avatar size.
+ * @param {string} thumb the avatar thumbnail image URL.
+ * @param {string} url the avatar original image URL.
+ * @returns {ReactElement} JSX.
+ */
+export default class Avatar extends React.Component<Props> {
+  static defaultProps = {
+    alt: 'Avatar Image',
+    size: 'base',
+    showPopover: true,
+  }
+  props: Props
+  render() {
+    const {
+      alt,
+      disableLink,
+      showPopover,
+      size,
+      thumb,
+      url,
+      onError,
+    } = this.props
+    const imgCSS = [
+      "avatar",
+      styles[`avatar-${size}`],
+    ]
+    const popover = (
+      <Popover>
+        <img
+            className={classnames(imgCSS)}
+            src={url}
+        />
+      </Popover>
+    )
+    const image = (
+      <img alt={alt}
+          className={classnames(imgCSS, styles[`avatar-${size}-thumb`])}
+          onError={onError}
+          src={thumb}
+      />
+    )
+    const imgThumb = (
+      <If condition={disableLink}>
+        {image}
+      <Else/>
+        <a href={disableLink ? "javascript:void(0)" : url}
+            style={{maxHeight: 56}}
+            target="_blank"
+        >
+          {image}
+        </a>
+      </If>
+    )
+    if(showPopover) {
+      return (
+        <OverlayTrigger
+            overlay={popover}
+            placement="right"
+            trigger={['hover']}
+        >
+          {imgThumb}
+        </OverlayTrigger>
+      )
+    } else {
+      return imgThumb
+    }
+  }
+}

data/components/Avatar/AvatarStory.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import Avatar from "./Avatar"
+
+import { select, text, boolean } from "@storybook/addon-knobs"
+
+export default function AvatarStory(stories) {
+  stories.add("Avatar",
+    () => {
+      let props = {
+        disableLink: boolean("disableLink", false),
+        showPopover: boolean("showPopover", true),
+        size: select("size", ["smaller", "small", "base", "large", "larger"], "base"),
+        thumb: text("url", "https://i.giphy.com/l46CjoMYO5n2hQnWE.gif"),
+        url: text("url", "https://i.giphy.com/l46CjoMYO5n2hQnWE.gif"),
+      }
+      return <Avatar {...props}/>
+    }
+  )
+}

data/components/Avatar/styles.scss

@@ -0,0 +1,54 @@
+// @import "base-variables/_spacing.sass";
+
+.avatar {
+  &-smaller {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+    &-thumb {
+      width: 30px;
+      height: 30px;
+      object-fit: cover;
+    }
+  }
+  &-small {
+    width: 140px;
+    height: 140px;
+    object-fit: cover;
+    &-thumb {
+      width: 60px;
+      height: 60px;
+      object-fit: cover;
+    }
+  }
+  &-base {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    &-thumb {
+      width: 90px;
+      height: 90px;
+      object-fit: cover;
+    }
+  }
+  &-large {
+    width: 270px;
+    height: 270px;
+    object-fit: cover;
+    &-thumb {
+      width: 115px;
+      height: 115px;
+      object-fit: cover;
+    }
+  }
+  &-larger {
+    width: 420px;
+    height: 420px;
+    object-fit: cover;
+    &-thumb {
+      width: 197px;
+      height: 197px;
+      object-fit: cover;
+    }
+  }
+}

data/components/Avatar/styles.scss.flow

@@ -0,0 +1,14 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'avatar-base': string;
+  +'avatar-base-thumb': string;
+  +'avatar-large': string;
+  +'avatar-large-thumb': string;
+  +'avatar-larger': string;
+  +'avatar-larger-thumb': string;
+  +'avatar-small': string;
+  +'avatar-small-thumb': string;
+  +'avatar-smaller': string;
+  +'avatar-smaller-thumb': string;
+|};