playbook_ui 13.30.0 → 13.31.0.pre.alpha.PBNTR342navtabbing3230

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", tabbing: true }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_nav_item_tab: "about" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_nav_item_tab: "case_studies" }, cursor: "pointer" }) %>
+<% end %>
+
+<div id="about">
+  This is about!
+</div>
+
+<div id="case_studies">
+  This is case studies!
+</div>

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

@@ -19,6 +19,7 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default

data/app/pb_kits/playbook/pb_nav/index.js

@@ -0,0 +1,43 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const NAV_SELECTOR = '[data-pb-nav-tab]'
+const NAV_ITEM_SELECTOR = '[data-pb-nav-item-tab]'
+
+export default class PbNav extends PbEnhancedElement {
+    static get selector() {
+        return NAV_SELECTOR
+    }
+
+    connect() {
+        this.hideAndAddEventListeners()
+    }
+
+    hideAndAddEventListeners() {
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItem) => {
+            if (!navItem.className.includes('active')) {
+                this.changeContentDisplay(navItem.dataset.pbNavItemTab, 'none')
+            }
+
+            navItem.addEventListener('click', event => this.handleNavItemClick(event))
+        })
+    }
+
+    handleNavItemClick(event) {
+        event.preventDefault()
+        const navItem = event.target.closest(NAV_ITEM_SELECTOR)
+        this.changeContentDisplay(navItem.dataset.pbNavItemTab, 'block')
+
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItemSelected) => {
+            if (navItem !== navItemSelected) {
+                this.changeContentDisplay(navItemSelected.dataset.pbNavItemTab, 'none')
+            }
+        })
+    }
+
+    changeContentDisplay(contentId, display) {
+        const content = document.getElementById(contentId)
+        content.style.display = display
+    }
+}

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -22,7 +22,7 @@
           </span>
         <% end %>    
        <% end %>
-      <%= pb_rails("collapsible/collapsible_content") do %>
+      <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -12,6 +12,7 @@ module Playbook
                          default: "regular"
       prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
+      prop :collapsed, type: Playbook::Props::Boolean, default: true
       prop :link
       prop :text
       prop :collapsible_trail, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -13,11 +13,20 @@ module Playbook
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
+      prop :tabbing, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
       end
 
+      def data
+        if tabbing
+          Hash(prop(:data)).merge(pb_nav_tab: true)
+        else
+          prop(:data)
+        end
+      end
+
       def highlight_class
         highlight ? "highlight" : nil
       end

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+                <th>Column 5</th>
+            </tr>
+        </thead>
+        <tbody>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1,7 @@
-Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
 
-The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
 
