playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div, class: "pb__progress_simple_wrapper_#{object.align}") do %>
+  <%= content_tag(:div,
+  id: object.id,
+  data: object.data({value: object.number_value}),
+  class: object.classname(object.kit_class),
+  style: "width:#{object.width};") do %>
+    <%= content_tag(:div, "",
+      class: "progress_simple_value",
+      style: "width:#{object.percent_value};") %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -0,0 +1,45 @@
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+$pb_progress_simple_height: 4px;
+
+[class^=pb__progress_simple_wrapper] {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  &[class*=_center] {
+    justify-content: center;
+  }
+
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
+}
+
+[class^=pb_progress_simple] {
+  width: 100%;
+  height: $pb_progress_simple_height;
+  border-radius: $pb_progress_simple_height/2;
+  background: rgba($primary, $opacity-1);
+
+  .progress_simple_value {
+    width: 0%;
+    height: 100%;
+    border-radius: $pb_progress_simple_height/2;
+    background: $primary;
+  }
+
+  &[class*=_muted] {
+    background: rgba($slate, $opacity-2);
+
+    .progress_simple_value {
+      background: $slate;
+    }
+  }
+
+  &[class*=_right] {
+    display: flex;
+    align-self: flex-end;
+  }
+}

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
+<br>
+<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
+<br>
+<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9, muted: true }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - progress_simple_default: Default
+  - progress_simple_value: Setting Values
+  - progress_simple_width: Progress Bar Width
+  - progress_simple_muted: Muted
+  - progress_simple_align: Align
+
+
+  react:
+  - progress_simple_default: Default

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

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

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressSimple
+    class ProgressSimple < Playbook::PbKit::Base
+      PROPS = %i[configured_align
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_max
+                 configured_muted
+                 configured_percent
+                 configured_value
+                 configured_width].freeze
+
+      def initialize(align: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     max: default_configuration,
+                     muted: default_configuration,
+                     percent: default_configuration,
+                     value: default_configuration,
+                     width: default_configuration)
+        self.configured_align = align
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_max = max
+        self.configured_muted = muted
+        self.configured_percent = percent
+        self.configured_value = value
+        self.configured_width = width
+      end
+
+      def width
+        default_value(configured_width, "100%")
+      end
+
+      def number_value
+        if is_set? configured_percent
+          percent
+        else
+          calc_value_from_max
+        end
+      end
+
+      def percent_value
+        format_percent(number_value)
+      end
+
+      def align
+        align_options = %w[left center right]
+        one_of_value(configured_align, align_options, "left")
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_progress_simple",
+          muted,
+          align,
+        ]
+        kit_options.compact.join("_")
+      end
+
+      def to_partial_path
+        "pb_progress_simple/progress_simple"
+      end
+
+    private
+
+      def percent
+        default_value(configured_percent, 0)
+      end
+
+      def format_percent(num)
+        "#{num}%"
+      end
+
+      def calc_value_from_max
+        if is_set?(configured_value) && is_set?(configured_max)
+          (configured_value.to_i * 100) / configured_max.to_i
+        else
+          0
+        end
+      end
+
+      def muted
+        true_value(configured_muted, "muted", nil)
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_star_rating/_star_rating.html.erb

@@ -0,0 +1,28 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+    <%# Rating value %>
+    <%= content_tag(:div, object.rating, class: "pb__star_rating_number") %>
+
+    <%= content_tag(:div, class: "pb__star_rating_wrapper") do %>
+      <%# Gold stars generated by rating value %>
+      <%= content_tag(:div, class: "pb__star_rating_highlight") do %>
+          <% object.star_count.each do %>
+            <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+          <% end %>
+          <% unless object.star_full %>
+            <%= pb_rails("icon", props: { icon: "star-half", fixed_width: true }) %>
+          <% end %>
+      <% end %>
+
+      <%# Grey background stars as base %>
+      <%= content_tag(:div, class: "pb__star_rating_base") do %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+      <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

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

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -0,0 +1,60 @@
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/spacing";
+
+$pb_star_rating_number_width: 30px;
+$pb_star_rating_wrapper_width: 150px;
+$pb_star_rating_height: 26px;
+
+[class^=pb_star_rating] {
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  .pb__star_rating_number {
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: $pb_star_rating_number_width;
+    width: $pb_star_rating_number_width;
+    min-height: $pb_star_rating_height;
+    padding: 0 $space-xs 0;
+    color: $text_lt_light;
+    font-size: $text-small;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pb__star_rating_wrapper {
+    position: relative;
+    width: $pb_star_rating_wrapper_width;
+    flex-basis: $pb_star_rating_wrapper_width;
+    flex-shrink: 0;
+    flex-grow: 1;
+    min-height: $pb_star_rating_height;
+
+    .pb__star_rating_highlight {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 5;
+      color: $yellow;
+      line-height: $pb_star_rating_height;
+    }
+    .pb__star_rating_base {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      color: rgba($slate, $opacity-4);
+      line-height: $pb_star_rating_height;
+    }
+  }
+
+  &[class*=_hide_rating] {
+    .pb__star_rating_number {
+      display: none;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("star_rating") %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 3 }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
+
+<br>
+
+<%= pb_rails("star_rating", props: { rating: 5 }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

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

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - star_rating_default: Default
+  - star_rating_hide: Hide Rating Value
+
+
+  react:
+  - star_rating_default: Default

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

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

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbStarRating
+    class StarRating < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_hide_rating
+                 configured_id
+                 configured_rating].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     hide_rating: default_configuration,
+                     id: default_configuration,
+                     rating: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_hide_rating = hide_rating
+        self.configured_id = id
+        self.configured_rating = rating
+      end
+
+      def hide_rating
+        true_value(configured_hide_rating, "hide_rating", nil)
+      end
+
+      def rating
+        rating_options = []
+        (0..5).step(0.5) do |n|
+          rating_options.push strip_trailing_zero(n)
+        end
+        one_of_value(configured_rating.to_s, rating_options, "0")
+      end
+
+      def star_count
+        [*1..rating.to_f]
+      end
+
+      def star_full
+        (rating.to_f % 1).zero?
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_star_rating",
+          hide_rating,
+        ]
+        kit_options.compact.join("_")
+      end
+
+      def to_partial_path
+        "pb_star_rating/star_rating"
+      end
+
+    private
+
+      def strip_trailing_zero(n)
+        n.to_s.sub(/\.?0+$/, "")
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end