playbook_ui 4.17.0.pre.alpha1 → 4.17.0

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("layout", props: {layout: "collection"}) do %>
+  <%= pb_rails("layout/body") do %>
+
+ <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+   <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+
+    <% end %>
+     <%= pb_rails("card" ) do %>
+        <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card") do %>
+      Card content 
+    <% end %>
+      <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+     <%= pb_rails("card" ) do %>
+      Card content 
+    <% end %>
+     <%= pb_rails("card" ) do %>
+     <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Card, Layout } from '../../'
+
+const LayoutCollection = () => {
+  return (
+    <div>
+      <Layout
+          layout="collection"
+      >
+        <Layout.Body>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutCollection

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

@@ -4,8 +4,10 @@ examples:
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout

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

@@ -2,3 +2,4 @@ export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
 export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
+export { default as LayoutCollection } from './_layout_collection.jsx'

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -21,10 +21,18 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                   values: %w[light dark gradient],
                   default: "light"
+      prop :layout, type: Playbook::Props::Enum,
+            values: %w[sidebar collection],
+            default: "sidebar"
 
       def classname
-        first_class = generate_classname("pb_layout_kit", "size_#{size}", position, variant, transparent_class)
-        [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        case layout
+	        when "collection"
+	          generate_classname("pb_layout_kit", layout)
+	        else
+	          first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
+	          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        end
       end
 
     private

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

@@ -1,34 +1,36 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
 type LegendProps = {
-  color?: 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7',
+  color?: | "data_1"
+    | "data_2"
+    | "data_3"
+    | "data_4"
+    | "data_5"
+    | "data_6"
+    | "data_7",
   dark?: Boolean,
   prefixText?: String,
   text: String,
 }
 
-const Legend = ({
-  color = 'data_1',
-  dark = false,
-  prefixText,
-  text,
-}: LegendProps) => {
+const Legend = (props: LegendProps) => {
+  const { color = 'data_1', dark = false, prefixText, text } = props
   const darkClass = dark ? 'dark' : 'light'
-  const bodyCSS = buildCss('pb_legend_kit', color, darkClass)
+  const bodyCSS = classnames(
+    buildCss('pb_legend_kit', color, darkClass),
+    spacing(props)
+  )
 
   return (
     <div className={bodyCSS}>
-      <Body
-          color={dark ? 'lighter' : 'light'}
-      >
+      <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>
           <Title

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -1,7 +1,8 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
@@ -71,7 +72,7 @@ export default class LineGraph extends React.Component {
 
     return (
       <div
-          className={className}
+          className={classnames(className, spacing(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -1,40 +1,43 @@
 /* @flow */
 
 import React, { type Node } from 'react'
-
+import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ListProps = {
   borderless: boolean,
   children: Array<Node> | Node,
   dark: boolean,
-  layout: '' | 'left' | 'right',
+  layout: "" | "left" | "right",
   ordered: boolean,
-  size: '' | 'large',
+  size: "" | "large",
   xpadding: boolean,
 }
 
-const List = ({
-  borderless = false,
-  children,
-  dark = false,
-  layout = '',
-  ordered = false,
-  size = '',
-  xpadding = false,
-}: ListProps) => {
-  const classes = buildCss('pb_list_kit', layout, size, {
-    'dark': dark,
-    'borderless': borderless,
-    'ordered': ordered,
-    'xpadding': xpadding,
-  })
+const List = (props: ListProps) => {
+  const {
+    borderless = false,
+    children,
+    dark = false,
+    layout = '',
+    ordered = false,
+    size = '',
+    xpadding = false,
+  } = props
+  const classes = classnames(
+    buildCss('pb_list_kit', layout, size, {
+      dark: dark,
+      borderless: borderless,
+      ordered: ordered,
+      xpadding: xpadding,
+    }),
+    spacing(props)
+  )
 
   return (
     <div className={classes}>
-      <ul>
-        {children}
-      </ul>
+      <ul>{children}</ul>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_list/docs/_description.md

@@ -1 +1,7 @@
-Lists display a vertical set of related content.
+Lists display a vertical set of related content.
+
+ **Layout Prop**
+ 
+ - Setting the `layout` prop to either `left` or `right` creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.
+ - Using `layout:'left'` will make the first column shrink and the second column grow and align to the left.
+ - Using `layout:'right'` will make the first column grow and push the second column to the right.

data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false,layout: "left"}) do %>
+    <% 5.times do%>
+        <%= pb_rails("list/item") do %>
+            <%= pb_rails("title", props:{text: "Label", size:4})%>
+            <%= pb_rails("currency", props: { label: "Caption",amount: "2,000.50",size: "sm",}) %>
+        <% end %>
+    <%end%>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false,layout: "right"}) do %>
+    <% 5.times do%>
+        <%= pb_rails("list/item") do %>
+            <%= pb_rails("title", props:{text: "Label", size:4})%>
+            <%= pb_rails("currency", props: { label: "Caption",amount: "2,000.50",size: "sm",}) %>
+        <% end %>
+    <%end%>
+<% end %>

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

@@ -5,6 +5,8 @@ examples:
   - list_ordered: Ordered
   - list_borderless: Borderless
   - list_xpadding: Horizontal Padding
+  - list_layout_left: Layout Left
+  - list_layout_right: Layout Right
   - list_dark: Dark Default
   - list_dark_lg: Dark Large
   - list_dark_ordered: Dark Ordered

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -1,33 +1,35 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
+import { Body, Icon } from '../'
 
-import {
-  Body,
-  Icon,
-} from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type LoadingInlineProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   dark?: Boolean,
   data?: String,
   id?: String,
 }
 
-const LoadingInline = ({
-  align = 'left',
-}: LoadingInlineProps) => (
-  <div className={`pb_loading_inline_kit_${align}`}>
-    <Body color="light">
-      <Icon
-          fixedWidth
-          icon="spinner"
-          pulse
-      />
-      {' Loading'}
-    </Body>
-  </div>
-)
+const LoadingInline = (props: LoadingInlineProps) => {
+  const { align = 'left' } = props
+  return (
+    <div
+        className={classnames(`pb_loading_inline_kit_${align}`, spacing(props))}
+    >
+      <Body color="light">
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
 
 export default LoadingInline

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { Body, Caption, Icon, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 const dateString = (value: DateTime) => {
   const month = value.toMonthNum()
@@ -20,19 +21,12 @@ type LogisticProps = {
   projectNumber: Number,
 }
 
-const Logistic = ({
-  dark = false,
-  date,
-  link,
-  projectName,
-  projectNumber,
-}: LogisticProps) => {
+const Logistic = (props: LogisticProps) => {
+  const { dark = false, date, link, projectName, projectNumber } = props
   const formattedDate = new DateTime({ value: date })
 
   return (
-    <div
-        className={classnames('pb_logistic_kit')}
-    >
+    <div className={classnames('pb_logistic_kit', spacing(props))}>
       <Body color="light">
         <Caption text="Project" />
         <Icon
@@ -85,7 +79,6 @@ const Logistic = ({
                 />
               </Otherwise>
             </Choose>
-
           </Otherwise>
         </Choose>
       </Body>

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -1,8 +1,9 @@
 /* @flow */
 
 import React from 'react'
-
 import { Avatar, Body, Caption } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type MessageProps = {
   avatarName?: String,
@@ -13,19 +14,22 @@ type MessageProps = {
   timestamp?: String,
 }
 
-const Message = ({
-  avatarName = '',
-  avatarUrl = '',
-  label = '',
-  message = '',
-  timestamp = '',
-  avatarStatus = null,
-}: MessageProps) => {
+const Message = (props: MessageProps) => {
+  const {
+    avatarName = '',
+    avatarUrl = '',
+    label = '',
+    message = '',
+    timestamp = '',
+    avatarStatus = null,
+  } = props
   const shouldDisplayAvatar = avatarUrl || avatarName
-  const classes = shouldDisplayAvatar ? 'pb_message_kit_avatar' : 'pb_message_kit'
+  const classes = shouldDisplayAvatar
+    ? 'pb_message_kit_avatar'
+    : 'pb_message_kit'
 
   return (
-    <div className={classes}>
+    <div className={classnames(classes, spacing(props))}>
       <If condition={shouldDisplayAvatar}>
         <Avatar
             imageUrl={avatarUrl}

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

@@ -2,9 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
 import { Avatar } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type MultipleUsersProps = {
   className?: String,
@@ -14,19 +14,19 @@ type MultipleUsersProps = {
   users: Array<Object>,
 }
 
-const MultipleUsers = ({
-  className,
-  id,
-  maxDisplayedUsers = 4,
-  reverse = false,
-  users,
-}: MultipleUsersProps) => {
-  const displayCount = users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
+const MultipleUsers = (props: MultipleUsersProps) => {
+  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
+  const displayCount =
+    users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
 
   return (
     <div
-        className={classnames(className, buildCss('pb_multiple_users_kit', reverse && 'reverse'))}
+        className={classnames(
+        className,
+        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
+        spacing(props)
+      )}
         id={id}
     >
       {usersToDisplay.map((avatarData, index) => (