playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -0,0 +1,53 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+
+$pb_body_colors: (
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  lighter:        $text_lt_lighter,
+  dark:           $text_dk_default,
+  light_dark:     $text_dk_light,
+  lighter_dark:   $text_dk_lighter,
+);
+
+$pb_body_status: (
+  default:        $text_lt_default,
+  negative:       $error,
+  positive:       $success,
+);
+
+@mixin pb_body($color: $text_lt_default) {
+  margin: 0;
+  line-height: $lh_tight;
+  color: $color;
+}
+
+// Colors ======================
+@mixin pb_body_light {
+  @include pb_body($text_lt_light);
+}
+
+@mixin pb_body_lighter {
+  @include pb_body($text_lt_lighter);
+}
+
+@mixin pb_body_dark {
+  @include pb_body($text_dk_default);
+}
+
+@mixin pb_body_light_dark {
+  @include pb_body($text_dk_light);
+}
+
+@mixin pb_body_lighter_dark {
+  @include pb_body($text_dk_lighter);
+}
+
+// Statuses =====================
+@mixin pb_body_negative {
+  @include pb_body($error);
+}
+
+@mixin pb_body_positive {
+  @include pb_body($success);
+}

data/app/pb_kits/playbook/pb_body/body.rb

@@ -1,62 +1,85 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbBody
     class Body < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_color,
-          :configured_dark,
-          :configured_data,
-          :configured_id,
-          :configured_tag,
-          :configured_text].freeze
-
-      def initialize(classname: default_configuration,
-                   color: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   tag: default_configuration,
-                   text: default_configuration)
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_color
+                 configured_dark
+                 configured_data
+                 configured_id
+                 configured_tag
+                 configured_status
+                 block].freeze
+
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     color: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     status: default_configuration,
+                     tag: default_configuration,
+                     &block)
+
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_color = color
         self.configured_dark = dark
         self.configured_data = data
         self.configured_id = id
+        self.configured_status = status
         self.configured_tag = tag
-        self.configured_text = text
+        self.block = block_given? ? block : nil
       end
 
       def color
-        if configured_color == default_configuration
-          ""
-        else
-          "_#{configured_color}"
-        end
+        color_options = %w[default light lighter dark light_dark lighter_dark]
+        one_of_value(configured_color, color_options, "default")
+      end
+
+      def color_class
+        color != "default" ? color : nil
       end
 
       def dark
-        if configured_dark == default_configuration
-          ""
-        else
-          if (configured_dark == true)
-            "_dark"
-          end
-        end
+        is_true? configured_dark
+      end
+
+      def dark_class
+        true_value(configured_dark, "dark", nil)
+      end
+
+      def status
+        status_options = %w[neutral negative positive]
+        one_of_value(configured_status, status_options, "neutral")
+      end
+
+      def status_class
+        status != "neutral" ? status : nil
       end
 
       def tag
-        if configured_tag == default_configuration
-          "p"
-        else
-          configured_tag
-        end
+        default_value(configured_tag, "p")
       end
 
       def text
-        if configured_text == default_configuration
-          "This is some text"
-        else
-          configured_text
-        end
+        default_value(configured_text, "Body text")
+      end
+
+      def yield(context:)
+        context.capture(&block)
+      end
+
+      def kit_class
+        body_options = [
+          "pb_body",
+          color_class,
+          dark_class,
+          status_class,
+        ]
+        body_options.compact.join("_")
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb

@@ -1,3 +1,19 @@
-<%= pb_rails("body", props: { text: "I am a body kit (Default)", dark: true }) %>
-<%= pb_rails("body", props: { text: "I am a body kit (Light)", color: "light", dark: true }) %>
-<%= pb_rails("body", props: { text: "I am a body kit (Lighter)", color: "lighter", dark: true }) %>
+<%= pb_rails("body", props: { dark: true }) do %>
+  I am a body kit
+<% end %>
+<%= pb_rails("body", props: { color: "light", dark: true }) do %>
+I am a body kit (Light)
+<% end %>
+<%= pb_rails("body", props: { color: "lighter", dark: true }) do %>
+  I am a body kit (Lighter)
+<% end %>
+
+<br><br>
+
+<%= pb_rails("body", props: { status: "negative", dark: true }) do %>
+  I am a body kit (Status: negative)
+<% end %>
+
+<%= pb_rails("body", props: { status: "positive", dark: true }) do %>
+  I am a body kit (Status: positive)
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -1,3 +1,21 @@
-<%= pb_rails("body", props: { text: "I am a body kit (Default)"}) %>
-<%= pb_rails("body", props: { text: "I am a body kit (Light)", color: "light" }) %>
-<%= pb_rails("body", props: { text: "I am a body kit (Lighter)", color: "lighter" }) %>
+<%= pb_rails("body") do %>
+  I am a body kit
+<% end %>
+
+<%= pb_rails("body", props: { color: "light" }) do %>
+  I am a body kit (Light)
+<% end %>
+
+<%= pb_rails("body", props: { color: "lighter" }) do %>
+  I am a body kit (Lighter)
+<% end %>
+
+<br><br>
+
+<%= pb_rails("body", props: { status: "negative" }) do %>
+  I am a body kit (Status: negative)
+<% end %>
+
+<%= pb_rails("body", props: { status: "positive" }) do %>
+  I am a body kit (Status: positive)
+<% end %>

