playbook_ui 2.9.7 → 2.9.8

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

@@ -1,3 +1,4 @@
 export {default as BadgeDefault} from './_badge_default.jsx';
 export {default as BadgeRounded} from './_badge_rounded.jsx';
 export {default as BadgeColors} from './_badge_colors.jsx';
+export {default as BadgeDark} from './_badge_dark.jsx';

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -27,4 +27,19 @@
   &[class*=_loading]  {
     @include pb_button_loading(true);
   }
+  // Dark Variants =============
+  &[class*=_dark]  {
+    &[class*=_primary]  {
+      @include pb_button_primary_dark;
+    }
+    &[class*=_secondary]  {
+      @include pb_button_secondary_dark;
+    }
+    &[class*=_link]  {
+      @include pb_button_link_dark;
+    }
+    &[class*=_disabled]  {
+      @include pb_button_disabled_dark;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -73,16 +73,16 @@ $pb_button_border_width: 1px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button($white, $primary_action, $primary_action);
+  @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
   &:hover {
-    @include pb_button_hover(rgba($secondary_action, $opacity_3));
+    @include pb_button_hover(rgba($primary_action, $opacity_3));
   }
 }
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button($transparent, $secondary_action);
+  @include pb_button($transparent, $primary_action);
 
   &:hover {
     @include pb_button_hover($transparent);
@@ -114,3 +114,37 @@ $pb_button_border_width: 1px;
     }
   }
 }
+
+// Dark Primary =================
+@mixin pb_button_primary_dark{
+  @include pb_button($primary_action);
+
+  &:hover {
+    @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+  }
+}
+
+// Dark Secondary ==============
+@mixin pb_button_secondary_dark{
+  @include pb_button(rgba($white, 0.2), $white);
+
+  &:hover {
+    @include pb_button_hover(rgba($primary_action, $opacity_2));
+  }
+}
+
+// Dark Link =============
+@mixin pb_button_link_dark {
+  @include pb_button($transparent, $primary_action);
+
+  &:hover {
+    @include pb_button_hover($transparent);
+  }
+}
+
+// Dark Disabled ====================
+@mixin pb_button_disabled_dark {
+  $disabled_color: rgba($white, $opacity_5);
+  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
+  pointer-events: none;
+}

data/app/pb_kits/playbook/pb_button/button.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_button/button"
 
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,
@@ -49,7 +51,11 @@ module Playbook
     private
 
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class, dark_class)
+      end
+
+      def dark_class
+        dark ? "dark" : nil
       end
 
       def disabled_class

data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.html.erb

@@ -1,4 +1,22 @@
-<%= pb_rails("button", props: { text: "Button Primary" }) %>
-<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
-<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
-<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
+<%= pb_rails("button", props: { 
+    text: "Button Primary",
+    dark: true 
+}) %>
+
+<%= pb_rails("button", props: { 
+    text: "Button Secondary", 
+    variant: "secondary", 
+    dark: true 
+}) %>
+
+<%= pb_rails("button", props: { 
+    text: "Button Link", 
+    variant: "link",
+    dark: true
+}) %>
+
+<%= pb_rails("button", props: { 
+    text: "Button Disabled",
+    disabled: true,
+    dark: true
+}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx

@@ -3,18 +3,23 @@ import {Button} from '../../'
 
 const ButtonDefaultDark = () => (
     <div>
-        <Button text="Button Primary" />
+        <Button text="Button Primary" 
+                dark
+        />
         <Button
                 text="Button Secondary"
                 variant="secondary"
+                dark
         />
         <Button
                 text="Button Link"
                 variant="link"
+                dark
         />
         <Button
                 text="Button Disabled"
                 disabled
+                dark
         />
     </div>
 )

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -1,33 +1,37 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 
 type CaptionProps = {
+  className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
-  large?: Boolean,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag: String,
   text: String,
 }
 
 const Caption = ({
+  className,
   children,
   dark=false,
-  large=false,
+  size='md',
   tag='div',
   text,
 }: CaptionProps) => {
 
   const Tag = `${tag}`
 
+  const css = classnames([
+    `pb_caption_kit` +
+    `_${size}` +
+    (dark === true ? '_dark' : ''),
+    className,
+  ])
+
   return (
-    <Tag
-        className={
-        `pb_caption_kit` +
-        (large === true ? '_lg' : '') +
-        (dark === true ? '_dark' : '')
-      }
-    >
+    <Tag className={css} >
       {text || children}
     </Tag>
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -7,6 +7,10 @@
     @include caption_lg;
   }
 
+  &[class*=_xs] {
+    @include caption_xs;
+  }
+
   &[class*=_dark] {
     @include caption_dark;
   }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -2,19 +2,23 @@
 @import "../tokens/typography";
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
-  & {
-    font-weight: $font_weight;
-    color: $text_lt_lighter;
-    text-transform: uppercase;
-    font-size: $font_size;
-    letter-spacing: $lspace_looser;
-  }
+  font-weight: $font_weight;
+  color: $text_lt_lighter;
+  text-transform: uppercase;
+  font-size: $font_size;
+  letter-spacing: $lspace_looser;
 }
 
 @mixin caption_lg {
   @include caption($font_large, $regular);
 }
 
+@mixin caption_xs {
+  @include caption($font_smaller, $regular);
+  text-transform: none;
+  letter-spacing: unset;
+}
+
 @mixin caption_dark {
   color: $text_dk_light;
 }

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -8,21 +8,20 @@ module Playbook
       partial "pb_caption/caption"
 
       prop :dark, type: Playbook::Props::Boolean, default: false
-      prop :large, type: Playbook::Props::Boolean, default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md base lg xl],
+                  default: "md"
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
 
       def classname
