playbook_ui_docs 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 → 13.14.0.pre.alpha.play1101betaicons1798

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51b7bcf5678da511fa989e97e73af01a5ccd0e2e7fc9d996c5a4bbc2ad0f7649
-  data.tar.gz: 4279f9fa236b5edadcf8bb1b250499c4065c127bc72dcfb26991f91c048c3d04
+  metadata.gz: 807255513e3c3df97b6943c90a7c97ee2d52a820772d1e6ffc6fe7e770def35f
+  data.tar.gz: b20c6dcb27a67ffb4c88a9b1ebccd07146efe47ca8fba78d56e3b2f02e8a12a4
 SHA512:
-  metadata.gz: 9788b53df703883f69bd9624f3c1801f8bab4f8aefc2ea05c4903c15595df9808bd411d9619b1d96d6e5ddcafea011ed6cc5d7303bc79dbe67dde3e404163389
-  data.tar.gz: 33c932b84109bb6cc9cd2b21fa9f52c276adf8cc70a09fcad8db64f9fa81f37f99af89bdfc03941f8dbe5fcf680a702b7734774679d06d21d08a47bd3cca705e
+  metadata.gz: '0793ef8c135f8a869c53f7a95972bfcf38aa0574128d2eb85f24b8a01ce9c13cb8da5b1b43779607cdfb41cef3414cc7c2ab2b91dea826e6caeb27aefa6a2ba8'
+  data.tar.gz: f10c164f35d866686a4d3467df8d85e5a7aeaa0dcb2568d22f4892358a5364fffe08fc36edb2b7072952d4f6e779c72611f7506a60516a2f3dc5768b7bc0dbff

data/app/pb_kits/playbook/pb_beta_icon/docs/_description.md

@@ -0,0 +1 @@
+An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

data/app/pb_kits/playbook/pb_beta_icon/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb

@@ -0,0 +1,3 @@
+<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
+<br/>
+<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconAnimate = (props) => {
+  return (
+    <div>
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            size="2x"
+            spin
+            {...props}
+        />
+        {' '}
+        <span>{'Spin'}</span>
+      </p>
+      <br />
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+            size="2x"
+            {...props}
+        />
+        {' '}
+        <span>{'Pulse'}</span>
+      </p>
+    </div>
+  )
+}
+
+export default IconAnimate

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md

