playbook_ui 2.5.0

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

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+  ])
+};
+
+class ListItem extends Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return (
+      <li>
+        {children}
+      </li>
+    );
+  }
+}
+
+ListItem.propTypes = propTypes;
+
+export default ListItem;

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:false, borderless:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:true, borderless:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false, lg:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:true, dark:true, borderless:false}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false, xpadding:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,16 @@
+import React from "react"
+import List from "../_list.jsx"
+import ListItem from "../_list_item.jsx"
+
+
+function ListDefault() {
+  return (
+    <List>
+      <ListItem>{`List Item`}</ListItem>
+      <ListItem>{`List Item`}</ListItem>
+      <ListItem>{`List Item`}</ListItem>
+    </List>
+  )
+}
+
+export default ListDefault;

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false, lg:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:true, dark:false, borderless:false}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false, xpadding:true}) do %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+  <%= pb_rails("list/item") %>
+<% end %>

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

@@ -0,0 +1,14 @@
+examples:
+  rails:
+  - list_default: Default
+  - list_lg: Large
+  - list_ordered: Ordered
+  - list_borderless: Borderless
+  - list_xpadding: Horizontal Padding
+  - 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
+  react:
+  - list_default: Default

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

@@ -0,0 +1 @@
+export {default as ListDefault} from './_list_default.jsx';

data/app/pb_kits/playbook/pb_list/item.rb

@@ -0,0 +1,41 @@
+module Playbook
+  module PbList
+    class Item < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+          :configured_data,
+          :configured_id,
+          :configured_text].freeze
+
+      def initialize(classname: default_configuration,
+                   data: default_configuration,
+                   id: default_configuration,
+                   text: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_text = text
+      end
+
+      def text
+        if configured_text == default_configuration
+          "List item"
+        else
+          configured_text
+        end
+      end
+
+      def to_partial_path
+        "pb_list/item"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_list/list.rb

@@ -0,0 +1,114 @@
+module Playbook
+  module PbList
+    class List < Playbook::PbKit::Base
+      PROPS = [:configured_borderless,
+          :configured_classname,
+          :configured_dark,
+          :configured_data,
+          :configured_id,
+          :configured_layout,
+          :configured_lg,
+          :configured_ordered,
+          :configured_xpadding,
+          :block].freeze
+
+      def initialize(borderless: default_configuration,
+                   classname: default_configuration,
+                   dark: default_configuration,
+                   data: default_configuration,
+                   id: default_configuration,
+                   layout: default_configuration,
+                   lg: default_configuration,
+                   ordered: default_configuration,
+                   xpadding: default_configuration,
+                   &block)
+        self.configured_borderless = borderless
+        self.configured_classname = classname
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_layout = layout
+        self.configured_lg = lg
+        self.configured_ordered = ordered
+        self.configured_xpadding = xpadding
+        self.block = block_given? ? block : nil
+      end
+
+
+      def class
+        if configured_class == default_configuration
+          ""
+        else
+          configured_class
+        end
+      end
+
+      def dark
+        if configured_dark == default_configuration
+          ""
+        elsif(configured_dark == true)
+            "_dark"
+        end
+      end
+
+      def layout
+        if configured_layout == default_configuration
+          ""
+        elsif(configured_layout == "left")
+            "_layout_left"
+        elsif(configured_layout == "right")
+              "_layout_right"
+        end
+      end
+
+      def lg
+        if configured_lg == default_configuration
+          ""
+        elsif(configured_lg == true)
+          "_lg"
+        end
+      end
+
+      def ordered
+        if configured_ordered == false
+          "ul"
+        else
+          "ol"
+        end
+      end
+
+      def xpadding
+        if configured_xpadding == default_configuration
+          ""
+        elsif(configured_xpadding == true)
+            "_xpadding"
+        end
+      end
+
+      def borderless
+        if configured_borderless == false
+          ""
+        else
+          "_borderless"
+        end
+      end
+
+      def yield(context:)
+        context.capture(&block)
+      end
+
+      def to_partial_path
+        "pb_list/list"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<%= content_tag(:div) do %>
+  <%= content_tag(:table,
+      id: object.id,
+      data: object.data,
+      class: object.classname("table-#{object.size}
+          #{object.dark}
+          #{object.container}
+          #{object.disable_hover}
+          #{object.single_line}")) do %>
+    <%= object.yield(context: self) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+  ]),
+  className: PropTypes.string,
+  container: PropTypes.bool,
+  dark: PropTypes.bool,
+  disable_hover: PropTypes.bool,
+  single_line: PropTypes.bool,
+  size: PropTypes.oneOf(["sm", "md", "lg"])
+};
+
+const defaultProps = {
+  container: false,
+  dark: false,
+  disable_hover: false,
+  single_line: false,
+  size: "sm"
+};
+
+class Table extends React.Component {
+  render() {
+    const {
+      children,
+      className,
+      container,
+      dark,
+      disable_hover,
+      single_line,
+      size
+    } = this.props;
+
+    const css = classnames([
+      `table-${size}`,
+      container ? `table-card` : null,
+      dark ? `table-dark` : null,
+      single_line ? `single-line` : null,
+      disable_hover ? `no-hover` : null,
+      className,
+    ])
+
+    return (
+      <div>
+        <table className={css}>
+          {children}
+        </table>
+      </div>
+    )
+  }
+}
+
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps;
+
+export default Table;

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

@@ -0,0 +1 @@
+@import "styles/all";

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: {size: "md", container: 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.jsx

@@ -0,0 +1,45 @@
+import React from "react"
+import Table from "../_table.jsx"
+
+function TableContainer() {
+  return (
+    <Table container
+        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 TableContainer;