playbook_ui 6.1.0.pre.alpha4 → 6.3.0

data/app/pb_kits/playbook/pb_user/docs/_user_dark.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserDark = () => {
+  return (
+    <div className="pb--doc-demo-row">
+
+      <div>
+        <User
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            title="Remodeling Consultant"
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+        />
+
+        <br />
+
+        <User
+            align="left"
+            avatar
+            dark
+            name="Anna Black"
+            orientation="horizontal"
+        />
+      </div>
+
+    </div>
+  )
+}
+
+export default UserDark

data/app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserTextOnlyDark = () => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          dark
+          name="Anna Black"
+          orientation="horizontal"
+          size="lg"
+          title="Remodeling Consultant"
+      />
+      <User
+          align="left"
+          dark
+          name="Anna Black"
+          orientation="horizontal"
+          title="Remodeling Consultant"
+      />
+    </div>
+  )
+}
+
+export default UserTextOnlyDark

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

@@ -17,3 +17,5 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_dark: Dark
+  - user_text_only_dark: Text Only

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

@@ -3,4 +3,6 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
+export { default as UserDark } from './_user_dark.jsx'
+export { default as UserTextOnlyDark } from './_user_text_only_dark.jsx'
 

data/app/pb_kits/playbook/pb_user/user.rb

@@ -21,12 +21,10 @@ module Playbook
                   values: %w[lg md sm],
                   default: "sm"
       prop :title
-      prop :dark, type: Playbook::Props::Boolean,
-                          default: false
       prop :territory
 
       def classname
-        generate_classname("pb_user_kit", align, orientation, size, dark_class)
+        generate_classname("pb_user_kit", align, orientation, size)
       end
 
       def avatar_size
@@ -40,10 +38,6 @@ module Playbook
         end
       end
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def title_size
         size == "lg" ? 3 : 4
       end

data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= content_tag(:div, class: "pb_user_badge_wrapper") do %>
     <%= render partial: object.display_badge %>
   <% end %>

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,21 +1,41 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type UserBadgeProps = {
-  className?: String,
-  id?: String,
+  aria?: object,
   badge?: "million-dollar" | "veteran",
+  className?: string,
+  data?: object,
+  id?: string,
   size?: "sm" | "md" | "lg",
 }
 
 const UserBadge = (props: UserBadgeProps) => {
-  const { badge = 'million-dollar', size = 'md' } = props
+  const {
+    aria = {},
+    badge = 'million-dollar',
+    className,
+    data = {},
+    id,
+    size = 'md',
+  } = props
+
   const image = require(`./badges/_${badge}.svg`)
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
+    className)
 
   return (
-    <div className={classnames(`pb_user_badge_kit_${size}`, globalProps(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <div className="pb_user_badge_wrapper">
         <img src={image} />
       </div>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  dark: true,
+  size: "md"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "million-dollar",
+  dark: true,
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { UserBadge } from '../../'
+
+const UserBadgeDefault = () => {
+  return (
+    <div>
+      <div>
+        <UserBadge
+            badge="veteran"
+            dark
+            size="md"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="million-dollar"
+            dark
+            size="md"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserBadgeDefault

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  dark: true,
+  size: "sm"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  dark: true,
+  size: "md"
+}) %>
+
+<br><br>
+
+<%= pb_rails("user_badge", props: {
+  badge: "veteran",
+  dark: true,
+  size: "lg"
+}) %>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { UserBadge } from '../..'
+
+const UserBadgeSizeDark = () => {
+  return (
+    <div>
+      <div>
+        <UserBadge
+            badge="veteran"
+            dark
+            size="sm"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="veteran"
+            dark
+            size="md"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="veteran"
+            dark
+            size="lg"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserBadgeSizeDark

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

@@ -3,8 +3,12 @@ examples:
   rails:
   - user_badge_default: Default
   - user_badge_size: Sizes
+  - user_badge_dark: Dark
+  - user_badge_size_dark: Sizes Dark
 
 
   react:
   - user_badge_default: Default
   - user_badge_size: Sizes
+  - user_badge_dark: Dark
+  - user_badge_size_dark: Sizes Dark

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

@@ -1,2 +1,4 @@
 export { default as UserBadgeDefault } from './_user_badge_default.jsx'
 export { default as UserBadgeSize } from './_user_badge_size.jsx'
+export { default as UserBadgeDark } from './_user_badge_dark.jsx'
+export { default as UserBadgeSizeDark } from './_user_badge_size_dark.jsx'

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import { Caption, Title } from '../'
 
@@ -11,12 +11,15 @@ import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String,
-  dark?: Boolean,
-  date: Date,
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: object,
+  date: date,
+  id?: string,
   variant?: "day_only" | "month_day" | "expanded",
-  compact?: Boolean,
-  id?: String,
+  compact?: boolean,
+  id?: string,
 }
 
 const getDayOfWeek = (date, compact) => {
@@ -41,19 +44,30 @@ const getFormattedDate = (date, variant) => {
 const WeekdayStacked = (props: WeekdayStackedProps) => {
   const {
     align = 'left',
+    aria = {},
     className,
     dark = false,
+    data = {},
     date = new Date(),
+    id,
     variant = 'month_day',
     compact = false,
   } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_weekday_stacked_kit', align),
+    globalProps(props),
+    className
+  )
+
   return (
     <div
-        className={classnames(
-        buildCss('pb_weekday_stacked_kit', align),
-        className,
-        globalProps(props)
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
       <Title

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb

@@ -13,9 +13,6 @@ module Playbook
                    values: %w[left center right],
                    default: "left"
 
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
       prop :date, type: Playbook::Props::Date,
                   default: ::Date.current
                   

data/app/pb_kits/playbook/vendor.js

@@ -5,10 +5,6 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
-// Date Picker
-import datePickerHelper from './pb_date_picker/date_picker_helper.js'
-window.datePickerHelper = datePickerHelper
-
 // Lazy image loading
 import 'lazysizes'
 
@@ -23,5 +19,3 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
-
-import 'flatpickr'

data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim

@@ -15,3 +15,47 @@ ul.pb--tokens-spacing
     li class=(item[:dark] == true ? "dark" : "") data-name="#{item[:name]}" data-variable="#{variable}"
       div
         div class="pb--spacing_#{item[:class]}"
+
+= pb_rails("title", props: { text: "Spacing Props in Kits", tag: "h4", size: 4, padding_top: "sm" })
+br
+ul.pb_card_kit_shadow_deep_deselected.p_md
+  markdown: 
+    Rails kits the following spacing props:<br/>
+    `margin`<br/>
+    `margin_bottom`<br/>
+    `margin_left`<br/>
+    `margin_right`<br/>
+    `margin_top`<br/>
+    `margin_x`<br/>
+    `margin_y`<br/>
+    `padding`<br/>
+    `padding_bottom`<br/>
+    `padding_left`<br/>
+    `padding_right`<br/>
+    `padding_top`<br/>
+    `padding_x`<br/>
+    `padding_y`<br/>
+
+
+    <br/>
+    React kits have the following spacing props:<br/>
+    `margin`<br/>
+    `marginBottom`<br/>
+    `marginLeft`<br/>
+    `marginRight`<br/>
+    `marginTop`<br/>
+    `marginX`<br/>
+    `marginY`<br/>
+    `padding`<br/>
+    `paddingBottom`<br/>
+    `paddingLeft`<br/>
+    `paddingRight`<br/>
+    `paddingTop`<br/>
+    `paddingX`<br/>
+    `paddingY`<br/>
+    
+    <br/>
+
+    The values possible are: `"none", "xs", "sm", "md", "lg", "xl"`
+
+