playbook_ui 2.9.0 → 2.9.1

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -0,0 +1,82 @@
+import React from "react"
+import Badge from "../_badge.jsx"
+
+function BadgeColors() {
+  return (
+    <div>
+      <div>
+        <Badge text="+1" variant="primary" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="primary" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="primary" />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="success" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="success" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="success" />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="warning" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="warning" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="warning" />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="error" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="error" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="error" />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="info" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="info" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="info" />
+      </div>
+
+      <div>
+        <Badge text="+1" variant="neutral" rounded />
+
+        &nbsp;
+
+        <Badge text="+4" variant="neutral" />
+
+        &nbsp;
+
+        <Badge text="+1000" variant="neutral" />
+      </div>
+    </div>
+  )
+}
+
+export default BadgeColors;

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb

@@ -0,0 +1,16 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "primary"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import Badge from "../_badge.jsx"
+
+function BadgeDefault() {
+  return (
+    <div>
+      <Badge text="+1" variant="primary" />
+
+      &nbsp;
+
+      <Badge text="+4" variant="primary" />
+
+      &nbsp;
+
+      <Badge text="+1000" variant="primary" />
+    </div>
+  )
+}
+
+export default BadgeDefault;

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.html.erb

@@ -0,0 +1,19 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "primary",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "primary",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "primary",
+    rounded: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import Badge from "../_badge.jsx"
+
+function BadgeRounded() {
+  return (
+    <div>
+      <Badge text="+1" variant="primary" rounded />
+
+      &nbsp;
+
+      <Badge text="+4" variant="primary" rounded />
+
+      &nbsp;
+
+      <Badge text="+1000" variant="primary" rounded />
+    </div>
+  )
+}
+
+export default BadgeRounded;

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

@@ -0,0 +1,10 @@
+examples:
+  rails:
+  - badge_default: Rectangle
+  - badge_rounded: Rounded
+  - badge_colors: Colors
+
+  react:
+  - badge_default: Rectangle
+  - badge_rounded: Rounded
+  - badge_colors: Colors

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

