playbook_ui 12.14.0 → 12.16.0.pre.alpha.PLAY693tooltipwrongbg532

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,

data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx}

@@ -1,14 +1,12 @@
-/* @flow */
+import React from "react"
+import classnames from "classnames"
 
-import React from 'react'
-import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from "../utilities/props"
 
-import { buildAriaProps, buildDataProps } from '../utilities/props'
-
-import Icon from '../pb_icon/_icon'
+import Icon from "../pb_icon/_icon"
 
 type StarRatingProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
   data?: object,
   fixedWidth?: boolean,
@@ -16,7 +14,7 @@ type StarRatingProps = {
   icon?: string,
   id?: string,
   rating: number,
-}
+};
 
 const StarRating = ({
   aria = {},
@@ -29,15 +27,15 @@ const StarRating = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
-    'pb_star_rating_kit', className,
+    "pb_star_rating_kit", className,
   ])
 
   const starCount = () => (
-    [...Array(parseInt(rating))]
+    [...Array(Math.floor(rating))]
   )
 
   const hasHalfStar = () => (
-    parseFloat(rating) % 1 !== 0
+    rating % 1 !== 0
   )
 
   return (
@@ -47,12 +45,11 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <If condition={!hideRating}>
-        <div className="pb_star_rating_number">
-          {rating}
-        </div>
-      </If>
-
+    {!hideRating && (
+      <div className="pb_star_rating_number">
+        {rating}
+      </div>
+    )}
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
@@ -62,13 +59,12 @@ const StarRating = ({
                 key={index}
             />
           ))}
-
-          <If condition={hasHalfStar()}>
+          {hasHalfStar() && (
             <Icon
-                fixedWidth={false}
-                icon="star-half"
+              fixedWidth={false}
+              icon="star-half"
             />
-          </If>
+          )}
         </div>
 
         <div className="pb_star_rating_base">

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import StarRating from "./_star_rating";
+
+const testId = "star-rating-kit";
+
+describe("Star Rating Kit", () => {
+  test("Expects to have correct classname", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
+
+  test('should render aria-label', () => {
+    render(
+      <StarRating
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+  });
+
+  test("Displays two highlighted stars", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
+
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={3.5}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
+
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});