playbook_ui 4.15.1.alpha1 → 4.16.0

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

@@ -1,7 +1,8 @@
 examples:
-  
+
   rails:
   - label_pill_default: Default
-  
-  
+
+
   react:
+  - label_pill_default: Default

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

@@ -0,0 +1 @@
+export { default as LabelPillDefault } from './_label_pill_default.jsx'

data/app/pb_kits/playbook/pb_label_pill/label_pill.rb

@@ -14,7 +14,7 @@ module Playbook
       prop :pill_value
 
       def classname
-        generate_classname("pb_label_pill_kit", variant)
+        generate_classname("pb_label_pill_kit")
       end
     end
   end

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -2,56 +2,108 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
 } from '../utilities/props'
 
-type LayoutProps = {
+type LayoutPropTypes = {
   aria?: object,
-  children?: Array<React.ReactChild>,
+  children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
   collapse?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   dark?: Boolean,
   data?: object,
   full?: Boolean,
   position?: 'left' | 'right',
   size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
+  variant?: 'light' | 'dark' | 'gradient',
   transparent?: Boolean
 }
 
+type LayoutSideProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+
+type LayoutBodyProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+
+// Side component
+const Side = ({
+  children,
+  className,
+}: LayoutSideProps) => {
+  return (
+    <div className={classnames('layout_sidebar', className)}>
+      {children}
+    </div>
+  )
+}
+
+// Body component
+const Body = ({
+  children,
+  className,
+}: LayoutBodyProps) => {
+  return (
+    <div className={classnames('layout_body', className)}>
+      {children}
+    </div>
+  )
+}
+
+// Main componenet
 const Layout = ({
   aria = {},
   children,
+  className,
   collapse = 'md',
   dark = false,
   data = {},
   full = false,
   position = 'left',
+  size = 'md',
+  variant = 'light',
   transparent = false,
-  size = 'base',
-}: LayoutProps) => {
+}: LayoutPropTypes) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('layout', position, 'collapse', collapse),
-    buildCss('pb_layout_kit', size, position, {
-      'dark': dark,
-      'transparent': transparent,
-      'full': full,
+  const layoutCss = buildCss('pb_layout_kit', `size_${size}`, position, variant, {
+    'dark': dark,
+    'transparent': transparent,
+    'full': full,
+  })
+  const layoutCollapseCss = buildCss('layout', position, 'collapse', collapse)
+
+  const layoutChildren = typeof(children) === 'object' && children.length ? children : [children]
+
+  const subComponentTags = (tagName) => {
+    return layoutChildren.filter((c) => {
+      return c.type && c.type.displayName === tagName
+    }).map((child, i) => {
+      return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
     })
-  )
+  }
+
+  const nonSideChildren = layoutChildren.filter((child) => !child.type || child.type.displayName !== 'Side')
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(classes)}
+        className={classnames(layoutCss, layoutCollapseCss, className)}
     >
-      {children}
+      {subComponentTags('Side')}
+      {nonSideChildren}
     </div>
   )
 }
 
+Layout.Side = Side
+Layout.Body = Body
+
 export default Layout

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Body, Layout } from '../../'
+
+const LayoutColor = () => {
+  return (
+    <div>
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+      >
+        <Layout.Side>
+          {'Light'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+          variant="dark"
+      >
+        <Layout.Side>
+          <Body
+              dark
+              text="Dark"
+          />
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="md"
+          position="left"
+          size="sm"
+          variant="gradient"
+      >
+        <Layout.Side>
+          <Body
+              dark
+              text="Gradient"
+          />
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutColor

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutSizes = () => {
+  return (
+    <div>
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xs"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="sm"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="md"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="lg"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xl"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutSizes

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutSizesDark = () => {
+  return (
+    <div>
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xs"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="sm"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="md"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="lg"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xl"
+          variant="dark"
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutSizesDark

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutTransparent = () => {
+  return (
+    <div>
+      <Layout
+          collapse="sm"
+          position="left"
+          size="xs"
+          transparent
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutTransparent

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

@@ -5,4 +5,7 @@ examples:
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
   react:
-  - layout_default: Default
+  - layout_colors: Colors
+  - layout_transparent: Transparent
+  - layout_sizes: Sizes
+  - layout_sizes_dark: Sizes Dark

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

@@ -1 +1,4 @@
-export { default as LayoutDefault } from './_layout_default.jsx'
+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'

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

@@ -20,6 +20,8 @@ type LineGraphProps = {
   subTitle?: String,
   title: String,
   type?: String,
+  legend?: Boolean,
+  height?: String,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
@@ -42,6 +44,8 @@ export default class LineGraph extends React.Component {
       subTitle,
       title,
       type,
+      legend,
+      height,
     } = this.props
 
     new pbChart(`.${className}`, {
@@ -55,6 +59,8 @@ export default class LineGraph extends React.Component {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
+      legend: legend,
+      height: height,
     })
   }