@@ -0,0 +1,3 @@
+export {default as BadgeDefault} from './_badge_default.jsx';
+export {default as BadgeRounded} from './_badge_rounded.jsx';
+export {default as BadgeColors} from './_badge_colors.jsx';

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(object.tag, object.text,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class),
+    class: object.classname,
     aria: object.aria) %>

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,11 +3,11 @@
 [class^=pb_caption_kit] {
   @include caption;
 
-  &[class*=_lg]  {
+  &[class*=_lg] {
     @include caption_lg;
   }
 
-  &[class*=_dark]  {
+  &[class*=_dark] {
     @include caption_dark;
   }
 }

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -2,72 +2,40 @@
 
 module Playbook
   module PbCaption
-    class Caption < Playbook::PbKit::Base
-      PROPS = %i[configured_aria
-                 configured_classname
-                 configured_dark
-                 configured_data
-                 configured_id
-                 configured_large
-                 configured_tag
-                 configured_text].freeze
-
-      def initialize(aria: default_configuration,
-                     classname: default_configuration,
-                     dark: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     large: default_configuration,
-                     tag: default_configuration,
-                     text: default_configuration)
-        self.configured_aria = aria
-        self.configured_classname = classname
-        self.configured_dark = dark
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_large = large
-        self.configured_tag = tag
-        self.configured_text = text
+    class Caption
+      include Playbook::Props
+
+      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :large, type: Playbook::Props::Boolean, default: false
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
+                 default: "div"
+      prop :text, default: "Caption"
+
+      def classname
+        [
+          [
+            "pb_caption_kit",
+            large_class,
+            dark_class,
+          ].compact.join("_"),
+          prop(:classname),
+        ].join(" ")
       end
 
-      def tag
-        tag_options = %w[h1 h2 h3 h4 h5 h6 p span div]
-        one_of_value(configured_tag, tag_options, "div")
+      def to_partial_path
+        "pb_caption/caption"
       end
 
-      def text
-        default_value(configured_text, "Caption")
-      end
+    private
 
       def large_class
-        true_value(configured_large, "lg", nil)
+        large ? "lg" : nil
       end
 
       def dark_class
-        true_value(configured_dark, "dark", nil)
-      end
-
-      def kit_class
-        caption_options = [
-          "pb_caption_kit",
-          large_class,
-          dark_class,
-        ]
-        caption_options.reject(&:nil?).join("_")
-      end
-
-      def to_partial_path
-        "pb_caption/caption"
-      end
-
-    private
-
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+        dark ? "dark" : nil
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:label, id: object.id, data: object.data, class: object.classname(object.kit_class)) do %>
+<input type="checkbox" value="<%=object.value%>" name="<%=object.name%>" <%=object.checked%>>
+<span class="pb_checkbox_checkmark">
+  <%= object.icon %>
+</span>
+<span class="pb_checkbox_label">
+  <%= object.text %>
+</span>
+
+<% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -0,0 +1,42 @@
+/* @flow */
+
+import React from 'react'
+
+type CheckboxProps = {
+  dark?: Boolean,
+  tag: String,
+  label: String,
+  name:String,
+  value:String,
+  checked?: Boolean,
+}
+
+const Checkbox = ({
+  dark=false,
+  tag='label',
+  label,
+  name='',
+  value='',
+  checked=false,
+}: CheckboxProps) => {
+
+  const Tag = `${tag}`
+
+  return (
+    <Tag
+        className={
+        `pb_checkbox_kit` +
+        (dark === true ? '_dark' : '')
+      }
+    > <input type="checkbox" name={name} value={value} defaultChecked={checked}/>
+  <span className="pb_checkbox_checkmark">
+      <i className="far fa-check check_icon"></i>
+    </span>
+    <span className="pb_checkbox_label">
+      {label}
+    </span>
+    </Tag>
+  )
+}
+
+export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+$transition: $transition_cubic;
+
+[class^=pb_checkbox_kit] {
+  .pb_checkbox_label {
+    display: block;
+    position: relative;
+    padding-left: $space_lg;
+    cursor: pointer;
+    font-size: $text_lt_default;
+    user-select: none;
+  }
+  .pb_checkbox_checkmark {
+    position: absolute;
+    height: 22px;
+    width: 22px;
+    border: solid $border_light 2px;
+    border-radius: $border_rad_light;
+    .check_icon{
+      opacity: 0;
+      position: relative;
+      top: -2px;
+      left: 1px;
+      height: 16px;
+      width:16px;
+      color: $white;
+
+    }
+  }
+
+  &:hover input ~ .pb_checkbox_checkmark {
+    border-color: $primary_action;
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    display: none;
+    &:checked ~ .pb_checkbox_checkmark {
+      background-color: $primary_action;
+      border-color: $primary_action;
+    }
+    &:checked ~ .pb_checkbox_checkmark {
+      display: block;
+      .check_icon{
+        opacity: $opacity_10;
+      }
+    }
+  }
+
+
+
+  &[class*=_dark] {
+    input:checked ~ .pb_checkbox_checkmark {
+      background-color: $primary_action_dk;
+      border-color: $primary_action_dk;
+    }
+
+    &:hover .pb_checkbox_checkmark {
+      border-color: $primary_action_dk;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCheckbox
+    class Checkbox < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_dark
+                 configured_text
+                configured_value
+              configured_name
+              configured_checked
+              configured_icon
+            ].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     dark: default_configuration,
+                     text: default_configuration,
+                   value: default_configuration,
+                 name: default_configuration,
+                 checked: default_configuration,
+                 icon: default_configuration
+               )
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_dark = dark
+        self.configured_text = text
+        self.configured_value = value
+        self.configured_name = name
+        self.configured_checked = checked
+        self.configured_icon = icon
+
+      end
+
+      def to_partial_path
+        "pb_checkbox/checkbox"
+      end
+
+      def icon
+        if is_set? configured_icon
+          pb_icon = Playbook::PbIcon::Icon.new(icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true)
+          ApplicationController.renderer.render(partial: pb_icon, as: :object)
+        end
+      end
+
+      def text
+        default_value(configured_text, "")
+      end
+
+      def value
+        default_value(configured_value, "")
+      end
+
+      def name
+        default_value(configured_name, "")
+      end
+
+      def checked
+        true_value(configured_checked, "checked='true'",nil)
+      end
+
+      def checked_class
+        checked ? "on" : "off"
+      end
+
+
+      def dark_class
+        true_value(configured_dark, "dark", nil)
+      end
+
+      def kit_class
+        caption_options = [
+          "pb_checkbox_kit",
+          dark_class,
+          checked_class
+        ]
+        caption_options.reject(&:nil?).join("_")
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end