playbook_ui 17.0.0.pre.alpha.testdist18493 → 17.0.0.pre.alpha.typeaheadchunks18358

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75c30864b0f1b7943190e209e08489c69c5cd258ea94b0d52d00083af516bcc0
-  data.tar.gz: 309820ac1e475e9a4f1e786809fba6f26bb118d0949f9259a97b804e5e5c66b5
+  metadata.gz: 00e2aebc58d4b9b6ae04a2e367ebe3f6c01ae2cc6ad86972ddf23421245b7e02
+  data.tar.gz: 9c2e5b7de2c12dfca40f9f1e8c9892f26822f0e88b7c7eefecdd279c21e015e7
 SHA512:
-  metadata.gz: 769e109ea7106d62d8c6cf197cf878876c8ee8837eff756235e4512de6663729f1883b6355db110baa477eef78fff93fc1b500cf42be1fb401ce70a5241faa4f
-  data.tar.gz: 15f91401f724682e3b2d5f46965c28463c2e046514db11dcf74a180d09efa833d996d2fc29fabb3fd96ac7b2ce75bfabddeb4ee5b18ad087f014e8cd6d97710e
+  metadata.gz: 75102f5732d45cf60672b3042c3bcb7402a5430eb5005a3ac2fbf1638d4cf6a925fd73da32f770639c7ab5f8f7509d2bc0d0e31e3498c09d6a5ddecb89e81b0b
+  data.tar.gz: 5b201df0d0b4e0a09db48893be051c73e0c9ab42a8ef02315c61a26ff9bf7c1cec926107fd5fb10fa0a93cb927bd4256c5f3590abf7732c9818c6187e655fb8a

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("button", props: { count: 153, highlight: false, icon: "🎉", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
 <%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
 <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -11,7 +11,7 @@ return (
     <Button
         count={highlightActive ? (reactionCount + 1) : reactionCount}
         highlight = {highlightActive}
-        icon="🎉"
+        icon="&#127881;"
         onClick={()=> setHighlightActive(!highlightActive)}
         tabIndex={0}
         variant="reaction"

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.md

@@ -1,3 +1,3 @@
-The `reaction` variant accepts any emoji as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
+The `reaction` variant accepts any HTML Emoji or it's hexa/decimal ref (see [here](https://www.w3schools.com/charsets/ref_emoji.asp)) as a string within the `icon` prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the `icon` prop of a `reaction` variant, but the default "smiley +" icon will be replaced with the named icon.
 
 Reaction buttons also accept two additional (optional) props: `count`, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and `highlight`, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  error: "Invalid date. Please pick a valid date.",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
-  picker_id: "date-picker-required-indicator",
+  picker_id: "date_picker_required_indicator",
   label: "Required Date Picker",
   required_indicator: true,
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx

@@ -4,7 +4,7 @@ import DatePicker from "../_date_picker"
 const DatePickerRequiredIndicator = (props) => (
   <DatePicker
       label="Required Date Picker"
-      pickerId="date-picker-required-indicator"
+      pickerId="date_picker_required_indicator"
       requiredIndicator
       {...props}
   />

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -7,6 +7,6 @@
 %>
 
 <%= pb_rails("dropdown", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   options: options
 }) %>

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_file_upload/docs/_file_upload_error.html.erb

@@ -1 +1 @@
-<%= pb_rails("file_upload", props: {id: "error",  error: "Please upload a valid file."}) %>
+<%= pb_rails("file_upload", props: {id: "error",  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import FileUpload from '../_file_upload'
 import List from '../../pb_list/_list'
 import ListItem from '../../pb_list/_list_item'
+import Icon from '../../pb_icon/_icon'
 
 const AcceptedFilesList = ({ files }) => (
   <List>
@@ -18,6 +19,10 @@ const FileUploadError = (props) => {
     setFilesToUpload([...filesToUpload, ...files])
   }
 
+  const error = (<>
+    <Icon icon="warning" /> Please upload a valid file
+  </>)
+
   return (
     <div>
       <AcceptedFilesList
@@ -25,7 +30,7 @@ const FileUploadError = (props) => {
           {...props}
       />
       <FileUpload
-          error="Please upload a valid file."
+          error={error}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -1,60 +1,43 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Button from '../../pb_button/_button'
 import FormGroup from '../../pb_form_group/_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupButton = (props) => {
-  const [searchWithLabel, setSearchWithLabel] = useState('')
-  const [search, setSearch] = useState('')
-
-  const handleUpdateSearchWithLabel = ({ target }) => {
-    setSearchWithLabel(target.value)
-  }
-
-  const handleUpdateSearch = ({ target }) => {
-    setSearch(target.value)
-  }
-
-  return (
+const FormGroupButton = (props) => (
+  <div>
+    <div>
+      <FormGroup>
+        <TextInput
+            id="search-with-label"
+            label="With Label"
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
     <div>
-      <div>
-        <FormGroup>
-          <TextInput
-              id="search-with-label"
-              label="With Label"
-              onChange={handleUpdateSearchWithLabel}
-              placeholder="Search"
-              value={searchWithLabel}
-              {...props}
-          />
-          <Button
-              onClick={() => alert('Button Clicked!')}
-              text="Submit"
-              variant="secondary"
-              {...props}
-          />
-        </FormGroup>
-      </div>
-      <br />
-      <div>
-        <FormGroup>
-          <TextInput
-              onChange={handleUpdateSearch}
-              placeholder="Search"
-              value={search}
-              {...props}
-          />
-          <Button
-              onClick={() => alert('Button Clicked!')}
-              text="Submit"
-              variant="secondary"
-              {...props}
-          />
-        </FormGroup>
-      </div>
+      <FormGroup>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
     </div>
-  )
-}
+  </div>
+)
 
 export default FormGroupButton

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -1,36 +1,26 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import FormGroup from '../_form_group'
 
 import DatePicker from '../../pb_date_picker/_date_picker'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupDatePicker = (props) => {
-  const [eventName, setEventName] = useState('')
-
-  const handleUpdateEventName = ({ target }) => {
-    setEventName(target.value)
-  }
-
-  return (
-    <div>
-      <FormGroup>
-        <TextInput
-            id="event-name"
-            label="Event"
-            onChange={handleUpdateEventName}
-            placeholder="Event Name"
-            value={eventName}
-            {...props}
-        />
-        <DatePicker
-            label="event date"
-            pickerId="date-picker-default"
-            {...props}
-        />
-      </FormGroup>
-    </div>
-  )
-}
+const FormGroupDatePicker = (props) => (
+  <div>
+    <FormGroup>
+      <TextInput
+          id="event-name"
+          label="Event"
+          placeholder="Event Name"
+          {...props}
+      />
+      <DatePicker
+          label="event date"
+          pickerId="date-picker-default"
+          {...props}
+      />
+    </FormGroup>
+  </div>
+)
 
 export default FormGroupDatePicker

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -1,53 +1,31 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import FormGroup from '../_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupDefault = (props) => {
-  const [formFields, setFormFields] = useState({
-    firstName: '',
-    middleInitial: '',
-    lastName: '',
-  })
-
-  const handleOnChange = ({ target }) => {
-    const { name, value } = target
-    setFormFields({ ...formFields, [name]: value })
-  }
-
-  return (
-    <div>
-      <FormGroup>
-        <TextInput
-            id="first-name"
-            label="First Name"
-            name="firstName"
-            onChange={handleOnChange}
-            placeholder="Enter First Name"
-            value={formFields.firstName}
-            {...props}
-        />
-        <TextInput
-            id="middle-initial"
-            label="Middle Initial"
-            name="middleInitial"
-            onChange={handleOnChange}
-            placeholder="Enter Middle Initial"
-            value={formFields.middleInitial}
-            {...props}
-        />
-        <TextInput
-            id="last-name"
-            label="Last Name"
-            name="lastName"
-            onChange={handleOnChange}
-            placeholder="Enter Last Name"
-            value={formFields.lastName}
-            {...props}
-        />
-      </FormGroup>
-    </div>
-  )
-}
+const FormGroupDefault = (props) => (
+  <div>
+    <FormGroup>
+      <TextInput
+          id="first-name"
+          label="First Name"
+          placeholder="Enter First Name"
+          {...props}
+      />
+      <TextInput
+          id="middle-initial"
+          label="Middle Initial"
+          placeholder="Enter Middle Initial"
+          {...props}
+      />
+      <TextInput
+          id="last-name"
+          label="Last Name"
+          placeholder="Enter Last Name"
+          {...props}
+      />
+    </FormGroup>
+  </div>
+)
 
 export default FormGroupDefault

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -1,78 +1,49 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import FormGroup from '../_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 import Button from '../../pb_button/_button'
 
-const FormGroupFullWidth = (props) => {
-  const [formFields, setFormFields] = useState({
-    firstName: '',
-    middleInitial: '',
-    lastName: '',
-  })
-  const [search, setSearch] = useState('')
-
-  const handleOnChange = ({ target }) => {
-    const { name, value } = target
-    setFormFields({ ...formFields, [name]: value })
-  }
-
-  const handleUpdateSearch = ({ target }) => {
-    setSearch(target.value)
-  }
-
-  return (
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            id="first-name-full-width"
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            id="middle-initial-full-width"
+            label="Middle Initial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            id="last-name-full-width"
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
     <div>
-      <div>
-        <FormGroup fullWidth>
-          <TextInput
-              id="first-name-full-width"
-              label="First Name"
-              name="firstName"
-              onChange={handleOnChange}
-              placeholder="Enter First Name"
-              value={formFields.firstName}
-              {...props}
-          />
-          <TextInput
-              id="middle-initial-full-width"
-              label="Middle Initial"
-              name="middleInitial"
-              onChange={handleOnChange}
-              placeholder="Enter Middle Initial"
-              value={formFields.middleInitial}
-              {...props}
-          />
-          <TextInput
-              id="last-name-full-width"
-              label="Last Name"
-              name="lastName"
-              onChange={handleOnChange}
-              placeholder="Enter Last Name"
-              value={formFields.lastName}
-              {...props}
-          />
-        </FormGroup>
-      </div>
-      <br />
-      <div>
-        <FormGroup fullWidth>
-          <TextInput
-              onChange={handleUpdateSearch}
-              placeholder="Search"
-              value={search}
-              {...props}
-          />
-          <Button
-              onClick={() => alert('Button Clicked!')}
-              text="Submit"
-              variant="secondary"
-              {...props}
-          />
-        </FormGroup>
-      </div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
     </div>
-  )
-}
+  </div>
+)
 
 export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -8,14 +8,9 @@ import Flex from '../../pb_flex/_flex'
 import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
-  const [artistName, setArtistName] = useState('')
   const [input, setInput] = useState("");
   const handleChange = (e) => setInput(e.target.value);
 
-  const handleUpdateArtistName = ({ target }) => {
-    setArtistName(target.value)
-  }
-
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -41,9 +36,7 @@ const FormGroupSelect = (props) => {
     >
       <FormGroup>
         <TextInput
-            onChange={handleUpdateArtistName}
             placeholder="Enter Artist Name"
-            value={artistName}
             {...props}
         />
         <Select

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -1,9 +1,10 @@
 <%# SVG fill color inherited from css color property %>
 <div class="icon-wrapper">
-  <% svg_path = Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s %>
-  <p><%= pb_rails("icon", props: { icon: svg_path } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_path, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, icon: svg_path, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_path } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_path } ) %></p>
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
 </div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -12,4 +12,4 @@ You must source _your own SVG into component/view_ you are working on. This can
 
 ### Rails
 
-Pass a local filesystem path to an SVG under your application or a mounted engine (for example `Playbook::Engine.root.join("app/pb_kits/playbook/utilities/icons/clock.svg").to_s`) via the `icon` or `custom_icon` prop. Remote `http(s)` URLs are not fetched — only local / engine paths are supported.
+Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -2,7 +2,7 @@
   <%= object.render_svg %>
 <% elsif object.valid_emoji? %>
   <span class="pb_icon_kit_emoji">
-    <%= object.icon %>
+    <%= object.icon.html_safe %>
   </span>
 <% else %>
   <%= pb_content_tag(:i) do %>