playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.html.erb

@@ -0,0 +1,26 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-word",
+    dark: true,
+    input_id: 7,
+    checked: true,
+    text: "Doc"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-pdf",
+    dark: true,
+    input_id: 8,
+    text: "PDF"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-image",
+    dark: true,
+    input_id: 9,
+    disabled: true,
+    text: "PNG"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import { SelectableIcon } from '../../'
+
+const SelectableIconDark = () => {
+  const [ checkSelected, toggleSelected ] = useState(true)
+  const [ checkUnselected, toggleUnselected ] = useState(false)
+  const [ checkDisabled, toggleDisabled ] = useState(false)
+
+  return (
+
+    <div className="pb--doc-demo-row">
+      <SelectableIcon
+          checked={checkSelected}
+          dark
+          icon="file-word"
+          inputId={16}
+          onChange={() => toggleSelected(!checkSelected)}
+          text="Doc"
+      />
+
+      <SelectableIcon
+          checked={checkUnselected}
+          dark
+          icon="file-pdf"
+          inputId={17}
+          onChange={() => toggleUnselected(!checkUnselected)}
+          text="PDF"
+      />
+
+      <SelectableIcon
+          checked={checkDisabled}
+          dark
+          disabled
+          icon="file-image"
+          inputId={18}
+          onChange={() => toggleDisabled(!checkDisabled)}
+          text="PNG"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconDark

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

@@ -3,8 +3,10 @@ examples:
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
-
+  - selectable_icon_dark: Dark
   
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
+  - selectable_icon_dark: Dark
+  

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

@@ -1,2 +1,3 @@
 export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
 export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'
+export { default as SelectableIconDark } from './_selectable_icon_dark.jsx'

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -33,9 +33,9 @@ const StatChange = (props: StatChangeProps) => {
     <If condition={value}>
       <div
           className={classnames(
+          className,
           buildCss('pb_stat_change_kit', status),
-          globalProps(props),
-          className
+          globalProps(props)
         )}
           id={id}
       >

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -21,11 +21,11 @@ const StatValue = (props: StatValueProps) => {
   } = props
 
   const displayValue = function(value) {
-    if (value || value === 0) {
+    if (value) {
       return (
         <Title
             size={1}
-            text={`${value}`}
+            text={value}
         />
       )
     }
@@ -44,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', globalProps(props), className)}
+        className={classnames('pb_stat_value_kit', className, globalProps(props))}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -3,12 +3,7 @@ import { StatValue } from '../../'
 
 const StatValueDefault = () => {
   return (
-    <>
-      <StatValue value={1048} />
-      <br />
-      <br />
-      <StatValue value={0} />
-    </>
+    <StatValue value={1048} />
   )
 }
 

data/app/pb_kits/playbook/pb_table/_table.html.erb

@@ -1,9 +1,8 @@
 <%= content_tag(:div) do %>
   <%= content_tag(:table,
-      aria: object.aria,
-      class: object.classname,
+      id: object.id,
       data: object.data,
-      id: object.id) do %>
+      class: object.classname) do %>
     <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -2,19 +2,15 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableProps = {
-  aria?: object,
   children: array<Node> | Node,
   className: string,
   container: boolean,
-  dark?: boolean,
-  data?: object,
+  dark: boolean,
   dataTable: boolean,
   disableHover: boolean,
-  id?: string,
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,
   size: "sm" | "md" | "lg",
@@ -22,28 +18,21 @@ type TableProps = {
 
 const Table = (props: TableProps) => {
   const {
-    aria = {},
     children,
     className,
     container = true,
-    dark,
-    data = {},
+    dark = false,
     dataTable = false,
     disableHover = false,
-    id,
     responsive = 'collapse',
     singleLine = false,
     size = 'sm',
   } = props
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
   return (
     <table
-        {...ariaProps}
-        {...dataProps}
         className={classnames(
+        className,
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -54,10 +43,8 @@ const Table = (props: TableProps) => {
           'single-line': singleLine,
           'no-hover': disableHover,
         },
-        globalProps(props),
-        className
+        globalProps(props)
       )}
-        id={id}
     >
       {children}
     </table>

data/app/pb_kits/playbook/pb_table/_table_row.html.erb

@@ -1,7 +1,6 @@
 <%= content_tag(:tr,
-    aria: object.aria,
-    class: object.classname,
+    id: object.id,
     data: object.data,
-    id: object.id) do %>
+    class: object.classname) do %>
   <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -1,41 +1,23 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
-  aria?: object,
   children: array<React.ReactNode> | React.ReactNode,
   className: string,
-  data?: object,
-  id?: string,
   sideHighlightColor: string,
 }
 
 const TableRow = (props: TableRowPropTypes) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    id,
-    sideHighlightColor = 'windows',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const { children, className, sideHighlightColor = 'windows' } = props
   const sideHighlightClass =
     sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
-  const classes = classnames(buildCss('pb_table_row_kit', sideHighlightClass), globalProps(props), className)
+  const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
 
   return (
-    <tr
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
+    <tr className={classnames(tableRowCss, className, globalProps(props))}>
       {children}
     </tr>
   )

data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "md", container: false, dark: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableContainerDark = () => {
+  return (
+    <Table
+        container={false}
+        dark
+        size="md"
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableContainerDark

data/app/pb_kits/playbook/pb_table/docs/_table_dark.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "md", dark: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_dark.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableDark = () => {
+  return (
+    <Table
+        dark
+        size="md"
+    >
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{'Column 5'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableDark

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

@@ -10,7 +10,8 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
- 
+    - table_dark: Table Dark
+    - table_container_dark: Table Container Off Dark
   react:
     - table_sm: Small
     - table_md: Medium
@@ -22,3 +23,5 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
+    - table_dark: Table Dark
+    - table_container_dark: Table Container Off Dark