playbook_ui 4.17.0 → 5.0.1

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

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

@@ -14,4 +14,15 @@ examples:
   - list_dark_xpadding: Dark Horizontal Padding
   react:
   - list_default: Default
-  - list_dark: Dark
+  - list_lg: Large
+  - 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
+  - list_dark_borderless: Dark Borderless
+  - list_dark_xpadding: Dark Horizontal Padding
+ 

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

@@ -1,2 +1,13 @@
 export { default as ListDefault } from './_list_default.jsx'
 export { default as ListDark } from './_list_dark.jsx'
+export { default as ListXpadding } from './_list_xpadding.jsx'
+export { default as ListDarkBorderless } from './_list_dark_borderless.jsx'
+export { default as ListDarkLg } from './_list_dark_lg.jsx'
+export { default as ListDarkXpadding } from './_list_dark_xpadding.jsx'
+export { default as ListDarkOrdered } from './_list_dark_ordered.jsx'
+export { default as ListLayoutRight } from './_list_layout_right.jsx'
+export { default as ListLayoutLeft } from './_list_layout_left.jsx'
+export { default as ListLg } from './_list_lg.jsx'
+export { default as ListOrdered } from './_list_ordered.jsx'
+export { default as ListBorderless } from './_list_borderless.jsx'
+

data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Body, Caption, Icon, Title } from '../'
 import { spacing } from '../utilities/spacing.js'
 
@@ -14,19 +15,40 @@ const dateString = (value: DateTime) => {
 }
 
 type LogisticProps = {
+  aria?: object,
+  className?: String,
   dark?: Boolean,
+  data?: object,
   date: String,
+  id?: String,
   link?: String,
-  projectName: String,
-  projectNumber: Number,
+  projectName?: String,
+  projectNumber?: Number,
 }
 
 const Logistic = (props: LogisticProps) => {
-  const { dark = false, date, link, projectName, projectNumber } = props
+  const { aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    id,
+    link,
+    projectName,
+    projectNumber } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
+  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, spacing(props))
 
   return (
-    <div className={classnames('pb_logistic_kit', spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Body color="light">
         <Caption text="Project" />
         <Icon

data/app/pb_kits/playbook/pb_message/_message.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>