RubyGems - playbook_ui - Versions diffs - 12.14.0 → 12.16.0.pre.alpha.tiptaptestingpart1528 - Mend

playbook_ui 12.14.0 → 12.16.0.pre.alpha.tiptaptestingpart1528

Files changed (58) hide show

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

@@ -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} RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.tiptaptestingpart1528"
 end