playbook_ui 4.15.1.alpha1 → 4.16.0

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>

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

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { SelectableIcon } from '../../'
+
+const SelectableIconDefault = () => {
+  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}
+          icon="dollar-sign"
+          inputId={10}
+          onChange={() => toggleSelected(!checkSelected)}
+          text="US Dollar"
+      />
+
+      <SelectableIcon
+          checked={checkUnselected}
+          icon="euro-sign"
+          inputId={11}
+          onChange={() => toggleUnselected(!checkUnselected)}
+          text="Euro"
+      />
+
+      <SelectableIcon
+          checked={checkDisabled}
+          disabled
+          icon="yen-sign"
+          inputId={12}
+          onChange={() => toggleDisabled(!checkDisabled)}
+          text="Yen"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconDefault

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

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "cassette-tape",
+    input_id: 4,
+    multi: false,
+    name: "select",
+    text: "Cassette"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "compact-disc",
+    input_id: 5,
+    multi: false,
+    name: "select",
+    text: "CD"
+  }) %>
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "album-collection",
+    input_id: 6,
+    multi: false,
+    name: "select",
+    text: "Vinyl"
+  }) %>
+
+</div>

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { SelectableIcon } from '../../'
+
+const SelectableIconSingleSelect = () => {
+  const [ selectedFormat, toggleFormat ] = useState(null)
+
+  return (
+
+    <div className="pb--doc-demo-row">
+      <SelectableIcon
+          checked={selectedFormat === 'Cassette'}
+          icon="cassette-tape"
+          inputId={13}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('Cassette')}
+          text="Cassette"
+          value="Cassette"
+      />
+
+      <SelectableIcon
+          checked={selectedFormat === 'CD'}
+          icon="compact-disc"
+          inputId={14}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('CD')}
+          text="CD"
+          value="CD"
+      />
+
+      <SelectableIcon
+          checked={selectedFormat === 'Vinyl'}
+          icon="album-collection"
+          inputId={15}
+          multi={false}
+          name="music-format"
+          onChange={() => toggleFormat('Vinyl')}
+          text="Vinyl"
+          value="Vinyl"
+      />
+    </div>
+  )
+}
+
+export default SelectableIconSingleSelect

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - selectable_icon_default: Default
+  - selectable_icon_single_select: Single Select
+  - selectable_icon_dark: Dark
+  
+  react:
+  - selectable_icon_default: Default
+  - selectable_icon_single_select: Single Select
+  - selectable_icon_dark: Dark
+  

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

@@ -0,0 +1,3 @@
+export { default as SelectableIconDefault } from './_selectable_icon_default.jsx'
+export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx'
+export { default as SelectableIconDark } from './_selectable_icon_dark.jsx'

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSelectableIcon
+    class SelectableIcon
+      include Playbook::Props
+
+      partial "pb_selectable_icon/selectable_icon"
+
+      # Icon props
+      prop :icon, type: Playbook::Props::String
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      # Title text
+      prop :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 :value
+
+      # Conditional rendering for input field
+      prop :inputs, type: Playbook::Props::String,
+                    default: "enabled"
+
+      def classname
+        generate_classname("pb_selectable_icon_kit", checked_class, dark_class, enabled_disabled_class)
+      end
+
+      def input_id_present
+        input_id.present? ? input_id : name
+      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