playbook_ui 12.14.0 → 12.16.0.pre.alpha.tiptaptestingpart1528

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_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])
         })