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

playbook_ui 4.15.1.alpha1 → 4.18.1

Files changed (402) hide show

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED

@@ -5,6 +5,7 @@ import classnames from 'classnames'
 import { joinPresent, titleize } from '../utilities/text'
 import { Body, Hashtag, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 type HomeAddressStreetProps = {
   address: String,
@@ -12,7 +13,7 @@ type HomeAddressStreetProps = {
   city: String,
   className?: String,
   dark?: Boolean,
-  emphasis: 'street' | 'city',
+  emphasis: "street" | "city",
   homeId: Number,
   houseStyle: String,
   homeUrl: String,
@@ -21,96 +22,100 @@ type HomeAddressStreetProps = {
   territory: String,
 }
-const classes = (className, dark) => (
-  classnames(className, {
-    'pb_home_address_street': !dark,
-    'pb_home_address_street_dark': dark,
-  })
-)
+const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+  const {
+    address,
+    addressCont,
+    city,
+    className,
+    dark = false,
+    emphasis = 'street',
+    homeId,
+    homeUrl,
+    houseStyle,
+    state,
+    zipcode,
+    territory,
+  } = props
-const HomeAddressStreet = ({
-  address,
-  addressCont,
-  city,
-  className,
-  dark = false,
-  emphasis = 'street',
-  homeId,
-  homeUrl,
-  houseStyle,
-  state,
-  zipcode,
-  territory,
-}: HomeAddressStreetProps) => (
-  <div className={classes(className, dark)}>
-    {
-      <Choose>
-        <When condition={emphasis == 'street'}>
-          <div>
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {joinPresent([titleize(address), houseStyle], ' · ')}
-            </Title>
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {titleize(addressCont)}
-            </Title>
-            <Body color="light">
-              {`${titleize(city)}, ${state} ${zipcode}`}
-            </Body>
-          </div>
-        </When>
-        <When condition={emphasis == 'city'}>
-          <div>
-            <Body color="light">
-              {joinPresent([titleize(address), houseStyle], ' · ')}
-            </Body>
-            <Body color="light">
-              {titleize(addressCont)}
-            </Body>
+  const classes = (className, dark) =>
+    classnames(
+      className,
+      {
+        'pb_home_address_street': !dark,
+        'pb_home_address_street_dark': dark,
+      },
+      spacing(props)
+    )
+  return (
+    <div className={classes(className, dark)}>
+      {
+        <Choose>
+          <When condition={emphasis == 'street'}>
             <div>
               <Title
                   className="pb_home_address_street_address"
                   dark={dark}
                   size={4}
-                  tag="span"
               >
-                {`${titleize(city)}, ${state}`}
+                {joinPresent([titleize(address), houseStyle], ' · ')}
               </Title>
-              <Body
-                  color="light"
-                  tag="span"
+              <Title
+                  className="pb_home_address_street_address"
+                  dark={dark}
+                  size={4}
               >
-                {` ${zipcode}`}
+                {titleize(addressCont)}
+              </Title>
+              <Body color="light">
+                {`${titleize(city)}, ${state} ${zipcode}`}
               </Body>
             </div>
-          </div>
-        </When>
-      </Choose>
-    }
+          </When>
+          <When condition={emphasis == 'city'}>
+            <div>
+              <Body color="light">
+                {joinPresent([titleize(address), houseStyle], ' · ')}
+              </Body>
+              <Body color="light">{titleize(addressCont)}</Body>
+              <div>
+                <Title
+                    className="pb_home_address_street_address"
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                >
+                  {`${titleize(city)}, ${state}`}
+                </Title>
+                <Body
+                    color="light"
+                    tag="span"
+                >
+                  {` ${zipcode}`}
+                </Body>
+              </div>
+            </div>
+          </When>
+        </Choose>
+      }
-    <If condition={homeId}>
-      <Hashtag
-          classname="home-hashtag"
-          dark={dark}
-          text={homeId}
-          type="home"
-          url={homeUrl || '#'}
-      />
-    </If>
-    <Body
-        color="light"
-        tag="span"
-    >
-      <small>{territory}</small>
-    </Body>
-  </div>
-)
+      <If condition={homeId}>
+        <Hashtag
+            classname="home-hashtag"
+            dark={dark}
+            text={homeId}
+            type="home"
+            url={homeUrl || '#'}
+        />
+      </If>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <small>{territory}</small>
+      </Body>
+    </div>
+  )
+}
 export default HomeAddressStreet

data/app/pb_kits/playbook/pb_icon/_icon.jsx CHANGED

@@ -2,57 +2,78 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type IconProps = {
   aria?: Object,
   border?: Boolean,
   className?: String,
   fixedWidth?: Boolean,
-  flip?: 'horizontal' | 'vertical' | 'both' | 'none',
+  flip?: "horizontal" | "vertical" | "both" | "none",
   icon: String,
   id?: String,
   inverse?: Boolean,
   listItem?: Boolean,
-  pull?: 'left' | 'right' | 'none',
+  pull?: "left" | "right" | "none",
   pulse?: Boolean,
   rotation?: 90 | 180 | 270,
-  size?: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x',
+  size?: | "lg"
+    | "xs"
+    | "sm"
+    | "1x"
+    | "2x"
+    | "3x"
+    | "4x"
+    | "5x"
+    | "6x"
+    | "7x"
+    | "8x"
+    | "9x"
+    | "10x",
   spin?: Boolean,
 }
 const flipMap = {
-  'horizontal': 'fa-flip-horizontal',
-  'vertical': 'fa-flip-vertical',
-  'both': 'fa-flip-horizontal fa-flip-vertical',
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
 }
-const Icon = ({
-  border = false,
-  className,
-  fixedWidth = true,
-  flip = false,
-  icon,
-  id,
-  inverse = false,
-  listItem = false,
-  pull,
-  pulse = false,
-  rotation,
-  size,
-  spin = false,
-}: IconProps) => {
-  const classes = classnames(className, flipMap[flip], 'pb_icon_kit', 'far', {
-    'fa-border': border,
-    'fa-fw': fixedWidth,
-    'fa-inverse': inverse,
-    'fa-li': listItem,
-    'fa-pulse': pulse,
-    'fa-spin': spin,
-    [`fa-${icon}`]: icon,
-    [`fa-${size}`]: size,
-    [`fa-pull-${pull}`]: pull,
-    [`fa-rotate-${rotation}`]: rotation,
-  })
+const Icon = (props: IconProps) => {
+  const {
+    border = false,
+    className,
+    fixedWidth = true,
+    flip = false,
+    icon,
+    id,
+    inverse = false,
+    listItem = false,
+    pull,
+    pulse = false,
+    rotation,
+    size,
+    spin = false,
+  } = props
+  const classes = classnames(
+    className,
+    flipMap[flip],
+    'pb_icon_kit',
+    'far',
+    {
+      'fa-border': border,
+      'fa-fw': fixedWidth,
+      'fa-inverse': inverse,
+      'fa-li': listItem,
+      'fa-pulse': pulse,
+      'fa-spin': spin,
+      [`fa-${icon}`]: icon,
+      [`fa-${size}`]: size,
+      [`fa-pull-${pull}`]: pull,
+      [`fa-rotate-${rotation}`]: rotation,
+    },
+    spacing(props)
+  )
   return (
     <i

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx CHANGED

@@ -6,24 +6,28 @@ import classnames from 'classnames'
 import { Icon } from '../'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type IconCircleProps = {
   className?: string,
   icon: string,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  variant?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
+  variant?: | "default"
+    | "royal"
+    | "blue"
+    | "purple"
+    | "teal"
+    | "red"
+    | "yellow"
+    | "green",
 }
-const IconCircle = ({
-  className,
-  icon,
-  size = 'md',
-  variant = 'default',
-}: IconCircleProps) => {
+const IconCircle = (props: IconCircleProps) => {
+  const { className, icon, size = 'md', variant = 'default' } = props
   const css = buildCss('pb_icon_circle_kit', size, variant)
   return (
-    <div className={classnames(className, css)}>
+    <div className={classnames(className, css, spacing(props))}>
       <Icon icon={icon} />
     </div>
   )

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx CHANGED

@@ -2,19 +2,14 @@
 import React from 'react'
 import classnames from 'classnames'
-import {
-  Body,
-  Icon,
-} from '../'
+import { Body, Icon } from '../'
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type IconValueProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   aria?: object,
   className?: string,
   data?: object,
@@ -23,15 +18,16 @@ type IconValueProps = {
   text: string,
 }
-const IconValue = ({
-  align = 'left',
-  aria = {},
-  className,
-  data = {},
-  icon,
-  id,
-  text,
-}: IconValueProps) => {
+const IconValue = (props: IconValueProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    icon,
+    id,
+    text,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const pbCss = buildCss('pb_icon_value_kit', align)
@@ -40,7 +36,7 @@ const IconValue = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(className, pbCss)}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Body color="light">

data/app/pb_kits/playbook/pb_image/_image.jsx CHANGED

@@ -1,21 +1,23 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type ImageProps = {
   url: string,
   alt?: string,
 }
-const Image = ({
-  alt = '',
-  url = '',
-}: ImageProps) => (
-  <img
-      alt={alt}
-      className="pb_image lazyload blur_up"
-      data-src={url}
-  />
-)
+const Image = (props: ImageProps) => {
+  const { alt = '', url = '' } = props
+  return (
+    <img
+        alt={alt}
+        className={classnames('pb_image lazyload blur_up', spacing(props))}
+        data-src={url}
+    />
+  )
+}
 export default Image

data/app/pb_kits/playbook/pb_label_pill/_label_pill.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx CHANGED

@@ -1,21 +1,56 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { Caption, Pill } from '../'
-class LabelPill extends React.Component {
-  render() {
-    return (
-      <div className="pb_label_pill">
-        <span>{'LABEL PILL CONTENT'}</span>
-      </div>
-    )
-  }
+type LabelPillProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+  label?: String,
+  pillValue?: String,
+  variant: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
-LabelPill.propTypes = propTypes
+const LabelPill = (props: LabelPillProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    label,
+    pillValue,
+    variant = 'neutral',
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(['pb_label_pill_kit', className], spacing(props))
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Caption
+          className="pb_label_pill_label"
+          text={label}
+      />
+      <Pill
+          className="pb_label_pill_pill"
+          text={pillValue}
+          variant={variant}
+      />
+    </div>
+  )
+}
 export default LabelPill