playbook_ui 7.7.0 → 7.8.0

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { RichTextEditor, Select } from '../../'
+import { changelog, release } from './templates.js'
+
+const RichTextEditorTemplates = () => {
+  const [editorContent, setEditorContent] = useState('')
+
+  const handleChange = (event) => {
+    setEditorContent(event.target.value)
+  }
+
+  const options = [
+    {
+      value: release,
+      text: 'Playbook Release',
+    },
+    {
+      value: changelog,
+      text: 'Changelog',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          blankSelection="Select a template..."
+          label="Template"
+          onChange={handleChange}
+          options={options}
+      />
+      <RichTextEditor
+          id="template"
+          template={editorContent}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorTemplates

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - rich_text_editor_default: Default
+  - rich_text_editor_simple: Simple
+  - rich_text_editor_focus: Focus
+  - rich_text_editor_sticky: Sticky
+  - rich_text_editor_templates: Templates
+
+  react:
+  - rich_text_editor_default: Default
+  - rich_text_editor_simple: Simple
+  - rich_text_editor_focus: Focus
+  - rich_text_editor_sticky: Sticky
+  - rich_text_editor_templates: Templates

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

@@ -0,0 +1,5 @@
+export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
+export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
+export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
+export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
+export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'

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

@@ -0,0 +1,75 @@
+export const release = `
+  <div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{" "}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{" "}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>
+`
+
+export const changelog = `
+  <div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>
+`

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbRichTextEditor
+    class RichTextEditor
+      include Playbook::Props
+      partial "pb_rich_text_editor/rich_text_editor"
+
+
+      prop :focus, type: Playbook::Props::Boolean,
+                   default: false
+ 
+      prop :simple, type: Playbook::Props::Boolean,
+                    default: false
+
+      prop :sticky, type: Playbook::Props::Boolean,
+                   default: false
+      
+      prop :value
+      prop :template
+      prop :placeholder
+
+      def classname
+        generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
+      end
+
+      def focus_class
+        focus ? "focus-editor-targets" : nil
+      end
+
+      def simple_class
+        simple ? "simple" : nil
+      end
+
+      def sticky_class
+        sticky ? "sticky" : nil
+      end 
+
+      def rich_text_options
+        {
+          id: id,
+          className: classname,
+          focus: focus,
+          simple: simple,
+          sticky: sticky,
+          value: value,
+          template: template,
+          placeholder: placeholder
+        }
+      end
+
+    end
+  end
+end
+   

data/app/pb_kits/playbook/pb_rich_text_editor/useFocus.js

@@ -0,0 +1,20 @@
+const useFocus = () => {
+  const allTrixEditors = document.querySelectorAll(
+    '.focus-editor-targets trix-editor'
+  )
+  allTrixEditors.forEach((editorElement) => {
+    const toolbarElement = editorElement.toolbarElement
+    if (editorElement == document.activeElement) {
+      editorElement.classList.add('focused-editor')
+      toolbarElement.style.display = 'block'
+    } else {
+      // don't hide the toolbar if we've unfocused to focus on the link dialog.
+      if (!toolbarElement.contains(document.activeElement)) {
+        editorElement.classList.remove('focused-editor')
+        toolbarElement.style.display = 'none'
+      }
+    }
+  })
+}
+
+export default useFocus

data/app/pb_kits/playbook/pb_table/_table.scss

@@ -4,22 +4,54 @@
 $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
 
 @mixin pb_table_row_kit_side_highlight($background) {
-    box-shadow: inset 4px 0 0 0 $background;
-    border-top: 0px;
+  box-shadow: inset 4px 0 0 0 $background;
+  border-top: 0px;
 }
 
 [class^=pb_table] {
-    tbody {
-        [class^=pb_table_row_kit] {
-            @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
-                &[class*=_side_highlight_#{$color_name}] {
-                    td {
-                        &:first-child {
-                            @include pb_table_row_kit_side_highlight($color_value);
-                        }
-                    }
-                }
+  tbody {
+    [class^=pb_table_row_kit] {
+      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
+        &[class*=_side_highlight_#{$color_name}] {
+          td {
+            &:first-child {
+              @include pb_table_row_kit_side_highlight($color_value);
             }
+          }
         }
+      }
     }
-}
+  }
+  tr[align=center] th,
+  tr th[align=center] {
+    text-align: center !important;
+  }
+
+  tr[align=right] th,
+  tr th[align=right] {
+    text-align: right !important;
+  }
+
+  tr[shift=up] {
+    vertical-align: top;
+  }
+  tr[shift=down] {
+    vertical-align: bottom;
+  }
+
+  td[shift=up] {
+    vertical-align: top;
+  }
+  td[shift=down] {
+    vertical-align: bottom;
+  }
+
+  th[shift=up] {
+    vertical-align: top;
+  }
+
+  th[shift=down] {
+    vertical-align: bottom;
+  }
+}
+

data/app/pb_kits/playbook/pb_table/docs/_description.md

@@ -1 +1,2 @@
 Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
+Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th align="center">Rating</th>
+      <th align="right">Money</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">3</td>
+      <td align="right">$57.32</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">2</td>
+      <td align="right">$5,657.08</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">4</td>
+      <td align="right">$358.77</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentColumn = () => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th align="center">{'Rating'}</th>
+          <th align="right">{'Money'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'3'}</td>
+          <td align="right">{'$57.32'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'2'}</td>
+          <td align="right">{'$5,657.08'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'4'}</td>
+          <td align="right">{'$358.77'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentColumn

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md

@@ -0,0 +1,2 @@
+You can individually align a pieace of table data, but a more practical use would be applied to align a column.
+In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr align="center">
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr align="right">
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentRow = () => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="center">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="right">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentRow