playbook_ui 2.9.8 → 2.9.9

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("multiple_users", props: {
+  reverse: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  reverse: true,
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { MultipleUsers } from "../../"
+
+function MultipleUsersReverse() {
+  return (
+    <div>
+      <MultipleUsers
+        reverse
+        users={[
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+          {
+            name: "Keith Craig",
+            image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+          },
+          {
+            name: "Alicia Cooper",
+            image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+          }
+        ]} />
+
+      <br/><br/>
+
+      <MultipleUsers
+        reverse
+        users={[
+          {
+            name: "Shawn Palmer",
+            image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+          },
+          {
+            name: "Andrew Murray",
+            image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+          }
+        ]} />
+    </div>
+  )
+}
+
+export default MultipleUsersReverse

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse
+
+  react:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse

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

@@ -0,0 +1,2 @@
+export {default as MultipleUsersDefault} from './_multiple_users_default.jsx';
+export {default as MultipleUsersReverse} from './_multiple_users_reverse.jsx';

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMultipleUsers
+    class MultipleUsers
+      include Playbook::Props
+
+      partial "pb_multiple_users/multiple_users"
+
+      prop :reverse, type: Playbook::Props::Boolean, default: false
+      prop :users, type: Playbook::Props::HashArray, required: true
+
+      def more_than_four
+        users.count > 4
+      end
+
+      def display_count
+        more_than_four ? 3 : users.count
+      end
+
+      def classname
+        generate_classname("pb_multiple_users_kit", reverse_class)
+      end
+
+    private
+
+      def reverse_class
+        reverse ? "reverse" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -8,8 +8,8 @@ module Playbook
       partial "pb_online_status/online_status"
 
       prop :status, type: Playbook::Props::Enum,
-                  values: %w[online offline away],
-                  default: "offline"
+                    values: %w[online offline away],
+                    default: "offline"
 
       def classname
         generate_classname("pb_online_status_kit", status)

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -12,11 +12,11 @@ module Playbook
       prop :last_name
 
       def wrong_contacts
-        contacts.select {|contact| contact[:contact_type] == "wrong number" }
+        contacts.select { |contact| contact[:contact_type] == "wrong number" }
       end
 
       def valid_contacts
-        contacts.select {|contact| contact[:contact_type] != "wrong number" }
+        contacts.reject { |contact| contact[:contact_type] == "wrong number" }
       end
 
       def classname

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <div class="progress_pills_status">
+      <% object.with_status do |status| %>
+        <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark})%>
+        <%= pb_rails("body", props: { text: object.value, color: "light", dark:object.dark}) %>
+      <% end %>
+    </div>
+
+    <div class="progress_pills">
+      <% object.each_step do |step| %>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
+      <% end %>
+    </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import { Body,Title } from '../'
+
+
+type ProgressPillsProps = {
+  active?: Number,
+  steps?: Number,
+  title?: String,
+  value?: String,
+  dark?: Boolean,
+
+}
+
+const showSteps = (steps, active, dark) => {
+  let items = []
+
+  for(let step = 1; step <= steps; step++) {
+    items.push(ProgressPill({step,active,dark}))
+  }
+
+  return items
+}
+
+const ProgressPill = ({
+    active,
+    dark,
+    step,
+}: ProgressPillProps) => (<div className={`pb_progress_pill${step <= active ? "_active" : "_inactive"}${dark ? "_dark" : null}`} key={step}></div>)
+
+const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark=false } : ProgressPillsProps) => {
+
+  const darkClass = dark ? "_dark" : ""
+
+  return(
+    <div className={`pb_progress_pills_kit${darkClass}`}>
+      {title ?
+      <div className="progress_pills_status">
+        <Title text={title} size={4} tag="h4" dark={dark}/>
+        <Body color="light" text={value} dark={dark}/>
+      </div> : null}
+
+    <div className="progress_pills">
+      {showSteps(steps, active, dark)}
+    </div>
+  </div>
+)}
+
+export default ProgressPills

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -0,0 +1,42 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+
+@mixin pb_progress_pill {
+  width: 45px;
+  height: 4px;
+  border-radius: $border_rad_light;
+  margin-right: $space_xs;
+}
+
+[class^=pb_progress_pills_kit] {
+  [class*=progress_pills] {
+    display: flex;
+  }
+
+  [class*=progress_pills_status] {
+    display: flex;
+    align-items: center;
+    margin-bottom: $space_xs;
+
+    [class*=title] {
+      margin-right: $space_xs;
+    }
+  }
+
+
+  [class*=pb_progress_pill] {
+    @include pb_progress_pill;
+
+    &[class*=_inactive] {
+      background-color: $border_light;
+      &[class*=_dark]{
+      background-color: $border_dark;
+      }
+    }
+
+    &[class*=_active] {
+      background-color: $primary_action;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { steps: 3, active: 2, title: "Status:", value: "Orientation", dark: true}) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.jsx

@@ -0,0 +1,21 @@
+
+import React from "react"
+import ProgressPills from "../_progress_pills.jsx"
+
+
+function ProgressPillsDark() {
+return (
+  <div>
+    <ProgressPills
+        active={2}
+        dark
+        title="Status:"
+        steps={3}
+        value="Orientation"
+    />
+
+  </div>
+)
+}
+
+export default ProgressPillsDark;

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { steps: 3, active: 2 }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -0,0 +1,18 @@
+
+import React from "react"
+import ProgressPills from "../_progress_pills.jsx"
+
+
+function ProgressPillsDefault() {
+return (
+  <div>
+    <ProgressPills
+        active={2}
+        steps={3}
+    />
+
+  </div>
+)
+}
+
+export default ProgressPillsDefault;

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -0,0 +1,20 @@
+
+import React from "react"
+import ProgressPills from "../_progress_pills.jsx"
+
+
+function ProgressPillsStatus() {
+return (
+  <div>
+    <ProgressPills
+        active={2}
+        title="Status:"
+        steps={3}
+        value="Orientation"
+    />
+
+  </div>
+)
+}
+
+export default ProgressPillsStatus;

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - progress_pills_default: Default
+  - progress_pills_status: Status
+  - progress_pills_dark: Dark
+
+
+  react:
+  - progress_pills_default: Default
+  - progress_pills_status: Status
+  - progress_pills_dark: Dark

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

@@ -0,0 +1,3 @@
+export {default as ProgressPillsDefault} from './_progress_pills_default.jsx';
+export {default as ProgressPillsStatus} from './_progress_pills_status.jsx';
+export {default as ProgressPillsDark} from './_progress_pills_dark.jsx';

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressPills
+    class ProgressPills
+      include Playbook::Props
+
+      partial "pb_progress_pills/progress_pills"
+
+      prop :active, type: Playbook::Props::Number,
+                    default: 0
+      prop :value
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :steps, type: Playbook::Props::Number,
+                   default: 3
+      prop :title
+
+      def classname
+        generate_classname("pb_progress_pills_kit", dark_class)
+      end
+
+
+
+      def with_status
+        yield title if title.present?
+      end
+
+      def each_step(&block)
+        1.upto(steps, &block)
+      end
+
+      def active_step(step)
+         step <= active ? "_active" : "_inactive"
+      end
+
+      def dark_pill
+          dark ? "_dark" : nil
+      end
+
+      private
+      
+      def dark_class
+        dark ? "dark" : nil
+      end
+
+    end
+  end
+end

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

@@ -10,12 +10,12 @@ module Playbook
       partial "pb_progress_simple/progress_simple"
 
       prop :align, type: Playbook::Props::Enum,
-           values: %w[left center right],
-           default: "left"
+                   values: %w[left center right],
+                   default: "left"
       prop :value, type: Playbook::Props::Number
       prop :max, type: Playbook::Props::Number
       prop :muted, type: Playbook::Props::Boolean,
-           default: false
+                   default: false
       prop :percent, type: Playbook::Props::Percentage
       # :width prop should not probably be a string type
       # Should we be allowing the user to pass this value at all?