playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueAlignDark = () => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+      />
+
+      <br />
+
+      <IconValue
+          align="center"
+          dark
+          icon="comment"
+          text="5"
+      />
+
+      <br />
+
+      <IconValue
+          align="right"
+          dark
+          icon="clock"
+          text="15min"
+      />
+    </div>
+  )
+}
+
+export default IconValueAlignDark

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "comment",
+  text: "5"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "clock",
+  text: "15m"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueDark = () => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="clipboard"
+          text="33-123456"
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="clock"
+          text="15min"
+      />
+    </div>
+  )
+}
+
+export default IconValueDark

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

@@ -3,7 +3,12 @@ examples:
   rails:
   - icon_value_default: Default
   - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark
 
 
   react:
   - icon_value_default: Default
+  - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark

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

@@ -1 +1,4 @@
 export { default as IconValueDefault } from './_icon_value_default.jsx'
+export { default as IconValueAlign } from './_icon_value_align.jsx'
+export { default as IconValueDark } from './_icon_value_dark.jsx'
+export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'

data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb

@@ -23,4 +23,4 @@
     <% else %>
         <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -3,15 +3,17 @@
 import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 import { Body, Caption, Flex, Icon, Title } from '../'
 
 type LabelValueProps = {
+  active?: boolean,
   aria?: object,
   className?: string,
   dark?: boolean,
   data?: object,
+  date?: date,
   id?: string,
   label: string,
   value?: string,
@@ -19,8 +21,6 @@ type LabelValueProps = {
   icon?: string,
   description?: string,
   title?: string,
-  date?: date,
-  active?: boolean
 }
 
 const dateString = (value: DateTime) => {
@@ -50,18 +50,14 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames(
-    ['pb_label_value_kit' + themeStyle, className],
-    globalProps(props)
-  )
+  const variantClass = variant === 'details' ? 'details' : ''
+  const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
-        dark={dark}
+        className={classes}
         description={description}
         icon={icon}
         id={id}

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -4,4 +4,4 @@
   [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
-}
+}

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -9,7 +9,6 @@ module Playbook
 
       prop :label, required: true
       prop :value
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default details],
                      default: "default"
@@ -21,7 +20,7 @@ module Playbook
 
 
       def classname
-        generate_classname("pb_label_value_kit", variant_class, dark_class)
+        generate_classname("pb_label_value_kit", variant_class)
       end
 
       def date_element
@@ -30,10 +29,6 @@ module Playbook
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def variant_class
         variant == "details" ? "details" : nil
       end

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -38,17 +38,17 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const darkClass = dark ? 'dark' : 'light'
-  const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass), className,
-    globalProps(props)
+  const bodyCss = classnames(
+    buildCss('pb_legend_kit', color),
+    globalProps(props),
+    className
   )
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={bodyCSS}
+        className={bodyCss}
         id={id}
     >
       <Body color={dark ? 'lighter' : 'light'}>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -10,12 +10,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: (1..7).map { |n| "data_#{n}" },
                    default: "data_1"
-
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
       prop :prefix_text
-
       prop :text, required: true
 
       def body_color
@@ -23,14 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
-      end
-
-      def chart_options
-        {
-          color: color,
-          text: text,
-        }
+        generate_classname("pb_legend_kit", color)
       end
     end
   end

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.html.erb

@@ -1,9 +1,10 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
     <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item"}) ) %>
+      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>
 
     <% if object.more_than_four %>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -2,12 +2,15 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Avatar } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type MultipleUsersProps = {
+  aria?: object,
   className?: string,
+  dark?: boolean,
+  data?: object,
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
@@ -15,24 +18,39 @@ type MultipleUsersProps = {
 }
 
 const MultipleUsers = (props: MultipleUsersProps) => {
-  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    maxDisplayedUsers = 4,
+    reverse = false,
+    users,
+  } = props
+
   const displayCount =
     users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
 
+  const reverseClass = reverse === true ? 'reverse' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
+    className, globalProps(props))
+
   return (
     <div
-        className={classnames(
-        className,
-        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
-        globalProps(props)
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       {usersToDisplay.map((avatarData, index) => (
         <Avatar
             {...avatarData}
             className="pb_multiple_users_item"
+            dark={dark}
             key={index}
             size="xs"
         />

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -28,6 +28,12 @@ $pb_multiple_users_size: map-get($avatar-sizes, "xs");
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;
 
+    &.dark {
+      .avatar_wrapper {
+        border: $pb_multiple_users_border_size solid $bg_dark;
+      }
+    }
+
     .avatar_wrapper {
       border: $pb_multiple_users_border_size solid $white;
     }

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersDark = () => {
+  return (
+    <div>
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+      />
+
+      <br />
+      <br />
+
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Shawn Palmer',
+          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+        },
+        {
+          name: 'Andrew Murray Cooper Craig',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersDark

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

@@ -3,7 +3,9 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_dark: Dark
 
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_dark: Dark