RubyGems - playbook_ui - Versions diffs - 7.6.2.pre.alpha1 → 7.8.1 - Mend

playbook_ui 7.6.2.pre.alpha1 → 7.8.1

Files changed (105) hide show

data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED

@@ -13,4 +13,7 @@ export { default as TableTwoActions } from './_table_two_actions.jsx'
 export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
 export { default as TableActionMiddle } from './_table_action_middle.jsx'
 export { default as TableIconButtons } from './_table_icon_buttons.jsx'
+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'

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb CHANGED

@@ -1,11 +1,8 @@
 <%= content_tag(:div,
+    align: object.align,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <div class="pb_time_stacked">
-      <%= pb_rails(object.tag, props: { text: object.format_time_string, color: "light", classname: object.tag_classnames }) %>
-      <%= pb_rails(object.tag, props: { text: object.format_timezone, color: "light" }) %>
-    </div>
+      <%= pb_rails("body", props: { text: object.format_time_string, color: "light" }) %>
+      <%= pb_rails("caption", props: { text: object.format_timezone, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED

@@ -6,49 +6,43 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Body, Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
-const Components = {
-  body: Body,
-  caption: Caption,
-}
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 type TimeStackedProps = {
+  align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
   date: string,
   id?: string,
-  align?: "left" | "center" | "right",
-  tag?: "body" | "caption",
+  tag?: 'body' | 'caption',
 }
 const TimeStacked = (props: TimeStackedProps) => {
-  const { className, dark = false, date, tag = 'body' } = props
+  const { align, className, dark, date } = props
+  deprecatedProps('TimeStacked', ['tag'])
   const classes = classnames(
-    buildCss('pb_time_stacked_kit', {
-      dark,
-    }),
+    buildCss('pb_time_stacked_kit', align),
     globalProps(props),
-    className
+    className,
   )
-  const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))
   const dateTimestamp = new DateTime({ value: date })
-  const Tag = Components[tag]
   return (
     <div className={classes}>
-      <div className="pb_time_stacked_day_month">
-        <Tag
-            className={tagClasses}
+      <div
+          align={align}
+          className="pb_time_stacked_day_month"
+      >
+        <Body
             color="light"
+            dark={dark}
             text={dateTimestamp.toTimeWithMeridian()}
         />
-        <Tag
+        <Caption
             color="light"
+            dark={dark}
             text={dateTimestamp.toTimezone()}
         />
       </div>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss CHANGED

@@ -1,20 +1,3 @@
 @import "../pb_title/title";
 @import "../pb_caption/caption";
 @import "../tokens/colors";
-[class^=pb_time_stacked_kit]{
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
-      color: $text_dk_default;
-    }
-    & > * [class^=pb_caption_kit] {
-      color: $text_dk_light;
-    }
-  }
-}
-[class*=pb_time_stacked_kit_caption] {
-  padding-bottom: 2px;
-  text-transform: lowercase;
-}

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb CHANGED

@@ -1,2 +1,5 @@
 <%= pb_rails("time_stacked", props: { date: DateTime.now }) %>
+<br/>
+<%= pb_rails("time_stacked", props: { align: "center", date: DateTime.now }) %>
+<br/>
+<%= pb_rails("time_stacked", props: { align: "right", date: DateTime.now }) %>

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx CHANGED

@@ -1,10 +1,21 @@
 import React from 'react'
 import TimeStacked from '../_time_stacked.jsx'
-const TimeStackedDefault = () => {
+const TimeStackedDefault = (props) => {
   return (
     <div>
       <TimeStacked
+          {...props}
+          date={new Date()}
+      />
+      <TimeStacked
+          {...props}
+          align="center"
+          date={new Date()}
+      />
+      <TimeStacked
+          {...props}
+          align="right"
           date={new Date()}
       />
     </div>

data/app/pb_kits/playbook/pb_time_stacked/docs/example.yml CHANGED

@@ -2,10 +2,7 @@ examples:
   rails:
   - time_stacked_default: Default
-  - time_stacked_caption: With Caption
   react:
   - time_stacked_default: Default
-  - time_stacked_caption: With Caption

data/app/pb_kits/playbook/pb_time_stacked/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
2	- export { default as TimeStackedCaption } from './_time_stacked_caption.jsx'

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb CHANGED

@@ -10,17 +10,17 @@ module Playbook
       partial "pb_time_stacked/time_stacked"
-      prop :date, type: Playbook::Props::Date, required: true
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
       prop :classnames, type: Playbook::Props::String,
                         default: nil
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[body caption],
-                 default: "body"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :date, type: Playbook::Props::Date, required: true
       def classname
-        generate_classname("pb_time_stacked_kit", dark_class, classnames)
+        generate_classname("pb_time_stacked_kit", dark_class)
       end
       def day
@@ -45,10 +45,6 @@ module Playbook
         pb_date_time.to_timezone
       end
-      def tag_classnames
-        "pb_time_stacked_kit_#{tag}"
-      end
     private
       def dark_class

data/app/pb_kits/playbook/react_rails_kits.js CHANGED

@@ -4,3 +4,4 @@ export { default as DistributionBar } from './pb_distribution_bar/_distribution_
 export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
+export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'

data/app/pb_kits/playbook/utilities/globalProps.js CHANGED

@@ -44,3 +44,12 @@ export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
   return spacingProps(allProps) + darkProps(allProps)
 }
+export const deprecatedProps = (kit, props = []) => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/app/pb_kits/playbook/utilities/test-utils.js ADDED

@@ -0,0 +1,24 @@
+/* This file provides the base for tests */
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+/*
+  We can complicate this wrapper as needed.
+  https://testing-library.com/docs/react-testing-library/setup
+*/
+// eslint-disable-next-line react/prop-types
+const TestApp = ({ children }) => {
+  return (
+    <>
+      { children }
+    </>
+  )
+}
+const customRender = (ui, options) =>
+  render(ui, { wrapper: TestApp, ...options })
+export * from '@testing-library/react'
+export { customRender as render }

data/app/pb_kits/playbook/vendor.js CHANGED

@@ -29,6 +29,8 @@ PbTable.start()
 import 'flatpickr'
+import 'trix'
 // React-Rendered Rails Kits =====
 import WebpackerReact from 'webpacker-react'
 import * as ReactRailsPBKits from './react_rails_kits.js'

data/lib/playbook/version.rb CHANGED

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.6.2.pre.alpha1"
+  VERSION = "7.8.1"
 end

metadata CHANGED

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.6.2.pre.alpha1
+  version: 7.8.1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-10 00:00:00.000000000 Z
+date: 2020-11-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -396,6 +396,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/images/clark.jpg
+- app/assets/images/full_page_samples.svg
 - app/assets/images/giant.jpg
 - app/assets/images/github-brands.svg
 - app/assets/images/landing-background.svg
@@ -405,7 +406,6 @@ files:
 - app/assets/images/pb-logo.svg
 - app/assets/images/pb-white-logo.svg
 - app/assets/images/pb.logo.svg
-- app/assets/images/sample_screenshot.svg
 - app/controllers/playbook/application_controller.rb
 - app/helpers/playbook/application_helper.rb
 - app/helpers/playbook/layout_helper.rb
@@ -424,6 +424,7 @@ files:
 - app/pb_kits/playbook/pb_avatar/_avatar.jsx
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
 - app/pb_kits/playbook/pb_avatar/avatar.rb
+- app/pb_kits/playbook/pb_avatar/avatar.test.js
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb
@@ -1079,6 +1080,20 @@ files:
 - app/pb_kits/playbook/pb_icon_circle/docs/example.yml
 - app/pb_kits/playbook/pb_icon_circle/docs/index.js
 - app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
+- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.html.erb
+- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.html.erb
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.html.erb
+- app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/docs/example.yml
+- app/pb_kits/playbook/pb_icon_stat_value/docs/index.js
+- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb
 - app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb
 - app/pb_kits/playbook/pb_icon_value/_icon_value.jsx
 - app/pb_kits/playbook/pb_icon_value/_icon_value.scss
@@ -1442,6 +1457,24 @@ files:
 - app/pb_kits/playbook/pb_radio/docs/example.yml
 - app/pb_kits/playbook/pb_radio/docs/index.js
 - app/pb_kits/playbook/pb_radio/radio.rb
+- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
+- app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
+- app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
+- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
+- app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
 - app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
@@ -1597,6 +1630,17 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
@@ -1717,8 +1761,6 @@ files:
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
-- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb
-- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_time_stacked/docs/example.yml
@@ -1938,6 +1980,7 @@ files:
 - app/pb_kits/playbook/utilities/_spacing.scss
 - app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/props.js
+- app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/text.js
 - app/pb_kits/playbook/vendor.js
 - fonts/fontawesome-min.js
@@ -1950,7 +1993,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1961,12 +2004,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
-signing_key:
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb DELETED

	@@ -1,2 +0,0 @@
1	- <%= pb_rails("time_stacked", props: { date: DateTime.now, tag: "caption" }) %>
2	-

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx DELETED

@@ -1,15 +0,0 @@
-import React from 'react'
-import TimeStacked from '../_time_stacked.jsx'
-const TimeStackedCaption = () => {
-  return (
-    <div>
-      <TimeStacked
-          date={new Date()}
-          tag="caption"
-      />
-    </div>
-  )
-}
-export default TimeStackedCaption