playbook_ui 12.15.0 → 12.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
-  data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
+  metadata.gz: '09b7fe35bd640bdcbba17570366775211743d1f85c44a5dcb00db8013936743a'
+  data.tar.gz: 1a1a2f1936efa02380ca89c963f98f6aff52288a929430ff67c7b1e71e2e61da
 SHA512:
-  metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
-  data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c
+  metadata.gz: 20f0ff15258af1f924fe0ca2233e296fa5b6ce1678c6151f3289daab6f0580b9bcd2b4647f98a1a926230f9ac6af6ec1e634f3e82a55ad5bf38e752074b193da
+  data.tar.gz: ac0008d312f15ddefaf2f012684a4bcd2f05a33c54c95f913421fe5784dbc85c6efaf2ba52b7b9b96259e1dc318e3f4482677cd900b3166d59d7b7d8a6fc73bf

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_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_table/{_table.jsx → _table.tsx}

@@ -1,19 +1,17 @@
-/* @flow */
-
-import React, { useEffect, type Node } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import PbTable from './'
+import PbTable from '.'
 
 type TableProps = {
-  aria?: object,
-  children: array<Node> | Node,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   dataTable: boolean,
   disableHover: boolean,
   id?: string,
@@ -52,9 +50,9 @@ const Table = (props: TableProps) => {
 
   return (
     <table
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -70,7 +68,7 @@ const Table = (props: TableProps) => {
         tableCollapseCss,
         className
       )}
-        id={id}
+      id={id}
     >
       {children}
     </table>

data/app/pb_kits/playbook/pb_table/{_table_row.jsx → _table_row.tsx}

@@ -1,14 +1,13 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type TableRowPropTypes = {
-  aria?: object,
-  children: array<React.ReactNode> | React.ReactNode,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   sideHighlightColor: string,
 }
@@ -31,10 +30,10 @@ const TableRow = (props: TableRowPropTypes) => {
 
   return (
     <tr
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {children}
     </tr>

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

@@ -0,0 +1,41 @@
+<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
+  <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>
+    <%= pb_rails("background", props: { background_color: "error_subtle", tag: "tr" }) do %>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    <% end %>
+    <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>
+    <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "tr" }) do %>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    <% end %>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+    </tr>
+  </tbody>
+<% end %>

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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.14.0"
-  VERSION = "12.15.0"
+  PREVIOUS_VERSION = "12.15.0"
+  VERSION = "12.16.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.15.0
+  version: 12.16.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-12 00:00:00.000000000 Z
+date: 2023-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -979,7 +979,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
 - app/pb_kits/playbook/pb_flex/_flex.scss
 - app/pb_kits/playbook/pb_flex/_flex.tsx
-- app/pb_kits/playbook/pb_flex/_flex_item.jsx
 - app/pb_kits/playbook/pb_flex/_flex_item.scss
 - app/pb_kits/playbook/pb_flex/_flex_item.tsx
 - app/pb_kits/playbook/pb_flex/docs/_description.md
@@ -1916,9 +1915,9 @@ files:
 - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
 - app/pb_kits/playbook/pb_stat_value/stat_value.rb
 - app/pb_kits/playbook/pb_stat_value/stat_value.test.js
-- app/pb_kits/playbook/pb_table/_table.jsx
 - app/pb_kits/playbook/pb_table/_table.scss
-- app/pb_kits/playbook/pb_table/_table_row.jsx
+- app/pb_kits/playbook/pb_table/_table.tsx
+- app/pb_kits/playbook/pb_table/_table_row.tsx
 - app/pb_kits/playbook/pb_table/docs/_description.md
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
@@ -1973,9 +1972,11 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
 - app/pb_kits/playbook/pb_table/docs/example.yml
 - app/pb_kits/playbook/pb_table/docs/index.js
-- app/pb_kits/playbook/pb_table/index.js
+- app/pb_kits/playbook/pb_table/index.ts
 - app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
@@ -2024,8 +2025,8 @@ files:
 - app/pb_kits/playbook/pb_text_input/text_input.html.erb
 - app/pb_kits/playbook/pb_text_input/text_input.rb
 - app/pb_kits/playbook/pb_text_input/text_input.test.js
-- app/pb_kits/playbook/pb_textarea/_textarea.jsx
 - app/pb_kits/playbook/pb_textarea/_textarea.scss
+- app/pb_kits/playbook/pb_textarea/_textarea.tsx
 - app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss
 - app/pb_kits/playbook/pb_textarea/docs/_description.md
 - app/pb_kits/playbook/pb_textarea/docs/_footer.md
@@ -2044,9 +2045,10 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml
 - app/pb_kits/playbook/pb_textarea/docs/index.js
-- app/pb_kits/playbook/pb_textarea/index.js
+- app/pb_kits/playbook/pb_textarea/index.tsx
 - app/pb_kits/playbook/pb_textarea/textarea.html.erb
 - app/pb_kits/playbook/pb_textarea/textarea.rb
+- app/pb_kits/playbook/pb_textarea/textarea.test.js
 - app/pb_kits/playbook/pb_time/_time.scss
 - app/pb_kits/playbook/pb_time/_time.tsx
 - app/pb_kits/playbook/pb_time/docs/_description.md

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -1,41 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-type FlexItemPropTypes = {
-  children: array<React.ReactNode> | React.ReactNode,
-  fixedSize: string,
-  grow: boolean,
-  shrink: boolean,
-  flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
-  className: string,
-  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
-  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
-  alignSelf?: "start" | "end" | "center" | "stretch",
-  displayFlex: boolean
-}
-
-const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
-  const growClass = grow === true ? 'grow' : ''
-  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
-  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
-  const overflowClass = overflow ? `overflow_${overflow}` : ''
-  const shrinkClass = shrink === true ? 'shrink' : ''
-  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
-  const fixedStyle =
-    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
-  const orderClass = order !== 'none' ? `order_${order}` : null
-
-  return (
-    <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default FlexItem

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

@@ -1,135 +0,0 @@
-/* @flow */
-/* 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.js'
-
-import { 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 = {
-  characterCount?: string,
-  className?: string,
-  children?: array<React.ReactChild>,
-  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>,
-}
-
-const Textarea = ({
-  characterCount,
-  className,
-  children,
-  disabled,
-  inline = false,
-  resize = 'none',
-  error,
-  label,
-  maxCharacters,
-  name,
-  onChange = () => {},
-  placeholder,
-  required,
-  rows = 4,
-  value,
-  ...props
-}: TextareaProps, ref: React.ElementRef<"textarea">) => {
-  ref = ref || useRef(false)
-  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 characterCounter = () => {
-    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
-  }
-
-  const checkIfZero = (characterCount) => {
-    return characterCount == 0 ? characterCount.toString() : characterCount
-  }
-
-  return (
-    <div className={classes}>
-      <Caption
-          text={label}
-      />
-      <If condition={children}>
-        {children}
-        <Else />
-        <textarea
-            className="pb_textarea_kit"
-            disabled={disabled}
-            name={name}
-            onChange={onChange}
-            placeholder={placeholder}
-            ref={ref}
-            required={required}
-            rows={rows}
-            value={value}
-            {...props}
-        />
-        <If condition={error}>
-          <If condition={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>
-            <Else />
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
-          <Else />
-          <Caption
-              margin="none"
-              size="xs"
-              text={characterCounter()}
-          />
-        </If>
-      </If>
-    </div>
-  )
-}
-
-export default forwardRef(Textarea)