playbook_ui 4.14.0 → 4.17.0

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

data/app/pb_kits/playbook/pb_source/_source.jsx

@@ -1,21 +1,121 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {
+  buildDataProps,
+} from '../utilities/props'
+import {
+  titleize,
+} from '../utilities/text'
+import {
+  Avatar,
+  Body,
+  Caption,
+  IconCircle,
+  Title,
+} from '../'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type SourceProps = {
+  className?: String,
+  data?: object,
+  hideIcon: Boolean,
+  id?: String,
+  source?: String,
+  type: "events" | "inbound" | "outbound" | "prospecting" | "referral" | "retail" | "user",
+  user: object,
 }
 
-class Source extends React.Component {
-  render() {
-    return (
-      <div className="pb_source">
-        <span>{'SOURCE CONTENT'}</span>
-      </div>
-    )
+const Source = ({
+  className,
+  data = {},
+  hideIcon = false,
+  id,
+  source,
+  type = 'inbound',
+  user = {},
+}: SourceProps) => {
+  const dataProps = buildDataProps(data)
+
+  const css = classnames([
+    'pb_source_kit',
+    className,
+  ])
+
+  const avatar = () => {
+    if ((type === 'user' || type === 'referral') && user.name !== undefined) {
+      const avatarProps = { ...user }
+      avatarProps.size = 'sm'
+      delete avatarProps.userId
+      return avatarProps
+    }
   }
-}
 
-Source.propTypes = propTypes
+  const typeText = () => {
+    if (type === 'user' || (type === 'referral' && user.name !== undefined)) {
+      return user.name
+    } else {
+      return titleize(type)
+    }
+  }
+
+  const typeIconNames = {
+    events: 'calendar-alt',
+    outbound: 'sign-out',
+    prospecting: 'binoculars',
+    referral: 'handshake',
+    retail: 'shopping-bag',
+    inbound: 'sign-in',
+  }
+
+  const showIcon = () => type !== 'user' && (avatar() === undefined)
+
+  return (
+    <div
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+
+      <div className="pb__source_layout">
+        <If condition={hideIcon === false}>
+          <If condition={showIcon()}>
+            <IconCircle
+                icon={typeIconNames[type]}
+                size="sm"
+            />
+            <Else />
+            <Avatar
+                {...avatar()}
+            />
+          </If>
+        </If>
+
+        <div className="pb__source_content">
+          <Title
+              size={4}
+              tag="h4"
+              text={source}
+          />
+
+          <div className="pb__source_value">
+            <Body
+                color="light"
+                text={typeText()}
+            />
+
+            <If condition={user.userId}>
+              <Caption
+                  text={user.userId}
+              />
+            </If>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}
 
 export default Source

data/app/pb_kits/playbook/pb_source/docs/_source_default.html.erb

@@ -17,7 +17,9 @@
   type: "user",
   user: {
     name: "Anna Black",
-    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    image: {
+      url: "https://randomuser.me/api/portraits/women/44.jpg"
+    },
     user_id: "48582"
   }
 }) %>

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Source } from '../../'
+
+const SourceDefault = () => (
+  <>
+    <Source
+        source="BJ's Johnston-208"
+        type="retail"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Referral-phrg"
+        type="inbound"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+    />
+  </>
+)
+
+export default SourceDefault

data/app/pb_kits/playbook/pb_source/docs/_source_noicon.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Source } from '../../'
+
+const SourceNoicon = () => (
+  <>
+    <Source
+        hideIcon
+        source="BJ's Johnston-208"
+        type="retail"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        hideIcon
+        source="Referral-phrg"
+        type="inbound"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        hideIcon
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                  },
+                userId: '48582',
+                }
+              }
+    />
+  </>
+)
+
+export default SourceNoicon

data/app/pb_kits/playbook/pb_source/docs/_source_types.jsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { Source } from '../../'
+
+const SourceTypes = () => (
+  <>
+    <Source
+        source="BJ's Johnston-208"
+        type="retail"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Referral-phrg"
+        type="inbound"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="B.B.B. Outbound"
+        type="outbound"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Contractor.com"
+        type="prospecting"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Beards, Beers and Brats"
+        type="events"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Johnston-208"
+        type="referral"
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="Employee Referral"
+        type="referral"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+    />
+
+    <br />
+    <br />
+
+    <Source
+        source="BJ's Future CB"
+        type="user"
+        user={
+              { name: 'Anna Black',
+                image: {
+                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
+                },
+                userId: '48582',
+              }
+            }
+    />
+  </>
+)
+
+export default SourceTypes

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

@@ -7,3 +7,6 @@ examples:
 
 
   react:
+  - source_default: Default
+  - source_noicon: Hide Icon
+  - source_types: Source Types

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

@@ -0,0 +1,5 @@
+export { default as SourceDefault } from './_source_default.jsx'
+
+export { default as SourceNoicon } from './_source_noicon.jsx'
+
+export { default as SourceTypes } from './_source_types.jsx'