playbook_ui 4.15.0 → 4.15.1.alpha1

data/app/pb_kits/playbook/pb_layout/_sidebar.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+}
+
+class Sidebar extends Component {
+  render() {
+    const {
+      children,
+    } = this.props
+    return (
+      <div className="layout_sidebar">
+        {children}
+      </div>
+    )
+  }
+}
+
+Sidebar.propTypes = propTypes
+
+export default Sidebar

data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutDefault = () => {
+  return (
+    <div>
+      <Layout>
+        {'This is great!'}
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutDefault

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

@@ -5,7 +5,4 @@ examples:
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
   react:
-  - layout_colors: Colors
-  - layout_transparent: Transparent
-  - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
+  - layout_default: Default

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

@@ -1,4 +1 @@
-export { default as LayoutColors } from './_layout_colors.jsx'
-export { default as LayoutTransparent } from './_layout_transparent.jsx'
-export { default as LayoutSizes } from './_layout_sizes.jsx'
-export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
+export { default as LayoutDefault } from './_layout_default.jsx'

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -1,38 +1,21 @@
-/* @flow */
-
 import React from 'react'
-import classnames from 'classnames'
-
-import {
-  buildDataProps,
-} from '../utilities/props'
+import PropTypes from 'prop-types'
 
-type OnlineStatusProps = {
-  className?: String,
-  data?: object,
-  id?: String,
-  status?: "online" | "offline" | "away",
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string,
 }
 
-const OnlineStatus = ({
-  id,
-  data = {},
-  className,
-  status = 'offline',
-}: OnlineStatusProps) => {
-  const dataProps = buildDataProps(data)
-  const css = classnames([
-    `pb_online_status_kit_${status}`,
-    className,
-  ])
-
-  return (
-    <div
-        {...dataProps}
-        className={css}
-        id={id}
-    />
-  )
+class OnlineStatus extends React.Component {
+  render() {
+    return (
+      <div className="pb_online_status">
+        <span>{'ONLINE STATUS CONTENT'}</span>
+      </div>
+    )
+  }
 }
 
+OnlineStatus.propTypes = propTypes
+
 export default OnlineStatus

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

@@ -1,7 +1,7 @@
 examples:
-
+  
   rails:
   - online_status_default: Default
-
+  
   react:
-  - online_status_default: Default
+  

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

@@ -1 +0,0 @@
-export { default as OnlineStatusDefault } from './_online_status_default.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -26,22 +26,14 @@ type PbPopoverProps = {
   shouldClosePopover?: () => Boolean,
 } & PopperProps
 
-// Prop enabled default modifiers here
-// https://popper.js.org/docs/v2/modifiers
-
-const POPOVER_MODIFIERS = {
-  offset: { //https://popper.js.org/docs/v2/modifiers/offset/
-    enabled: true,
-    name: 'offset',
-    options: {
-      offset: [0, 8],
-    },
-    phase: 'main',
+const POPOVER_OFFSET_Y = {
+  offset: {
+    offset: '0, 8',
   },
 }
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
+  return offset ? { ...modifiers, ...POPOVER_OFFSET_Y } : modifiers
 }
 
 const Popover = ({
@@ -51,21 +43,23 @@ const Popover = ({
   offset,
   placement,
   referenceElement,
+  show,
 }: PbPopoverProps) => (
   <Popper
       modifiers={popoverModifiers({ modifiers, offset })}
       placement={placement}
       referenceElement={referenceElement}
   >
-    {({ placement, ref, style }) => {
+    {({ placement, ref, scheduleUpdate, style }) => {
+      scheduleUpdate()
       return (
         <div
-            className={`${buildCss('pb_popover_kit')} ${className}`}
+            className={buildCss('pb_popover_kit', className)}
             data-placement={placement}
             ref={ref}
             style={style}
         >
-          <div className={`${buildCss('popover_tooltip')} show`}>
+          <div className={buildCss('popover_tooltip', show ? 'show' : '')}>
             <Card shadow="deeper">
               { children }
             </Card>
@@ -79,13 +73,13 @@ const Popover = ({
 
 export default class PbReactPopover extends React.Component<PbPopoverProps> {
   static defaultProps = {
-    modifiers: [],
+    modifiers: {},
     offset: false,
     placement: 'left',
     portal: 'body',
     show: false,
     shouldClosePopover: noop,
-    usePortal: true,
+    usePortal: false,
   }
 
   componentDidMount() {
@@ -140,6 +134,7 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
           offset={offset}
           placement={placement}
           referenceElement={referenceElement}
+          show={show}
       >
         {children}
       </Popover>
@@ -161,15 +156,13 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
             )}
           </PopperReference>
         </If>
-        <If condition={show}>
-          <If condition={usePortal}>
-            {ReactDOM.createPortal(
-              popoverComponent,
-              document.querySelector(portal)
-            )}
-            <Else />
-            {popoverComponent}
-          </If>
+        <If condition={usePortal}>
+          {ReactDOM.createPortal(
+            popoverComponent,
+            document.querySelector(portal)
+          )}
+          <Else />
+          {popoverComponent}
         </If>
       </PopperManager>
     )

data/app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+const PopoverPortal = () => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+
+  const popoverReference = (
+    <Button
+        onClick={handleTogglePopover}
+        text="Button Secondary"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+        usePortal
+    >
+      {'Whoa. I\'m a portal popover.'}
+    </PbReactPopover>
+  )
+}
+
+export default PopoverPortal

data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'regular-popover-3' }) %>
+<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-3", tooltip_id: "tooltip-3", position: 'bottom', offset: true }) do %>
+    Whoa. I'm a popover.
+<% end %>

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

@@ -1,6 +1,7 @@
 examples:
   rails:
     - popover_default: Default
+    - popover_with_button: With Button
     - popover_list: With any children
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
@@ -8,7 +9,9 @@ examples:
 
   react:
     - popover_default: Default
+    - popover_with_button: With Button
     - popover_list: With any children
+    - popover_portal: Use with `portal` option
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
     - popover_click_any: Close on click anywhere

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

@@ -1,5 +1,7 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
+export { default as PopoverWithButton } from './_popover_with_button.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
+export { default as PopoverPortal } from './_popover_portal.jsx'
 export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
 export { default as PopoverClickInside } from './_popover_click_inside.jsx'
 export { default as PopoverClickAny } from './_popover_click_any.jsx'

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb

@@ -14,5 +14,5 @@
 
 <%= pb_rails("stat_change", props: {
   change: "neutral",
-  value: 102
+  value: 98
 }) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -20,7 +20,7 @@ const StatChangeDefault = () => {
 
       <StatChange
           change="neutral"
-          value={102}
+          value={98}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
-      prop :value, type: Playbook::Props::Numeric
+      prop :value, type: Playbook::Props::Percentage
 
       def status
         case change

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -1,46 +1,21 @@
-/* @flow */
-
 import React from 'react'
-import classnames from 'classnames'
-
-import {
-  Caption,
-} from '../'
-
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import PropTypes from 'prop-types'
 
-type TimestampProps = {
-  id?: String,
-  data?: object,
-  className?: String,
-  text?: String,
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string,
 }
 
-const Timestamp = ({
-  id,
-  className,
-  data = {},
-  text,
-}: TimestampProps) => {
-  const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_timestamp_kit')
-
-  return (
-    <div
-        {...dataProps}
-        className={classnames(className, pbCss)}
-        id={id}
-    >
-      <Caption
-          size="xs"
-          tag="span"
-          text={text}
-      />
-    </div>
-  )
+class Timestamp extends React.Component {
+  render() {
+    return (
+      <div className="pb_timestamp">
+        <span>{'TIMESTAMP CONTENT'}</span>
+      </div>
+    )
+  }
 }
 
+Timestamp.propTypes = propTypes
+
 export default Timestamp

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

@@ -1,7 +1,7 @@
 examples:
-
+  
   rails:
   - timestamp_default: Default
-
+  
+  
   react:
-  - timestamp_default: Default

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

@@ -1 +0,0 @@
-export { default as TimestampDefault } from './_timestamp_default.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -1,54 +1,21 @@
-/* @flow */
-
 import React from 'react'
-import classnames from 'classnames'
-
-import {
-  Body,
-  Title,
-} from '../'
-
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import PropTypes from 'prop-types'
 
-type TitleDetailProps = {
-  align?: 'left' | 'center' | 'right',
-  className?: String,
-  data?: object,
-  detail: String,
-  id?: String,
-  title: String,
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string,
 }
 
-const TitleDetail = ({
-  align = 'left',
-  className,
-  data = {},
-  detail,
-  id,
-  title,
-}: TitleDetailProps) => {
-  const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_title_detail_kit', align)
-
-  return (
-    <div
-        {...dataProps}
-        className={classnames(className, pbCss)}
-        id={id}
-    >
-      <Title
-          size={4}
-          text={title}
-      />
-      <Body
-          color="light"
-          text={detail}
-      />
-    </div>
-  )
+class TitleDetail extends React.Component {
+  render() {
+    return (
+      <div className="pb_title_detail">
+        <span>{'TITLE DETAIL CONTENT'}</span>
+      </div>
+    )
+  }
 }
 
+TitleDetail.propTypes = propTypes
+
 export default TitleDetail

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

@@ -1,7 +1,7 @@
 examples:
-
+  
   rails:
   - title_detail_default: Default
-
+  
+  
   react:
-  - title_detail_default: Default

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

@@ -1 +0,0 @@
-export { default as TitleDetailDefault } from './_title_detail_default.jsx'

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -2,8 +2,6 @@ import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
 
-require('highcharts/modules/variable-pie')(Highcharts)
-
 class pbChart {
   defaults = {
     callbackInitializeBefore: () => {},
@@ -28,50 +26,7 @@ class pbChart {
     this.element = element
     this.options = options
     this.settings = this.extendDefaults(this.defaults, options)
-
-    if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
-      this.setupPieChart()
-    } else {
-      this.setupChart()
-    }
-  }
-
-  setupPieChart() {
-    Highcharts.setOptions(highchartsTheme)
-
-    Highcharts.chart(this.defaults.id, {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        type: this.defaults.type,
-      },
-      plotOptions: {
-        pie: {
-          dataLabels: {
-            enabled: this.defaults.dataLabels,
-            connectorShape: 'straight',
-            connectorWidth: 3,
-            format: this.defaults.dataLabelHtml,
-          },
-          showInLegend: this.defaults.showInLegend,
-        },
-      },
-      tooltip: {
-        headerFormat: this.defaults.headerFormat,
-        pointFormat: this.defaults.tooltipHtml,
-        useHTML: this.defaults.useHTML,
-      },
-      series: [{
-        minPointSize: this.defaults.minPointSize,
-        maxPointSize: this.defaults.maxPointSize,
-        innerSize: this.defaults.innerSize,
-        data: this.defaults.chartData,
-        zMin: this.defaults.zMin,
-        startAngle: this.defaults.startAngle,
-      }],
-      credits: false,
-    })
+    this.setupChart()
   }
 
   setupChart() {
@@ -100,9 +55,6 @@ class pbChart {
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,
-          dataLabels: {
-            enabled: false,
-          },
         },
       },
       series: this.defaults.chartData,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -31,15 +31,11 @@ $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
 $charcoal:            #242B42;
-$black:               #000000;
-
 $interface_colors: (
   white:              $white,
   silver:             $silver,
   slate:              $slate,
   charcoal:           $charcoal,
-  black:              $black,
-
 );
 
 // Main colors ------------------------

data/app/pb_kits/playbook/vendor.js

@@ -11,9 +11,6 @@ import 'lazysizes'
 import PbPopover from './pb_popover'
 PbPopover.start()
 
-import PbTooltip from './pb_tooltip'
-PbTooltip.start()
-
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()
 

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.15.0"
+  VERSION = "4.15.1.alpha1"
 end