playbook_ui_docs 12.32.0 → 12.33.0.pre.alpha.PLAY905reactionbuttons979

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '01700709d03454065bd3f7c29892078b5e36a98c67633cd5e4a5c7ca8d67f8a2'
-  data.tar.gz: fc154b9f27ecc769def6089ee546aec147cfcda0f6f7933ef5fa041af98b6ad5
+  metadata.gz: e8f585d167dbfa609051c6f507cb1fe7037eba5fd06de48d61233cf040d1ce04
+  data.tar.gz: fd98212ad64c9c31a4f2d23efcd6eab983f53ef556c0d1d2a12fca5f9f8e4cef
 SHA512:
-  metadata.gz: 67c99086eab351f965e1fab1198f5b9c37cdac0514414f5bda7bcd64ed0d2171a8b40457321313d13b13ffbe88d8489d09555f3decc6962bad42cd10a625d57b
-  data.tar.gz: 5aa40d6431811565b9e1dafaa360c496a36bdde350eb9fcdd1aac5c0b5b710ffb811f38486136bbf0b00b38866674361d78b2864797ee24e65d07bc5b6fe4be9
+  metadata.gz: '018119d788c070dd990de0a59da518dd7677a8accf7cc0f21694e5741646abffa543cd47db36583a220d28b74db9bd20eb4d03daa8c87f29eb22045f319fad9a'
+  data.tar.gz: e9c61269a27ca6050abd5e3e2982c9db5b88ab987729fd04dbb8057b459b822f5cac4bc78ea0384d157d2beb20e9ea491203f586cdf812a1a41ab0fd51dce4ce

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

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 153, highlight: true, icon: "&#127881;", variant: "reaction" }) %>
+<%= pb_rails("button", props: { variant: "reaction" }) %>

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

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

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_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -14,7 +14,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -38,7 +38,7 @@ const DateDefault = (props) => {
       <br />
 
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>

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

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit

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

@@ -0,0 +1,7 @@
+Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
+
+All you need to do is 3 things:
+1) Import your custom-icon.js file as outlined in the FontAwesome docs.
+2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
+3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
+

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

@@ -8,6 +8,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
 
   react:
   - icon_default: Icon Default
@@ -18,3 +19,4 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit

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

@@ -6,3 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
+export { default as IconFaKit} from './_icon_fa_kit.jsx'

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -46,4 +46,10 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"green"
+ }) %>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
+                                          variant:"orange"
  }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -66,6 +66,15 @@ const IconStatValueColor = (props) => {
           variant="green"
           {...props}
       />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
+          variant="orange"
+          {...props}
+      />
     </div>
 
   )

data/dist/app/components/playbook/pb_docs/kit_example.rb

@@ -57,6 +57,7 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
+                                           .gsub("'../../../../../../playbook-website/app/javascript/scripts/custom-icons'", "'your-directory/custom-icons.js'")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark