playbook_ui 2.9.7 → 2.9.8

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
-  <%= object.day_month %>
-  <%= object.year %>
+    class: object.classname) do %>
+  <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
+  <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb

@@ -2,74 +2,35 @@
 
 module Playbook
   module PbDateYearStacked
-    class DateYearStacked < Playbook::PbKit::Base
-      PROPS = %i[configured_align
-                 configured_classname
-                 configured_dark
-                 configured_data
-                 configured_date
-                 configured_id].freeze
+    class DateYearStacked
+      include Playbook::Props
 
-      def initialize(align: default_configuration,
-                     classname: default_configuration,
-                     dark: default_configuration,
-                     data: default_configuration,
-                     date: default_configuration,
-                     id: default_configuration)
-        self.configured_align = align
-        self.configured_classname = classname
-        self.configured_dark = dark
-        self.configured_data = data
-        self.configured_date = date
-        self.configured_id = id
-      end
+      partial "pb_date_year_stacked/date_year_stacked"
 
-      def align
-        align_options = %w[left center right]
-        one_of_value(configured_align, align_options, "left")
-      end
-
-      def dark
-        is_true? configured_dark
-      end
-
-      def date
-        Playbook::PbKit::PbDateTime.new(configured_date)
-      end
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :date
 
       def year
-        year = date.to_year
-        pb_body = Playbook::PbBody::Body.new(text: year, color: "light", dark: dark)
-        ApplicationController.renderer.render(partial: pb_body, as: :object)
+        as_date.to_year
       end
 
       def day_month
-        day_month = "#{date.to_day} #{date.to_month}"
-        pb_title = Playbook::PbTitle::Title.new(text: day_month, size: 4, dark: dark)
-        ApplicationController.renderer.render(partial: pb_title, as: :object)
-      end
-
-      def to_partial_path
-        "pb_date_year_stacked/date_year_stacked"
+        "#{as_date.to_day.strip} #{as_date.to_month}"
       end
 
-      def kit_class
-        kit_options = [
-          "pb_date_year_stacked",
-          align,
-
-        ]
-        kit_options.join("_")
+      def classname
+        generate_classname("pb_date_year_stacked", align)
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def as_date
+        Playbook::PbKit::PbDateTime.new(date)
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb

@@ -1,10 +1,10 @@
-<%= content_tag(:div,
+<%= content_tag(:span,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
 
   <%= link_to object.url do %>
-    <%= pb_rails("badge", props: { variant: "primary", text: object.hashtag_text }) %>
+    <%= pb_rails("badge", props: { variant: "primary", text: object.hashtag_text, dark: object.dark }) %>
   <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -7,13 +7,13 @@ import {Badge} from '../'
 type HashtagProps = {
   className?: String,
   data?: String,
+  dark?: Boolean,
   id?: String,
   text?: String,
   type: 'default' | 'home' | 'project',
   url?: String,
 }
 
-
 const HashType = {
   "home": "H#",
   "project": "P#",
@@ -23,19 +23,21 @@ const HashType = {
 const Hashtag = ({
   className,
   data,
+  dark = false,
   id,
   text,
   type,
   url
-} : HashtagProps) => (
-
-
-
-<div className={`pb_hashtag_kit_${type}`}>
-  <a href={url}>
-    <Badge variant="primary" text={HashType[type] + text}></Badge>
-  </a>
-</div>
-)
+} : HashtagProps) => {
+  const darkClass = dark === true ? "dark" : ""
+
+  return (
+    <div className={`pb_hashtag_kit_${darkClass}`}>
+      <a href={url}>
+        <Badge variant="primary" text={HashType[type] + text} dark={dark}></Badge>
+      </a>
+    </div>
+  )
+}
 
 export default Hashtag

data/app/pb_kits/playbook/pb_hashtag/_hashtag.scss

@@ -1 +1,3 @@
-
+[class^=pb_hastag_kit] {
+  display: inline-block;
+}

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project", dark: true}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home", dark: true}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default", dark: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import {Hashtag} from "../../"
+
+function HashtagDark() {
+  return (
+    <div>
+      <Hashtag
+          dark
+          text="470297"
+          type="project"
+          url="https://google.com"
+      />
+      <br/>
+      <Hashtag
+          dark
+          text="123456"
+          type="home"
+          url="https://google.com"
+      />
+      <br/>
+      <Hashtag
+          dark
+          text="654321"
+          type="default"
+          url="https://google.com"
+      />
+    </div>
+  )
+}
+
+export default HashtagDark;

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -9,13 +9,13 @@ function HashtagDefault() {
           type="project"
           url="https://google.com"
       />
-      <br/><br/>
+      <br/>
       <Hashtag
           text="123456"
           type="home"
           url="https://google.com"
       />
-      <br/><br/>
+      <br/>
       <Hashtag
           text="654321"
           type="default"

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

@@ -2,7 +2,8 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
-
+  - hashtag_dark: Dark
 
   react:
   - hashtag_default: Hashtag Types
+  - hashtag_dark: Dark

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

@@ -1 +1,2 @@
 export {default as HashtagDefault} from './_hashtag_default.jsx';
+export {default as HashtagDark} from './_hashtag_dark.jsx';

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -8,13 +8,14 @@ module Playbook
       partial "pb_hashtag/hashtag"
 
       prop :text
+      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home],
                   default: "default"
       prop :url
 
       def classname
-        generate_classname("pb_hastag_kit")
+        generate_classname("pb_hastag_kit", dark_class)
       end
 
       def hashtag_text
@@ -23,6 +24,10 @@ module Playbook
 
     private
 
+      def dark_class
+        dark ? "dark" : nil
+      end
+
       def type_text
         if type === "home"
           "H#"

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb

@@ -6,27 +6,33 @@
   <%= pb_rails "title", props: {
     classname: "pb_home_address_street_address",
     size: 4,
-    text: object.address_house_style
+    text: object.address_house_style,
+    dark: object.dark
   } %>
 
   <%= pb_rails "title", props: {
     classname: "pb_home_address_street_address",
     size: 4,
-    text: object.address_house_style2
+    text: object.address_house_style2,
+    dark: object.dark
   } %>
 
   <%= pb_rails "body", props: {
     color: "light",
     text: object.city_state_zip,
+    dark: object.dark
   } %>
 
   <% if object.home_id %>
-    <%= pb_rails "body", props: { classname: "home-hashtag", tag: "span" } do %>
-      H#<%= object.home_id %>
-    <% end %>
+    <%= pb_rails("hashtag", props: {
+      text: "#{object.home_id}",
+      url: "#",
+      type: "home",
+      dark: object.dark,
+      classname: "home-hashtag"}) %>
   <% end %>
 
-  <%= pb_rails "body", props: { color: "light", tag: "span" } do %>
+  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
     <small><%= object.territory %></small>
   <% end %>
 

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -3,6 +3,8 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { titleize } from '../utilities/text.js'
+
 
 import {
   Body,
@@ -14,10 +16,12 @@ const dot = (houseStyle) =>
     return "\u00b7"
   }
 }