data/app/pb_kits/playbook/pb_button/_button.html.erb

@@ -1,9 +1,20 @@
-<%= content_tag(:div,
-    class: object.wrapperclass) do %>
-    <%= content_tag(:button,
-        id: object.id,
-        data: object.data,
-        class: object.classname("pb_button#{object.type}#{object.size}#{object.dark}")) do %>
-        <span><%= object.text %></span>
-    <% end %>
+<%
+  # Buttons should not have link options: href, target
+  options = {
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class),
+    disabled: object.disabled,
+    aria: object.aria
+  }
+  link_options = {
+    href: object.link,
+    target: object.new_window
+  }
+%>
+
+<%= content_tag(object.tag,
+    object.tag == "button" ? options : options.merge(link_options)) do %>
+    <%= object.loading_icon %>
+    <span class="pb_button_content"><%= object.yield(context: self) %></span>
 <% end %>

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

@@ -1,53 +1,29 @@
-@mixin kit_btn {
-  line-height: 38px;
-  padding: 0 15px;
-  border-radius: 4px;
-  border: 1px solid $ink_lightest;
-  font-size: 14px;
-  background: transparent;
-}
-
-.kit_btn_wrapper {
-  display: inline-block;
-
-  [class^=pb_button] {
-    @include kit_btn;
-
-    &[class*=_primary] {
-      background: $power_royal;
-      border: none;
-      color: $white;
-    }
-
-    &[class*=_danger] {
-      background: $power_red;
-      border: none;
-      color: $white;
-    }
+@import "./button_mixins";
 
-    &[class*=_dashed] {
-      background-color: $white;
-      color: $ink_lightest;
-      border: dashed 1px $ink_lightest;
-    }
+[class^=pb_button]{
+  // Variants =================
+  &[class*=_primary]  {
+    @include pb_button_primary;
+  }
+  &[class*=_secondary]  {
+    @include pb_button_secondary;
+  }
+  &[class*=_link]  {
+    @include pb_button_link;
+  }
 
-    &[class*=_large] {
-      font-size: $font_large;
-      padding: 0 15px;
-      height: 40px;
-    }
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
 
-    &[class*=_small] {
-      font-size: $font_smaller;
-      padding: 0 7px;
-      height: 24px;
-      line-height: normal;
-    }
+  // Block ====================
+  &[class*=_block]  {
+    @include pb_button_block;
+  }
 
-    &.red {
-      background: $power_red;
-      border: none;
-      color: $white;
-    }
+  // Loading ==================
+  &[class*=_loading]  {
+    @include pb_button_loading(true);
   }
 }

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

@@ -0,0 +1,116 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/shadows";
+@import "../tokens/spacing";
+@import "../tokens/transition";
+@import "../tokens/typography";
+
+$pb_button_size: 40px;
+$pb_button_v_padding: 7px;
+$pb_button_h_padding: 34px;
+$pb_button_hover_darken: 4%;
+$pb_button_border_width: 1px;
+
+@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+  text-rendering: optimizeLegibility;
+  font-size: $font_small;
+  font-weight: $regular;
+  text-align: center;
+  vertical-align: middle;
+  text-transform: none;
+  border-width: $pb_button_border_width;
+  border-color: $border;
+  border-style: solid;
+  border-radius: $border_rad_light;
+  min-height: $pb_button_size;
+  line-height: 1.5;
+  padding: $pb_button_v_padding $pb_button_h_padding;
+  cursor: pointer;
+  background-color: $bg;
+  color: $color;
+  outline: none;
+  transition: background $transition_default ease, color $transition_default ease;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-basis: auto;
+  width: fit-content;
+
+  .loading-icon {
+    position: absolute;
+    display: none;
+  }
+  .pb_button_content {
+    visibility: visible;
+  }
+
+  &:hover {
+    outline: none;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-width: $pb_button_border_width;
+    border-color: darken($bg, $pb_button_hover_darken);
+  }
+};
+
+@mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
+  background-color: $bg;
+}
+
+// Primary ======================
+@mixin pb_button_primary {
+  @include pb_button;
+
+  &:hover {
+    @include pb_button_hover;
+  }
+}
+
+// Secondary ====================
+@mixin pb_button_secondary {
+  @include pb_button($white, $primary_action, $primary_action);
+
+  &:hover {
+    @include pb_button_hover(rgba($secondary_action, $opacity_3));
+  }
+}
+
+// Link =========================
+@mixin pb_button_link {
+  @include pb_button($transparent, $secondary_action);
+
+  &:hover {
+    @include pb_button_hover($transparent);
+  }
+}
+
+// Disabled ====================
+@mixin pb_button_disabled {
+  $disabled_color: rgba($charcoal, $opacity_5);
+  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
+  pointer-events: none;
+}
+
+// Block =======================
+@mixin pb_button_block {
+  display: flex;
+  flex-basis: 100%;
+  width: 100%;
+}
+
+// Loading =====================
+@mixin pb_button_loading($loading: false) {
+  @if $loading == true {
+    .loading-icon {
+      display: block;
+    }
+    .pb_button_content {
+      visibility: hidden;
+    }
+  }
+}