@@ -0,0 +1 @@
+A spinner icon can show a user that something is loading or saving.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconBorder = (props) => {
+  return (
+    <div>
+      <Icon
+          border
+          fixedWidth
+          icon="user"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconBorder

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md

@@ -0,0 +1,7 @@
+![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
+
+```swift
+
+PbBetaIcon(FontAwesome.user, border: true)
+
+```

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

@@ -0,0 +1,16 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper">
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon } from '../../'
+
+// import Icons as config from 'power-icons'
+const config = {
+  moon: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const IconCustom = (props) => {
+  return (
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCustom

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

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconDefault = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="user"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
+
+```swift
+
+PbBetaIcon.fontAwesome(.user, size: .x1)
+
+```

data/app/pb_kits/playbook/pb_beta_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_beta_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_beta_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_beta_icon/docs/_icon_flip.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconFlip = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          flip="horizontal"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="vertical"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="both"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconFlip

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md

@@ -0,0 +1,11 @@
+![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
+
+```swift
+
+ HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal])
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.vertical])
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
+}
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
+| **Border** | `Bool` | Adds a border | `false` | `true` `false` |
+| **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconPull = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="arrow-left"
+          pull="left"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="arrow-right"
+          pull="right"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconPull

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md

@@ -0,0 +1 @@
+Icon Pull can be used to indicate that the user can perform a pull action.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconRotate = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={90}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={180}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={270}
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconRotate

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md

@@ -0,0 +1,11 @@
+![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon(FontAwesome.user, rotation: .right)
+  PbBetaIcon(FontAwesome.user, rotation: .zero)
+  PbBetaIcon(FontAwesome.user, rotation: .obtuse)
+}
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb

@@ -0,0 +1,16 @@
+<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
+
+<br/><br/>
+
+<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx

@@ -0,0 +1,133 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconSizes = (props) => {
+  return (
+    <div>
+      <p>
+        <Icon
+            icon="user"
+            size="lg"
+            {...props}
+        />
+        {' '}
+        <span>{'Large'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="sm"
+            {...props}
+        />
+        {' '}
+        <span>{'Small'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="xs"
+            {...props}
+        />
+        {' '}
+        <span>{'XSmall'}</span>
+      </p>
+
+      <br />
+      <br />
+
+      <p>
+        <Icon
+            icon="user"
+            size="1x"
+            {...props}
+        />
+        {' '}
+        <span>{'1x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        {' '}
+        <span>{'2x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="3x"
+            {...props}
+        />
+        {' '}
+        <span>{'3x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="4x"
+            {...props}
+        />
+        {' '}
+        <span>{'4x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="5x"
+            {...props}
+        />
+        {' '}
+        <span>{'5x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="6x"
+            {...props}
+        />
+        {' '}
+        <span>{'6x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="7x"
+            {...props}
+        />
+        {' '}
+        <span>{'7x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="8x"
+            {...props}
+        />
+        {' '}
+        <span>{'8x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="9x"
+            {...props}
+        />
+        {' '}
+        <span>{'9x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="10x"
+            {...props}
+        />
+        {' '}
+        <span>{'10x'}</span>
+      </p>
+    </div>
+  )
+}
+
+export default IconSizes

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md

@@ -0,0 +1,46 @@
+![icon-size](https://github.com/powerhome/playbook/assets/92755007/b3aa3933-56b1-4fe4-bb8b-00d786abb23a)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon.fontAwesome(.atlas, size: .xSmall)
+  Text("xSmall")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .small)
+  Text("small")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .large)
+  Text("large")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x1)
+  Text("x1")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x2)
+  Text("x2")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x3)
+  Text("x3")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x4)
+  Text("x4")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x5)
+  Text("x5")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x6)
+  Text("x6")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x7)
+  Text("x7")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x8)
+  Text("x8")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x9)
+  Text("x9")
+
+  PbBetaIcon.fontAwesome(.atlas, size: .x10)
+  Text("x10")
+}
+
+```

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

@@ -0,0 +1,30 @@
+examples:
+  rails:
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
+
+  react:
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
+
+  swift:
+  - icon_default_swift: Icon Default
+  - icon_rotate_swift: Icon Rotate
+  - icon_flip_swift: Icon Flip
+  - icon_border_swift: Icon Border
+  - icon_sizes_swift: Icon Sizes
+  - icon_props_swift: Props

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

@@ -0,0 +1,9 @@
+export { default as IconDefault } from './_icon_default.jsx'
+export { default as IconRotate } from './_icon_rotate.jsx'
+export { default as IconFlip } from './_icon_flip.jsx'
+export { default as IconAnimate } from './_icon_animate.jsx'
+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_button/docs/_button_props_swift.md

@@ -9,3 +9,14 @@
 | **Icon** | `PBIcon` | Adds an icon to the Button | `nil` |  |
 | **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
 | **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` |  |
+
+### Reaction Button Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **count** | `Int` | Tracks number of times a reaction button has been pressed | `0` |  |
+| **isHighlighted** | `Bool` | Boolean for whether or not a reaction button has a highlight | ` false` | `true` `false` |
+| **isHovering** | `Bool` | Boolean for whether or not a mouse is hovering over the reaction button | `false` | `true` `false` |
+| **icon** | `String` | Allows user to use a unicode string for an emoji reaction button |  |  |
+| **pbIcon** | `PBIcon` | A PlayBook Icon option for reaction button | |  |
+| **isInteractive** | `Bool` | Boolean for whether or not a reaction button is interactive | `false` | `true` `false` |
+