-The `position` key accepts `top`, `bottom`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -2,3 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -0,0 +1,27 @@
+<%= pb_content_tag(:div,
+aria: object.aria,
+class: object.classname,
+data: object.data,
+id: object.id,
+**combined_html_options) do %>
+    <% if is_size_percentage %>
+        <div class="overlay_linear_gradient"
+        style="background: <%= previous_overlay %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="overlay_linear_gradient"
+            style="background: <%= subsequent_overlay %>"></div>
+        <% end %>
+
+    <% else %>
+        <div class="<%= previous_overlay_class_name %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbOverlay
+    class Overlay < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[card_light bg_light card_dark bg_dark],
+                   default: "card_light"
+      prop :layout, type: Playbook::Props::HashProp,
+                    default: { "bottom": "full" }
+
+      def classname
+        generate_classname("pb_overlay")
+      end
+
+      def position
+        layout.keys[0]
+      end
+
+      def size
+        layout.values[0]
+      end
+
+      def is_size_percentage
+        size.include?("%")
+      end
+
+      def previous_overlay
+        "linear-gradient(#{previous_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def subsequent_overlay
+        "linear-gradient(#{subsequent_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def previous_overlay_class_name
+        "overlay_#{color}_#{previous_overlay_direction_token}_#{size}"
+      end
+
+      def subsequent_overlay_class_name
+        "overlay_#{color}_#{subsequent_overlay_direction_token}_#{size}"
+      end
+
+      def previous_overlay_direction
+        previous_overlay_direction_map[position.to_sym]
+      end
+
+      def subsequent_overlay_direction
+        subsequent_overlay_direction_map[position.to_sym]
+      end
+
+      def previous_overlay_direction_token
+        has_subsequent_overlay ? previous_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def subsequent_overlay_direction_token
+        has_subsequent_overlay ? subsequent_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def previous_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to right",
+          "y": "to top",
+        }
+      end
+
+      def subsequent_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to left",
+          "y": "to bottom",
+        }
+      end
+
+      def previous_overlay_direction_map_token
+        {
+          "x": "left",
+          "y": "top",
+        }
+      end
+
+      def subsequent_overlay_direction_map_token
+        {
+          "x": "right",
+          "y": "bottom",
+        }
+      end
+
+      def has_subsequent_overlay
+        position == "x".to_sym || position == "y".to_sym
+      end
+
+      def color_map
+        {
+          "card_light": "#fff",
+          "bg_light": "#F3F7FB",
+          "card_dark": "#231E3D",
+          "bg_dark": "#0a0527",
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -86,33 +86,18 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
+    // replace default trix "block code" button with "inline code" button
     let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
-
-    // set button attributes
-    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    if (!inlineCodeButton) {
+      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+      blockCodeButton.hidden = true
+      // set button attributes
+      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    } 
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
-    const getCodeFormattingType = (): string => {
-      if (editor.attributeIsActive('code')) return 'block'
-      if (editor.attributeIsActive('inlineCode')) return 'inline'
-
-      const range = editor.getSelectedRange()
-      if (range[0] == range[1]) return 'block'
-
-      const text = editor.getSelectedDocument().toString().trim()
-      return /\n/.test(text) ? 'block' : 'inline'
-    }
-
-    // DOM event listeners
-    element.addEventListener('trix-selection-change', () => {
-      const type = getCodeFormattingType()
-      blockCodeButton.hidden = type == 'inline'
-      inlineCodeButton.hidden = type == 'block'
-    })
-
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, domSafeProps } from "../utilities/globalProps";
 
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
@@ -16,6 +16,7 @@ export type SelectableListItemProps = {
   className?: string;
   data?: GenericObject;
   defaultChecked?: boolean;
+  dragId?: string;
   dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -33,6 +34,7 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
+  dragId,
   dragHandle = true,
   defaultChecked,
   htmlOptions = {},
@@ -67,7 +69,7 @@ const SelectableListItem = ({
         {...props}
         className={classnames(checkedState ? "checked_item" : "", className)}
         dragHandle={dragHandle}
-        id={id}
+        dragId={dragId}
     >
       <div 
           {...ariaProps} 
@@ -106,7 +108,9 @@ const SelectableListItem = ({
                 text={label}
                 type="radio"
                 value={value}
-                {...props}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                {...domSafeProps(props)}
             />
             {children}
           </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -14,7 +14,7 @@ type SelectableListProps = {
   children?: React.ReactElement[],
   className?: string,
   data?: GenericObject,
-  draggable?: boolean,
+  enableDrag?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
@@ -26,7 +26,7 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
-    draggable = false,
+    enableDrag = false,
     htmlOptions = {},
     id,
   } = props
@@ -68,7 +68,7 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List draggable={draggable}
+      <List enableDrag={enableDrag}
           variant={props.variant}
       >
         {selectableListItems}

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -52,6 +52,20 @@
     data: object.data,
     id: object.id,
     **combined_html_options) do %>
-      <%= content.presence || object.text %>
+      <% unless sorting_style? %>
+        <%= content.presence || object.text %>
+      <% else %>
+        <%= link_to next_link, style: link_style do %>
+          <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>
+            <%= content.presence || object.text %>
+              <% if sorting_style? %>
+                <%= pb_rails("icon", props: { icon: object.sort_icon(active_item[:direction], active_item[:active]),
+                                              fixed_width: true,
+                                              classname: active_item.any? ? "pb_th_active" : "",
+                                              padding_left: "xs" }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -14,7 +15,7 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-}
+} & GlobalProps
 
 const TimelineItem = ({
   className,
@@ -24,7 +25,7 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-
+  ...props
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
@@ -32,23 +33,23 @@ const TimelineItem = ({
 
   return (
     <div 
-      {...htmlProps}
-      className={classnames(timelineItemCss, className)}
+        {...htmlProps}
+        className={classnames(timelineItemCss, globalProps(props), className)}
     >
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked
-            align="center"
-            date={date}
-            size="sm"
+              align="center"
+              date={date}
+              size="sm"
           />
         }
       </div>
       <div className="pb_timeline_item_step">
         <IconCircle
-          icon={icon}
-          size="xs"
-          variant={iconColor}
+            icon={icon}
+            size="xs"
+            variant={iconColor}
         />
         <div className="pb_timeline_item_connector" />
       </div>

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
 
@@ -14,7 +15,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-}
+} & GlobalProps
 
 const Timeline = ({
   aria = {},
@@ -25,6 +26,7 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
+  ...props
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -33,11 +35,11 @@ const Timeline = ({
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(timelineCss, className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(timelineCss, globalProps(props), className)}
+        id={id}
     >
       {children}
     </div>

data/app/pb_kits/playbook/playbook-rails.js

@@ -39,6 +39,9 @@ PbDropdown.start()
 import PbAdvancedTable from './pb_advanced_table'
 PbAdvancedTable.start()
 
+import PbNav from './pb_nav'
+PbNav.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -5,10 +5,11 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
+    $lineHeight: $lh_tighter,
+    $letterSpacing: $lspace_tight
 ){
   font-size: $fontSize;
-  letter-spacing: $lspace_tight;
+  letter-spacing: $letterSpacing;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -29,8 +30,7 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em;
+  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
 @mixin pb_title_dark {

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       28px !default;
+$font_larger:       27px !default;
 $font_large:        20px !default;
-$font_base:         16px !default;
+$font_base:         15.5px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px !default;
-$heading_2: 34px !default;
+$heading_1: 44px !default;
+$heading_2: 32px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           0 !default;
+$lspace_normal:           .003em !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          600 !default;
+$bold:          700 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
+$extrabold:     700 !default;
+$boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       100 !default;
+$lighter:       300 !default;

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -520,6 +520,7 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'paddingY',
     'padding',
     'dark',
+    'enableDrag',
   ]
   return omit(props, notSafeProps)
 }