playbook_ui 13.30.0 → 13.31.0.pre.alpha.play1262iconstyles3171

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -23,6 +23,7 @@ type FixedConfirmationToastProps = {
   data?: string;
   horizontal?: "right" | "left" | "center";
   htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  icon?: string,
   id?: string;
   multiLine?: boolean;
   onClose?: VoidCallback;
@@ -41,6 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     closeable = false,
     horizontal,
     htmlOptions = {},
+    icon,
     multiLine = false,
     onClose = () => undefined,
     open = true,
@@ -48,14 +50,18 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     text,
     vertical,
   } = props;
+
+  const returnedIcon = icon || iconMap[status]
+  const iconClass = icon ? "custom_icon" : ""
+
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     { _multi_line: multiLine },
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    `${iconClass}`,
     globalProps(props),
     className
   );
-  const icon = iconMap[status];
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
@@ -86,11 +92,11 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {icon && (
+          {returnedIcon && (
             <Icon
                 className="pb_icon"
                 fixedWidth
-                icon={icon}
+                icon={returnedIcon}
             />
           )}
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb

@@ -0,0 +1,32 @@
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "wrench",
+    text: "Fix before proceeding",
+    status: "error",
+    closeable: true,
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "star",
+    text: "Thank you for completing the form!",
+    status: "success",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "file-pdf",
+    text: "Saved as PDF",
+    status: "neutral",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "arrow-down",
+    text: "New Messages",
+    status: "tip"
+  })%>
+</div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastCustomIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="wrench"
+            marginBottom="md"
+            status="error"
+            text="Fix before proceeding"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="star"
+            marginBottom="md"
+            status="success"
+            text="Thank you for completing the form!"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="file-pdf"
+            marginBottom="md"
+            status="neutral"
+            text="Saved as PDF"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="arrow-down"
+            status="tip"
+            text="New Messages"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastCustomIcon

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

@@ -6,6 +6,7 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -14,6 +15,7 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_to
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
+export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -20,6 +20,7 @@ module Playbook
                       values: [nil, "top", "bottom"],
                       default: nil
       prop :auto_close, type: Playbook::Props::Number
+      prop :icon, type: Playbook::Props::String
 
       def show_text?
         text.present?
@@ -42,20 +43,24 @@ module Playbook
       end
 
       def icon_value
