RubyGems - playbook_ui - Versions diffs - 4.17.0.pre.alpha1 → 4.17.0 - Mend

playbook_ui 4.17.0.pre.alpha1 → 4.17.0

Files changed (145) hide show

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx CHANGED

@@ -2,17 +2,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime.js'
+import { spacing } from '../utilities/spacing.js'
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 type DateYearStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
@@ -20,23 +17,21 @@ type DateYearStackedProps = {
   id?: String,
 }
-const DateYearStacked = ({
-  align = 'left',
-  className,
-  dark = false,
-  date,
-}: DateYearStackedProps) => {
+const DateYearStacked = (props: DateYearStackedProps) => {
+  const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align))
+  const css = classnames(className, buildCss('pb_date_year_stacked', align), spacing(props))
   return (
     <div className={css}>
       <Title
           dark={dark}
           size={4}
-          text={`${dateTimestamp.toDay()} ${dateTimestamp.toMonth().toUpperCase()}`}
+          text={`${dateTimestamp.toDay()} ${dateTimestamp
+          .toMonth()
+          .toUpperCase()}`}
       />
-      <Body color="light">{ dateTimestamp.toYear() }</Body>
+      <Body color="light">{dateTimestamp.toYear()}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx CHANGED

@@ -1,12 +1,14 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type DistributionBarProps = {
   className?: String,
   data?: String,
   id?: String,
-  size?: 'lg' | 'sm',
+  size?: "lg" | "sm",
   widths?: Array<Number>,
 }
@@ -17,27 +19,25 @@ const normalizeCharacters = (widths) => {
 }
 const barValues = (normalizedValues) => {
-  const arrSum = (value) => value.reduce((a, b) => (a + b), 0)
+  const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
           className="pb_distribution_width"
           key={i}
-          style={{ width: `${value * 100 / widthSum}%` }}
+          style={{ width: `${(value * 100) / widthSum}%` }}
       />
     )
   })
 }
-const DistributionBar = ({
-  size = 'lg',
-  widths = [1],
-}: DistributionBarProps) => {
+const DistributionBar = (props: DistributionBarProps) => {
+  const { size = 'lg', widths = [1] } = props
   const normalizedValues = normalizeCharacters(widths)
   return (
-    <div className={`pb_distribution_bar_${size}`}>
+    <div className={classnames(`pb_distribution_bar_${size}`, spacing(props))}>
       {barValues(normalizedValues)}
     </div>
   )

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx CHANGED

@@ -2,18 +2,13 @@
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
-import {
-  buildCss,
-  noop,
-} from '../utilities/props'
+import { buildCss, noop } from '../utilities/props'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import type { Callback } from '../types.js'
-import {
-  Body,
-  Card,
-} from '..'
+import { Body, Card } from '..'
 type FileUploadProps = {
   accept?: Array<String>,
@@ -21,34 +16,29 @@ type FileUploadProps = {
   onFilesAccepted: Callback,
 }
-const FileUpload = ({
-  accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
-  className,
-  onFilesAccepted = noop,
-}: FileUploadProps) => {
+const FileUpload = (props: FileUploadProps) => {
+  const {
+    accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
+    className,
+    onFilesAccepted = noop,
+  } = props
   const onDrop = useCallback((files) => {
     onFilesAccepted(files)
   })
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-  } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     onDrop,
   })
   return (
     <div
-        className={buildCss('pb_file_upload_kit', className)}
+        className={classnames(buildCss('pb_file_upload_kit', className), spacing(props))}
         {...getRootProps()}
     >
       <Card>
         <input {...getInputProps()} />
-        <Body
-            color="light"
-        >
+        <Body color="light">
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx CHANGED

@@ -2,25 +2,27 @@
 import React, { Node } from 'react'
 import { Card } from '../../'
+import classnames from 'classnames'
+import { spacing } from '../../utilities/spacing.js'
 type FilterBackgroundProps = {
   background: boolean,
   className: string,
   children: Node,
 }
-const FilterBackground = ({ background = true, className, children }: FilterBackgroundProps) => (
-  <div className={`pb_filter_kit ${className}`}>
-    <Choose>
-      <When condition={background}>
-        <Card padding="none">
-          {children}
-        </Card>
-      </When>
-      <Otherwise>
-        {children}
-      </Otherwise>
-    </Choose>
-  </div>
-)
+const FilterBackground = (props: FilterBackgroundProps) => {
+  const { background = true, className, children } = props
+  return (
+    <div className={classnames(`pb_filter_kit ${className}`, spacing(props))}>
+      <Choose>
+        <When condition={background}>
+          <Card padding="none">{children}</Card>
+        </When>
+        <Otherwise>{children}</Otherwise>
+      </Choose>
+    </div>
+  )
+}
 export default FilterBackground

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

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

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

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

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

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