playbook_ui 2.5.0

data/app/pb_kits/playbook/pb_input/docs/_input_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
+<%= pb_rails("input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
+<%= pb_rails("input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
+<%= pb_rails("input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
+<%= pb_rails("input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>

data/app/pb_kits/playbook/pb_input/docs/_input_default.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import Input from "../_input.jsx"
+
+function InputDefault() {
+  return (
+    <div>
+      <Input label="First Name" placeholder="Enter first name" value="Timothy Wenhold" />
+      <Input label="Last Name" placeholder="Enter last name" />
+      <Input label="Phone Number" type="phone" placeholder="Enter phone number" />
+      <Input label="Email Address" type="email" placeholder="Enter email address" />
+      <Input label="Zip Code" type="number" placeholder="Enter zip code" />
+    </div>
+  )
+}
+
+export default InputDefault;

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

@@ -0,0 +1,5 @@
+examples:
+  rails:
+  - input_default: Default
+  react:
+  - input_default: Default

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

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

data/app/pb_kits/playbook/pb_input/input.rb

@@ -0,0 +1,85 @@
+module Playbook
+  module PbInput
+    class Input < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+            :configured_data,
+            :configured_id,
+            :configured_name,
+            :configured_label,
+            :configured_placeholder,
+            :configured_type,
+            :configured_value].freeze
+
+      def initialize(classname: default_configuration,
+                    data: default_configuration,
+                    id: default_configuration,
+                    name: default_configuration,
+                    label: default_configuration,
+                    placeholder: default_configuration,
+                    type: default_configuration,
+                    value: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_name = name
+        self.configured_label = label
+        self.configured_placeholder = placeholder
+        self.configured_type = type
+        self.configured_value = value
+      end
+
+      def label
+        if configured_label == default_configuration
+          ""
+        else
+          configured_label
+        end
+      end
+
+      def name
+        if configured_name == default_configuration
+          ""
+        else
+          configured_name
+        end
+      end
+
+      def placeholder
+        if configured_placeholder == default_configuration
+          ""
+        else
+          configured_placeholder
+        end
+      end
+
+      def type
+        if configured_type == default_configuration
+          "text"
+        else
+          configured_type
+        end
+      end
+
+      def value
+        if configured_value == default_configuration
+          ""
+        else
+          configured_value
+        end
+      end
+
+      def to_partial_path
+        "pb_input/input"
+      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_kit/base.rb

@@ -0,0 +1,38 @@
+module Playbook
+  module PbKit
+    class Base
+      def classname(ui_classes="")
+        if configured_classname == default_configuration
+          ui_classes
+        else
+          ui_classes+" "+configured_classname
+        end
+      end
+
+      def data(ui_data={})
+        ui_data ||= {}
+        if configured_data == default_configuration
+          ui_data
+        else
+          configured_data.merge(ui_data)
+        end
+      end
+
+      def id(ui_id=nil)
+        if configured_id == default_configuration
+          ui_id
+        else
+          configured_id
+        end
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_layout/_body.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("layout_body")) do %>
+  <%= object.yield(context: self) %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/_body.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 Body extends Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return (
+      <div className={`layout_body`}>
+        {children}
+      </div>
+    );
+  }
+}
+
+Body.propTypes = propTypes;
+
+export default Body;

data/app/pb_kits/playbook/pb_layout/_layout.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("layout_#{object.size}#{object.position}#{object.dark}#{object.transparent}#{object.full}#{object.collapse}")) do %>
+  <%= object.yield(context: self) %>
+<% end %>

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

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  position: PropTypes.oneOf(["left", "right"]),
+  transparent: PropTypes.bool,
+  size: PropTypes.oneOf(["xs", "sm", "md", "base", "lg", "xl"]),
+  collapse: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
+  full: PropTypes.bool,
+  dark: PropTypes.bool,
+  children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+  ])
+};
+
+const defaultProps = {
+  position: "left",
+  transparent: false,
+  size: "base",
+  collapse: "md",
+  full: false,
+  dark: false
+};
+
+class Layout extends Component {
+  render() {
+    const {
+      position,
+      transparent,
+      size,
+      collapse,
+      full,
+      dark,
+      children
+    } = this.props;
+    const dark_class = dark === true ? "_dark" : ""
+    const transparent_class = transparent === true ? "_transparent" : ""
+    const full_class = full === true ? " full" : ""
+    const size_class = "_"+size
+    const position_class = "_"+position
+    const collapse_class = " layout"+position_class+"_collapse_"+collapse
+    return (
+      <div className={`layout${size_class}${position_class}${dark_class}${transparent_class}${full_class}${collapse_class}`}>
+        {children}
+      </div>
+    );
+  }
+}
+
+Layout.propTypes = propTypes;
+Layout.defaultProps = defaultProps;
+
+export default Layout;

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

