playbook_ui 2.5.0

data/app/pb_kits/playbook/pb_table/styles/_reset.scss

@@ -0,0 +1,17 @@
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    border-collapse: collapse;
+    background-color: unset;
+    background: unset;
+
+    thead {
+      tr {
+        th {
+          text-align: inherit;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -0,0 +1,35 @@
+table {
+  &.single-line {
+    width: 100%;
+    max-width: 100vw;
+    table-layout: fixed;
+
+    tbody {
+      tr {
+        td {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+
+          & > * {
+            &:not(.btn, br) {
+              display: inline-block !important;
+            }
+          }
+
+          .btn {
+            display: block !important;
+          }
+
+          br {
+            content:' ' !important;
+
+            &::after {
+              content:' ';
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -0,0 +1,39 @@
+table {
+  @each $name, $value in $cell-pad-list {
+    &.#{$name} {
+      width: 100%;
+      
+      thead {
+        tr {
+          th {
+            padding: $value $cell-gutter;
+
+            &:first-child {
+              padding-left: $cell-pad-endcap;
+            }
+            &:last-child {
+              padding-right: $cell-pad-endcap;
+            }
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            border-color: $sky;
+            border-style: solid;
+            border-width: 0 0 1px;
+            padding: $value $cell-gutter;
+
+            &:first-child {
+              padding-left: $cell-pad-endcap;
+            }
+            &:last-child {
+              padding-right: $cell-pad-endcap;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -0,0 +1,88 @@
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-card {
+      border-collapse: separate;
+      background: $white;
+
+      thead {
+        tr {
+          th {
+            border-color: $sky;
+            border-style: solid;
+            border-width: 1px 0 1px 0;
+
+            &:first-child {
+              border-radius: 4px 0 0 0;
+              border-width: 1px 0 1px 1px;
+            }
+            &:last-child {
+              border-radius: 0 4px 0 0;
+              border-width: 1px 1px 1px 0;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            border-color: $sky;
+            border-style: solid;
+            border-width: 0 0 1px 0;
+
+            &:first-child {
+              border-width: 0 0 1px 1px;
+            }
+            &:last-child {
+              border-width: 0 1px 1px 0;
+            }
+          }
+
+          &:last-child {
+            td {
+              border-width: 0 0 1px 0;
+
+              &:first-child {
+                border-radius: 0 0 0 4px;
+                border-width: 0 0 1px 1px;
+              }
+              &:last-child {
+                border-radius: 0 0 4px 0;
+                border-width: 0 1px 1px 0;
+              }
+            }
+          }
+        }
+      }
+
+      &.as-cards {
+        border: 1px solid $sky;
+        border-radius: 4px;
+
+        thead {
+          tr {
+            margin: $space-xs 0 0;
+            padding: 0 $space-xs;
+            border-bottom: 1px solid $sky;
+
+            th {
+              border-width: 0;
+            }
+          }
+        }
+        tbody {
+          tr {
+            margin: $space-xs;
+            width: calc(100% - #{$space-xs}*2);
+
+            td {
+              border-top-width: 1px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -0,0 +1,92 @@
+$table-dark-card-bg: $ink;
+
+.table-sm,
+.table-md,
+.table-lg {
+  &.table-dark {
+    thead {
+      tr {
+        border-color: $ink-light !important;
+
+        th {
+          border-color: $ink-light !important;
+          color: $ink-lightest;
+        }
+      }
+    }
+    tbody {
+      tr {
+        border-color: $ink-light;
+        transition: none !important;
+
+        td {
+          border-color: $ink-light !important;
+          border-bottom-width: 0 !important;
+          color: $white;
+
+          &:before {
+            color: $ink-lightest !important;
+          }
+        }
+        &:first-child {
+          td {
+            border-top-width: 0 !important;
+          }
+        }
+      }
+    }
+
+    &:not(.no-hover) {
+      tbody {
+        tr {
+          &:hover {
+            td {
+              border-color: $ink-light !important;
+              background: $ink-light;
+            }
+          }
+        }
+      }
+    }
+
+    &.table-card {
+      background: $table-dark-card-bg !important;
+    }
+  }
+}
+
+@media only screen and (max-width: $screen-xs-max) {
+  .table-sm,
+  .table-md,
+  .table-lg {
+    &.table-card {
+      &.table-dark {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $table-dark-card-bg !important;
+            }
+          }
+        }
+      }
+    }
+    &.table-dark {
+      tbody {
+        tr {
+          td {
+            &:first-child {
+              border-top-color: $ink-light !important;
+            }
+          }
+          &:first-child {
+            td {
+              border-top-width: 1px !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_variables.scss

@@ -0,0 +1,23 @@
+//--------- PADDING ---------//
+
+// Cell padding between cells
+$cell-gutter: $space-xs;
+
+// First & last cell padding
+$cell-pad-endcap: $space-lg;
+
+// Vertical cell padding
+$cell-pad-sm: $space-xs;
+$cell-pad-md: $space-sm;
+$cell-pad-lg: $space-lg;
+
+$cell-pad-list: (
+  table-sm: $cell-pad-sm,
+  table-md: $cell-pad-md,
+  table-lg: $cell-pad-lg
+);
+
+//--------- CONTENT ---------//
+
+$default-header-size: $font-smaller;
+$default-font-size: $font-small;

data/app/pb_kits/playbook/pb_table/table.rb

@@ -0,0 +1,95 @@
+module Playbook
+  module PbTable
+    class Table < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+          :configured_container,
+          :configured_dark,
+          :configured_data,
+          :configured_disable_hover,
+          :configured_id,
+          :configured_single_line,
+          :configured_size,
+          :configured_text,
+          :block].freeze
+
+      def initialize(classname: default_configuration,
+                    container: default_configuration,
+                    dark: default_configuration,
+                    data: default_configuration,
+                    disable_hover: default_configuration,
+                    id: default_configuration,
+                    single_line: default_configuration,
+                    size: default_configuration,
+                    &block)
+        self.configured_classname = classname
+        self.configured_container = container
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_disable_hover = disable_hover
+        self.configured_id = id
+        self.configured_single_line = single_line
+        self.configured_size = size
+        self.block = block_given? ? block : nil
+      end
+
+      def single_line
+        if configured_single_line == default_configuration
+          ""
+        else
+          configured_single_line === true ? "single-line" : ""
+        end
+      end
+
+      def size
+        size_options = %w(sm md lg)
+        size_default = "sm"
+        if configured_size == default_configuration
+          size_default
+        else
+          size_options.include?(configured_size) ? configured_size : size_default
+        end
+      end
+
+      def dark
+        if configured_dark == default_configuration
+          ""
+        else
+          configured_dark === true ? "table-dark" : ""
+        end
+      end
+
+      def disable_hover
+        if configured_disable_hover == default_configuration
+          ""
+        else
+          configured_disable_hover === true ? "no-hover" : ""
+        end
+      end
+
+      def container
+        if configured_container == default_configuration
+          ""
+        else
+          configured_container === true ? "table-card" : ""
+        end
+      end
+
+      def yield(context:)
+        context.capture(&block)
+      end
+
+      def to_partial_path
+        "pb_table/table"
+      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_title/_title.html.erb

@@ -0,0 +1 @@
+<%= content_tag(:"#{object.tag}", object.text, class: "heading#{object.size}#{object.dark}") %>

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  text: PropTypes.string.isRequired,
+  tag: PropTypes.string.isRequired,
+  size: PropTypes.oneOf([1, 2, 3, 4]).isRequired,
+  dark: PropTypes.bool
+};
+
+const defaultProps = {
+  text: "Hello World",
+  tag: "h1",
+  size: 1,
+  dark: false
+};
+
+class Title extends Component {
+  render() {
+    const Tag = `${this.props.tag}`;
+    const { size, dark, text } = this.props;
+    return (
+      <Tag className={`heading_${size}` + (dark === true ? "_dark" : "")}>
+        {text}
+      </Tag>
+    );
+  }
+}
+
+Title.propTypes = propTypes;
+Title.defaultProps = defaultProps;
+
+export default Title;

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -0,0 +1,32 @@
+@import "title_mixin";
+
+// FEEBACK: STYLING H1's & Strongs can have unxepected results
+// What happends if I do this <strong class="heading_1" or <h1 class="heading_3"
+
+.heading_1 {
+  @include heading_1;
+  &_dark {
+    @include heading_1_dark;
+  }
+}
+
+.heading_2 {
+  @include heading_2;
+  &_dark {
+    @include heading_2_dark;
+  }
+}
+
+.heading_3 {
+  @include heading_3;
+  &_dark {
+    @include heading_3_dark;
+  }
+}
+
+.heading_4, strong {
+  @include heading_4;
+  &_dark {
+    @include heading_4_dark;
+  }
+}