-        generate_classname("pb_caption_kit", large_class, dark_class)
+        generate_classname("pb_caption_kit", size, dark_class)
       end
 
     private
 
-      def large_class
-        large ? "lg" : nil
-      end
 
       def dark_class
         dark ? "dark" : nil

data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("caption", props: { text: "Caption", dark: true }) %>
-<%= pb_rails("caption", props: { text: "Caption Large", large: true, dark: true }) %>
+<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg', dark: true  }) %>
+<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs', dark: true  }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.jsx

@@ -5,7 +5,8 @@ function CaptionDark() {
   return (
     <div>
       <Caption dark text="Caption" />
-      <Caption dark large text="Caption Large" />
+      <Caption dark size="lg" text="Caption Large" />
+      <Caption dark size="xs" text="Subcaption" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("caption", props: { text: "Caption" }) %>
-<%= pb_rails("caption", props: { text: "Caption Large", large: true }) %>
+<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg' }) %>
+<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs' }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx

@@ -5,7 +5,8 @@ function CaptionLight() {
   return (
     <div>
       <Caption text="Caption" />
-      <Caption large text="Caption Large" />
+      <Caption size="lg" text="Caption Large" />
+      <Caption size="xs" text="Subcaption" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -54,12 +54,12 @@ $transition: $transition_cubic;
 
   &[class*=_dark] {
     input:checked ~ .pb_checkbox_checkmark {
-      background-color: $primary_action_dk;
-      border-color: $primary_action_dk;
+      background-color: $primary_action;
+      border-color: $primary_action;
     }
 
     &:hover .pb_checkbox_checkmark {
-      border-color: $primary_action_dk;
+      border-color: $primary_action;
     }
   }
 }

data/app/pb_kits/playbook/pb_contact/_contact.html.erb

@@ -4,6 +4,7 @@
     class: object.classname) do %>
   <%= pb_rails("body", props: { tag: "span", classname: "pb_contact_kit", color: "light" }) do %>
     <%= pb_rails("icon", props: { icon: object.contact_icon, fixed_width: true }) %>
-    <%= object.formatted_contact_info if object.contact_value%>
+    <%= object.formatted_contact_value if object.contact_value %>
+    <%= pb_rails("caption", props: { text: object.contact_detail, tag: 'span', size: 'xs' }) if object.contact_detail %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -6,11 +6,12 @@ import classnames from 'classnames'
 
 import {
   Body,
+  Caption,
   Icon,
 } from '../'
 
 type ContactProps = {
-  contactType?: 'cell' | 'home' | 'work' | 'email',
+  contactType?: 'cell' | 'home' | 'work' | 'email' | 'wrong number',
   className?: String | Array<String>,
   dark?: Boolean,
   contactValue: String,
@@ -32,7 +33,9 @@ const Contact = ({
 
   const formatDetail = (contactDetail) => {
     if (contactDetail !== undefined) {
-      return `\u00b7 ${contactDetail}`
+      return (
+        <Caption size="xs" text={contactDetail} tag="span" />
+      );
     } else {
       return contactDetail
     }
@@ -64,16 +67,19 @@ const Contact = ({
         return 'phone-office';
       case 'email':
         return 'envelope';
+      case 'wrong number' :
+        return 'slash-phone';
       default:
         return 'phone';
     }
   })(contactType)
 
+
   return (
     <div className={css}>
-      <Body dark={dark} color="light" >
+      <Body dark={dark} color="light" tag="span" className="pb_contact_kit" >
         <Icon icon={contactTypeIcon} fixedWidth="true" />
-        {` ${formatContact(contactValue, contactType)} ${formatDetail(contactDetail)}`}
+        {` ${formatContact(contactValue, contactType)} `}{formatDetail(contactDetail)}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -28,17 +28,13 @@ module Playbook
           "phone-office"
         when "email"
           "envelope"
+        when "wrong number"
+          "phone-slash"
         else # "unknown" || "other"
           "phone"
         end
       end
 
-      def formatted_contact_info
-        "#{formatted_contact_value} #{separator} #{contact_detail}"
-      end
-
-    private
-
       def formatted_contact_value
         if contact_type == "email"
           contact_value
@@ -47,13 +43,12 @@ module Playbook
         end
       end
 
+    private
+
       def formatted_value
         contact_value.to_s.gsub(/\D/, "")
       end
 
-      def separator
-        contact_detail ? "\u00b7" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -1,12 +1,10 @@
 <%= pb_rails("contact", props: {
   contact_type: "cell",
   contact_value: "349-185-9988",
-  contact_detail: "John's Cell",
 }) %>
 
 <%= pb_rails("contact", props: {
   contact_value: 5555555555,
-  contact_detail: "Home",
 }) %>
 
 <%= pb_rails("contact", props: {
@@ -15,7 +13,6 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
-  contact_detail: "John's Work",
 }) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -7,11 +7,9 @@ function ContactDefault() {
       <Contact
         contactType="cell"
         contactValue="349-185-9988"
-        contactDetail="John's Cell"
       />
       <Contact
         contactValue="5555555555"
-        contactDetail="Home"
       />
       <Contact
         contactType="email"
@@ -20,7 +18,6 @@ function ContactDefault() {
       <Contact
         contactType="work"
         contactValue="3245627482"
-        contactDetail="John's Work"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("contact", props: {
+  contact_type: "cell",
+  contact_value: "349-185-9988",
+  contact_detail: "Cell",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_value: 5555555555,
+  contact_detail: "Home",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work",
+  contact_value: "3245627482",
+  contact_detail: "Work",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import {Contact} from "../../"
+
+function ContactDefault() {
+  return (
+    <div>
+      <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+        contactDetail="Cell"
+      />
+      <Contact
+        contactValue="5555555555"
+        contactDetail="Home"
+      />
+      <Contact
+        contactType="work"
+        contactValue="3245627482"
+        contactDetail="Work"
+      />
+    </div>
+  )
+}
+
+export default ContactDefault

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

@@ -2,7 +2,9 @@ examples:
 
   rails:
   - contact_default: Default
+  - contact_with_detail: Detail Indicator
 
 
   react:
   - contact_default: Default
+  - contact_with_detail: Detail Indicator

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

@@ -1 +1,2 @@
 export {default as ContactDefault} from './_contact_default.jsx';
+export {default as ContactWithDetail} from './_contact_with_detail.jsx';

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,6 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
-  <%= object.display_value %>
+    class: object.classname) do %>
+    <% if object.size == "lg" %>
+      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
+    <% elsif object.size == "sm" %>
+      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
+      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
+    <% else %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
+  <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_date/date.rb

@@ -2,111 +2,39 @@
 
 module Playbook
   module PbDate
-    class Date < Playbook::PbKit::Base
+    class Date
       include ActionView::Helpers::TagHelper
       include ActionView::Context
+      include Playbook::Props
 
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_date
-                 configured_id
-                 configured_size
-                 configured_timestamp
-                 configured_timezone].freeze
+      partial "pb_date/date"
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     date: default_configuration,
-                     id: default_configuration,
-                     size: default_configuration,
-                     timestamp: default_configuration,
-                     timezone: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_date = date
-        self.configured_id = id
-        self.configured_size = size
-        self.configured_timestamp = timestamp
-        self.configured_timezone = timezone
-      end
-
-      def display_value
-        case size
-        when "lg"
-          display_value_lg
-        when "sm"
-          display_value_sm
-        else
-          display_value_xs
-        end
-      end
-
-      def kit_class
-        "pb_date_kit"
-      end
-
-      def to_partial_path
-        "pb_date/date"
-      end
-
-    private
+      prop :date, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm xs],
+                  default: "sm"
 
-      def timestamp
-        if is_set? configured_date
-          date = configured_date
-        else
-          date = configured_timestamp
-        end
-        Playbook::PbKit::PbDateTime.new(date, timezone_value)
+      def classname
+        generate_classname("pb_date_kit")
       end
 
-      def timezone_value
-        default_value(configured_timezone, "America/New_York")
+      def xs_date
+        "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def size
-        size_options = %w[lg sm xs]
-        one_of_value(configured_size, size_options, "sm")
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
 
-      def icon
-        pb_icon = Playbook::PbIcon::Icon.new(icon: "calendar", fixed_width: true)
-        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      def sm_date
+        "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def text
-        content_tag(:span) do
-          "#{timestamp.to_day_of_week.upcase} &middot; #{timestamp.to_month.upcase} #{timestamp.to_day}".html_safe
-        end
-      end
-
-      def display_value_xs
-        if is_set?(configured_timestamp) || is_set?(configured_date)
-          pb_value = Playbook::PbTitle::Title.new(size: 4, text: text)
-          ApplicationController.renderer.render(partial: pb_value, as: :object)
-        end
-      end
-
-      def display_value_sm
-        if is_set?(configured_timestamp) || is_set?(configured_date)
-          pb_value = Playbook::PbTitle::Title.new(size: 4, text: icon + text)
-          ApplicationController.renderer.render(partial: pb_value, as: :object)
-        end
-      end
-
-      def display_value_lg
-        if is_set?(configured_timestamp) || is_set?(configured_date)
-          pb_value_lg = Playbook::PbTitle::Title.new(size: 3, text: "#{timestamp.to_month.upcase} #{timestamp.to_day}")
-          ApplicationController.renderer.render(partial: pb_value_lg, as: :object)
-        end
-      end
+    private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def pb_date_time
+        pb_date_time ||= Playbook::PbKit::PbDateTime.new(date)
       end
-      attr_accessor(*PROPS)
     end
   end
 end