playbook_ui 6.2.1 → 7.0.0.pre.alpha4

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 = {
+  aria?: object,
+  badge?: "million-dollar" | "veteran",
   className?: string,
+  data?: object,
   id?: string,
-  badge?: "million-dollar" | "veteran",
   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,9 +11,12 @@ import DateTime from '../pb_kit/dateTime.js'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
+  aria?: object,
   className?: string,
   dark?: boolean,
+  data?: object,
   date: date,
+  id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,
   id?: string,
@@ -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/react_rails_kits.js

@@ -0,0 +1,5 @@
+// React-Rendered Rails Kit Exports =====
+export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
+export { default as Legend } from './pb_legend/_legend.jsx'
+export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-//=====================================
-// Base colors should not be documented.
-// Only document color use.
+/*=====================================
+Base colors should not be documented.
+Only document color use.
 
-// Colors -----------------------------
+Colors -----------------------------*/
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-// Specialty Gradient -----------------
+/* Specialty Gradient -----------------*/
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-// Interface colors -------------------
+/* Interface colors -------------------*/
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-// Main colors ------------------------
+/* Main colors ------------------------*/
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-//=====================================
+/*=====================================
 
-// Background colors ------------------
+Background colors ------------------*/
 $bg_light:            $silver;
 $bg_dark:             #172257;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-// Card colors ------------------
+/* Card colors ------------------*/
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-// Active colors ----------------------
+/* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff; 
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-// Hover colors -----------------------
+/* Hover colors -----------------------*/
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-// Focus colors -----------------------
+/* Focus colors -----------------------*/
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-// Border colors ----------------------
+/* Border colors ----------------------*/
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-// Shadow colors ----------------------
+/* Shadow colors ----------------------*/
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-// Text colors ------------------------
+/* Text colors ------------------------*/
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-// Data colors ------------------------
+/* Data colors ------------------------*/
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-// Status colors ----------------------
+/* Status colors ----------------------*/
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-// Link colors ------------------------
+/* Link colors ------------------------*/
 $primary_action:      $primary;
 
-// Product colors ---------------------
+/* Product colors ---------------------*/
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-// Category colors ---------------------
+/* Category colors ---------------------*/
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,7 +252,6 @@ $transparent: transparent;
 }
 
 :export {
-
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;