playbook_ui 12.15.0 → 12.16.0.pre.alpha.tiptaptestingpart1528

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -14,6 +14,7 @@ try {
 } catch (_e) { /* do nothing */ }
 
 import { TrixEditor } from "react-trix"
+import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
   attributeIsActive?: Function,
@@ -27,7 +28,9 @@ type Editor = {
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
+  advancedEditor?: any,
   toolbarBottom?: Boolean,
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
@@ -45,7 +48,9 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    advancedEditor,
     toolbarBottom = false,
+    children,
     className,
     data = {},
     focus = false,
@@ -152,15 +157,24 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {...dataProps}
       className={css}
     >
-      <TrixEditor
-        className=""
-        fileParamName={name}
-        mergeTags={[]}
-        onChange={onChange}
-        onEditorReady={handleOnEditorReady}
-        placeholder={placeholder}
-        value={value}
-      />
+      {
+        advancedEditor ? (
+          <div>
+          <EditorToolbar editor={advancedEditor}/>
+          { children }
+          </div>
+        ) : (
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              mergeTags={[]}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
+        )
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -0,0 +1,192 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/titles";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/shadows";
+@import "../tokens/transition";
+
+[class^="pb_rich_text_editor_kit"] {
+  .toolbar_button {
+    display: flex;
+    align-items: center;
+    background: $transparent;
+    border: none;
+    border-radius: $border_rad_heaviest;
+    color: $text_lt_light;
+    cursor: pointer;
+    &_icon {
+      width: $space_xl + 2;
+      height: $space_xl + 2;
+    }
+    &.open {
+      color: $primary;
+    }
+    &.active,
+    &:active {
+      color: $primary;
+      background-color: $bg_light;
+    }
+    &:hover:not([disabled]) {
+      background-color: $neutral_subtle;
+    }
+    &:disabled {
+      .pb_icon_kit {
+        color: $border_light;
+      }
+    }
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+
+  .toolbar {
+    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
+    border: 1px solid $border_light;
+    overflow-x: auto;
+    &_block {
+      gap: $space_xs;
+    }
+    .editor-dropdown-button {
+      background: transparent;
+      border: none;
+      color: $text_lt_light;
+      cursor: pointer;
+      font-weight: $light;
+      padding: ($space_xs - 1) 0px;
+      width: $space_xl * 3;
+    }
+  }
+
+  .ProseMirror {
+    background: $white;
+    border: 1px solid $border_light;
+    border-top-color: transparent;
+    border-bottom-right-radius: $border_rad_heaviest;
+    border-bottom-left-radius: $border_rad_heaviest;
+    height: 100%;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    line-height: $lh_loose;
+    :first-child {
+      margin-top: 0;
+    }
+
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote,
+    p {
+      margin: 1rem 0 0 0;
+    }
+
+    code {
+      font-family: monospace;
+      background: $bg_light;
+      padding: 0.1rem 0.3rem;
+      margin: 0 5px;
+      box-shadow: 0 2px 10px $shadow;
+      border-radius: 0.25rem;
+      overflow: hidden;
+      font-size: ($text_small - 1px);
+    }
+
+    pre {
+      background: $bg_dark;
+      padding: $space_sm;
+      border-radius: $border_rad_heaviest;
+      margin: 1.5rem 0 2rem 0;
+      code {
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+        color: #faf6e4;
+      }
+    }
+    a {
+      color: $primary;
+      border-bottom: 1px solid $primary;
+      &:hover {
+        color: $text_lt_default;
+        border-bottom: 1px solid $text_lt_default;
+      }
+    }
+    blockquote {
+      font-size: $font_larger;
+      padding: $space_sm $space_md;
+      font-style: italic;
+      p {
+        margin: 0;
+      }
+    }
+    &:focus-visible {
+      outline: unset;
+      border-color: $primary;
+      @include transition_default;
+    }
+    h1 {
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 2.1rem 0 0 0;
+    }
+    h2 {
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.9rem 0 0 0;
+    }
+    h3 {
+      font-size: $text_large;
+      line-height: $text_large;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.7rem 0 0 0;
+    }
+    h4,
+    h5,
+    h6 {
+      font-size: $text_base;
+      line-height: $text_base;
+      letter-spacing: $lspace_tight;
+      font-weight: $bolder;
+    }
+    hr {
+      margin: 2.2rem 0;
+      box-sizing: content-box;
+      overflow: hidden;
+      background: transparent;
+      border-bottom: 1px solid $transparent;
+      height: 1px;
+      padding: 0;
+      background-color: $border_light;
+      border: 0;
+    }
+    ol {
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      list-style: decimal;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+    ul {
+      list-style-position: disc;
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedDefault = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedDefault

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

@@ -13,6 +13,7 @@ examples:
 
   react:
   - rich_text_editor_default: Default
+  - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -7,3 +7,4 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'

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