@@ -0,0 +1,87 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+@import "./layout_mixin";
+
+.layout {
+
+  $layout_sizes: (
+    "xs":   64px,
+    "sm":   200px,
+    "md":   250px,
+    "lg":   300px,
+    "xl":   365px,
+  );
+  $positions: (
+    "left",
+    "right",
+  );
+  $colors: (
+    "light",
+    "dark",
+    "transparent",
+  );
+
+  // Sections
+  &_section {
+    padding: $space_sm $space_xl;
+    &_border {
+      padding: $space_sm $space_xl;
+      border-bottom: 1px solid $sky;
+      &_margin {
+        margin: $space_sm $space_xl;
+        border-bottom: 1px solid $sky;
+      }
+    }
+  }
+
+  // sidebar and Body
+  @each $name, $size in $layout_sizes {
+    &_#{$name} {
+      @each $position in $positions {
+        &_#{$position} {
+          @each $color in $colors {
+            @if $color == "light" {
+              @include layout_settings($size, $position, $color, "#{&}");
+            } @else {
+              &_#{$color} {
+                @include layout_settings($size, $position, $color, "#{&}");
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+  // Collapse Settings
+  @each $position in $positions {
+    @each $breakpoint_name, $breakpoint in $breakpoints {
+      &_#{$position}_collapse_#{$breakpoint_name} {
+        @include break_at($breakpoint) {
+          @if $position == 'left' {
+            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
+            grid-template-rows: auto 1fr;
+
+          } @else {
+            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
+            grid-template-rows: 1fr auto;
+          }
+          grid-template-columns: 1fr;
+          &.full {
+            min-height: auto !important;
+          }
+          .layout_sidebar {
+            grid-area: layout_collapsed_#{$breakpoint_name}_sidebar;
+            border-width: 0 0 1px 0;
+          }
+          .layout_body {
+            grid-area: layout_collapsed_#{$breakpoint_name}_body;
+          }
+        }
+      }
+    }
+  }
+
+}

data/app/pb_kits/playbook/pb_layout/_layout_mixin.scss

@@ -0,0 +1,60 @@
+@import "../tokens/screen_sizes";
+
+@function str_replace($string, $search, $replace: '') {
+  $index: str_index($string, $search);
+  @if $index {
+    @return str_slice($string, 1, $index - 1) + $replace + str_replace(str_slice($string, $index + str_length($search)), $search, $replace);
+  }
+  @return $string;
+}
+
+@mixin layout_settings($size, $side, $color, $selector) {
+  $parent_name: str_replace($selector, '.', '');
+  $name: ".layout";
+  display: grid;
+
+  &.full {
+    min-height: 100vh;
+  }
+  @if $side == 'left' {
+    grid-template-areas: "#{$parent_name}_sidebar #{$parent_name}_body";
+    grid-template-columns: $size auto;
+  } @else {
+    grid-template-areas: "#{$parent_name}_body #{$parent_name}_sidebar";
+    grid-template-columns: auto $size;
+  }
+
+  > #{$name}_body {
+    grid-area: #{$parent_name}_body;
+    min-width: 0;
+  }
+  > #{$name}_sidebar {
+    grid-area: #{$parent_name}_sidebar;
+    @if $side == 'left' {
+      border-width: 0 1px 0 0;
+      border-style: solid;
+      @if $color == 'dark' {
+        background: $white_opacity_1;
+        border-color: $white_opacity_1;
+      } @else if $color == 'transparent' {
+        border-color: transparent;
+      } @else {
+        background: $white;
+        border-color: $sky;
+      }
+    }
+    @if $side == 'right' {
+      border-width: 0 0 0 1px;
+      border-style: solid;
+      @if $color == 'dark' {
+        background: $white_opacity_1;
+        border-color: $white_opacity_1;
+      } @else if $color == 'transparent' {
+        border-color: transparent;
+      } @else {
+        background: $white;
+        border-color: $sky;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_layout/_sidebar.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("layout_sidebar")) do %>
+  <%= object.yield(context: self) %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/_sidebar.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 Sidebar extends Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return (
+      <div className={`layout_sidebar`}>
+        {children}
+      </div>
+    );
+  }
+}
+
+Sidebar.propTypes = propTypes;
+
+export default Sidebar;