-        case status
-        when "success"
-          "check"
-        when "error"
-          "exclamation-triangle"
-        when "neutral"
-          "info-circle"
-        when "tip"
-          "info-circle"
-        end
+        icon || case status
+                when "success"
+                  "check"
+                when "error"
+                  "exclamation-triangle"
+                when "neutral"
+                  "info-circle"
+                when "tip"
+                  "info-circle"
+                end
+      end
+
+      def icon_class
+        icon.present? ? " custom_icon" : ""
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, waitFor } from '../utilities/test-utils'
+
+import { FixedConfirmationToast } from '../'
+
+beforeEach(() => {
+    // Silences error logs within the test suite.
+    jest.spyOn(console, 'error')
+    // eslint-disable-next-line
+    console.error.mockImplementation(() => {})
+})
+  
+afterEach(() => {
+    // eslint-disable-next-line
+    console.error.mockRestore()
+})
+
+test('renders with default props', () => {
+    const { container } = render(<FixedConfirmationToast />);
+    expect(container.firstChild).toBeInTheDocument();
+});
+
+test('renders with text', () => {
+    const { getByText } = render(<FixedConfirmationToast text="Message Text" />);
+    expect(getByText('Message Text')).toBeInTheDocument();
+});
+
+test('does not render if open prop is false', () => {
+    const { container } = render(<FixedConfirmationToast open={false} />);
+    expect(container.firstChild).toBeNull();
+});
+
+test('closes after autoClose duration', async () => {
+    jest.useFakeTimers();
+    const onCloseMock = jest.fn();
+    render(
+        <FixedConfirmationToast 
+            autoClose={1000} 
+            onClose={onCloseMock}
+            open
+        />
+    );
+    
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+});
+
+test('renders success status with icon', () => {
+    const { container } = render(<FixedConfirmationToast status="success" />);
+    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_success')).toBeInTheDocument();
+    expect(container.querySelector('.pb_icon')).toBeInTheDocument();
+});
+  
+test('renders custom icon when provided', () => {
+    const { container } = render(<FixedConfirmationToast icon="wrench" />);
+    expect(container.querySelector('.custom_icon')).toBeInTheDocument();
+});
+
+test('renders correctly with multiLine prop', () => {
+    const { container } = render(<FixedConfirmationToast multiLine />);
+    expect(container.querySelector('._multi_line')).toBeInTheDocument();
+});
+
+test('renders position when provided', () => {
+    const { container } = render(
+        <FixedConfirmationToast 
+            horizontal="right"
+            vertical="bottom" 
+        />
+    );
+    expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,4 +1,3 @@
-// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -10,3 +9,226 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
+
+$rotate-list: (90, 180, 270);
+$flip-list: (
+"horizontal": (-1, 1),
+"vertical": (1, -1),
+"both": (-1, -1)
+);
+
+@keyframes pb_icon_spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+};
+
+svg {
+  &.pb_icon_kit,
+  &.pb_custom_icon{
+    @each $r in $rotate-list {
+      &.rotate_#{$r} {
+        transform: rotate(#{$r}deg);
+      }
+    }
+    @each $f, $v in $flip-list {
+      &.flip_#{$f} {
+        transform: scale($v);
+      }
+    }
+    &.svg-inline--fa {
+      height: 1em;
+      overflow: visible;
+      vertical-align: -.125em
+    }
+    &.svg_inverse {
+      color: #fff;
+    }
+    &.svg_border {
+      border-color: #eee;
+      border-radius: .1em;
+      border-style: solid;
+      border-width: .08em;
+      padding: .2em .25em .15em;
+    }
+    &.svg_fw {
+      text-align: center;
+      width: 1.25em
+    }
+    &.svg_li {
+      left: calc(2em * -1);
+      position: absolute;
+      text-align: center;
+      width: 2em;
+      line-height: inherit
+    }
+    &.pull_left {
+      float: left;
+      margin-right: .3em;
+    }
+
+    &.pull_right {
+      float: right;
+      margin-left: .3em;
+    }
+    &.pulse {
+      animation-name: pb_icon_spin;
+      animation-direction: normal;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: steps(8);
+    }
+    &.spin {
+      animation-name: pb_icon_spin;
+      animation-delay: 0s;
+      animation-direction: normal;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+
+    &.svg_xs {
+      font-size: 0.75em
+    }
+
+    &.svg_sm {
+      font-size: 0.875em
+    }
+
+    &.svg_lg {
+      font-size: 1.25em
+    }
+
+    &.svg_1x {
+      font-size: 1em
+    }
+
+    &.svg_2x {
+      font-size: 2em
+    }
+
+    &.svg_3x {
+      font-size: 3em
+    }
+
+    &.svg_4x {
+      font-size: 4em
+    }
+
+    &.svg_5x {
+      font-size: 5em
+    }
+
+    &.svg_6x {
+      font-size: 6em
+    }
+
+    &.svg_7x {
+      font-size: 7em
+    }
+
+    &.svg_8x {
+      font-size: 8em
+    }
+
+    &.svg_9x {
+      font-size: 9em
+    }
+
+    &.svg_10x {
+      font-size: 10em
+    }
+    &.fa-xs {
+      font-size: .75em;
+      line-height: .0833333337em;
+      vertical-align: .125em
+    }
+    &.fa-sm {
+      font-size: .875em;
+      line-height: .0714285718em;
+      vertical-align: .0535714295em
+    }
+    &.fa-lg {
+      font-size: 1.25em;
+      line-height: .05em;
+      vertical-align: -.075em
+    }
+    &.fa-pull-left {
+      float: left;
+      margin-right: var(--fa-pull-margin, .3em)
+    }
+
+    &.fa-pull-right {
+      float: right;
+      margin-left: var(--fa-pull-margin, .3em)
+    }
+    &.fa-li {
+      left: calc(var(--fa-li-width, 2em) * -1);
+      position: absolute;
+      text-align: center;
+      width: var(--fa-li-width, 2em);
+      line-height: inherit
+    }
+    &.svg-inline--fa.fa-li {
+      width: var(--fa-li-width, 2em);
+      top: .25em
+    }
+    &.svg-inline--fa.fa-fw {
+      width: var(--fa-fw-width, 1.25em)
+    }
+    &.fa-fw {
+      text-align: center;
+      width: 1.25em
+    }
+    &.fa-layers {
+      display: inline-block;
+      height: 1em;
+      position: relative;
+      text-align: center;
+      vertical-align: -.125em;
+      width: 1em
+    }
+    &.fa-2x {
+      font-size: 2em
+    }
+    &.fa-3x {
+      font-size: 3em
+    }
+    &.fa-flip {
+      -webkit-animation-name: fa-flip;
+      animation-name: fa-flip;
+      -webkit-animation-delay:  0s;
+      animation-delay: 0s;
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+      -webkit-animation-duration: 1s;
+      animation-duration: 1s;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -webkit-animation-timing-function: ease-in-out;
+      animation-timing-function: ease-in-out;
+    }
+    &.fa-spin {
+      -webkit-animation-name: fa-spin;
+      animation-name: fa-spin;
+      -webkit-animation-delay: 0s;
+      animation-delay: 0s;
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+      -webkit-animation-duration: 2s;
+      animation-duration: 2s;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      animation-timing-function: linear;
+    }
+    &.fa-pulse {
+      animation: fa-spin 1s infinite linear;
+    }
+  }
+}