playbook_ui_docs 14.18.0.pre.rc.4 → 14.19.0.pre.rc.0

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const error = selectedOption?.value ? null : (<>
+        <Icon icon="warning" /> Please make a valid selection
+    </>)
     const options = [
         {
             label: "United States",

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 45 }]
+
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugePbStyles = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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

@@ -15,6 +15,7 @@ examples:
 
   react:
   - gauge_default: Default
+  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,4 +1,5 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenBackground = () => {
+  const [openBackground, setOpenBackground] = useState(false)
+
+  const handleClickBackground = () => {
+    setOpenBackground(true)
+  }
+
+  const handleCloseBackground = () => {
+    setOpenBackground(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickBackground}
+            text="Background Dark"
+            variant="secondary"
+        />
+
+        {openBackground && (
+          <Overlay
+              color="bg_dark"
+              fullScreen
+              gradient={false}
+              opacity="opacity_4"
+          >
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                onClose={handleCloseBackground}
+                open={openBackground}
+                status="tip"
+                text='Fullscreen Overlay with color set to Background Dark.'
+                vertical='top'
+            />
+          </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenBackground

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md

@@ -0,0 +1 @@
+The `fullScreen` prop also allows you to use `color` along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenOpacity = () => {
+  const [openOpacity40, setOpenOpacity40] = useState(false)
+  const [openOpacity80, setOpenOpacity80] = useState(false)
+
+  const handleClickOpacity40 = () => {
+    setOpenOpacity40(true)
+  }
+  const handleCloseOpacity40 = () => {
+    setOpenOpacity40(false)
+  }
+
+  const handleClickOpacity80 = () => {
+    setOpenOpacity80(true)
+  }
+  const handleCloseOpacity80 = () => {
+    setOpenOpacity80(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickOpacity40}
+            text="40% Opacity"
+            variant="secondary"
+        />
+        {' '}
+        <Button
+            onClick={handleClickOpacity80}
+            text="80% Opacity"
+            variant="secondary"
+        />
+
+        {openOpacity40 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_4"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  horizontal='center'
+                  onClose={handleCloseOpacity40}
+                  open={openOpacity40}
+                  status="tip"
+                  text='Fullscreen Overlay at 40% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+
+        {openOpacity80 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_8"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  display="block"
+                  horizontal='center'
+                  onClose={handleCloseOpacity80}
+                  open={openOpacity80}
+                  status="tip"
+                  text='Fullscreen Overlay at 80% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md

@@ -0,0 +1 @@
+To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

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

@@ -8,6 +8,8 @@ examples:
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
   - overlay_hide_scroll_bar: Hide Scroll Bar
+  - overlay_fullscreen_opacity: Full Page Opacity
+  - overlay_fullscreen_background: Full Page Using Background Color Tokens
 
   rails:
   - overlay_default: Default

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

@@ -6,3 +6,5 @@ export { default as OverlayMultiDirectional } from './_overlay_multi_directional
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
 export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
+export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
+export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
+
     return (
         <form
             action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error="Missing phone number."
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
+import Icon from '../../pb_icon/_icon'
 
 const SelectError = (props) => {
   const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
     },
   ]
 
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+
   return (
     <div>
       <Select
-          error="Please make a valid selection"
+          error={error}
           label="Favorite Food"
           name="food"
           options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error="Please make a valid selection"
+          error={error}
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import TextInput from '../_text_input'
+import Icon from '../../pb_icon/_icon'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
   const handleUpdateEmail = ({ target }) => {
     setEmail(target.value)
   }
+
+  const error = (
+    <>
+      <Icon icon="warning" /> Please enter a valid email address
+    </>
+  )
+  
   return (
     <div>
       <TextInput
           addOn={{ icon: 'user', alignment: 'left', border: true }}
-          error="Please enter a valid email address"
+          error={error}
           label="Email Address"
           onChange={handleUpdateEmail}
           placeholder="Enter email address"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,15 +1,21 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
+import Icon from '../../pb_icon/_icon'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
+  const error = (
+    <>
+        <Icon icon="warning" /> This field has an error!
+    </>
+  )
   return (
     <div>
       <Textarea
-          error="This field has an error!"
+          error={error}
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'
+import Icon from '../../pb_icon/_icon'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
 ]
 
 const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+  const [errorState, setErrorState] = useState(error);
   const [searchValue, setSearchValue] = useState(null);
   
   const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState("Please make a valid selection")
+        setErrorState(error)
       }
     }, [searchValue])