playbook_ui 4.2.0 → 4.3.0

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

@@ -9,3 +9,7 @@
     }
   }
 }
+
+.pb_popover_reference_wrapper {
+  display: inline-block;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import {
+  PbReactPopover,
+} from '../..'
+
+export default class PopoverDefault extends React.Component {
+  state = {
+    showPopover: false,
+  }
+
+  handleTogglePopover = () => {
+    this.setState({ showPopover: !this.state.showPopover })
+  }
+
+  render() {
+    const popoverReference = (
+      <span onClick={this.handleTogglePopover}>{'Click me.'}</span>
+    )
+
+    return (
+      <PbReactPopover
+          reference={popoverReference}
+          show={this.state.showPopover}
+      >
+        {'Whoa. I\'m a popover.'}
+      </PbReactPopover>
+    )
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  Button,
+  List,
+  ListItem,
+  PbReactPopover,
+} from '../..'
+
+export default class PopoverWithButton extends React.Component {
+  state = {
+    showPopover: false,
+  }
+
+  handleTogglePopover = () => {
+    this.setState({ showPopover: !this.state.showPopover })
+  }
+
+  render() {
+    const popoverReference = (
+      <Button
+          onClick={this.handleTogglePopover}
+          text="Button Secondary"
+          variant="secondary"
+      />
+    )
+
+    return (
+      <div style={{ height: '400px', textAlign: 'center' }}>
+        <PbReactPopover
+            offset
+            placement="bottom"
+            reference={popoverReference}
+            show={this.state.showPopover}
+        >
+          <List>
+            <ListItem>{'Popularity'}</ListItem>
+            <ListItem>{'Title'}</ListItem>
+            <ListItem>{'Duration'}</ListItem>
+            <ListItem>{'Date Started'}</ListItem>
+            <ListItem>{'Date Ended'}</ListItem>
+          </List>
+        </PbReactPopover>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+export default class PopoverPortal extends React.Component {
+  state = {
+    showPopover: false,
+  }
+
+  handleTogglePopover = () => {
+    this.setState({ showPopover: !this.state.showPopover })
+  }
+
+  render() {
+    const popoverReference = (
+      <Button
+          onClick={this.handleTogglePopover}
+          text="Button Secondary"
+          variant="secondary"
+      />
+    )
+
+    return (
+      <PbReactPopover
+          placement="bottom"
+          reference={popoverReference}
+          show={this.state.showPopover}
+          usePortal
+      >
+        {'Whoa. I\'m a portal popover.'}
+      </PbReactPopover>
+    )
+  }
+}

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+  Button,
+  PbReactPopover,
+} from '../..'
+
+export default class PopoverWithButton extends React.Component {
+  state = {
+    showPopover: false,
+  }
+
+  handleTogglePopover = () => {
+    this.setState({ showPopover: !this.state.showPopover })
+  }
+
+  render() {
+    const popoverReference = (
+      <Button
+          onClick={this.handleTogglePopover}
+          text="Button Secondary"
+          variant="secondary"
+      />
+    )
+
+    return (
+      <PbReactPopover
+          placement="bottom"
+          reference={popoverReference}
+          show={this.state.showPopover}
+      >
+        {'Whoa. I\'m a popover.'}
+      </PbReactPopover>
+    )
+  }
+}

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

@@ -5,3 +5,7 @@ examples:
     - popover_list: With any children
 
   react:
+    - popover_default: Default
+    - popover_with_button: With Button
+    - popover_list: With any children
+    - popover_portal: Use with `portal` option

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

@@ -0,0 +1,4 @@
+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'

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :offset, type: Playbook::Props::Boolean, default: false
 
       def popover_offset
-        offset ? [0, 8] : [0, 0]
+        offset ? "0, 8" : "0, 0"
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -14,66 +14,65 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import type { InputCallback } from '../types'
+
+type SelectOption = {
+  value: string,
+  text: string,
+  disabled?: boolean,
+}
+
 type SelectProps = {
   aria?: object,
-  blankSelection?: String,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  dark?: Boolean,
+  blankSelection?: string,
+  children?: React.Node,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  disabled?: Boolean,
-  error?: String,
-  onChange: PropTypes.func,
-  options: Array<Object>,
-  id?: String,
-  includeBlank?: String,
-  label?: String,
-  multiple?: Boolean,
-  name?: String,
-  required?: Boolean,
-  value?: String,
-}
-
-const optionsArray = ({ options = [] }: SelectProps) => {
-  return options.map((optionObject, index) => {
-    return (
-      <option
-          disabled={optionObject.disabled}
-          key={index}
-          selected={optionObject.selected}
-          value={optionObject.value}
-      >
-        {optionObject.valueText || optionObject.value}
-      </option>
-    )
-  })
+  disabled?: boolean,
+  error?: string,
+  onChange: InputCallback<HTMLSelectElement>,
+  options: SelectOption[],
+  id?: string,
+  includeBlank?: string,
+  label?: string,
+  multiple?: boolean,
+  name?: string,
+  required?: boolean,
+  value?: string,
 }
 
-const Select = (props: SelectProps) => {
-  const {
-    aria = {},
-    blankSelection,
-    children,
-    dark = false,
-    data = {},
-    disabled = false,
-    error,
-    label,
-    multiple = false,
-    name,
-    onChange = () => {},
-    options,
-    required = false,
-  } = props
+const createOptions = (options: SelectOption[]) => options.map((option, index) => (
+  <option
+      disabled={option.disabled}
+      key={index}
+      value={option.value}
+  >
+    {option.text || option.value}
+  </option>
+))
 
+const Select = ({
+  aria = {},
+  blankSelection,
+  children,
+  dark = false,
+  data = {},
+  disabled = false,
+  error,
+  label,
+  multiple = false,
+  name,
+  onChange = () => {},
+  options = [],
+  required = false,
+  value,
+}: SelectProps) => {
   const errorClass = error ? ' error' : ''
-  const css = buildCss({
-    'pb_select': true,
-    'dark': dark === true,
-  }) + errorClass
+  const css = buildCss('pb_select', { dark }) + errorClass
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const optionsList = optionsArray({ options })
+  const optionsList = createOptions(options)
 
   return (
     <div
@@ -106,6 +105,7 @@ const Select = (props: SelectProps) => {
               name={name}
               onChange={onChange}
               required={required}
+              value={value}
           >
             <If condition={blankSelection}>
               <option value="">{blankSelection}</option>

data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx

@@ -2,26 +2,20 @@ import React from 'react'
 import { Select } from '../../'
 
 const SelectBlank = () => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+  ]
+
   return (
     <div>
       <Select
           blankSelection="Select One..."
           label="Where do you live"
           name="location"
-          options={[
-          {
-            value: 'USA',
-          },
-          {
-            value: 'Canada',
-          },
-          {
-            value: 'Brazil',
-          },
-          {
-            value: 'Philippines',
-          },
-        ]}
+          options={options}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx

@@ -2,27 +2,29 @@ import React from 'react'
 import { Select } from '../../'
 
 const SelectDark = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
   return (
     <div>
       <Select
           dark
           label="Favorite Food"
           name="food"
-          options={[
-          {
-            value: '1',
-            valueText: 'Burgers',
-          },
-          {
-            value: '2',
-            selected: true,
-            valueText: 'Pizza',
-          },
-          {
-            value: '3',
-            valueText: 'Tacos',
-          },
-        ]}
+          options={options}
+          value="2"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.jsx

@@ -2,6 +2,21 @@ import React from 'react'
 import { Body, Select } from '../..'
 
 const SelectDarkError = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
   return (
     <div>
       <Select
@@ -9,21 +24,8 @@ const SelectDarkError = () => {
           error="Please make a valid selection"
           label="Favorite Food"
           name="food"
-          options={[
-          {
-            value: '1',
-            valueText: 'Burgers',
-          },
-          {
-            value: '2',
-            selected: true,
-            valueText: 'Pizza',
-          },
-          {
-            value: '3',
-            valueText: 'Tacos',
-          },
-        ]}
+          options={options}
+          value="2"
       />
       <Body
           dark

data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx

@@ -2,26 +2,27 @@ import React from 'react'
 import { Select } from '../../'
 
 const SelectDefault = () => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
   return (
     <div>
       <Select
           label="Favorite Food"
           name="food"
-          options={[
-          {
-            value: '1',
-            valueText: 'Burgers',
-          },
-          {
-            value: '2',
-            selected: true,
-            valueText: 'Pizza',
-          },
-          {
-            value: '3',
-            valueText: 'Tacos',
-          },
-        ]}
+          options={options}
       />
     </div>
   )