RubyGems - playbook_ui - Versions diffs - 6.1.0.pre.alpha4 → 6.3.0 - Mend

playbook_ui 6.1.0.pre.alpha4 → 6.3.0

Files changed (299) hide show

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED

@@ -1,14 +1,22 @@
 import React from 'react'
-import { Body, Card } from '../../'
+import { Body, Card, Title } from '../../'
 const CardHeader = () => {
   return (
     <div>
+      <Title
+          size={4}
+          tag="h4"
+          text="Category Colors"
+      />
+      <br />
       <Card padding="none">
         <Card.Header>
           <Body
               dark
-              text="Header"
+              text="category_1"
           />
         </Card.Header>
         <Card.Body>
@@ -20,20 +28,60 @@ const CardHeader = () => {
       <Card padding="none">
         <Card.Header
-            categoryColor={2}
-            padding="md"
+            headerColor="category_2"
         >
           <Body
               dark
-              text="Header"
+              text="category_2"
           />
         </Card.Header>
         <Card.Body
-            padding="lg"
+            padding="md"
         >
           <Body text="Body" />
         </Card.Body>
       </Card>
+      <br />
+      <Title
+          size={4}
+          tag="h4"
+          text="Product Colors"
+      />
+      <br />
+      <Card padding="none">
+        <Card.Header
+            headerColor="siding"
+        >
+          <Body
+              dark
+              text="Siding"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
+      <br />
+      <Card padding="none">
+        <Card.Header
+            headerColor="gutters"
+        >
+          <Body
+              dark
+              text="Gutters"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED

	@@ -1 +1 @@
1	- Card headers passes category colors only. List of all category colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1	+ Card headers passes category and product colors only. List of all category and product colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb CHANGED

@@ -11,6 +11,6 @@
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
     </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED

@@ -9,17 +9,17 @@ import { globalProps } from '../utilities/globalProps.js'
 type CheckboxProps = {
   aria?: object,
-  checked?: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  error?: Boolean,
-  id?: String,
-  name: String,
-  text: String,
-  value: String,
+  error?: boolean,
+  id?: string,
+  name: string,
+  text: string,
+  value: string,
   children: Node,
-  onChange: (Boolean) => void,
+  onChange: (boolean) => void,
 }
 const Checkbox = (props: CheckboxProps) => {

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb CHANGED

@@ -15,6 +15,11 @@ module Playbook
       prop :value
       prop :name
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :form_spacing, type: Playbook::Props::Boolean,
+                          default: false
       def checked_html
         checked ? "checked='true'" : nil
       end

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx CHANGED

@@ -15,15 +15,15 @@ import { globalProps } from '../utilities/globalProps.js'
 type CircleIconButtonProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  disabled?: Boolean,
-  icon: String,
-  id?: String,
-  link?: String,
+  disabled?: boolean,
+  icon: string,
+  id?: string,
+  link?: string,
   onClick?: Callback,
-  newWindow?: Boolean,
+  newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }

data/app/pb_kits/playbook/pb_contact/_contact.jsx CHANGED

@@ -39,12 +39,12 @@ const formatContact = (contactString, contactType) => {
 type ContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  contactDetail?: String,
-  contactType?: String,
-  contactValue: String,
+  className?: string | array<string>,
+  contactDetail?: string,
+  contactType?: string,
+  contactValue: string,
   data?: object,
-  id?: String,
+  id?: string,
 }
 const Contact = (props: ContactProps) => {

data/app/pb_kits/playbook/pb_currency/_currency.jsx CHANGED

@@ -9,16 +9,16 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 type CurrencyProps = {
   align?: 'center' | 'left' | 'right',
-  amount: String,
+  amount: string,
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  label?: String,
+  id?: string,
+  label?: string,
   size?: 'sm' | 'md' | 'lg',
-  symbol?: String,
-  unit?: String,
+  symbol?: string,
+  unit?: string,
 }
 const sizes = {

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx CHANGED

@@ -13,17 +13,17 @@ import {
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   statChange?: {
-    change?: String,
-    value?: String | Number
+    change?: string,
+    value?: string | Number
   },
-  statLabel?: String,
+  statLabel?: string,
   statValue?: {
-    unit?: String,
-    value?: String | Number
+    unit?: string,
+    value?: string | Number
   }
 }

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED

@@ -49,8 +49,8 @@ const LargeDate = ({ value, ...props }: DateSubcomponent) => (
 type PbDateProps = {
   size?: "xs" | "sm" | "lg",
-  value?: String,
-  className?: String
+  value?: string,
+  className?: string
 }
 const PbDate = ({ size, value, className, ...props }: PbDateProps) => {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx CHANGED

@@ -7,11 +7,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 type DateRangeInlineProps = {
-  className?: String,
-  data?: String,
-  endDate?: Date,
-  id?: String,
-  startDate?: Date,
+  className?: string,
+  data?: string,
+  endDate?: date,
+  id?: string,
+  startDate?: date,
 }
 const dateTimestamp = (dateValue) => {

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx CHANGED

@@ -8,12 +8,12 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 type DateRangeStackedProps = {
-  className?: String | Array<String>,
-  data?: String,
-  dark?: Boolean,
-  endDate: String,
-  id?: String,
-  startDate: String,
+  className?: string | array<string>,
+  data?: string,
+  dark?: boolean,
+  endDate: string,
+  id?: string,
+  startDate: string,
 }
 const DateRangeStacked = (props: DateRangeStackedProps) => {

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx CHANGED

@@ -9,13 +9,13 @@ import { globalProps } from '../utilities/globalProps.js'
 type DateStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
   size?: "sm" | "md",
-  id?: String,
-  reverse?: Boolean,
+  id?: string,
+  reverse?: boolean,
 }
 const sizes = {

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx CHANGED

@@ -5,10 +5,10 @@ import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 type DateTimeStackedProps = {
-  data?: String,
-  id?: String,
-  date: Date,
-  dark: Boolean,
+  data?: string,
+  id?: string,
+  date: date,
+  dark: boolean,
 }
 const DateTimeStacked = (props: DateTimeStackedProps) => {

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx CHANGED

@@ -10,11 +10,11 @@ import { Body, Title } from '../'
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
 }
 const DateYearStacked = (props: DateYearStackedProps) => {

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx CHANGED

@@ -5,11 +5,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 type DistributionBarProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   size?: "lg" | "sm",
-  widths?: Array<Number>,
+  widths?: array<number>,
 }
 const normalizeCharacters = (widths) => {

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx CHANGED

@@ -11,8 +11,8 @@ import type { Callback } from '../types.js'
 import { Body, Card } from '..'
 type FileUploadProps = {
-  accept?: Array<String>,
-  className?: String,
+  accept?: array<string>,
+  className?: string,
   onFilesAccepted: Callback,
 }

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED

@@ -27,10 +27,9 @@
       OpenStruct.new(name: "Georgia", value: 10),
     ]
   %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :blahblah, method: :get } }) do |form| %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.date_picker :example_date_picker %>
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED

@@ -13,11 +13,11 @@ const iconMap = {
 }
 type FixedConfirmationToastProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   status?: "success" | "error" | "neutral" | "tip",
-  text: String,
+  text: string,
 }
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb ADDED

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Error Message",
+  status: "error"
+})%>
+<br><br>
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+<br><br>
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx ADDED

@@ -0,0 +1,40 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../..'
+const FixedConfirmationToastDark = () => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="error"
+            text="Error Message"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="success"
+            text="Items Successfully Moved"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
+      </div>
+    </div>
+  )
+}
+export default FixedConfirmationToastDark