playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

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 %>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -0,0 +1,107 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Icon, Title } from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type SelectableIconProps = {
+  aria?: Object,
+  checked?: Boolean,
+  className?: String,
+  disabled?: Boolean,
+  dark?: Boolean,
+  data?: Object,
+  icon: String,
+  inputId: String,
+  inputs: String,
+  multi?: Boolean,
+  name: String,
+  text: String,
+  value?: String
+}
+
+const SelectableIcon = ({
+  aria = {},
+  className,
+  checked = false,
+  dark = false,
+  data = {},
+  disabled = false,
+  icon,
+  inputId,
+  inputs = 'enabled',
+  multi = true,
+  name,
+  text,
+  value,
+  ...props
+}: SelectableIconProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_selectable_icon_kit': true,
+    'checked': checked,
+    'dark': dark,
+    'disabled': disabled,
+    'enabled': !disabled,
+  })
+
+  const inputType = multi === false ? 'radio' : 'checkbox'
+
+  const inputIdPresent = inputId !== null ? inputId : name
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <If condition={inputs === 'disabled'}>
+        <>
+          <Icon
+              icon={icon}
+              size="2x"
+          />
+          <Title
+              size={4}
+              tag="h4"
+              text={text}
+          />
+        </>
+      </If>
+      <If condition={inputs === 'enabled'}>
+        <>
+          <input
+              {...props}
+              checked={checked}
+              disabled={disabled}
+              id={inputIdPresent}
+              name={name}
+              type={inputType}
+              value={value}
+          />
+          <label htmlFor={inputIdPresent}>
+            <Icon
+                icon={icon}
+                size="2x"
+            />
+            <Title
+                size={4}
+                tag="h4"
+                text={text}
+            />
+          </label>
+        </>
+      </If>
+    </div>
+  )
+}
+
+export default SelectableIcon

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -0,0 +1,85 @@
+[class^=pb_selectable_icon] {
+
+  text-align: center;
+  cursor: pointer;
+
+  :hover * {
+		filter: drop-shadow(0 0 8px rgba($shadow, 0.25));
+		transition-duration: $transition_short;
+		transition-timing-function: $easeIn;
+  }
+
+  * {
+    cursor: pointer;
+  }
+
+  h4 {
+    margin-top: $space_xs !important;
+    user-select: none;
+  }
+
+  &[class*=_disabled] {
+		opacity: $opacity_6;
+		cursor: not-allowed;
+
+		* {
+				cursor: not-allowed;
+		}
+	}
+	
+  input[type="checkbox"],
+  input[type="radio"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		display: none;
+		appearance: none;
+
+		transition-property: color;
+		transition-duration: $transition_short;
+
+		&:checked ~ label * {
+			transition-timing-function: $easeIn;
+			color: $primary;
+		}
+		
+		&:not(:checked) ~ label {
+			transition-timing-function: $easeOut;
+			color: $slate;
+
+			h4 {
+				transition-delay: .15s;
+			}
+		}
+	}
+
+
+  &[class*=_dark] {
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: none;
+			appearance: none;
+
+			transition-property: color;
+			transition-duration: $transition_short;
+
+
+			&:checked ~ label * {
+				transition-timing-function: $easeIn;
+				color: $active_dark !important;
+			}
+				
+			&:not(:checked) ~ label {
+				transition-timing-function: $easeOut;
+				color: $text_dk_lighter;
+
+				h4 {
+					transition-delay: .15s;
+					color: $text_dk_default;
+				}
+			}
+		}
+ 	}
+}

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.html.erb

@@ -0,0 +1,26 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-word",
+    dark: true,
+    input_id: 7,
+    checked: true,
+    text: "Doc"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-pdf",
+    dark: true,
+    input_id: 8,
+    text: "PDF"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "file-image",
+    dark: true,
+    input_id: 9,
+    disabled: true,
+    text: "PNG"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import { SelectableIcon } from '../../'
+
+const SelectableIconDark = () => {
+  const [ checkSelected, toggleSelected ] = useState(true)
+  const [ checkUnselected, toggleUnselected ] = useState(false)
+  const [ checkDisabled, toggleDisabled ] = useState(false)
+
+  return (
+
+    <div className="pb--doc-demo-row">
+      <SelectableIcon
+          checked={checkSelected}
+          dark
+          icon="file-word"
+          inputId={16}
+          onChange={() => toggleSelected(!checkSelected)}
+          text="Doc"
+      />
+
+      <SelectableIcon
+          checked={checkUnselected}
+          dark
+          icon="file-pdf"
+          inputId={17}
+          onChange={() => toggleUnselected(!checkUnselected)}
+          text="PDF"
+      />
+
+      <SelectableIcon
+          checked={checkDisabled}
+          dark
+          disabled
+          icon="file-image"
+          inputId={18}
+          onChange={() => toggleDisabled(!checkDisabled)}
+          text="PNG"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconDark

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign", 
+    input_id: 1, 
+    checked: true, 
+    text: "US Dollar" 
+  }) %>
+  
+  <%= pb_rails("selectable_icon", props: {
+    icon: "euro-sign", 
+    input_id: 2, 
+    text: "Euro" 
+  }) %>
+  
+  <%= pb_rails("selectable_icon", props: {
+    icon: "yen-sign", 
+    input_id: 3, 
+    disabled: true, 
+    text: "Yen" 
+  }) %>
+
+</div>