playbook_ui_docs 12.33.1.pre.alpha.PLAY933navkitcollapsible994 → 12.34.0.pre.alpha.fixdialogcloseevents1003

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 108ac5a3e11d235a48cca43234675ca423ecf5253faba7a3c37d520851454ade
-  data.tar.gz: e01f753748df0a887cdf7e73555912b3c79a4c8682c61d20f6da03e72882e146
+  metadata.gz: 7f8a98703bf4c4759db54528b99c10c17c144ab3352749e77305b3faadd1d54c
+  data.tar.gz: d649b3df0a66fa20d99eea928fe64ccd230b0e19033511764d090e2537cd1f34
 SHA512:
-  metadata.gz: f01767a82147cc6a9ba23f5acab695bda4535b98a0dd25650e86e300ca99b0032f547c1014c0e4f32a00f0b27af38b4199a99b0dd8486ed906d160f1f979e701
-  data.tar.gz: 6ce7373ed2da57683b5cda0a5bd2e9b86e650eae9dba8c9fea1694540ae3ba9cb808f948db7da3f593e23be6ec6ae7421a4a8ff7d54922a8720189a8d8135ad7
+  metadata.gz: d27f1dedae73861086b7f21d8ba301efe1129d630fa6e7a076661d369cfd2aab3cc74aefee6be706c1100dd681fc39b2591e0b6ca0bcf060bd2d18cfd681d881
+  data.tar.gz: a039fd3ab369c3230b925ead002431749e3da15191d8f7b9ec24d1ad3093ac29455f269b52dccf72121897f8d46c55542429424754d45d9b3a9cfe12837d800c

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

@@ -0,0 +1,30 @@
+<%= 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: "😍", 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" }) %>
+
+
+<script>
+    function renderButtonReaction() {
+
+        let highlightActive = false;
+
+        function toggleHighlight() {
+        let reactionCount = 153;
+        console.log("toggleHighlight", highlightActive)
+        highlightActive = !highlightActive;
+        const innerCountElement = document.querySelector(".count .pb_caption_kit_xs.pl_xxs")
+        const firstButton = document.getElementById("reaction-button-highlight")
+        firstButton.classList.add(highlightActive && "active")
+        firstButton.classList.remove(!highlightActive && "active")
+        innerCountElement.innerHTML = highlightActive ? reactionCount + 1 : reactionCount;
+        console.log("element", innerCountElement)
+        }
+        
+        const button1 = document.getElementById("reaction-button-highlight")
+        button1.addEventListener("click", toggleHighlight);
+
+    }
+    renderButtonReaction();
+</script>
+

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

@@ -0,0 +1,47 @@
+import React, {useState} from "react"
+import { Button } from "../../"
+
+const ButtonReaction = (props) => {
+
+const [highlightActive, setHighlightActive] =useState(false)
+const reactionCount = 153
+
+return (
+  <div>
+    <Button
+        count={highlightActive ? (reactionCount + 1) : reactionCount}
+        highlight = {highlightActive}
+        icon="&#127881;"
+        onClick={()=> setHighlightActive(!highlightActive)}
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        count={5}
+        icon="😍"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        icon="user"
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+
+
+    </div>
+)
+}
+
+export default ButtonReaction

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

@@ -0,0 +1,3 @@
+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_button/docs/example.yml

@@ -1,6 +1,7 @@
 examples:
   rails:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -13,6 +14,7 @@ examples:
   
   react:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

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

@@ -8,4 +8,5 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
-export { default as ButtonHover } from './_button_hover.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'
+export {default as ButtonReaction } from './_button_reaction.jsx'

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md

@@ -1,4 +1,4 @@
 ##### Prop
-This kit uses `icon` sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:
+This kit uses `icon` sizes. If you don't give it a size, it will default to medium. You can be replaced with the sizes below:
 
 * `lg` `xs` `sm` `1x` `2x` `3x` `4x` `5x` `6x` `7x` `8x` `9x` `10x`

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

@@ -4,10 +4,8 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
-  - collapsible_color: Color
-  - collapsible_icons: Custom Icons
+  - collapsible_color: Color

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

@@ -1,4 +1,3 @@
 export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
-export { default as CollapsibleIcons } from './_collapsible_icons.jsx'

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

@@ -7,7 +7,6 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -25,8 +24,6 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Subtle With Collapsible
-  - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -13,5 +13,3 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
-export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'