playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -11,16 +11,18 @@ const FilterSingle = () => {
   ]
   return (
     <Filter
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
-        template="single"
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'asc' }]}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb

@@ -1,18 +1,12 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id: "so",
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  template:"sort_only",
-  background: false,
-  }) do%>
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>
+<%=
+  pb_rails("filter", props: {
+    id: "so",
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template:"sort_only",
+    background: false,
+  })
+%>

data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx

@@ -1,48 +1,18 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Filter } from '../../'
 
-const SortOnly = () => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A Galaxy Far Far Away Like Really Far Away' },
-  ]
-  return (
-    <Filter
-        background={false}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
-        template="sort_only"
-    >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-      />
-
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-      />
-      <Flex
-          spacing="between"
-      >
-        <Button
-            text="Apply"
-        />
-        <Button
-            text="Clear"
-            variant="secondary"
-        />
-      </Flex>
-    </Filter>
-  )
-}
+const SortOnly = () => (
+  <Filter
+      background={false}
+      sortOptions={{
+        popularity: 'Popularity',
+        // eslint-disable-next-line
+        manager_title: 'Manager\'s Title',
+        // eslint-disable-next-line
+        manager_name: 'Manager\'s Name',
+      }}
+      sortValue={[{ name: 'manager_title', dir: 'desc' }]}
+  />
+)
 
 export default SortOnly

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -13,7 +13,7 @@
 <%end%>
 
 <% if object.template != "filter_only"%>
