playbook_ui 2.5.0

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -0,0 +1,57 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/line_height";
+
+@mixin heading_1 {
+  font-size: $heading_1;
+  letter-spacing: $lspace_tight;
+  font-weight: $lighter;
+  color: $ink;
+  margin: 0;
+  line-height: $lh_tighter;
+}
+
+@mixin heading_1_dark {
+  @include heading_1;
+  color: $white;
+}
+
+@mixin heading_2 {
+  font-size: $heading_2;
+  font-weight: $lighter;
+  color: $ink;
+  margin: 0;
+  line-height: 0.96;
+}
+
+@mixin heading_2_dark {
+  @include heading_2;
+  color: $white;
+}
+
+@mixin heading_3 {
+  font-size: $heading_3;
+  font-weight: $lighter;
+  color: $ink;
+  margin: 0;
+  line-height: $lh_tighter;
+}
+
+@mixin heading_3_dark {
+  @include heading_3;
+  color: $white;
+}
+
+
+@mixin heading_4 {
+  font-size: $heading_4;
+  font-weight: $bolder;
+  color: $ink;
+  margin: 0;
+  line-height: $lh_tighter;
+}
+
+@mixin heading_4_dark {
+  @include heading_4;
+  color: $white;
+}

data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h1", size: 1, dark: true }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_dark.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import Title from "../_title.jsx"
+
+function TitleDark() {
+  return (
+    <div>
+      <Title dark size={4} tag="h4" text="Title 1" />
+      <Title dark size={3} tag="h3" text="Title 2" />
+      <Title dark size={2} tag="h2" text="Title 3" />
+      <Title dark size={1} tag="h1" text="Title 4" />
+    </div>
+  )
+}
+
+export default TitleDark;

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h1", size: 1 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import Title from "../_title.jsx"
+
+function TitleLight() {
+  return (
+    <div>
+      <Title size={4} tag="h4" text="Title 1" />
+      <Title size={3} tag="h3" text="Title 2" />
+      <Title size={2} tag="h2" text="Title 3" />
+      <Title size={1} tag="h1" text="Title 4" />
+    </div>
+  )
+}
+
+export default TitleLight;

data/app/pb_kits/playbook/pb_title/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - title_light: Light UI
+  - title_dark: Dark UI
+  react:
+  - title_light: Light UI
+  - title_dark: Dark UI

data/app/pb_kits/playbook/pb_title/docs/index.js

@@ -0,0 +1,2 @@
+export {default as TitleLight} from './_title_light.jsx';
+export {default as TitleDark} from './_title_dark.jsx';

data/app/pb_kits/playbook/pb_title/title.rb

@@ -0,0 +1,76 @@
+module Playbook
+  module PbTitle
+    class Title < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+          :configured_dark,
+          :configured_data,
+          :configured_id,
+          :configured_size,
+          :configured_tag,
+          :configured_text].freeze
+
+      def initialize(classname: default_configuration,
+                   dark: default_configuration,
+                   data: default_configuration,
+                   id: default_configuration,
+                   size: default_configuration,
+                   tag: default_configuration,
+                   text: default_configuration)
+        self.configured_classname = classname
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_size = size
+        self.configured_tag = tag
+        self.configured_text = text
+      end
+
+      def tag
+        if configured_tag == default_configuration
+          "h1"
+        else
+          configured_tag
+        end
+      end
+
+      def text
+        if configured_text == default_configuration
+          "Hello World"
+        else
+          configured_text
+        end
+      end
+
+      def size
+        if configured_size == default_configuration
+          "_1"
+        else
+          "_#{configured_size}"
+        end
+      end
+
+      def dark
+        if configured_dark == default_configuration
+          ""
+        else
+          if (configured_dark == true)
+            "_dark"
+          end
+        end
+      end
+
+      def to_partial_path
+        "pb_title/title"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_vertical_nav/_item.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(:li,
+    id: object.id,
+    data: object.data,
+    class: object.classname("vertical_nav_list_border_item#{object.active}")) do %>
+  <a href=<%= object.link %> class="vertical_nav_list_item_link">
+    <span class="vertical_nav_list_item_link_text"><%= object.text %></span>
+  </a>
+<% end %>

data/app/pb_kits/playbook/pb_vertical_nav/_item.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  text: PropTypes.string.isRequired,
+  link: PropTypes.string,
+  active: PropTypes.bool
+};
+
+const defaultProps = {
+  text: "Hello Item",
+  link: "#",
+  active: false
+};
+
+class VerticalNavItem extends Component {
+  render() {
+    const { text, link, active } = this.props;
+    return (
+      <li className={"vertical_nav_list_border_item" + active}>
+        <a className="vertical_nav_list_item_link"
+            href={link}
+        >
+          <span className="vertical_nav_list_item_link-text">{text}</span>
+        </a>
+      </li>
+    );
+  }
+}
+
+VerticalNavItem.propTypes = propTypes;
+VerticalNavItem.defaultProps = defaultProps;
+
+export default VerticalNavItem;

