playbook_ui 12.14.0 → 12.16.0.pre.alpha.lightboxcurrentphotoprop531

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import Table from '../_table'
+import Background from "../../pb_background/_background"
+
+const TableWithBackgroundKit = (props) => {
+  return (
+    <div>
+      <Table
+          {...props}
+      >
+        <thead>
+          <tr>
+              <th>{'Column 1'}</th>
+              <th>{'Column 2'}</th>
+              <th>{'Column 3'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <Background
+              backgroundColor="error_subtle"
+              tag='tr'
+          >
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </Background>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+          <Background
+              backgroundColor="warning_subtle"
+              tag='tr'
+          >
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </Background>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  )
+}
+
+export default TableWithBackgroundKit

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

@@ -20,6 +20,7 @@ examples:
     - table_two_plus_actions: Table with 2+ Actions
     - table_action_middle: Table with Actions in the Middle
     - table_icon_buttons: Table with Icon Buttons
+    - table_with_background_kit: Table With Background Kit
 
 
   react:
@@ -43,4 +44,5 @@ examples:
     - table_two_plus_actions: Table with 2+ Actions
     - table_action_middle: Table with Actions in the Middle
     - table_icon_buttons: Table with Icon Buttons
+    - table_with_background_kit: Table With Background Kit
 

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

@@ -18,3 +18,4 @@ export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
 export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
 export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
 export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
+export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'

data/app/pb_kits/playbook/pb_table/{index.js → index.ts}

@@ -9,16 +9,16 @@ export default class PbTable extends PbEnhancedElement {
     const tables = document.querySelectorAll('.table-responsive-collapse');
 
     // Each Table
-    [].forEach.call(tables, (table) => {
+    [].forEach.call(tables, (table: HTMLTableElement) => {
       // Header Titles
-      var headers = [].map.call(table.querySelectorAll('th'), (header) => {
+      var headers = [].map.call(table.querySelectorAll('th'), (header: Element) => {
         return header.textContent.replace(/\r?\n|\r/, '')
       });
 
       // for each row in tbody
-      [].forEach.call(table.querySelectorAll('tbody tr'), (row) => {
+      [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
         // for each cell
-        [].forEach.call(row.cells, (cell, headerIndex) => {
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
           // apply the attribute
           cell.setAttribute('data-title', headers[headerIndex])
         })

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -0,0 +1,129 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { forwardRef, useEffect, useRef } from 'react'
+import classnames from 'classnames'
+
+import PbTextarea from '.'
+import type { InputCallback } from '../types'
+
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Flex from '../pb_flex/_flex'
+import FlexItem from '../pb_flex/_flex_item'
+
+type TextareaProps = {
+  aria?: {[key: string]: string},
+  characterCount?: string,
+  className?: string,
+  children?: React.ReactChild[],
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  inline?: boolean,
+  object?: string,
+  method?: string,
+  label?: string,
+  maxCharacters?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
+  resize: "none" | "both" | "horizontal" | "vertical" | "auto",
+  onChange?: InputCallback<HTMLTextAreaElement>,
+} & GlobalProps
+
+const Textarea = ({
+  aria = {},
+  characterCount,
+  className,
+  children,
+  data = {},
+  disabled,
+  inline = false,
+  resize = 'none',
+  error,
+  label,
+  maxCharacters,
+  name,
+  onChange = () => {},
+  placeholder,
+  required,
+  rows = 4,
+  value,
+  ...props
+}: TextareaProps, ref: any) => {
+  ref = useRef<HTMLTextAreaElement>(null)
+  useEffect(() => {
+    if (ref.current && resize === 'auto') {
+      PbTextarea.addMatch(ref.current)
+    }
+  })
+
+  const errorClass = error ? 'error' : null
+  const inlineClass = inline ? 'inline' : ''
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
+  const noCount = typeof characterCount !== 'undefined'
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
+  }
+
+  const checkIfZero = (characterCount: string | number) => {
+    return characterCount == 0 ? characterCount.toString() : characterCount
+  }
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+    >
+      <Caption text={label} />
+      {children || (
+        <textarea
+          className="pb_textarea_kit"
+          disabled={disabled}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          ref={ref}
+          required={required}
+          rows={rows}
+          value={value}
+          {...props}
+        />
+      )}
+
+      {error ? (
+        <>
+          {characterCount ? (
+            <Flex spacing="between" vertical="center">
+              <FlexItem>
+                <Body margin="none" status="negative" text={error} />
+              </FlexItem>
+              <FlexItem>
+                <Caption margin="none" size="xs" text={characterCounter()} />
+              </FlexItem>
+            </Flex>
+          ) : (
+            <Body status="negative" text={error} />
+          )}
+        </>
+      ) : (
+         noCount && (
+          <Caption margin="none" size="xs" text={characterCounter()} />
+        )
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(Textarea)

data/app/pb_kits/playbook/pb_textarea/{index.js → index.tsx}

@@ -1,6 +1,8 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTextarea extends PbEnhancedElement {
+  style: {[key: string]: string}
+  scrollHeight: string
   static get selector() {
     return '.resize_auto textarea'
   }

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -0,0 +1,213 @@
+import React from "react"
+import { render, screen } from "../utilities/test-utils"
+
+import Textarea from "./_textarea"
+
+const testId = "textarea-kit"
+
+describe("TextArea Kit Props", () => {
+  test("Expects to have correct classname", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label="Label"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass("pb_textarea_kit")
+  })
+
+  test("should render aria-label", () => {
+    render(
+      <Textarea
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute("aria-label", testId)
+  })
+
+  test("should render custom classname", () => {
+    render(
+      <Textarea
+          className={"text_class"}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("text_class")
+  })
+
+  test("should render value", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          value={"Default Value"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.innerHTML).toBe("Default Value")
+  })
+
+  test("should render disabled", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          disabled={false}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.disabled).toBe(false)
+  })
+
+  test("should render rows", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          rows={7}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.rows).toBe(7)
+  })
+
+  test("should render character count", () => {
+    render(
+      <Textarea
+          characterCount={50}
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const counter = kit.querySelector(".pb_caption_kit_xs")
+
+    expect(counter.innerHTML).toBe("50")
+  })
+
+  test("should have inline class", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          inline
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("inline")
+  })
+
+  test("should have resize class", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          resize={"none"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+
+    expect(kit).toHaveClass("resize_none")
+  })
+
+  test("should render error", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          error={"error message"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_body_kit_negative")
+
+    expect(kit).toHaveClass("error")
+    expect(error.innerHTML).toBe("error message")
+  })
+
+  test("should render label", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          label={"Test Label"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_caption_kit_md")
+
+    expect(error.innerHTML).toBe("Test Label")
+  })
+
+  test("should render max character display", () => {
+    render(
+      <Textarea
+          characterCount={"11"}
+          data={{ testid: testId }}
+          maxCharacters={"10"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const error = kit.querySelector(".pb_caption_kit_xs")
+
+    expect(error.innerHTML).toBe("11 / 10")
+  })
+
+  test("should render max character display", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          name={"TestName"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.name).toBe("TestName")
+  })
+
+  test("should render placeholder", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          placeholder={"Test Placeholder"}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.placeholder).toBe("Test Placeholder")
+  })
+
+  test("should be required", () => {
+    render(
+      <Textarea
+          data={{ testid: testId }}
+          required
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    expect(textarea.required).toBeTruthy()
+  })
+})

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

@@ -63,7 +63,7 @@ $bg_dark_card:        #231E3D !default;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark,
-  bg_dark_card:       $bg_dark_card 
+  bg_dark_card:       $bg_dark_card
 );
 
 /* Card colors ------------------*/
@@ -125,9 +125,11 @@ $shadow_colors: (
 $text_lt_default:     $charcoal !default;
 $text_lt_light:       #687887 !default;
 $text_lt_lighter:     $slate !default;
+$text_lt_success_sm:  #157F48 !default;
 $text_dk_default:     $white !default;
 $text_dk_light:       rgba($white, $opacity_6) !default;
 $text_dk_lighter:     rgba($white, $opacity_4) !default;
+$text_dk_success_sm:  #00CA74 !default;
 $text_colors: (
   text_lt_default:    $text_lt_default,
   text_lt_light:      $text_lt_light,
@@ -181,6 +183,7 @@ $primary_secondary:   lighten($primary, 10%) !default;
 $status_colors: (
   success:            $success,
   success_secondary:    $success_secondary,
+  success_sm:         $text_lt_success_sm,
   success_subtle:     $success_subtle,
   warning:            $warning,
   warning_secondary:    $warning_secondary,
@@ -202,6 +205,18 @@ $status_colors: (
 
 $status_color_text: (
   success:            $success,
+  success_sm:         $text_lt_success_sm,
+  warning:            darken($warning, 10%),
+  error:              $error,
+  info:               $info,
+  neutral:            darken($neutral, 15%),
+  primary:            $primary
+);
+
+// as we add more dark text colors we can update this variable
+$status_color_text_dark: (
+  success:            $success,
+  success_sm:         $text_dk_success_sm,
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,

data/app/pb_kits/playbook/utilities/_cursor.scss

@@ -1,3 +1,143 @@
+.cursor_default {
+  cursor: default;
+}
+
+.cursor_context_menu {
+  cursor: context-menu;
+}
+
+.cursor_help {
+  cursor: help;
+}
+
 .cursor_pointer {
   cursor: pointer;
-}
+}
+
+.cursor_progress {
+  cursor: progress;
+}
+
+.cursor_wait {
+  cursor: wait;
+}
+
+.cursor_cell {
+  cursor: cell;
+}
+
+.cursor_crosshair {
+  cursor: crosshair;
+}
+
+.cursor_text {
+  cursor: text;
+}
+
+.cursor_vertical_text {
+  cursor: vertical-text;
+}
+
+.cursor_alias {
+  cursor: alias;
+}
+
+.cursor_copy {
+  cursor: copy;
+}
+
+.cursor_move {
+  cursor: move;
+}
+
+.cursor_no_drop {
+  cursor: no-drop;
+}
+
+.cursor_not_allowed {
+  cursor: not-allowed;
+}
+
+.cursor_all_scroll {
+  cursor: all-scroll;
+}
+
+.cursor_col_resize {
+  cursor: col-resize;
+}
+
+.cursor_row_resize {
+  cursor: row-resize;
+}
+
+.cursor_n_resize {
+  cursor: n-resize;
+}
+
+.cursor_e_resize {
+  cursor: e-resize;
+}
+
+.cursor_s_resize {
+  cursor: s-resize;
+}
+
+.cursor_w_resize {
+  cursor: w-resize;
+}
+
+.cursor_ne_resize {
+  cursor: ne-resize;
+}
+
+.cursor_nw_resize {
+  cursor: nw-resize;
+}
+
+.cursor_se_resize {
+  cursor: se-resize;
+}
+
+.cursor_sw_resize {
+  cursor: sw-resize;
+}
+
+.cursor_ew_resize {
+  cursor: ew-resize;
+}
+
+.cursor_ns_resize {
+  cursor: ns-resize;
+}
+
+.cursor_nsew_resize {
+  cursor: nsew-resize;
+}
+
+.cursor_nwes_resize {
+  cursor: nwes-resize;
+}
+
+.cursor_zoom_in {
+  cursor: zoom-in;
+}
+
+.cursor_zoom_out {
+  cursor: zoom-out;
+}
+
+.cursor_grab {
+  cursor: grab;
+}
+
+.cursor_grabbing {
+  cursor: grabbing;
+}
+
+.cursor_none {
+  cursor: none;
+}
+
+.cursor_auto {
+  cursor: auto;
+}

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

@@ -29,7 +29,10 @@ type BorderRadius = {
 }
 
 type Cursor = {
-  cursor?: "pointer",
+  cursor?: "auto" | "default" | "none" | "contextMenu" | "help" | "pointer" | "progress" | "wait" | "cell" |
+  "crosshair" | "text" | "verticalText" | "alias" | "copy" | "move" | "noDrop" | "notAllowed" | "grab" |
+  "grabbing" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" |
+  "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut",
 }
 
 type Dark = {
@@ -209,7 +212,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
   cursorProps: ({ cursor }: Cursor) => {
     let css = ''
-    css += cursor ? `cursor_${cursor} ` : ''
+    css += cursor ? `cursor_${camelToSnakeCase(cursor)}` : ''
     return css
   },
   alignContentProps: ({ alignContent }: AlignContent) => {

data/lib/playbook/cursor.rb

@@ -12,7 +12,7 @@ module Playbook
 
       selected_props.map do |k|
         cursor_value = send(k)
-        "cursor_#{cursor_value}" if cursor_values.include? cursor_value
+        "cursor_#{cursor_value.underscore}" if cursor_values.include? cursor_value
       end.compact.join(" ")
     end
 
@@ -23,7 +23,7 @@ module Playbook
     end
 
     def cursor_values
-      %w[pointer]
+      %w[auto default none contextMenu help pointer progress wait cell crosshair text verticalText alias copy move noDrop notAllowed grab grabbing eResize nResize neResize nwResize sResize seResize swResize wResize ewResize nsResize neswResize nwseResize colResize rowResize allScroll zoomIn zoomOut]
     end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.13.0"
-  VERSION = "12.14.0"
+  PREVIOUS_VERSION = "12.16.0"
+  VERSION = "12.16.0.pre.alpha.lightboxcurrentphotoprop531"
 end