playbook_ui 13.32.0.pre.alpha.play1416movealiaslogic3266 → 13.33.0.pre.alpha.PLAY1454formpillicons3309

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -5,7 +5,7 @@ import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -18,6 +18,10 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
+  color?: "primary" | "neutral",
+  data?: {[key: string]: string},
+  tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -36,45 +40,85 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
+    color = "primary",
+    data = {},
+    tabIndex,
+    icon = "",
   } = props
+
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
+        tabIndex={tabIndex}
+        {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
+<%= pb_rails("form_pill", props: {
+    text_transform: "lowercase" ,
+    text: "THIS IS A TAG",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -6,6 +6,7 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
+          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -2,6 +2,7 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -10,4 +11,5 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -9,6 +9,7 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1 +1,4 @@
-<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>
+<%= pb_rails("form_pill", props: {
+    text: "this is a tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -6,8 +6,9 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-alert('Click!')
-}}
+            alert('Click!')
+          }}
+          tabIndex={0}
           text="this is a tag"
           {...props}
       />

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -8,4 +9,5 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -9,6 +9,7 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
     </div>

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

@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-
+  - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  - form_pill_icon: Form Pill Icon

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

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-
+export { default as FormPillIcon } from './_form_pill_icon.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,12 +1,19 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
-      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,9 +11,14 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[primary neutral],
+                   default: "primary"
+      prop :tabindex
+      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -23,6 +28,10 @@ module Playbook
       def size_class
         size == "small" ? " small" : ""
       end
+
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,4 +1,3 @@
-// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -10,3 +9,213 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
+
+$rotate-list: (90, 180, 270);
+
+@keyframes pb_icon_spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+};
+
+svg {
+  &.pb_icon_kit,
+  &.pb_custom_icon{
+    @each $r in $rotate-list {
+      &.rotate_#{$r} {
+        transform: rotate(#{$r}deg);
+      }
+    }
+    &.flip_horizontal {
+      transform: scaleX(-1);
+    }
+    &.flip_vertical {
+      transform: scaleY(-1);
+    }
+    &.flip_horizontal.flip_vertical {
+      transform: scaleX(-1) scaleY(-1);
+    }
+    &.svg-inline--fa {
+      height: 1em;
+      overflow: visible;
+      vertical-align: -.125em
+    }
+    &.svg_inverse {
+      color: #fff;
+    }
+    &.svg_border {
+      border-color: #eee;
+      border-radius: .1em;
+      border-style: solid;
+      border-width: .08em;
+      padding: .2em .25em .15em;
+    }
+    &.svg_fw {
+      text-align: center;
+      width: 1.25em
+    }
+    &.svg_li {
+      left: calc(2em * -1);
+      position: absolute;
+      text-align: center;
+      width: 2em;
+      line-height: inherit
+    }
+    &.pull_left {
+      float: left;
+      margin-right: .3em;
+    }
+
+    &.pull_right {
+      float: right;
+      margin-left: .3em;
+    }
+    &.pulse {
+      animation-name: pb_icon_spin;
+      animation-direction: normal;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: steps(8);
+    }
+    &.spin {
+      animation-name: pb_icon_spin;
+      animation-delay: 0s;
+      animation-direction: normal;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    &.svg_xs {
+      font-size: 0.75em
+    }
+
+    &.svg_sm {
+      font-size: 0.875em
+    }
+
+    &.svg_lg {
+      font-size: 1.25em
+    }
+
+    &.svg_1x {
+      font-size: 1em
+    }
+
+    &.svg_2x {
+      font-size: 2em
+    }
+
+    &.svg_3x {
+      font-size: 3em
+    }
+
+    &.svg_4x {
+      font-size: 4em
+    }
+
+    &.svg_5x {
+      font-size: 5em
+    }
+
+    &.svg_6x {
+      font-size: 6em
+    }
+
+    &.svg_7x {
+      font-size: 7em
+    }
+
+    &.svg_8x {
+      font-size: 8em
+    }
+
+    &.svg_9x {
+      font-size: 9em
+    }
+
+    &.svg_10x {
+      font-size: 10em
+    }
+    &.fa-xs {
+      font-size: .75em;
+      line-height: .0833333337em;
+      vertical-align: .125em
+    }
+    &.fa-sm {
+      font-size: .875em;
+      line-height: .0714285718em;
+      vertical-align: .0535714295em
+    }
+    &.fa-lg {
+      font-size: 1.25em;
+      line-height: .05em;
+      vertical-align: -.075em
+    }
+    &.fa-pull-left {
+      float: left;
+      margin-right: .3em;
+    }
+
+    &.fa-pull-right {
+      float: right;
+      margin-left: .3em;
+    }
+    &.fa-li {
+      left: calc(2em * -1);
+      position: absolute;
+      text-align: center;
+      width: 2em;
+      line-height: inherit
+    }
+    &.svg-inline--fa.fa-li {
+      width: 2em;
+      top: .25em
+    }
+    &.svg-inline--fa.fa-fw {
+      width: 1.25em;
+    }
+    &.fa-fw {
+      text-align: center;
+      width: 1.25em
+    }
+    &.fa-layers {
+      display: inline-block;
+      height: 1em;
+      position: relative;
+      text-align: center;
+      vertical-align: -.125em;
+      width: 1em
+    }
+    &.fa-2x {
+      font-size: 2em
+    }
+    &.fa-3x {
+      font-size: 3em
+    }
+    &.fa-flip {
+      animation-name: fa-flip;
+      animation-delay: 0s;
+      animation-direction: normal;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+    }
+    &.fa-spin {
+      animation-name: fa-spin;
+      animation-delay: 0s;
+      animation-direction: normal;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+    &.fa-pulse {
+      animation: fa-spin 1s infinite linear;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -41,10 +41,74 @@ type IconProps = {
 } & GlobalProps
 
 const flipMap = {
-  horizontal: 'fa-flip-horizontal',
-  vertical: 'fa-flip-vertical',
-  both: 'fa-flip-horizontal fa-flip-vertical',
-  none: ""
+  fa: {
+    horizontal: 'fa-flip-horizontal',
+    vertical: 'fa-flip-vertical',
+    both: 'fa-flip-horizontal fa-flip-vertical',
+    none: ''
+  },
+  svg: {
+    horizontal: 'flip_horizontal',
+    vertical: 'flip_vertical',
+    both: 'flip_horizontal flip_vertical',
+    none: ''
+  }
+}
+const pulseMap = {
+  fa: 'fa-pulse',
+  svg: 'pulse'
+}
+const spinMap = {
+  fa: 'fa-spin',
+  svg: 'spin'
+}
+const rotateMap = {
+  fa: {
+    90: 'fa-rotate-90',
+    180: 'fa-rotate-180',
+    270: 'fa-rotate-270'
+  },
+  svg: {
+    90: 'rotate_90',
+    180: 'rotate_180',
+    270: 'rotate_270'
+  }
+}
+
+const sizeMap = {
+  fa: {
+    "lg": "fa-lg",
+    "xs": "fa-xs",
+    "sm": "fa-sm",
+    "1x": "fa-1x",
+    "2x": "fa-2x",
+    "3x": "fa-3x",
+    "4x": "fa-4x",
+    "5x": "fa-5x",
+    "6x": "fa-6x",
+    "7x": "fa-7x",
+    "8x": "fa-8x",
+    "9x": "fa-9x",
+    "10x": "fa-10x",
+    "": ""
+  },
+  svg: {
+    "lg": "svg_lg",
+    "xs": "svg_xs",
+    "sm": "svg_sm",
+    "1x": "svg_1x",
+    "2x": "svg_2x",
+    "3x": "svg_3x",
+    "4x": "svg_4x",
+    "5x": "svg_5x",
+    "6x": "svg_6x",
+    "7x": "svg_7x",
+    "8x": "svg_8x",
+    "9x": "svg_9x",
+    "10x": "svg_10x",
+    "": ""
+  }
+
 }
 
 declare global {
@@ -99,16 +163,42 @@ const Icon = (props: IconProps) => {
     }
   }
 
-  const classes = classnames(
-    flipMap[flip],
+  const isFA = !iconElement && !customIcon 
+
+  let classes = classnames(
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
-    faClasses,
     globalProps(props),
     className
   )
 
+  const transformClasses = classnames(
+    flip ? flipMap[isFA ? 'fa' : 'svg'][flip] : null,
+    pulse ? pulseMap[isFA ? 'fa' : 'svg'] : null,
+    rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
+    spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
+    size ? sizeMap[isFA ? 'fa' : 'svg'][size] : null,
+    border ? isFA ? 'fa-border' : 'svg_border' : null,
+    fixedWidth ? isFA ? 'fa-fw' : 'svg_fw' : null,
+    inverse ? isFA ? 'fa-inverse' : 'svg_inverse' : null,
+    listItem ? isFA ? 'fa-li' : 'svg_li' : null,
+    pull ? isFA ? `fa-pull-${pull}` : `pull_${pull}` : null,
+  )
+  classes += ` ${transformClasses}`
+
+  if (isFA) {
+    const faClassList = {
+      'fa-border': border,
+      'fa-inverse': inverse,
+      'fa-li': listItem,
+      [`fa-${size}`]: size,
+      [`fa-pull-${pull}`]: pull,
+    }
+    faClassList[`fa-${icon}`] = icon as string
+    classes += ` ${classnames(faClassList)}`
+  }
+
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
     globalProps(props),