-  <%= pb_rails("popover", props: { close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
       <%= pb_rails("list") do %>
         <% object.sort_menu.each do |item| %>
           <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -2,30 +2,31 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { Icon, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 const iconMap = {
-  'success': 'check',
-  'error': 'exclamation-triangle',
-  'neutral': 'info-circle',
-  'tip': 'info-circle',
+  success: 'check',
+  error: 'exclamation-triangle',
+  neutral: 'info-circle',
+  tip: 'info-circle',
 }
 
 type FixedConfirmationToastProps = {
   className?: String,
   data?: String,
   id?: String,
-  status?: 'success' | 'error' | 'neutral' | 'tip',
+  status?: "success" | "error" | "neutral" | "tip",
   text: String,
 }
 
-const FixedConfirmationToast = ({
-  className,
-  status = 'neutral',
-  text,
-}: FixedConfirmationToastProps) => {
-  const css = classnames(className, `pb_fixed_confirmation_toast_kit_${status}`)
+const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+  const { className, status = 'neutral', text } = props
+  const css = classnames(
+    className,
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    spacing(props)
+  )
   const icon = iconMap[status]
 
   return (

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -3,33 +3,36 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-
+import { spacing as spacingFunc } from '../utilities/spacing.js'
 type FlexProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  horizontal?: 'left' | 'center' | 'right' | 'stretch',
+  horizontal?: "left" | "center" | "right" | "stretch",
   id?: String,
   inline?: Boolean,
-  orientation?: 'row' | 'column',
-  spacing?: 'around' | 'between' | 'evenly' | 'none',
+  orientation?: "row" | "column",
+  spacing?: "around" | "between" | "evenly" | "none",
   reverse?: Boolean,
-  vertical?: 'top' | 'center' | 'bottom' | 'stretch',
+  vertical?: "top" | "center" | "bottom" | "stretch",
   wrap?: Boolean,
 }
 
-const Flex = ({
-  children,
-  className,
-  inline = false,
-  horizontal = 'left',
-  orientation = 'row',
-  spacing = 'none',
-  reverse = false,
-  vertical = 'top',
-  wrap = false,
-}: FlexProps) => {
-  const orientationClass = orientation !== undefined ? `orientation_${orientation}` : ''
-  const horizontalClass = horizontal !== undefined ? `justify_content_${horizontal}` : ''
+const Flex = (props: FlexProps) => {
+  const {
+    children,
+    className,
+    inline = false,
+    horizontal = 'left',
+    orientation = 'row',
+    spacing = 'none',
+    reverse = false,
+    vertical = 'top',
+    wrap = false,
+  } = props
+  const orientationClass =
+    orientation !== undefined ? `orientation_${orientation}` : ''
+  const horizontalClass =
+    horizontal !== undefined ? `justify_content_${horizontal}` : ''
   const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
@@ -37,8 +40,20 @@ const Flex = ({
   const reverseClass = reverse === true ? 'reverse' : ''
   return (
     <div
-        className={classnames(buildCss('pb_flex_kit', orientationClass, horizontalClass, verticalClass, inlineClass, spacingClass, reverseClass, wrapClass
-    ), className)}
+        className={classnames(
+        buildCss(
+          'pb_flex_kit',
+          orientationClass,
+          horizontalClass,
+          verticalClass,
+          inlineClass,
+          spacingClass,
+          reverseClass,
+          wrapClass
+        ),
+        className,
+        spacingFunc(props)
+      )}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-
+import { spacing } from '../utilities/spacing.js'
 type FlexItemPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   fixedSize: String,
@@ -10,18 +10,15 @@ type FlexItemPropTypes = {
   className: String,
 }
 
-const FlexItem = ({
-  children,
-  className,
-  fixedSize,
-  grow,
-}: FlexItemPropTypes) => {
+const FlexItem = (props: FlexItemPropTypes) => {
+  const { children, className, fixedSize, grow } = props
   const growClass = grow === true ? 'grow' : ''
-  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const fixedStyle =
+    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, spacing(props))}
         style={fixedStyle}
     >
       {children}

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

@@ -4,28 +4,23 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar.jsx'
+import { spacing } from '../utilities/spacing.js'
 
 type FormPillProps = {
-
-className?: String,
-id?: String,
-text: String,
-name: String,
-onClick?: EventHandler,
-avatar?: Boolean,
-avatarUrl?: String,
+  className?: String,
+  id?: String,
+  text: String,
+  name: String,
+  onClick?: EventHandler,
+  avatar?: Boolean,
+  avatarUrl?: String,
 }
-const FormPill = ({
-  className,
-  text,
-  name,
-  onClick = () => {},
-  avatarUrl,
-}: FormPillProps) => {
-  const css = classnames([
-    `pb_form_pill_kit_${'primary'}`,
-    className,
-  ])
+const FormPill = (props: FormPillProps) => {
+  const { className, text, name, onClick = () => {}, avatarUrl } = props
+  const css = classnames(
+    [`pb_form_pill_kit_${'primary'}`, className],
+    spacing(props)
+  )
   return (
     <div className={css}>
       <If condition={name}>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames'
 
 import { Badge } from '../'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type HashtagProps = {
   className?: String,
@@ -13,33 +14,36 @@ type HashtagProps = {
   dark?: Boolean,
   id?: String,
   text?: String,
-  type: 'default' | 'home' | 'project' | 'appointment',
+  type: "default" | "home" | "project" | "appointment",
   url?: String,
 }
 
 const typeMap = {
-  'home': 'H#',
-  'project': 'P#',
-  'appointment': 'A#',
-  'default': '#',
+  home: 'H#',
+  project: 'P#',
+  appointment: 'A#',
+  default: '#',
 }
 
-const Hashtag = ({
-  className,
-  dark = false,
-  text,
-  type,
-  url,
-}: HashtagProps) => (
-  <span className={classnames(className, buildCss('pb_hashtag_kit', { 'dark': dark }))}>
-    <a href={url}>
-      <Badge
-          dark={dark}
-          text={typeMap[type] + text}
-          variant="primary"
-      />
-    </a>
-  </span>
-)
+const Hashtag = (props: HashtagProps) => {
+  const { className, dark = false, text, type, url } = props
+  return (
+    <span
+        className={classnames(
+        className,
+        buildCss('pb_hashtag_kit', { dark: dark }),
+        spacing(props)
+      )}
+    >
+      <a href={url}>
+        <Badge
+            dark={dark}
+            text={typeMap[type] + text}
+            variant="primary"
+        />
+      </a>
+    </span>
+  )
+}
 
 export default Hashtag

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -2,6 +2,8 @@
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 import Highlighter from 'react-highlight-words'
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type HighlightProps = {
   className?: String,
@@ -9,29 +11,28 @@ type HighlightProps = {
   id?: String,
   children?: React.Node,
   text?: String,
-  highlightedText?: Array<String>
+  highlightedText?: Array<String>,
 }
 
-const Highlight = ({
-  className = 'pb_highlight_kit',
-  children,
-  data,
-  id,
-  text,
-  highlightedText = ['highlight'],
-}: HighlightProps) => {
+const Highlight = (props: HighlightProps) => {
+  const {
+    className = 'pb_highlight_kit',
+    children,
+    data,
+    id,
+    text,
+    highlightedText = ['highlight'],
+  } = props
   return (
-
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={className}
+        highlightClassName={classnames(className, spacing(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}
         textToHighlight={text || children}
     />
-
   )
 }