playbook_ui 4.15.1.alpha1 → 4.16.0

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

@@ -0,0 +1,74 @@
+[class^=pb_selectable_card_icon_kit] {
+
+	text-align: center;
+	user-select: none;
+
+	input[type="checkbox"],
+	input[type="radio"] {
+    
+    transition-duration: $transition_short;
+    
+		&:checked ~ label {
+      transition-timing-function: $easeIn;
+			color: $primary;
+		
+				h4 {
+					color: $primary;
+				}
+			}
+        
+    &:not(:checked) ~ label {
+      transition-timing-function: $easeOut;
+        color: $slate;
+      }
+    }
+
+    &[class*=_disabled] {
+      opacity: $opacity_6;
+      cursor: not-allowed;
+      
+      * {
+          cursor: not-allowed;
+      }
+    }
+
+  &[class*=_dark] {
+
+    input[type="checkbox"],
+    input[type="radio"] {       
+      
+      transition-duration: $transition_short;
+      
+      &:checked ~ label {
+        transition-timing-function: $easeIn;
+        color: $active_dark;
+
+        h4 {
+          color: $active_dark !important;
+        }
+
+      }
+
+      &:not(:checked) ~ label {
+        transition-timing-function: $easeOut;
+        color: $text_dk_lighter;
+
+        h4 {
+          color: $text_dk_default !important;
+        }
+      }
+    }
+  }
+
+  [class^=pb_selectable_icon_kit] {
+    margin-bottom: 0px;
+  }
+
+  [class^=pb_body_kit_light] {
+    margin-top: $space_xs;
+  }
+
+  [class^=pb_selectable_card_kit] {
+    margin-bottom: 0px !important;
+  }
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb

@@ -0,0 +1,29 @@
+<div class="pb--doc-demo-row">    
+  
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-cowboy", 
+    title_text: "Cowboy", 
+    body_text: "Howdy partner.",
+    input_id: 4,
+    checked: true,
+    checkmark: true
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-wizard", 
+    title_text: "Wizard", 
+    body_text: "Poof, you're a sandwich.",
+    input_id: 5,
+    checkmark: true
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "hat-chef", 
+    title_text: "Chef", 
+    body_text: "Where is the lamb sauce?",
+    input_id: 6,
+    disabled: true,
+    checkmark: true
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+
+const SelectableCardIconCheckmark = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+
+  return (
+    <div className="pb--doc-demo-row">
+
+      <SelectableCardIcon
+          bodyText="Howdy Partner."
+          checked={selected}
+          checkmark
+          icon="hat-cowboy"
+          inputId={4}
+          onChange={() => setSelected(!selected)}
+          titleText="Cowboy"
+      />
+      <SelectableCardIcon
+          bodyText="Poof, you're a sandwich."
+          checked={unselected}
+          checkmark
+          icon="hat-wizard"
+          inputId={5}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Wizard"
+      />
+      <SelectableCardIcon
+          bodyText="Where is the lamb sauce?"
+          checkmark
+          disabled
+          icon="hat-chef"
+          inputId={6}
+          titleText="Chef"
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconCheckmark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.html.erb

@@ -0,0 +1,30 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "volume", 
+    title_text: "Sound", 
+    body_text: "Silent Mode",
+    input_id: 10,
+    checked: true,
+    card_icon: true,
+    dark: true
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "location", 
+    title_text: "Location", 
+    body_text: "Allow ",
+    input_id: 12,
+    dark: true
+  }) %>
+  
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "wifi", 
+    title_text: "WiFi", 
+    body_text: "Disabled",
+    input_id: 13,
+    disabled: true,
+    dark: true
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+
+const SelectableCardIconDark = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Silent Mode"
+          checked={selected}
+          dark
+          icon="volume"
+          inputId={10}
+          onChange={() => setSelected(!selected)}
+          titleText="Sound"
+      />
+      <SelectableCardIcon
+          bodyText="Allow location data"
+          checked={unselected}
+          dark
+          icon="location"
+          inputId={11}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Location"
+      />
+      <SelectableCardIcon
+          bodyText="Disabled"
+          dark
+          disabled
+          icon="wifi"
+          inputId={12}
+          titleText="WiFi"
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconDark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb

