playbook_ui 2.7.2 → 2.8.1

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

@@ -1,75 +1,119 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbButton
     class Button < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_dark,
-          :configured_data,
-          :configured_id,
-          :configured_size,
-          :configured_text,
-          :configured_type,
-          :configured_wrapperclass].freeze
-
-      def initialize(classname: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   text: default_configuration,
-                   type: default_configuration,
-                   size: default_configuration,
-                   wrapperclass: default_configuration)
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_data
+                 configured_disabled
+                 configured_full_width
+                 configured_id
+                 configured_link
+                 configured_loading
+                 configured_new_window
+                 configured_variant
+                 configured_tag
+                 configured_text
+                 block].freeze
+
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     disabled: default_configuration,
+                     full_width: default_configuration,
+                     id: default_configuration,
+                     link: default_configuration,
+                     loading: default_configuration,
+                     new_window: default_configuration,
+                     variant: default_configuration,
+                     tag: default_configuration,
+                     text: default_configuration,
+                     &block)
+        self.configured_aria = aria
         self.configured_classname = classname
-        self.configured_dark = dark
         self.configured_data = data
+        self.configured_disabled = disabled
+        self.configured_full_width = full_width
         self.configured_id = id
+        self.configured_link = link
+        self.configured_loading = loading
+        self.configured_new_window = new_window
+        self.configured_variant = variant
+        self.configured_tag = tag
         self.configured_text = text
-        self.configured_type = type
-        self.configured_size = size
-        self.configured_wrapperclass = wrapperclass
+        self.block = block_given? ? block : nil
       end
 
-      def wrapperclass
-        if configured_wrapperclass == default_configuration
-          "kit_btn_wrapper"
-        else
-          configured_wrapperclass
-        end
+      def disabled
+        is_true? configured_disabled
       end
 
-      def text
-        if configured_text == default_configuration
-          "Button"
-        else
-          configured_text
-        end
+      def loading
+        is_true? configured_loading
       end
 
-      def type
-        if configured_type == default_configuration
-          ""
-        else
-          "_#{configured_type}"
-        end
+      def loading_class
+        loading ? "loading" : nil
       end
 
-      def size
-        if configured_size == default_configuration
-          ""
-        else
-          "_#{configured_size}"
-        end
+      def loading_icon
+        pb_icon = Playbook::PbIcon::Icon.new(icon: "spinner",
+                                             pulse: true,
+                                             fixed_width: true,
+                                             classname: "loading-icon")
+        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      end
+
+      def disabled_class
+        true_value(disabled, "disabled", "enabled")
+      end
+
+      def full_width_class
+        true_value(configured_full_width, "block", "inline")
+      end
+
+      def link
+        default_value(configured_link, "")
       end
 
-      def dark
-        if configured_dark == default_configuration
-          ""
+      def variant
+        variant_options = %w[primary secondary link]
+        one_of_value(configured_variant, variant_options, "primary")
+      end
+
+      def tag
+        tag_options = %w[button a]
+        if link.empty?
+          one_of_value(configured_tag, tag_options, "button")
         else
-          if (configured_dark == true)
-            "_dark"
-          end
+          "a"
         end
       end
 
+      def new_window
+        true_value(configured_new_window, "_blank", "_self")
+      end
+
+      def text
+        default_value(configured_text, "")
+      end
+
+      def yield(context:)
+        !block.nil? ? context.capture(&block) : text
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_button",
+          variant,
+          full_width_class,
+          disabled_class,
+          loading_class,
+        ]
+        kit_options.compact.join("_")
+      end
+
       def to_partial_path
         "pb_button/button"
       end

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

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>

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

@@ -0,0 +1,4 @@
+<%= pb_rails("button") do %>
+  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
+  <span>Button with Block Content</span>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%= 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 }) %>

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

@@ -0,0 +1,4 @@
+<%= 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 }) %>

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

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button Full Width", full_width: true }) %>

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

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>

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

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>

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

@@ -1,8 +1,12 @@
 examples:
   rails:
-  - button_sizes: Button Sizes
-  - button_light: Buttons Light UI
-  - button_dark: Buttons Dark UI
+  - button_default: Button Variants
+  - button_full_width: Button Full Width
+  - button_link: Button Links
+  - button_loading: Button Loading
+  - button_block_content: Button Block Content
+  - button_accessibility: Button Accessibility Options
+  - button_default_dark: Button Variants Dark
   react:
   - button_sizes: Button Sizes
   - button_light: Buttons Light UI

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,2 +1,5 @@
-<%= content_tag(:"#{object.tag}", object.text,
-    class: object.classname("caption#{object.large}#{object.dark}")) %>
+<%= content_tag(object.tag, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class),
+    aria: object.aria) %>

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

