playbook_ui 2.9.0 → 2.9.1

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails "date_year_stacked", props: { date: Date.today, dark: true } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center', dark: true } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right', dark: true } %>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { DateYearStacked } from "../../"
+
+function DateYearStackedDark() {
+  return (
+    <div>
+      <DateYearStacked date={new Date() } dark />
+      <DateYearStacked align='center' date={new Date() } dark />
+      <DateYearStacked align='right' date={new Date() } dark />
+    </div>
+  )
+}
+
+export default DateYearStackedDark

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails "date_year_stacked", props: { date: Date.today } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center'} %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right'} %>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { DateYearStacked } from "../../"
+
+function DateYearStackedDefault() {
+  return (
+    <div>
+      <DateYearStacked date={new Date() } />
+      <DateYearStacked align='center' date={new Date() } />
+      <DateYearStacked align='right' date={new Date() } />
+    </div>
+  )
+}
+
+export default DateYearStackedDefault;

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - date_year_stacked_default: Default
+  - date_year_stacked_dark: Dark
+
+  react:
+  - date_year_stacked_default: Default
+  - date_year_stacked_dark: Dark

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

@@ -0,0 +1,2 @@
+export {default as DateYearStackedDefault} from './_date_year_stacked_default.jsx';
+export {default as DateYearStackedDark} from './_date_year_stacked_dark.jsx';

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(:figure,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_distribution_bar_#{object.size}")) do %>
+  <% object.values.each do |value| %>
+    <div class="pb_distribution_value" style="width:<%=value%>%"></div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -0,0 +1,52 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+
+type DistributionBarProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  size?: 'lg' | 'sm',
+  values?: Array<Number>,
+}
+
+const normalizeCharacters = (values) => {
+  return values.map( value => {
+    return parseInt(value.toString().replace(/[^0-9.]/gi, ''))
+  })
+}
+
+const barValues = (normalizedValues) => {
+  let arrSum = value => value.reduce((a,b) => (a + b), 0)
+  let valueSum = arrSum(normalizedValues)
+  return normalizedValues.map((value,i) => {
+    return(
+      <div
+          key={i}
+          className={`pb_distribution_value`}
+          style={{width:`${value*100/valueSum}%`}}
+      />
+    )
+  })
+}
+
+
+
+const DistributionBar = ({
+    className,
+    data,
+    id,
+    size='lg',
+    values=[1]
+  }: DistributionBarProps) => {
+    const normalizedValues = normalizeCharacters(values)
+
+    return(
+      <div className={`pb_distribution_bar_${size}`}>
+        {barValues(normalizedValues)}
+      </div>
+    )
+}
+
+export default DistributionBar

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -0,0 +1,31 @@
+@import "../tokens/colors";
+
+[class^=pb_distribution_bar] {
+  $bar_colors: map-values($data_colors);
+  $small_bar: 8px;
+  $large_bar: 36px;
+  display: flex;
+  .pb_distribution_value {
+    height: 100%;
+    display: inline-block;
+    @for $i from 1 through length($bar_colors) {
+      &:nth-child(#{length($bar_colors)}n+#{$i}) {
+        background-color: nth($bar_colors, $i);
+      }
+    }
+    &:first-child {
+      border-top-left-radius: 18px;
+      border-bottom-left-radius: 18px;
+    }
+    &:last-child {
+      border-top-right-radius: 18px;
+      border-bottom-right-radius: 18px;
+    }
+  }
+  &[class*=_sm] {
+    height: $small_bar;
+  }
+  &[class*=_lg] {
+    height: $large_bar;
+  }
+}

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDistributionBar
+    class DistributionBar < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_size
+                 configured_values].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration,
+                     values: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_size = size
+        self.configured_values = values
+      end
+
+      def size
+        size_options = %w[lg sm]
+        one_of_value(configured_size, size_options, "lg")
+      end
+
+      def values
+        default_value(values_to_percents, [1])
+      end
+
+      def to_partial_path
+        "pb_distribution_bar/distribution_bar"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+
+      def normalize_characters(value)
+        return value.to_s.gsub(/(\d\.\d)|[^a-zA-Z\d]/, '\\1').to_i
+      end
+
+      def values_to_percents
+        normalized_values = configured_values.map(&method(:normalize_characters))
+        normalized_values.map { |value| (value.to_f * 100 / normalized_values.sum ).round(2) }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("distribution_bar", props: {
+  values: [1,2,3,4,5,3,3,7]
+}) %>
+
+<br><br>
+<%= pb_rails("distribution_bar", props: {
+  values: [1,2,3,4,5,3,3,7],
+  size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import DistributionBar from "../_distribution_bar.jsx"
+
+function DistributionBarDefault() {
+  return (
+    <React.Fragment>
+      <div>
+        <DistributionBar
+          values={[1,2,3,4,5,3,3,7]}
+        />
+      </div>
+      <br/>
+      <br/>
+      <div>
+        <DistributionBar
+          size='sm'
+          values={[1,2,3,4,5,3,3,7]}
+        />
+      </div>
+    </React.Fragment>
+  )
+}
+
+export default DistributionBarDefault;

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - distribution_bar_default: Default
+  
+  
+  react:
+  - distribution_bar_default: Default
+  

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -0,0 +1,58 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+import Title from "../pb_title/_title.jsx"
+import Icon from "../pb_icon/_icon.jsx"
+
+type FixedConfirmationToastProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  status?: 'success' | 'error' | 'neutral',
+  text: String,
+}
+
+const FixedConfirmationToast = ({
+  className,
+  data,
+  id,
+  status='neutral',
+  text
+}: FixedConfirmationToastProps) => {
+  const css = classnames([
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    className,
+  ])
+
+const icon = (function(status) {
+  switch(status) {
+    case "success":
+      return "check";
+    case "error":
+      return "exclamation-triangle";
+    case "neutral":
+      return "info-circle";
+    default:
+      return null;
+  }
+})(status)
+
+const displayIcon = function(icon) {
+  if (icon) {
+    return (
+      <Icon icon={icon} fixed_width={true} className="pb_icon"/>
+    )
+  }
+}
+
+return (
+  <div className={css}>
+    {displayIcon(icon)}
+    <Title size={4} className="pb_fixed_confirmation_toast_text" text={text} />
+    </div>
+  )
+}
+
+export default FixedConfirmationToast

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -0,0 +1,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../pb_body/body";
+
+$pb_pill_height: 25px;
+
+[class^=pb_fixed_confirmation_toast_kit] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: $space_xs $space-md;
+  border-radius: $pb_pill_height;
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: $color_value;
+
+      .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+      }
+      .pb_icon {
+        color: $white;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import FixedConfirmationToast from "../_fixed_confirmation_toast.jsx"
+
+function FixedConfirmationToastDefault() {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast text="Error Message" status="error" />
+      </div>
+
+      <br/><br/>
+
+      <div>
+        <FixedConfirmationToast text="Items Successfully Moved" status="success" />
+      </div>
+
+      <br/><br/>
+
+      <div>
+        <FixedConfirmationToast text="Scan to Assign Selected Items" status="neutral" />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastDefault;

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - fixed_confirmation_toast_default: Default
+  
+  
+  react:
+  - fixed_confirmation_toast_default: Default
+  

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFixedConfirmationToast
+    class FixedConfirmationToast < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_status
+                 configured_text].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     status: default_configuration,
+                     text: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_status = status
+        self.configured_text = text
+      end
+
+      def text
+        if is_set? configured_text
+          pb_text = Playbook::PbTitle::Title.new(size: 4, text: configured_text, classname: "pb_fixed_confirmation_toast_text")
+          ApplicationController.renderer.render(partial: pb_text, as: :object)
+        end
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_fixed_confirmation_toast_kit",
+          status,
+        ]
+        kit_options.join("_")
+      end
+
+      def status
+        status_options = %w[success error neutral]
+        one_of_value(configured_status, status_options, "neutral")
+      end
+
+      def icon
+        pb_icon = Playbook::PbIcon::Icon.new(icon: icon_value, classname: "pb_icon")
+        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      end
+
+      def icon_value
+        case status
+        when "success"
+          "check"
+        when "error"
+          "exclamation-triangle"
+        when "neutral"
+          "info-circle"
+        end
+      end
+
+      def to_partial_path
+        "pb_fixed_confirmation_toast/fixed_confirmation_toast"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end