playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

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

@@ -1,26 +1,49 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+/* @flow */
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
+import React, { type Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+
+type ListItemProps = {
+  aria?: object,
+  children: Array<Node> | Node,
+  className?: String,
+  data?: object,
+  id?: String,
+  tabIndex?: String,
 }
 
-class ListItem extends Component {
-  render() {
-    const {
-      children,
-    } = this.props
-    return (
-      <li className="pb_item_kit">
+const ListItem = (props: ListItemProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+    tabIndex,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_item_kit'), className,
+    spacing(props)
+  )
+
+  return (
+    <>
+      <li
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+          tabIndex={tabIndex}
+      >
         {children}
       </li>
-    )
-  }
+    </>
+  )
 }
 
-ListItem.propTypes = propTypes
-
 export default ListItem

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_borderless.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListBorderless = () => {
+  return (
+    <>
+      <List
+          borderless
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListBorderless

data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx

@@ -6,12 +6,7 @@ const ListDark = () => {
   return (
     <>
       <List
-          borderless
           dark
-          layout="right"
-          ordered
-          size="large"
-          xpadding
       >
         <ListItem>{'Item 1'}</ListItem>
         <ListItem>{'Item 2'}</ListItem>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkBorderless = () => {
+  return (
+    <>
+      <List
+          borderless
+          dark
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkBorderless

data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkLg = () => {
+  return (
+    <>
+      <List
+          dark
+          size="large"
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkLg

data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkOrdered = () => {
+  return (
+    <>
+      <List
+          dark
+          ordered
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkOrdered

data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListDarkXpadding = () => {
+  return (
+    <>
+      <List
+          dark
+          xpadding
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDarkXpadding

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_left.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { Currency, List, ListItem, Title } from '../../'
+
+const ListLayoutLeft = () => {
+  return (
+    <>
+      <List
+          layout="left"
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutLeft

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/_list_layout_right.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { Currency, List, ListItem, Title } from '../../'
+
+const ListLayoutRight = () => {
+  return (
+    <>
+      <List
+          layout="right"
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutRight

data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListLg = () => {
+  return (
+    <>
+      <List
+          size="large"
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLg

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListOrdered = () => {
+  return (
+    <>
+      <List
+          ordered
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListOrdered

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { List, ListItem } from '../../'
+
+const ListXpadding = () => {
+  return (
+    <>
+      <List
+          xpadding
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListXpadding