playbook_ui 12.15.0 → 12.16.0.pre.alpha.lightboxcurrentphotoprop531

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.16.0"
+  VERSION = "12.16.0.pre.alpha.lightboxcurrentphotoprop531"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.15.0
+  version: 12.16.0.pre.alpha.lightboxcurrentphotoprop531
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-12 00:00:00.000000000 Z
+date: 2023-04-25 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
@@ -1333,6 +1332,8 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -1916,9 +1917,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 +1974,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 +2027,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 +2047,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
@@ -2466,7 +2470,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2477,12 +2481,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []