playbook_ui 12.15.0 → 12.16.0.pre.alpha.PLAY693tooltipwrongbg532

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
-  data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
+  metadata.gz: f44b91f87a4f93de80836093a1dd1eb7ffe5d77e243727e8d82391ffbb4e5abe
+  data.tar.gz: 42e9db818fa3e7f685be9f15f137828a6648e1a1f50ca1ce4fb6d23aa453c095
 SHA512:
-  metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
-  data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
+  metadata.gz: f733a9628bb2c9b5a0d56ec89c1e1abd84255ef26489e4ed82fb471b78658e1b3f364402f509981dbd6b96bd538733c14193e12f366b0c70db2c2d518e757cf5
+  data.tar.gz: 0d41813f51a41bff2c43f60f18db4b1fcae18e243614783ea680ae817bb9470135cf87c334856a4c97433921549415fa08461dfa7a2ed2008d1b2b1e846859a1

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -24,7 +24,7 @@ type BackgroundProps = {
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_background/background.rb

@@ -91,7 +91,7 @@ module Playbook
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
                   default: "div"
 
       prop :transition, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -43,6 +43,7 @@
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
       }
     }
   }

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -42,7 +42,7 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -10,11 +10,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant_class, rounded_class)
       end
 
     private
 
+      def variant_class
+        variant === "success" ? "success_sm" : variant
+      end
+
       def rounded_class
         rounded ? "rounded" : nil
       end

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -60,7 +60,6 @@ test('displays rounded corners', () => {
 
 test('displays color variants', () => {
   [
-    "success",
     "warning",
     "error",
     "info"
@@ -78,3 +77,19 @@ test('displays color variants', () => {
     cleanup()
   })
 })
+
+test('displays success variant', () => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={"success"}
+          variant={"success"}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_success_sm
+    `)
+
+    cleanup()
+
+})

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

@@ -8,7 +8,7 @@ $pb_body_colors: (
   lighter:        $text_lt_lighter,
   link:           $primary,
   error:          $error,
-  success:        $success,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
@@ -16,7 +16,7 @@ $pb_dark_body_colors: (
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
   error:          $error,
-  success:        $success,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
@@ -24,7 +24,7 @@ $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
   dark_error:     $error_dark_body,
-  positive:       $success,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

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

@@ -6,7 +6,7 @@ $pb_caption_colors: (
   light:          $text_lt_light,
   link:           $primary,
   lighter:        $text_lt_lighter,
-  success:        $success,
+  success:        $text_lt_success_sm,
   error:          $error,
 );
 
@@ -14,7 +14,7 @@ $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   link:           $primary,
-  success:        $success,
+  success:        $text_dk_success_sm,
   error:          $error,
 );
 

data/app/pb_kits/playbook/pb_docs/kit_api.html.erb

@@ -1,12 +1,299 @@
-<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+<% if !local_prop_data.present? %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
   <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
-  <%= pb_rails("card", props: { padding: "none" }) do %>
-    <%= pb_rails("list", props: { xpadding: true }) do %>
-      <% kit_props.each do |key, _def| %>
-        <%= pb_rails("list/item") do %>
-          <%= key %>
+    <%= pb_rails("card", props: { padding: "none" }) do %>
+      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
+        <% end %>
+      <% end %>
+      <%= pb_rails("section_separator") %>
+      <%= pb_rails("card/card_body", props: {}) do %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% global_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    padding: "xxs",
+                    background: "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning"
+                    }) do %>
+                        <%= value[:type].downcase %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
+                    <%= pb_rails("card", props: {
+                            classname: "card",
+                            padding: "xxs",
+                            background: "light",
+                            border_none: true,
+                            border_radius: "sm"
+                      })  do %>
+                        <%= pb_rails("body", props: {
+                          classname: "kearning"
+                        }) do %>
+                            <%= value[:default] %>
+                        <% end %>
+                      <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% else %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+    <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
+    <%= pb_rails("card", props: { padding: "none" }) do %>
+      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+        <% if local_prop_data.present? %>
+          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
+        <% end %>
+        <% if local_prop_data.present? %>
+          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
+        <% end %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
+          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
+        <% end %>
+      <% end %>
+      <%= pb_rails("section_separator") %>
+      <%= pb_rails("card/card_body", props: {}) do %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+          <% global_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    padding: "xxs",
+                    background: "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning"
+                    }) do %>
+                        <%= value[:type].downcase %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
+                    <%= pb_rails("card", props: {
+                            classname: "card",
+                            padding: "xxs",
+                            background: "light",
+                            border_none: true,
+                            border_radius: "sm"
+                      })  do %>
+                        <%= pb_rails("body", props: {
+                          classname: "kearning"
+                        }) do %>
+                            <%= value[:default] %>
+                        <% end %>
+                      <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        <% end %>
+        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
+          <thead>
+            <tr>
+              <th>Props</th>
+              <th>Type</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+          <% local_prop_data.each do |key, value|%>
+              <tr>
+                <td>
+                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
+                </td>
+                <td>
+                  <%= pb_rails("card", props: {
+                    classname: "card",
+                    padding: "xxs",
+                    background: "light",
+                    border_none: true,
+                    border_radius: "sm"
+                  })  do %>
+                    <%= pb_rails("body", props: {
+                      classname: "kearning"
+                    }) do %>
+                        <%= value[:type].downcase %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:values].present? %>
+                    <% value[:values].each do |item| %>
+                      <% if item != nil %>
+                        <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </td>
+                <td>
+                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
+                    <%= pb_rails("card", props: {
+                            classname: "card",
+                            padding: "xxs",
+                            background: "light",
+                            border_none: true,
+                            border_radius: "sm"
+                      })  do %>
+                        <%= pb_rails("body", props: {
+                          classname: "kearning"
+                        }) do %>
+                            <%= value[:default] %>
+                        <% end %>
+                      <% end %>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
         <% end %>
       <% end %>
     <% end %>
-  <% end %>
-</div>
+  </div>
+<% end %>
+
+<script>
+
+const globalNavAndTable = document.querySelectorAll('.global-active');
+const localNavAndTable = document.querySelectorAll('.local-active');
+
+globalNavAndTable.forEach(element => {
+  element.style.display = 'none';
+});
+
+const globalButton = document.getElementById("global-button");
+if (globalButton) {
+  globalButton.addEventListener("click", showGlobal);
+}
+
+const localButton = document.getElementById("local-button");
+if (localButton) {
+  localButton.addEventListener("click", showLocal);
+}
+
+function showGlobal() {
+  localNavAndTable.forEach(element => {
+    element.style.display = 'none';
+  });
+
+  globalNavAndTable.forEach(element => {
+    element.style.display = 'table';
+  });
+}
+
+function showLocal() {
+  localNavAndTable.forEach(element => {
+    element.style.display = 'table';
+  });
+
+  globalNavAndTable.forEach(element => {
+    element.style.display = 'none';
+  });
+}
+
+</script>

data/app/pb_kits/playbook/pb_docs/kit_api.rb

@@ -5,6 +5,48 @@ module Playbook
     class KitApi < Playbook::KitBase
       prop :kit, type: Playbook::Props::String, required: true
 
+      def kit_local_props
+        local = []
+        kit_props.each do |key, value|
+          value.kit != Playbook::KitBase && local.push({ key: key, value: value })
+        end
+        local
+      end
+
+      def local_prop_data
+        local_props = {}
+
+        kit_local_props.each do |key, _value|
+          name = key[:value].instance_variable_get(:@name)
+          type = key[:value].class.to_s.split("::").last
+          default = key[:value].instance_variable_get(:@default)
+          values = key[:value].instance_variable_get(:@values)
+          local_props[name.to_sym] = { "type": type, "default": default, "values": values }
+        end
+        local_props
+      end
+
+      def kit_global_props
+        global = []
+        kit_props.each do |key, value|
+          value.kit == Playbook::KitBase && global.push({ key: key, value: value })
+        end
+        global
+      end
+
+      def global_prop_data
+        global_props = {}
+
+        kit_global_props.each do |key, _value|
+          name = key[:value].instance_variable_get(:@name)
+          type = key[:value].class.to_s.split("::").last
+          default = key[:value].instance_variable_get(:@default)
+          values = key[:value].instance_variable_get(:@values)
+          global_props[name.to_sym] = { "type": type, "default": default, "values": values }
+        end
+        global_props
+      end
+
       def kit_props
         kit_class.props
       end

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,3 +1,5 @@
+<% example_html = ERB.new(example).result %>
+
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
   <div class="pb--kit-example">
     <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
@@ -13,6 +15,23 @@
     <div id="code-wrapper">
       <div class="pb--codeControls">
         <ul>
+          <% if type == "rails" %>
+            <li>
+              <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
+                Copy HTML
+              </a>
+              <%= pb_rails("popover", props: {
+                  classname: "popover-copy",
+                  close_on_click: "any",
+                  trigger_element_id: "copy-#{example_key}-trigger",
+                  tooltip_id: "copy-#{example_key}",
+                  position: "top",
+                  padding: "xs"
+                  }) do %>
+                    HTML Copied
+              <% end %>
+            </li>
+          <% end %>
           <li>
             <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
           </li>
@@ -26,3 +45,17 @@
     </div>
   <% end %>
 <% end %>
+
+<script>
+  function copyOnClick(content, elementID) {
+    copyContent(content)
+
+    const popover = document.getElementById(elementID);
+    popover.style.display = "block";
+
+    setTimeout(() => {
+      popover.style.display = "none";
+    }, 3000);
+  }
+</script>
+   

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -33,12 +33,25 @@ module Playbook
       def source
         @source ||= begin
           extension = type == "react" ? "jsx" : "html.erb"
-          read_kit_file("_#{example_key}.#{extension}")
+          stringified_code = read_kit_file("_#{example_key}.#{extension}")
+          sanitize_code(stringified_code)
         end
       end
 
     private
 
+      def sanitize_code(stringified_code)
+        stringified_code = stringified_code.gsub(%r{'../.*}, "'playbook-ui'")
+                                           .gsub(%r{"../.*}, '"playbook-ui"')
+        stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
+        if stringified_code.include?("props: { ")
+          stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
+        elsif type == "rails" && dark
+          stringified_code = stringified_code.gsub("props: {", "props: {\n    dark: true,")
+        end
+        stringified_code
+      end
+
       def read_kit_file(*args)
         path = ::Playbook.kit_path(kit, "docs", *args)
         path.exist? ? path.read : ""

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -7,7 +7,7 @@ export default class PbEnhancedElement {
   static _observer: ElementObserver
   element: Element
 
-  constructor(element: Element) {
+  constructor(element?: Element) {
     this.element = element
   }
 

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -94,13 +94,13 @@ const IconStatValue = (props: IconStatValueProps) => {
 
       <div>
         <Flex
-            vertical="bottom"
+            align="baseline"
         >
-          {titleSize(size)}
+            {titleSize(size)}
           &nbsp;
-          <Body
-              text={unit}
-          />
+            <Body
+                text={unit}
+            />
         </Flex>
         <Caption text={text} />
       </div>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -10,7 +10,7 @@
       variant: object.variant } %>
 
       <div>
-        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+        <%= pb_rails("flex", props: { align: "baseline" }) do %>
             <%= pb_rails "title", props: {
                 tag: "span",
                 text: object.value_string,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,7 +1,6 @@
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
-$input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
@@ -10,10 +9,6 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .text_input {
-    max-width: $input-max-width;
-  }
-
   .dropdown_open {
     .text_input {
       border-color: $primary !important;

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,12 +7,10 @@ module Playbook
                       default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
-      prop :is_valid
       prop :label, type: Playbook::Props::String,
                    default: ""
       prop :name, type: Playbook::Props::String,
                   default: ""
-      prop :onchange
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
@@ -30,10 +28,8 @@ module Playbook
           dark: dark,
           disabled: disabled,
           initialCountry: initial_country,
-          isValid: is_valid,
           label: label,
           name: name,
-          onChange: onchange,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
           value: value,