@@ -0,0 +1,26 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line", 
+    title_text: "Quarterly Report", 
+    body_text: "Export",
+    input_id: 1,
+    checked: true,
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-pie", 
+    title_text: "Market Share", 
+    body_text: "Export",
+    input_id: 2,
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "analytics", 
+    title_text: "Comprehensive", 
+    body_text: "Export",
+    input_id: 3,
+    disabled: true
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+
+const SelectableCardIconDefault = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={selected}
+          icon="chart-line"
+          inputId={1}
+          onChange={() => setSelected(!selected)}
+          titleText="Quarterly Report"
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          checked={unselected}
+          icon="chart-pie"
+          inputId={2}
+          onChange={() => setUnselected(!unselected)}
+          titleText="Market Share"
+      />
+      <SelectableCardIcon
+          bodyText="Export"
+          disabled
+          icon="analytics"
+          inputId={3}
+          titleText="Comprehensive"
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconDefault

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "car", 
+    title_text: "Car",
+    input_id: 7,
+    name: "select",
+    multi: false,
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "bus", 
+    title_text: "Bus",
+    input_id: 8,
+    name: "select",
+    multi: false,
+  }) %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "subway", 
+    title_text: "Subway",
+    input_id: 9,
+    name: "select",
+    multi: false,
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { SelectableCardIcon } from '../../'
+
+const SelectableCardIconSingleSelect = () => {
+  const [selectedFormat, toggleFormat] = useState(null)
+
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          checked={selectedFormat === 'car'}
+          icon="car"
+          inputId={7}
+          name="select"
+          onChange={() => toggleFormat('car')}
+          titleText="Car"
+          value="car"
+      />
+      <SelectableCardIcon
+          checked={selectedFormat === 'bus'}
+          icon="bus"
+          inputId={8}
+          name="select"
+          onChange={() => toggleFormat('bus')}
+          titleText="Bus"
+          value="bus"
+      />
+      <SelectableCardIcon
+          checked={selectedFormat === 'subway'}
+          icon="subway"
+          inputId={9}
+          name="select"
+          onChange={() => toggleFormat('subway')}
+          titleText="Subway"
+          value="subway"
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconSingleSelect

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

@@ -0,0 +1,16 @@
+examples:
+  
+  rails:
+  - selectable_card_icon_default: Default
+  - selectable_card_icon_checkmark: Checkmark
+  - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_dark: Dark
+  
+  
+  react:
+  - selectable_card_icon_default: Default
+  - selectable_card_icon_checkmark: Checkmark
+  - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_dark: Dark
+
+  

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

@@ -0,0 +1,4 @@
+export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
+export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
+export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
+export { default as SelectableCardIconDark } from './_selectable_card_icon_dark.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableCardIcon
+    class SelectableCardIcon
+      include Playbook::Props
+
+      partial "pb_selectable_card_icon/selectable_card_icon"
+
+      # Icon and text props
+      prop :icon, type: Playbook::Props::String
+      prop :title_text, type: Playbook::Props::String
+      prop :body_text, type: Playbook::Props::String
+
+      # Form props
+      prop :input_id, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+      prop :multi, type: Playbook::Props::Boolean,
+                   default: true
+      prop :checked, type: Playbook::Props::Boolean,
+                     default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :checkmark, type: Playbook::Props::Boolean,
+                       default: false
+      prop :value
+
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_selectable_card_icon_kit", checked_class, dark_class, enabled_disabled_class)
+      end
+
+    private
+
+      def checked_class
+        checked ? "checked" : nil
+      end
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+
+      def enabled_disabled_class
+        disabled ? "disabled" : "enabled"
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb

@@ -0,0 +1,24 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <% if object.inputs == "disabled" %>
+    
+      <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
+      <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
+
+    <% else %>
+      <% if object.multi %>
+        <%= check_box_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+      <% else %>
+        <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+      <% end %>
+
+      <label for="<%= object.input_id_present %>">
+        <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
+        <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
+      </label>
+    <% end %>
+
+<% end %>