+const titleizeAddessCont = (addressCont) => addressCont ? titleize(addressCont) : null;
+
 
 type HomeAddressStreetProps = {
   address: String,
-  address_cont: String,
+  addressCont: String,
   city: String,
   className?: String,
   dark?: Boolean,
@@ -38,7 +42,7 @@ const classes = (className, dark) => (
 
 const HomeAddressStreet = ({
   address,
-  address_cont,
+  addressCont,
   city,
   className,
   dark=false,
@@ -53,16 +57,17 @@ const HomeAddressStreet = ({
         className="pb_home_address_street_address"
         size={4}
     >
-      {address} {dot(houseStyle)} {houseStyle}
+      {titleize(address)} {dot(houseStyle)} {houseStyle}
     </Title>
+
     <Title
         className="pb_home_address_street_address"
         size={4}
     >
-      {address_cont}
+      {titleizeAddessCont(addressCont)}
     </Title>
     <Body color="light">
-      {city}, {state} {zipcode}
+      {titleize(city)}, {state} {zipcode}
     </Body>
     <Body
         className="home-hashtag"

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss

@@ -1,20 +0,0 @@
-@import "../tokens/opacity";
-@import "../tokens/border_radius";
-@import "../tokens/colors";
-
-[class^=pb_home_address_street] {
-  .home-hashtag {
-    background: rgba(6, 77, 255, $opacity_1);
-    border-radius: $border_rad_light;
-    font-weight: bold;
-    font-size: 10px;
-    color: #064DFF;
-    letter-spacing: 0;
-    padding: 1px 3px 1px 5px;
-    margin-right: 7px;
-  }
-
-  &[class$=_dark] .pb_home_address_street_address {
-    color: $white;
-  }
-}

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx

@@ -5,7 +5,7 @@ function HomeAddressStreetDark() {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
-        address_cont="Apt M18"
+        addressCont="Apt M18"
         city="West Chester"
         dark
         homeId={8250263}

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -5,7 +5,7 @@ function HomeAddressStreetDefault() {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
-        address_cont="Apt M18"
+        addressCont="Apt M18"
         city="West Chester"
         homeId={8250263}
         houseStyle="Colonial"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx

@@ -6,6 +6,7 @@ function HomeAddressStreetModified() {
     <HomeAddressStreet
         address="70 Prospect Ave"
         city="West Chester"
+        addressCont="M18"
         homeId={8250263}
         state="PA"
         zipcode="19382"

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -22,15 +22,15 @@ module Playbook
       end
 
       def city_state_zip
-        "#{city}, #{state} #{zipcode}"
+        "#{city.titleize}, #{state} #{zipcode}"
       end
 
       def address_house_style
-        "#{address} #{separator} #{house_style}"
+        "#{address.titleize} #{separator} #{house_style}"
       end
 
       def address_house_style2
-        address_cont
+        address_cont&.titleize
       end
 
       def separator

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb

@@ -17,18 +17,24 @@
 
 <%= pb_rails("label_pill", props: {
   label: "Fully Serviced",
-  pill_value: "198",
+  pill_value: "101",
   variant: "warning"
 }) %>
 
 <%= pb_rails("label_pill", props: {
   label: "Inbox",
-  pill_value: "198",
+  pill_value: "197",
   variant: "info"
 }) %>
 
 <%= pb_rails("label_pill", props: {
   label: "Outbox",
-  pill_value: "198",
+  pill_value: "13",
   variant: "neutral"
 }) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "Inbox",
+  pill_value: "218",
+  variant: "primary"
+}) %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.rb

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_label_pill/label_pill"
 
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral],
+                     values: %w[success warning error info neutral primary],
                      default: "neutral"
       prop :label
       prop :pill_value

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -0,0 +1,67 @@
+
+$selector: ".pb_nav_list";
+[class^=pb_nav_list][class*=_horizontal] {
+  ul {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  [class*=_border_item] {
+    transition-property: border-color;
+    transition-duration: 0.15s;
+    transition-timing-function: $bezier;
+    padding: 0;
+
+    [class*=_link] {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      padding: $space_sm $space_xl;
+      border: 0 solid transparent;
+      border-width: 0 0 3px 0;
+      border-color: $border_light;
+      transition-property: color, border-color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+      color: $text_lt_default;
+
+      &_icon {
+        font-size: $font_large;
+        margin-right: $space_sm;
+        color: $text_lt_lighter;
+      }
+
+      &_text {
+        font-size: $font_base;
+        font-weight: $bold;
+        color: $text_lt_default;
+      }
+
+      &:hover {
+        color: $primary;
+        #{$selector}_item_icon,
+        #{$selector}_item_text {
+          color: $primary;
+        }
+      }
+    }
+  }
+
+  [class*=_active] {
+    #{$selector}_item_link {
+      border-color: $primary;
+
+      [class*=_item_icon] {
+        color: $text_lt_default;
+      }
+
+      [class*=_item_text] {
+        color: $text_lt_default;
+        font-weight: $bold;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/_item.html.erb

@@ -2,8 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <a href=<%= object.link %> class="vertical_nav_list_item_link">
-     <span class="vertical_nav_list_item_link_text">
+    <a href="<%= object.link %>" class="pb_nav_list_item_link">
+     <span class="pb_nav_list_item_text">
       <%= object.text %><%= capture(&object.children) if !object.children.nil? %>
     </span>
    </a>

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/_item.jsx

@@ -13,22 +13,22 @@ const defaultProps = {
   active: false
 };
 
-class VerticalNavItem extends Component {
+class NavItem 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"
+      <li className={"pb_nav_list_border_item" + active}>
+        <a className="pb_nav_list_item_link"
             href={link}
         >
-          <span className="vertical_nav_list_item_link-text">{text}</span>
+          <span className="pb_nav_list_item_text">{text}</span>
         </a>
       </li>
     );
   }
 }
 
-VerticalNavItem.propTypes = propTypes;
-VerticalNavItem.defaultProps = defaultProps;
+NavItem.propTypes = propTypes;
+NavItem.defaultProps = defaultProps;
 
-export default VerticalNavItem;
+export default NavItem;

data/app/pb_kits/playbook/{pb_vertical_nav/_vertical_nav.html.erb → pb_nav/_nav.html.erb}

@@ -3,8 +3,8 @@
     data: object.data,
     class: object.classname) do %>
   <% if object.title %>
-    <%= content_tag(:div, class: "vertical_nav_list_title") do %>
-      <%= content_tag(:a, class: "vertical_nav_list_item_link_text", href: object.link) do %>
+    <%= content_tag(:div, class: "pb_nav_list_title") do %>
+      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
         <%= pb_rails("caption", props: { text: object.title }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/{pb_vertical_nav/_vertical_nav.jsx → pb_nav/_nav.jsx}

@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import VerticalNavItem from "./_item"
+import NavItem from "./_item"
 import {Caption} from "../"
 
 const propTypes = {
@@ -10,12 +10,12 @@ const propTypes = {
     ])
 }
 
-class VerticalNav extends Component {
-  static VerticalNavItem = VerticalNavItem
+class Nav extends Component {
+  static NavItem = NavItem
   render() {
     return (
-      <div className="vertical_nav_list">
-        <div className="vertical_nav_list_title">
+      <div className="pb_nav_list">
+        <div className="pb_nav_list_title">
           <a>
             <Caption />
           </a>
@@ -26,6 +26,6 @@ class VerticalNav extends Component {
   }
 }
 
-VerticalNav.propTypes = propTypes
+Nav.propTypes = propTypes
 
-export default VerticalNav
+export default Nav

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -0,0 +1,6 @@
+@import "../tokens/typography";
+@import "../tokens/animation-curves";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "./vertical_nav";
+@import "./horizontal_nav";