@@ -1,5 +1,13 @@
 @import "caption_mixin";
 
-.caption {
+[class^=pb_caption] {
   @include caption;
+
+  &[class*=_lg]  {
+    @include caption_lg;
+  }
+
+  &[class*=_dark]  {
+    @include caption_dark;
+  }
 }

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

@@ -1,23 +1,20 @@
 @import "../tokens/colors";
 @import "../tokens/typography";
 
-@mixin caption($font_size: $font_smaller) {
-  &, &_dark {
-    @if $font_size == 12px {
-      font-weight: $bold;
-    }
+@mixin caption($font_size: $font_smaller, $font_weight: $bold) {
+  & {
+    font-weight: $font_weight;
+    color: $text_lt_lighter;
     text-transform: uppercase;
     font-size: $font_size;
-  }
-  & {
-    color: $ink_lightest;
-  }
-  &_dark {
-    color: $white_opacity_6;
+    letter-spacing: $lspace_looser;
   }
 }
 
-
 @mixin caption_lg {
-  @include caption($font_large);
+  @include caption($font_large, $regular);
+}
+
+@mixin caption_dark {
+  color: $text_dk_light;
 }

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

@@ -1,21 +1,26 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbCaption
     class Caption < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_dark,
-          :configured_data,
-          :configured_id,
-          :configured_large,
-          :configured_tag,
-          :configured_text].freeze
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_dark
+                 configured_data
+                 configured_id
+                 configured_large
+                 configured_tag
+                 configured_text].freeze
 
-      def initialize(classname: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   large: default_configuration,
-                   tag: default_configuration,
-                   text: default_configuration)
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     large: default_configuration,
+                     tag: default_configuration,
+                     text: default_configuration)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_dark = dark
         self.configured_data = data
@@ -26,39 +31,29 @@ module Playbook
       end
 
       def tag
-        if configured_tag == default_configuration
-          "div"
-        else
-          configured_tag
-        end
+        tag_options = %w[h1 h2 h3 h4 h5 h6 p span div]
+        one_of_value(configured_tag, tag_options, "div")
       end
 
       def text
-        if configured_text == default_configuration
-          "Caption"
-        else
-          configured_text
-        end
+        default_value(configured_text, "Caption")
+      end
+
+      def large_class
+        true_value(configured_large, "lg", nil)
       end
 
-      def large
-        if configured_large == default_configuration
-          ""
-        else
-          if (configured_large == true)
-            "_lg"
-          end
-        end
+      def dark_class
+        true_value(configured_dark, "dark", nil)
       end
 
-      def dark
-        if configured_dark == default_configuration
-          ""
-        else
-          if (configured_dark == true)
-            "_dark"
-          end
-        end
+      def kit_class
+        caption_options = [
+          "pb_caption",
+          large_class,
+          dark_class,
+        ]
+        caption_options.reject(&:nil?).join("_")
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_card")) do %>
-    <div><%= object.yield(context: self) %></div>
+    class: object.classname(object.kit_class),
+    aria: object.aria) do %>
+  <div><%= object.yield(context: self) %></div>
 <% end %>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,9 +1,10 @@
+@import "../tokens/shadows";
+
 .pb_card {
   width: 300px;
   height: 200px;
   background: white;
   border: 1px solid #dedede;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 20px;
   margin: 20px 0;
 
@@ -11,4 +12,22 @@
     font-weight: normal;
     font-size: 28px;
   }
+
+  &.shadow {
+    &_shallow {
+      box-shadow: $shadow_shallow;
+    }
+    &_default {
+      box-shadow: $shadow_default;
+    }
+    &_deep {
+      box-shadow: $shadow_deep;
+    }
+    &_deeper {
+      box-shadow: $shadow_deeper;
+    }
+    &_deepest {
+      box-shadow: $shadow_deepest;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_card/card.rb

@@ -1,25 +1,50 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbCard
     class Card < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_data,
-          :configured_id,
-          :block].freeze
-
-      def initialize(classname: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   &block)
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_shadow
+                 block].freeze
+
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     shadow: default_configuration,
+                     &block)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id
+        self.configured_shadow = shadow
         self.block = block_given? ? block : nil
       end
 
+      def shadow
+        shadow_options = %w[shallow default deep deeper deepest]
+        one_of_value(configured_shadow, shadow_options, "")
+      end
+
+      def shadow_class
+        adjusted_value(shadow, "shadow_#{shadow}", nil)
+      end
+
       def yield(context:)
         context.capture(&block)
       end
 
+      def kit_class
+        card_options = [
+          "pb_card",
+          shadow_class,
+        ]
+        card_options.reject(&:nil?).join(" ")
+      end
+
       def to_partial_path
         "pb_card/card"
       end