RubyGems - playbook_ui - Versions diffs - 4.15.1.alpha1 → 4.16.0 - Mend

playbook_ui 4.15.1.alpha1 → 4.16.0

Files changed (186) hide show

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

@@ -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 CHANGED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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'

data/app/pb_kits/playbook/pb_star_rating/_star_rating.html.erb CHANGED

@@ -3,12 +3,16 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
+    <% if object.hide_rating %>
+      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
+    <% else %>
+      <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
+    <% end %>
     <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
-        <% object.star_count.each do %>
+        <% object.star_count.times do %>
           <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
         <% end %>
         <% unless object.star_full %>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx CHANGED

@@ -1,21 +1,106 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {
+  buildAriaProps,
+  buildDataProps,
+} from '../utilities/props'
+import {
+  Icon,
+} from '../'
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type StarRatingProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  fixedWidth?: Boolean,
+  hideRating: Boolean,
+  icon?: String,
+  id?: String,
+  rating: Numeric,
 }
-class StarRating extends React.Component {
-  render() {
-    return (
-      <div className="pb_star_rating">
-        <span>{'STAR RATING CONTENT'}</span>
+const StarRating = ({
+  aria = {},
+  className,
+  data = {},
+  hideRating = false,
+  id,
+  rating = 0,
+}: StarRatingProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames([
+    'pb_star_rating_kit', className,
+  ])
+  const starCount = () => (
+    [...Array(parseInt(rating))]
+  )
+  const hasHalfStar = () => (
+    parseFloat(rating) % 1 !== 0
+  )
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <div className="pb_star_rating_number">
+        <If condition={!hideRating}>
+          {rating}
+        </If>
       </div>
-    )
-  }
-}
-StarRating.propTypes = propTypes
+      <div className="pb_star_rating_wrapper">
+        <div className="pb_star_rating_highlight">
+          {starCount().map((_, index) => (
+            <Icon
+                fixedWidth
+                icon="star"
+                key={index}
+            />
+          ))}
+          <If condition={hasHalfStar()}>
+            <Icon
+                fixedWidth
+                icon="star-half"
+            />
+          </If>
+        </div>
+        <div className="pb_star_rating_base">
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
 export default StarRating