playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.icon %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class IconCircle extends React.Component {
+  render() {
+    return (
+      <div className="pb_icon_circle">
+        <span>ICON CIRCLE CONTENT</span>
+      </div>
+    )
+  }
+}
+
+IconCircle.propTypes = propTypes;
+
+export default IconCircle;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -0,0 +1,57 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/opacity";
+
+$pb_icon_circle_sizes: (
+  "xs":   28px,
+  "sm":   38px,
+  "md":   60px,
+  "base": 60px,
+  "lg":   80px,
+  "xl":   100px,
+);
+
+[class^=pb_icon_circle] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  object-fit: cover;
+  overflow: hidden;
+  position: relative;
+
+  i,
+  svg {
+    &[class^=pb_icon] {
+      width: 100%;
+      height: 100%;
+      display: block;
+      text-align: center;
+      text-transform: uppercase;
+      position: relative;
+      z-index: 0;
+    }
+  }
+
+  @each $name, $size in $pb_icon_circle_sizes {
+    &[class*=_#{$name}] {
+      width: $size;
+      height: $size;
+      border-radius: $size/2;
+      background: $silver;
+      color: $text_lt_light;
+
+      &[class^=pb_icon] {
+        font-size: $size * 0.38;
+        line-height: $size;
+      }
+    }
+  }
+
+  @each $color_name, $color_value in $colors {
+    &[class*=_#{$color_name}] {
+      color: $color_value;
+      background: rgba($color_value, $opacity-1);
+    }
+  }
+}

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -0,0 +1,35 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  variant: "royal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "archive",
+  variant: "blue",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "arrow-alt-right",
+  variant: "purple",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "cloud",
+  variant: "teal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "award",
+  variant: "red",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "bolt",
+  variant: "yellow",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  icon: "calendar",
+  variant: "green",
+  size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "user"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import IconCircle from "../_icon_circle.jsx"
+
+function IconCircleDefault() {
+  return (
+    <div>
+      <IconCircle />
+    </div>
+  )
+}
+
+export default IconCircleDefault;

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  size: "xs"
+}) %>
+
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  size: "sm"
+}) %>
+
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  size: "md"
+}) %>
+
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  size: "lg"
+}) %>
+
+<%= pb_rails("icon_circle", props: {
+  icon: "comment",
+  size: "xl"
+}) %>

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+  - icon_circle_default: Default
+  - icon_circle_sizes: Size
+  - icon_circle_color: Color
+
+
+  react:
+  - icon_circle_default: Default

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

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

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIconCircle
+    class IconCircle < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_icon
+                 configured_id
+                 configured_size
+                 configured_variant].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     icon: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration,
+                     variant: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_icon = icon
+        self.configured_id = id
+        self.configured_size = size
+        self.configured_variant = variant
+      end
+
+      def icon
+        if is_set? configured_icon
+          pb_icon = Playbook::PbIcon::Icon.new(icon: configured_icon, fixed_width: true)
+          ApplicationController.renderer.render(partial: pb_icon, as: :object)
+        end
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_icon_circle",
+          size,
+          variant,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_icon_circle/icon_circle"
+      end
+
+    private
+
+      def size
+        size_options = %w[xs sm md base lg xl]
+        one_of_value(configured_size, size_options, "md")
+      end
+
+      def variant
+        variant_options = %w[default royal blue purple teal red yellow green]
+        one_of_value(configured_variant, variant_options, "default")
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.value %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class IconValue extends React.Component {
+  render() {
+    return (
+      <div className="pb_icon_value">
+        <span>ICON VALUE CONTENT</span>
+      </div>
+    )
+  }
+}
+
+IconValue.propTypes = propTypes;
+
+export default IconValue;

data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss

@@ -0,0 +1,30 @@
+@import "../tokens/typography";
+@import "../tokens/spacing";
+
+[class^=pb_icon_value] {
+  display: flex;
+  align-items: center;
+
+  [class^=pb_body] {
+    font-size: $font-small !important;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    [class*=pb_icon] {
+      font-size: $font-large !important;
+      margin-right: $space-xs !important;
+      flex-shrink: 0;
+    }
+  }
+
+  &[class*=_left] {
+    justify-content: flex-start;
+  }
+  &[class*=_center] {
+    justify-content: center;
+  }
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
+}

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("icon_value", props: {
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  icon: "comment",
+  text: "5",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  icon: "clock",
+  text: "15m",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("icon_value", props: {
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  icon: "comment",
+  text: "5"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  icon: "clock",
+  text: "15m"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import IconValue from "../_icon_value.jsx"
+
+function IconValueDefault() {
+  return (
+    <div>
+      <IconValue />
+    </div>
+  )
+}
+
+export default IconValueDefault;

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - icon_value_default: Default
+  - icon_value_align: Align
+
+
+  react:
+  - icon_value_default: Default

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

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

data/app/pb_kits/playbook/pb_icon_value/icon_value.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIconValue
+    class IconValue < Playbook::PbKit::Base
+      PROPS = %i[configured_align
+                 configured_classname
+                 configured_data
+                 configured_icon
+                 configured_id
+                 configured_text].freeze
+
+      def initialize(align: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     icon: default_configuration,
+                     id: default_configuration,
+                     text: default_configuration)
+        self.configured_align = align
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_icon = icon
+        self.configured_id = id
+        self.configured_text = text
+      end
+
+      def value
+        if is_set? configured_text
+          pb_icon_value = Playbook::PbBody::Body.new(color: "light") do
+            icon +
+              text
+          end
+          ApplicationController.renderer.render(partial: pb_icon_value, as: :object)
+        end
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_icon_value",
+          align,
+        ]
+        kit_options.compact.join("_")
+      end
+
+      def to_partial_path
+        "pb_icon_value/icon_value"
+      end
+
+    private
+
+      def align
+        align_options = %w[left center right]
+        one_of_value(configured_align, align_options, "left")
+      end
+
+      def icon
+        if is_set? configured_icon
+          icon_props = { icon: configured_icon, fixed_width: true }
+          pb_icon = Playbook::PbIcon::Icon.new(icon_props)
+          ApplicationController.renderer.render(partial: pb_icon, as: :object)
+        else
+          ""
+        end
+      end
+
+      def text
+        default_value(configured_text, "")
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end