playbook_ui_docs 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -3,13 +3,30 @@ import React from 'react'
 import StarRating from '../_star_rating'
 
 const StarRatingHide = (props) => (
+  <>
 
-  <StarRating
-      hideRating
-      rating={3.5}
-      {...props}
-  />
+    <StarRating
+        rating={3}
+        {...props}
+    />
 
+    <br />
+
+    <StarRating
+        layoutOption={"number"}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        layoutOption={"onestar"}
+        rating={3}
+        {...props}
+    />
+
+  </>
 )
 
 export default StarRatingHide

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 3 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 4 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 6 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 7 }) %>
+</br>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 8 }) %>
+</br>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingNumberConfig = (props) => (
+  <>
+
+    <StarRating
+        denominator={3}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        denominator={4}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        denominator={5}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        denominator={6}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        denominator={7}
+        rating={3}
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        denominator={8}
+        rating={3}
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingNumberConfig

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("star_rating", props: { rating: 3, size: "xs" }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "sm" }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "md" }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg" }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "number" }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "onestar" }) %>
+
+<br>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingSizeOptions = (props) => (
+  <>
+
+    <StarRating
+        rating={3}
+        size="xs"
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={3}
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={3}
+        size="md"
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        layoutOption="number"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+    <br />
+
+    <StarRating
+        layoutOption="onestar"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingSizeOptions

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

@@ -1,9 +1,14 @@
 examples:
-
   rails:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options
 
   react:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options

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

@@ -1,3 +1,9 @@
 export { default as StarRatingDefault } from './_star_rating_default.jsx'
 
+export { default as StarRatingColorOptions } from './_star_rating_color_options.jsx'
+
 export { default as StarRatingHide } from './_star_rating_hide.jsx'
+
+export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
+
+export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -1,12 +1,37 @@
-<%= pb_rails("table", props: { size: "lg"} ) do %>
+<%# Example data for demonstration purposes %>
+<% data_rows = [
+    { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
+    { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
+    { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
+    { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
+    { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
+  ]
+%>
+
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% data_rows.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
         text: "Territory",
         id: "territory",
         sort_menu: [
-          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
-          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
+          { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
+          { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
@@ -14,45 +39,36 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
         text: "Age",
         id: "age",
-        sort_dropdown: true,
         sort_menu: [
-          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
-          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
+          { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
+          { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td>Ter 1</td>
-      <td>First Name 1</td>
-      <td>Last Name 1</td>
-      <td>Age 1</td>
-      <td>Job 1</td>
-    </tr>
-    <tr>
-      <td>Ter 2</td>
-      <td>First Name 2</td>
-      <td>Last Name 2</td>
-      <td>Age 2</td>
-      <td>Job 2</td>
-    </tr>
-    <tr>
-      <td>Ter 3</td>
-      <td>First Name 3</td>
-      <td>Last Name 3</td>
-      <td>Age 3</td>
-      <td>Job 3</td>
-    </tr>
+    <% data_rows.each do |row| %>
+      <tr>
+        <% row.each do |key, value| %>
+          <%= pb_rails("background", props: {
+              background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
+              text_align: (value.is_a?(Integer) ? "right" : ""),
+              tag: "td"
+          }) do %>
+            <%= value %>
+          <% end %>
+        <% end %>
+      </tr>
+    <% end %>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_header.md

@@ -6,3 +6,8 @@ presence of `sort_menu` enables the sort link within the header
 * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
   * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
 * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
   <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-1'>Hover here (Top)</span>
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -9,12 +9,10 @@ const TooltipDefaultReact = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>
       <Tooltip 
-          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -9,7 +9,6 @@ const TooltipDelay = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -9,7 +9,6 @@ const TooltipInteraction = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -7,7 +7,6 @@ const TooltipMargin = (props) => {
   return (
     <Flex 
         flexDirection='row' 
-        justifyContent='center' 
         wrap
     >
       <Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("flex", props: { orientation: "column" }) do %>
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
   <% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.html.erb

@@ -0,0 +1,39 @@
+
+<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
+  <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
+  <%= pb_rails("body") do %>
+      Tooltip is: <code id="show-tooltip-state">enabled</code>
+  <% end %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id="truncated-tooltip-1">Hover me</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-1",
+      tooltip_id: "truncated-1",
+      position: "right",
+    }) do %>
+        Tooltip is enabled
+    <% end %>
+  <% end %>
+<% end %>
+
+
+<script>
+const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
+const showTooltipStateText = document.getElementById("show-tooltip-state");
+
+function hideTooltipIfNotTruncated(tooltipId) {
+  const tooltipElement = document.querySelector(
+    `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
+  );
+
+  tooltipElement.dataset.pbTooltipShowTooltip =
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";
+
+  showTooltipStateText.innerText = 
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
+}
+
+toggleTooltipButton.addEventListener("click", () => {
+  hideTooltipIfNotTruncated("truncated-1");
+});
+</script>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md

@@ -0,0 +1,5 @@
+You can build your own logic to control whether to show or hide the tooltip. 
+
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.
+
+Each Tooltip has a `dataset` with the `pbTooltipShowTooltip` property set to true by default. To update it, access the `pbTooltipShowTooltip` in the dataset of your tooltip element: `yourTooltip.dataset.pbTooltipShowTooltip = 'false'`

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -0,0 +1,45 @@
+// @flow
+
+import React, { useState } from 'react'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+
+const TooltipShowTooltipReact = (props) => {
+  const [showTooltip, setShowTooltip] = useState(true);
+
+  return (
+   <Flex 
+       flexDirection='column'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Button 
+          onClick={()=> setShowTooltip(!showTooltip)}
+          text="Toggle state"
+      />
+    </FlexItem>
+    <FlexItem>
+      <Body >
+        <p>
+          {'Tooltip is: '}
+          <code>{showTooltip ? "enabled" : "disabled"}</code>
+        </p>
+      </Body>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='right'
+          showTooltip={showTooltip}
+          text='Tooltip is enabled'
+          zIndex={10}
+          {...props}
+      >
+        {'Hover me.'}
+      </Tooltip>
+    </FlexItem>
+
+   </Flex>
+  )
+}
+
+export default TooltipShowTooltipReact

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md

@@ -0,0 +1,3 @@
+You can build your own logic to control whether to show the tooltip using the `showTooltip` prop. Its default value is `true`.
+
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.

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

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_show_tooltip: Show Tooltip
 
   react:
   - tooltip_default_react: Default
@@ -11,3 +12,5 @@ examples:
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
+  - tooltip_show_tooltip_react: Show Tooltip
+

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

@@ -3,3 +3,4 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
+export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/dist/app/components/playbook/pb_docs/kit_example.html.erb

@@ -1,7 +1,7 @@
 <% example_html = ERB.new(example).result %>
 
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <% unless (action_name == "kit_show_swift") %>
+  <% unless (type == "swift") %>
     <div class="pb--kit-example">
       <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
       <br />
@@ -9,12 +9,12 @@
       <br>
     </div>
   <% else %>
-    <div class="pb--kit-example-markdown pt_none markdown <%= dark ? "dark" : "" %>">
+    <div class="pb--kit-example-markdown pt_none markdown kit_show_swift <%= dark ? "dark" : "" %>">
       <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
       <%= render_markdown(description) %>
     </div>
   <% end %>
-  <% if show_code %>
+  <% if show_code && type != "swift" %>
     <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>
     </div>