playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= content_tag(:div, class: "pb__user_badge_wrapper") do %>
+    <%= render partial: object.display_badge %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class UserBadge extends React.Component {
+  render() {
+    return (
+      <div className="pb_user_badge">
+        <span>USER BADGE CONTENT</span>
+      </div>
+    )
+  }
+}
+
+UserBadge.propTypes = propTypes;
+
+export default UserBadge;

data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss

@@ -0,0 +1,24 @@
+$badge-sizes: (
+  "sm":   16px,
+  "md":   26px,
+  "lg":   36px
+);
+
+[class^=pb_user_badge] {
+  .pb__user_badge_wrapper {
+    svg,
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @each $name, $size in $badge-sizes {
+    &[class*=_#{$name}] {
+      .pb__user_badge_wrapper {
+        width: $size;
+        height: $size;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_user_badge/badges/_million-dollar.html.erb

@@ -0,0 +1,88 @@
+
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 242.9 242.9" style="enable-background:new 0 0 242.9 242.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+	.st5{fill:url(#SVGID_6_);}
+</style>
+<circle cx="121.5" cy="121.5" r="121.5"/>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="42.4829" y1="35.6453" x2="200.3093" y2="35.6453">
+			<stop  offset="0" style="stop-color:#E6B711"/>
+			<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+			<stop  offset="0.2778" style="stop-color:#EECC66"/>
+			<stop  offset="0.4129" style="stop-color:#F1D485"/>
+			<stop  offset="0.5273" style="stop-color:#F2D998"/>
+			<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+			<stop  offset="1" style="stop-color:#E6B711"/>
+		</linearGradient>
+		<path class="st0" d="M56.4,53.8c16.9-16.2,39.8-26.2,65-26.2c25.2,0,48.1,10,64.9,26.2l14,0c-19.1-22.2-47.4-36.3-78.9-36.3
+			c-31.5,0-59.8,14.1-78.9,36.3H56.4z"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17.407" y1="132.1794" x2="44.8973" y2="132.1794">
+			<stop  offset="0" style="stop-color:#E6B711"/>
+			<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+			<stop  offset="0.2778" style="stop-color:#EECC66"/>
+			<stop  offset="0.4129" style="stop-color:#F1D485"/>
+			<stop  offset="0.5273" style="stop-color:#F2D998"/>
+			<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+			<stop  offset="1" style="stop-color:#E6B711"/>
+		</linearGradient>
+		<path class="st1" d="M44.9,175.7c-10.9-15.3-17.3-34-17.3-54.2c0-14.1,3.1-27.5,8.8-39.5l-11.1,0c-5,12.2-7.8,25.5-7.8,39.5
+			c0,22.7,7.3,43.8,19.8,60.9L44.9,175.7z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="52.9143" y1="212.5732" x2="189.7151" y2="212.5732">
+			<stop  offset="0" style="stop-color:#E6B711"/>
+			<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+			<stop  offset="0.2778" style="stop-color:#EECC66"/>
+			<stop  offset="0.4129" style="stop-color:#F1D485"/>
+			<stop  offset="0.5273" style="stop-color:#F2D998"/>
+			<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+			<stop  offset="1" style="stop-color:#E6B711"/>
+		</linearGradient>
+		<path class="st2" d="M173,199.8c-14.8,9.8-32.5,15.5-51.6,15.5c-19.1,0-37-5.8-51.8-15.6H52.9c18.3,16.1,42.3,25.8,68.5,25.8
+			c26.1,0,50-9.7,68.3-25.7H173z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="31.1232" y1="136.1588" x2="207.7658" y2="136.1588">
+			<stop  offset="0" style="stop-color:#E6B711"/>
+			<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+			<stop  offset="0.2778" style="stop-color:#EECC66"/>
+			<stop  offset="0.4129" style="stop-color:#F1D485"/>
+			<stop  offset="0.5273" style="stop-color:#F2D998"/>
+			<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+			<stop  offset="1" style="stop-color:#E6B711"/>
+		</linearGradient>
+		<path class="st3" d="M139.2,193v-1.8c5-0.4,10.2-0.5,13.4-5c3.8-5.2,3.2-15.4,3.2-21.5V78.5l-47.3,120.4L61.2,81.2v61.1
+			c0,13.6,0.5,35.1,12.5,44.2c4.3,3.2,9,3.9,14.2,4.7v1.8H31.1v-1.8c1.6-0.4,3.2-0.7,4.8-1.1c22.6-5.7,22.9-32.4,22.9-51.1v-37.8
+			c0-6.1,0.5-13.3-3.2-18.5c-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6,75.4l29.9-75.4h52.3v1.8c-4.8,0.4-10.2,0.9-13.4,5
+			c-3.8,4.8-3.2,15.9-3.2,21.9v62.5c0,6.3-0.7,16.1,3.2,21.5c3.2,4.3,6.2,4.7,11.2,5v1.8H139.2z"/>
+	</g>
+	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="30.4528" y1="63.629" x2="213.7944" y2="63.629">
+		<stop  offset="0" style="stop-color:#E6B711"/>
+		<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+		<stop  offset="0.2778" style="stop-color:#EECC66"/>
+		<stop  offset="0.4129" style="stop-color:#F1D485"/>
+		<stop  offset="0.5273" style="stop-color:#F2D998"/>
+		<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+		<stop  offset="1" style="stop-color:#E6B711"/>
+	</linearGradient>
+	<rect x="30.5" y="60.6" class="st4" width="183.3" height="6.1"/>
+	<g>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="196.6758" y1="132.9232" x2="225.5378" y2="132.9232">
+			<stop  offset="0" style="stop-color:#E6B711"/>
+			<stop  offset="0.1282" style="stop-color:#EAC23C"/>
+			<stop  offset="0.2778" style="stop-color:#EECC66"/>
+			<stop  offset="0.4129" style="stop-color:#F1D485"/>
+			<stop  offset="0.5273" style="stop-color:#F2D998"/>
+			<stop  offset="0.6073" style="stop-color:#F3DB9F"/>
+			<stop  offset="1" style="stop-color:#E6B711"/>
+		</linearGradient>
+		<path class="st5" d="M196.7,177.5c11.5-15.6,18.7-35.2,18.7-56c0-14.1-3.1-27.5-8.8-39.5l11.1,0c5,12.2,7.8,25.5,7.8,39.5
+			c0,23.4-7.8,45-20.9,62.4L196.7,177.5z"/>
+	</g>
+</g>
+</svg>

data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb

@@ -0,0 +1,17 @@
+<style type="text/css">
+	.veteran-st0{fill:#004876;}
+	.veteran-st1{fill:#FFFFFF;}
+	.veteran-st2{fill:#BB2432;}
+</style>
+
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 198.6 242.9" style="enable-background:new 0 0 198.6 242.9;" xml:space="preserve">
+<path class="veteran-st0" d="M198.4,71.5c0-0.2,0-0.4,0-0.5c-0.2-1.2-1.4-2.1-1.4-2.1L103.2,2.7c-0.7-0.4-1-0.6-1.6-0.6
+	c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,56.1,0,67.1h-0.6v29.6h99.8L198.4,71.5L198.4,71.5z"/>
+<path class="veteran-st1" d="M172.9,159.2c-31.4,23-33.2,24.3-33.2,24.3l-40.5,3.2v-29.4L172.9,159.2z"/>
+<path class="veteran-st2" d="M99.3,125.4V33.5L1.6,102.7l-0.1,0.1c-1,0.7-1.5,1.8-1.5,3v0v67.4v0c0,1.2,0.6,2.3,1.5,3l0.1,0.1l93.5,66.3
+	c1.7,1.2,4.1,0,4.1-2.1v-28.9l40.5-28l-40.5,0.7v-25h73.7l25.4-16.9l0.2-16.8H99.3z"/>
+<rect x="99.3" y="101.1" class="veteran-st1" width="99.3" height="24.3"/>
+</svg>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  size: "md"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "million-dollar",
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import UserBadge from "../_user_badge.jsx"
+
+function UserBadgeDefault() {
+  return (
+    <div>
+      <UserBadge />
+    </div>
+  )
+}
+
+export default UserBadgeDefault;

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  size: "sm"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  size: "md"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  size: "lg"
+}) %>

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - user_badge_default: Default
+  - user_badge_size: Sizes
+
+
+  react:
+  - user_badge_default: Default

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

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

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+include ActionView::Helpers::AssetTagHelper
+
+module Playbook
+  module PbUserBadge
+    class UserBadge < Playbook::PbKit::Base
+      PROPS = %i[configured_badge
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_size].freeze
+
+      def initialize(badge: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration)
+        self.configured_badge = badge
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_size = size
+      end
+
+      def display_badge
+        "playbook/pb_user_badge/badges/#{badge}" if is_set? configured_badge
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_user_badge",
+          size,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_user_badge/user_badge"
+      end
+
+    private
+
+      def badge
+        badge_options = %w[million-dollar veteran]
+        one_of_value(configured_badge, badge_options, "million-dollar")
+      end
+
+      def size
+        size_options = %w[sm md lg]
+        one_of_value(configured_size, size_options, "md")
+      end
+
+      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

@@ -1,8 +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>
+    class: object.classname("vertical_nav_list_border_item#{object.active_class}")) do %>
+    <a href=<%= object.link %> class="vertical_nav_list_item_link">
+     <span class="vertical_nav_list_item_link_text"><%= object.text %><%= object.yield(context: self) %></span>
+   </a>
 <% end %>

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

@@ -3,7 +3,6 @@
 @import "../tokens/colors";
 
 // Another style should be borders like buttons
-
 .vertical_nav_list {
   $selector: ".vertical_nav_list";
   &_title {
@@ -16,7 +15,7 @@
   }
   &_border_item {
     list-style: none;
-    border-bottom: 1px solid $sky;
+    border-bottom: 1px solid $border_light;
     &:last-child {
       border-bottom: 0;
     }
@@ -25,15 +24,15 @@
   &_border_item {
     &_active,
     &.active {
-      background-color: $p_royal_opacity_1;
+      background-color: $active_light;
       #{$selector}_item_link,
       #{$selector}_border_item_link {
-        border-color: $power_royal;
+        border-color: $primary;
         &_icon {
-          color: $power_royal;
+          color: $primary;
         }
         &_text {
-          color: $power_royal;
+          color: $primary;
         }
       }
     }
@@ -50,22 +49,22 @@
       &_icon {
         font-size: $font_large;
         margin-right: $space_sm;
-        color: $ink_lightest;
+        color: $text_lt_lighter;
       }
       &_text {
         font-size: $font_base;
         font-weight: $bold;
-        color: $ink;
+        color: $text_lt_default;
       }
       &:hover {
-        background-color: rgba($power_royal, 0.03);
+        background-color: rgba($primary, 0.03);
         #{$selector}_item_link_icon,
         #{$selector}_border_item_link_icon {
-          color: $power_royal;
+          color: $primary;
         }
         #{$selector}_item_link_text,
         #{$selector}_border_item_link_text {
-          color: $power_royal;
+          color: $primary;
         }
       }
     }

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

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

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

@@ -1,5 +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: "#" }) %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
+  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
 <% end %>

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

@@ -1,5 +1,6 @@
 examples:
   rails:
   - default_nav: Default
+  - block_nav: Block
   react:
   - default_nav: Default

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

@@ -1,51 +1,50 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbVerticalNav
     class Item < Playbook::PbKit::Base
-      PROPS = [:configured_active,
-          :configured_classname,
-          :configured_data,
-          :configured_id,
-          :configured_link,
-          :configured_text].freeze
+      PROPS = %i[configured_active
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_link
+                 configured_text
+                 block].freeze
 
       def initialize(active: default_configuration,
-                   classname: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   link: default_configuration,
-                   text: default_configuration)
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     link: default_configuration,
+                     text: default_configuration,
+                     &block)
         self.configured_active = active
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id
         self.configured_link = link
         self.configured_text = text
+        self.block = block_given? ? block : nil
       end
 
       def active
-        if configured_active == default_configuration
-          ""
-        else
-          if (configured_active == true)
-            "_active"
-          end
-        end
+        is_true? configured_active
       end
 
-      def link
-        if configured_link == default_configuration
-          "#"
-        else
-          configured_link
-        end
+      def active_class
+        "_active" if active == true
       end
 
       def text
-        if configured_text == default_configuration
-          ""
-        else
-          configured_text
-        end
+        default_value(configured_text, "")
+      end
+
+      def link
+        default_value(configured_link, "#")
+      end
+
+      def yield(context:)
+        !block.nil? ? context.capture(&block) : ""
       end
 
       def to_partial_path