From 58352e498a9235d7feecb73bb92619c50865ef11 Mon Sep 17 00:00:00 2001
From: Gary Kang <42440452+kangaree@users.noreply.github.com>
Date: Thu, 5 Sep 2024 08:52:19 -0400
Subject: [PATCH] [PLAY-1420] Add "loading" variant to Circle Icon Button
 (#3633)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What does this PR do?**

- ✅ Expose loading prop in Circle Icon kit for underlying Button kit
- ✅ Add examples and tests

**Screenshots:**

![Screenshot 2024-08-26 at 9 48
19 AM](https://github.com/user-attachments/assets/368dd489-927e-4d43-940e-f474d20446aa)

**How to test?**
1. Go to the Circle Icon Button kit page on Playbook
2. Review the "loading" example
3. There should be a pulse animation
4. Review both Rails and React


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.
---
 .../_circle_icon_button.tsx                   |  3 ++
 .../circle_icon_button.html.erb               |  2 +-
 .../circle_icon_button.rb                     |  2 +
 .../circle_icon_button.test.js                | 15 +++++++
 .../docs/_circle_icon_button_loading.html.erb | 29 +++++++++++++
 .../docs/_circle_icon_button_loading.jsx      | 43 +++++++++++++++++++
 .../pb_circle_icon_button/docs/example.yml    |  2 +
 .../pb_circle_icon_button/docs/index.js       |  1 +
 .../playbook/kits/circle_icon_button_spec.rb  |  1 +
 9 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb
 create mode 100644 playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx

diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx b/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
index f940860f7d..38343f6535 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
@@ -16,6 +16,7 @@ type CircleIconButtonProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   link?: string,
+  loading?: boolean,
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
@@ -32,6 +33,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     htmlOptions = {},
     icon,
     id,
+    loading = false,
     onClick = noop,
     type,
     link,
@@ -61,6 +63,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           disabled={disabled}
           htmlType={type}
           link={link}
+          loading={loading}
           newWindow={newWindow}
           onClick={onClick}
           text={null}
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
index 397809bb4d..0707b59848 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
index 4f512c4a9f..ce5a5e0f37 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
@@ -12,6 +12,8 @@ class CircleIconButton < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :icon, required: true
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
index 4c858d4f98..d67fb0c562 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
@@ -15,3 +15,18 @@ test('default test', () => {
 
   expect(kit).toHaveClass('pb_circle_icon_button_kit')
 })
+
+test('passes loading prop to button', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'loading-test' }}
+        icon="plus"
+        loading
+    />
+  )
+
+  const kit = screen.getByTestId('loading-test')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
+  
+  expect(button).toBeInTheDocument()
+})
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb
new file mode 100644
index 0000000000..fd4a0bf492
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb
@@ -0,0 +1,29 @@
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "plus",
+  loading: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "secondary",
+  icon: "pen",
+  loading: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  disabled: true,
+  icon: "times",
+  loading: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "link",
+  icon: "user",
+  loading: true
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx
new file mode 100644
index 0000000000..22fb2234df
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+import CircleIconButton from '../_circle_icon_button'
+
+const CircleIconButtonLoading = (props) => (
+  <div>
+    <CircleIconButton
+        icon="plus"
+        loading
+        variant="primary"
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="pen"
+        loading
+        variant="secondary"
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        disabled
+        icon="times"
+        loading
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="user"
+        loading
+        variant="link"
+        {...props}
+    />
+  </div>
+)
+
+export default CircleIconButtonLoading
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
index f0635bb749..7b0c29358e 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
@@ -3,8 +3,10 @@ examples:
   rails:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
+  - circle_icon_button_loading: Loading
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
+  - circle_icon_button_loading: Loading
diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
index bbe895987d..95c31412f7 100644
--- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
@@ -1,3 +1,4 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
+export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
diff --git a/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb b/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb
index c1d1dba3cc..4a56c4530e 100644
--- a/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb
+++ b/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb
@@ -13,6 +13,7 @@
   it { is_expected.to define_boolean_prop(:dark).with_default(false) }
   it { is_expected.to define_boolean_prop(:disabled).with_default(false) }
   it { is_expected.to define_prop(:icon).that_is_required }
+  it { is_expected.to define_boolean_prop(:loading).with_default(false) }
   it { is_expected.to define_boolean_prop(:new_window).with_default(false) }
   it { is_expected.to define_prop(:link) }
   describe "#classname" do