playbook_ui 12.14.0 → 12.16.0

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,12 +7,10 @@ module Playbook
                       default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
-      prop :is_valid
       prop :label, type: Playbook::Props::String,
                    default: ""
       prop :name, type: Playbook::Props::String,
                   default: ""
-      prop :onchange
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
@@ -30,10 +28,8 @@ module Playbook
           dark: dark,
           disabled: disabled,
           initialCountry: initial_country,
-          isValid: is_valid,
           label: label,
           name: name,
-          onChange: onchange,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
           value: value,

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

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

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

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

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'
   }