data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("vertical_nav_list")) do %>
+  <div class="vertical_nav_list_title">
+    <a class="vertical_nav_list_item_link_text" href="<%= object.link %>">
+      <%= pb_rails("caption", props: { text: object.title, tag: "p" }) %>
+    </a>
+  </div>
+  <ul>
+    <%= object.yield(context: self) %>
+  </ul>
+<% end %>

data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import VerticalNavItem from "./_item";
+import Caption from "../pb_caption/_caption.jsx";
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
+};
+
+class VerticalNav extends Component {
+  static VerticalNavItem = VerticalNavItem;
+  render() {
+    return (
+      <div className="vertical_nav_list">
+        <div className="vertical_nav_list_title">
+          <a>
+            <Caption />
+          </a>
+        </div>
+        <ul>{this.props.children}</ul>
+      </div>
+    );
+  }
+}
+
+VerticalNav.propTypes = propTypes;
+
+export default VerticalNav;

data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.scss

@@ -0,0 +1,73 @@
+@import "../tokens/typography";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+
+// Another style should be borders like buttons
+
+.vertical_nav_list {
+  $selector: ".vertical_nav_list";
+  &_title {
+    padding: 0 $space_xl $space_sm;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  &_border_item {
+    list-style: none;
+    border-bottom: 1px solid $sky;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  &_item,
+  &_border_item {
+    &_active,
+    &.active {
+      background-color: $p_royal_opacity_1;
+      #{$selector}_item_link,
+      #{$selector}_border_item_link {
+        border-color: $power_royal;
+        &_icon {
+          color: $power_royal;
+        }
+        &_text {
+          color: $power_royal;
+        }
+      }
+    }
+    &_link {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      padding: $space_sm $space_xl;
+      border: 0 solid transparent;
+      border-width: 0 0 0 3px;
+      transition-property: color, border-color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+      &_icon {
+        font-size: $font_large;
+        margin-right: $space_sm;
+        color: $ink_lightest;
+      }
+      &_text {
+        font-size: $font_base;
+        font-weight: $bold;
+        color: $ink;
+      }
+      &:hover {
+        background-color: rgba($power_royal, 0.03);
+        #{$selector}_item_link_icon,
+        #{$selector}_border_item_link_icon {
+          color: $power_royal;
+        }
+        #{$selector}_item_link_text,
+        #{$selector}_border_item_link_text {
+          color: $power_royal;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("vertical_nav", props: {title: "Title Example", link: "#"}) do %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Active Nav Item", link: "#", active: true }) %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item", link: "#" }) %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import VerticalNav from "../_vertical_nav.jsx"
+import VerticalNavItem from "../_item.jsx"
+
+function DefaultNav() {
+  return (
+    <VerticalNav title="Title Example">
+      <VerticalNavItem active text="Active Nav Item" />
+      <VerticalNavItem text="Nav Item" />
+      <VerticalNavItem text="Nav Item" />
+    </VerticalNav>
+  )
+}
+
+export default DefaultNav;

data/app/pb_kits/playbook/pb_vertical_nav/docs/example.yml

@@ -0,0 +1,5 @@
+examples:
+  rails:
+  - default_nav: Default
+  react:
+  - default_nav: Default

data/app/pb_kits/playbook/pb_vertical_nav/docs/index.js

@@ -0,0 +1 @@
+export {default as DefaultNav} from './_default_nav.jsx';

data/app/pb_kits/playbook/pb_vertical_nav/item.rb

@@ -0,0 +1,65 @@
+module Playbook
+  module PbVerticalNav
+    class Item < Playbook::PbKit::Base
+      PROPS = [:configured_active,
+          :configured_classname,
+          :configured_data,
+          :configured_id,
+          :configured_link,
+          :configured_text].freeze
+
+      def initialize(active: default_configuration,
+                   classname: default_configuration,
+                   data: default_configuration,
+                   id: default_configuration,
+                   link: default_configuration,
+                   text: default_configuration)
+        self.configured_active = active
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_link = link
+        self.configured_text = text
+      end
+
+      def active
+        if configured_active == default_configuration
+          ""
+        else
+          if (configured_active == true)
+            "_active"
+          end
+        end
+      end
+
+      def link
+        if configured_link == default_configuration
+          "#"
+        else
+          configured_link
+        end
+      end
+
+      def text
+        if configured_text == default_configuration
+          ""
+        else
+          configured_text
+        end
+      end
+
+      def to_partial_path
+        "pb_vertical_nav/item"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end