playbook_ui 4.15.1.alpha1 → 4.16.0

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_progress_step_item_wrapper">
+    <div class="pb_progress_step_item_connector_first"></div>
+    <div class="pb_progress_step_item_step_wrapper">
+      <div class="pb_progress_step_item_step">
+        <div class="pb_progress_step_item_step_connector_first"></div>
+        <div class="pb_progress_step_item_step_circle">
+          <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        </div>
+        <div class="pb_progress_step_item_step_connector_second"></div>
+      </div>
+      <div>
+        <%= capture(&object.children) %>
+      </div>
+    </div>
+    <div class="pb_progress_step_item_connector_second"></div>
+  </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { Icon } from '..'
+
+type ProgressStepItemProps = {
+  className?: String,
+  status?: 'complete' | 'active' | 'inactive',
+  children?: React.Node,
+}
+
+const ProgressStepItem = ({
+  className,
+  status = 'inactive',
+  children,
+}: ProgressStepItemProps) => {
+  const progressStepItem = buildCss('pb_progress_step_item_kit', status)
+
+  return (
+    <div className={classnames(progressStepItem, className)}>
+      <div className="pb_progress_step_item_wrapper">
+        <div className="pb_progress_step_item_connector_first" />
+        <div className="pb_progress_step_item_step_wrapper">
+          <div className="pb_progress_step_item_step">
+            <div className="pb_progress_step_item_step_connector_first" />
+            <div className="pb_progress_step_item_step_circle">
+              <Icon
+                  icon="check"
+              />
+            </div>
+            <div className="pb_progress_step_item_step_connector_second" />
+          </div>
+          <div>
+            {children}
+          </div>
+        </div>
+        <div className="pb_progress_step_item_connector_second" />
+      </div>
+    </div>
+  )
+}
+export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_description.md

@@ -0,0 +1 @@
+Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true, dark: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDark = () => (
+  <div>
+    <ProgressStep
+        dark
+        icon
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDark

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDefault = () => (
+  <div>
+    <ProgressStep icon>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDefault

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "vertical", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+    Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepVertical = () => (
+  <div>
+    <ProgressStep
+        icon
+        orientation="vertical"
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepVertical

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark
+  
+  
+  react:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark

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

@@ -0,0 +1,3 @@
+export { default as ProgressStepDefault } from './_progress_step_default.jsx'
+export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
+export { default as ProgressStepDark } from './_progress_step_dark.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressStep
+    class ProgressStep
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step"
+
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[vertical horizontal],
+                         default: "horizontal"
+      prop :icon, type: Playbook::Props::Boolean,
+                  default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_progress_step_kit", orientation, icon_class, dark_class)
+      end
+
+    private
+
+      def icon_class
+        icon === true ? "icon" : nil
+      end
+
+      def dark_class
+        dark === true ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressStep
+    class ProgressStepItem
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step_item"
+
+      prop :status, type: Playbook::Props::Enum,
+                    values: %w[complete active inactive],
+                    default: "inactive"
+
+      def classname
+        generate_classname("pb_progress_step_item_kit", status)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -0,0 +1,30 @@
+<%= content_tag(:div,
+    data: object.data,
+    class: object.classname) do %>
+  
+  <%= pb_rails("selectable_card", props: {
+    input_id: object.input_id,
+    name: object.name,
+    value: object.value,
+    checked: object.checked,
+    disabled: object.disabled,
+    icon: object.checkmark,
+    multi: object.multi,
+    dark: object.dark
+  }) do %>
+
+    <%= pb_rails("selectable_icon", props: {
+      icon: object.icon,
+      inputs: "disabled",
+      text: object.title_text,
+      dark: object.dark
+    }) %>
+
+    <%= pb_rails("body", props: {
+      text: object.body_text,
+      color: "light",
+      dark: object.dark
+    }) %>
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -0,0 +1,97 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Body, SelectableCard, SelectableIcon } from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type SelectableCardIconProps = {
+  aria?: Object,
+  checked?: Boolean,
+  checkmark: Boolean,
+  className?: String,
+  dark?: Boolean,
+  data?: Object,
+  disabled?: Boolean,
+  icon?: String,
+  inputId?: String,
+  multi?: Boolean,
+  name?: String,
+  titleText?: String,
+  bodyText?: String,
+  value?: String,
+  onChange?: (e) => void,
+}
+
+const SelectableCardIcon = ({
+  aria = {},
+  checkmark = false,
+  checked = false,
+  className,
+  dark = false,
+  data = {},
+  disabled = false,
+  icon,
+  inputId,
+  multi = true,
+  name,
+  titleText,
+  bodyText,
+  value,
+  onChange,
+}: SelectableCardIconProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_selectable_card_icon_kit': true,
+    'checked': checked,
+    'dark': dark,
+    'disabled': disabled,
+    'enabled': !disabled,
+  })
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <SelectableCard
+          checked={checked}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
+      >
+        {
+          <>
+            <SelectableIcon
+                dark={dark}
+                icon={icon}
+                inputs="disabled"
+                size="2x"
+                text={titleText}
+            />
+            <Body
+                color="light"
+                dark={dark}
+                text={bodyText}
+            />
+          </>
+        }
+      </SelectableCard>
+    </div>
+  )
+}
+
+export default SelectableCardIcon