RubyGems - playbook_ui - Versions diffs - 4.17.0 → 5.0.1 - Mend

playbook_ui 4.17.0 → 5.0.1

Files changed (208) hide show

data/app/pb_kits/playbook/pb_timeline/docs/_description.md ADDED

@@ -0,0 +1,3 @@
+The timeline kit can use two different line styles in the same timeline - `solid` and `dotted` line styles.
+To view different colors of icon circle, visit <a href="https://playbook.powerapp.cloud/kits/icon_circle">Icon Circle Kit</a>.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb ADDED

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline") do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation started",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Trip #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Refund issue #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation resolved",
+            color: "light"
+    }) %>
+    <% end %>
+<% end %>
+<br /><br />
+<%= pb_rails("timeline") do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"  }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx ADDED

@@ -0,0 +1,73 @@
+import React from 'react'
+import Timeline from '../_timeline.jsx'
+import { Body, TitleDetail } from '../../'
+const TimelineDefault = () => (
+  <div>
+    <Timeline>
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+      >
+        <Body
+            color="light"
+            text="Conversation started"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <Body
+            color="light"
+            text="Trip #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="credit-card"
+          iconColor="red"
+      >
+        <Body
+            color="light"
+            text="Refund issue #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="smile"
+          iconColor="green"
+      >
+        <Body
+            color="light"
+            text="Conversation resolved"
+        />
+      </Timeline.Item>
+    </Timeline>
+    <br />
+    <br />
+    <Timeline>
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+export default TimelineDefault

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb ADDED

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation started",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Trip #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Refund issue #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation resolved",
+            color: "light"
+    }) %>
+    <% end %>
+<% end %>
+<br /><br />
+<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"}) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx ADDED

@@ -0,0 +1,73 @@
+import React from 'react'
+import Timeline from '../_timeline.jsx'
+import { Body, TitleDetail } from '../../'
+const TimelineVertical = () => (
+  <div>
+    <Timeline orientation="vertical">
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+      >
+        <Body
+            color="light"
+            text="Conversation started"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <Body
+            color="light"
+            text="Trip #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="credit-card"
+          iconColor="red"
+      >
+        <Body
+            color="light"
+            text="Refund issue #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="smile"
+          iconColor="green"
+      >
+        <Body
+            color="light"
+            text="Conversation resolved"
+        />
+      </Timeline.Item>
+    </Timeline>
+    <br />
+    <br />
+    <Timeline orientation="vertical">
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+export default TimelineVertical

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb ADDED

@@ -0,0 +1,44 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Society Hill",
+            detail: "72 E St Astoria"
+        }) %>
+    <% end %>
+<% end %>
+<br /><br /><br />
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Society Hill",
+            detail: "72 E St Astoria"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx ADDED

@@ -0,0 +1,85 @@
+import React from 'react'
+import Timeline from '../_timeline.jsx'
+import { TitleDetail } from '../../'
+const TimelineWithDate = () => (
+  <div>
+    <Timeline
+        orientation="horizontal"
+        showDate
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          date={new Date().setDate(new Date().getDate() + 1)}
+          icon="map-marker-alt"
+          iconColor="purple"
+      >
+        <TitleDetail
+            detail="72 E St Astoria"
+            title="Society Hill"
+        />
+      </Timeline.Item>
+    </Timeline>
+    <br />
+    <br />
+    <br />
+    <Timeline
+        orientation="vertical"
+        showDate
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          date={new Date().setDate(new Date().getDate() + 1)}
+          icon="map-marker-alt"
+          iconColor="purple"
+      >
+        <TitleDetail
+            detail="72 E St Astoria"
+            title="Society Hill"
+        />
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+export default TimelineWithDate

data/app/pb_kits/playbook/pb_timeline/docs/example.yml ADDED

@@ -0,0 +1,13 @@
+examples:
+  rails:
+  - timeline_default: Default
+  - timeline_vertical: Vertical
+  - timeline_with_date: With Date
+  react:
+  - timeline_default: Default
+  - timeline_vertical: Vertical
+  - timeline_with_date: With Date

data/app/pb_kits/playbook/pb_timeline/docs/index.js ADDED

@@ -0,0 +1,3 @@
+export { default as TimelineDefault } from './_timeline_default.jsx'
+export { default as TimelineVertical } from './_timeline_vertical.jsx'
+export { default as TimelineWithDate } from './_timeline_with_date.jsx'

data/app/pb_kits/playbook/pb_timeline/item.rb ADDED

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+module Playbook
+  module PbTimeline
+    class Item
+      include Playbook::Props
+      partial "pb_timeline/item"
+      prop :date
+      prop :icon, type: Playbook::Props::String,
+                  default: "user"
+      prop :icon_color, type: Playbook::Props::Enum,
+                        values: %w[default royal blue purple teal red yellow green],
+                        default: "default"
+      prop :line_style, type: Playbook::Props::Enum,
+                        values: %w[solid dotted],
+                        default: "solid"
+      def classname
+        generate_classname("pb_timeline_item_kit", line_style)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/timeline.rb ADDED

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+module Playbook
+  module PbTimeline
+    class Timeline
+      include Playbook::Props
+      partial "pb_timeline/timeline"
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[vertical horizontal],
+                         default: "horizontal"
+      prop :show_date, type: Playbook::Props::Boolean,
+                       default: false
+      def classname
+        generate_classname("pb_timeline_kit", orientation, date_class)
+      end
+    private
+      def date_class
+        show_date ? "with_date" : nil
+      end
+    end
+  end
+end