feat(InviteAgents): new component (#1363)

livechat · Sep 26, 2024 · f721eb7 · f721eb7
1 parent aa50666
commit f721eb7
Show file tree

Hide file tree

Showing 13 changed files with 694 additions and 5 deletions.
diff --git a/packages/react-components/src/components/Avatar/Avatar.module.scss b/packages/react-components/src/components/Avatar/Avatar.module.scss
@@ -27,11 +27,11 @@ $base-class: 'avatar';
     }
 
     &--unavailable {
-      background: var(--action-negative-default);
+      background: var(--surface-accent-emphasis-high-negative);
     }
 
     &--unknown {
-      background: var(--surface-moderate-default);
+      background: var(--action-neutral-default);
     }
 
     &--xxxsmall#{$circle-class},

diff --git a/packages/react-components/src/components/Avatar/Avatar.tsx b/packages/react-components/src/components/Avatar/Avatar.tsx
@@ -68,6 +68,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   text,
   type,
   withRim = false,
+  style,
   ...props
 }) => {
   const isImproperImageSetup = type === 'image' && !src;
@@ -136,7 +137,11 @@ export const Avatar: React.FC<AvatarProps> = ({
   }, [isImproperImageSetup]);
 
   return (
-    <div className={mergedClassNames} style={backgroundStyle} {...props}>
+    <div
+      className={mergedClassNames}
+      style={{ ...backgroundStyle, ...style }}
+      {...props}
+    >
       {withRim && (
         <div
           data-testid={`${baseClass}__rim`}

diff --git a/packages/react-components/src/components/Button/Button.tsx b/packages/react-components/src/components/Button/Button.tsx
@@ -86,7 +86,6 @@ export const Button = React.forwardRef<
     const Component = href ? 'a' : 'button';
 
     const mergedClassNames = cx(
-      className,
       styles[baseClass],
       styles[`${baseClass}--${kind}`],
       styles[`${baseClass}--${size}`],
@@ -99,7 +98,8 @@ export const Button = React.forwardRef<
         [styles[`${baseClass}--icon-only--bg`]]: isIconOnly && isTextButton,
         [styles[`${baseClass}--disabled`]]: isDisabled,
         [styles[`${baseClass}--animated-label`]]: isAnimatedLabel,
-      }
+      },
+      className
     );
 
     return (

diff --git a/packages/react-components/src/components/InviteAgents/InviteAgents.mdx b/packages/react-components/src/components/InviteAgents/InviteAgents.mdx
@@ -0,0 +1,46 @@
+import { Meta, Title, Canvas, ArgTypes } from '@storybook/blocks';
+import * as InviteAgentsStories from './InviteAgents.stories';
+
+<Meta of={InviteAgentsStories} />
+
+<Title>InviteAgents</Title>
+
+## Intro <a id="Intro" />
+
+The `InviteAgents` component is used to display a list of invited agents and provide functionality to add more agents or set up a chatbot.
+
+<Canvas of={InviteAgentsStories.Default} />
+
+### Example implementation
+
+```jsx
+import { InviteAgents } from '@livechat/design-system-react-components';
+
+const agents = [
+  {
+    name: 'Alice',
+    email: 'alice@example.com',
+    status: 'available',
+    avatar: 'https://via.placeholder.com/150',
+  },
+]; 
+
+const onAddTeammateClick = () => {};
+const onSetUpChatbotClick = () => {};
+
+return (
+  <InviteAgents
+    agents={agents}
+    onAddTeammateClick={onAddTeammateClick}
+    onSetUpChatbotClick={onSetUpChatbotClick}
+    animatedInviteButton={true}
+    tooltipArrowOffset={13}
+    className="invite-agents"
+  />
+);
+
+```
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={InviteAgentsStories.Default} sort="requiredFirst" />
diff --git a/packages/react-components/src/components/InviteAgents/InviteAgents.module.scss b/packages/react-components/src/components/InviteAgents/InviteAgents.module.scss
@@ -0,0 +1,125 @@
+$base-class: 'invite-agents';
+
+.#{$base-class} {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-4);
+  background-color: var(--surface-secondary-default);
+  max-width: 260px;
+  height: 32px;
+
+  &:hover {
+    border-color: var(--border-basic-secondary);
+  }
+
+  &--empty {
+    border: 0;
+  }
+
+  &--only-unavailable {
+    border-color: var(--action-negative-default);
+    background-color: var(--surface-accent-ondark-negative-default);
+
+    &:hover {
+      border-color: var(--border-basic-negative);
+    }
+  }
+
+  &__not-accepting {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+    margin-right: var(--spacing-2);
+    margin-left: var(--spacing-2);
+    cursor: pointer;
+    color: var(--content-basic-primary);
+  }
+
+  &__tooltip {
+    max-width: 260px;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+
+      > p {
+        display: inline-flex;
+        gap: var(--spacing-3);
+        align-items: center;
+      }
+    }
+  }
+
+  &__tooltip-trigger {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+    cursor: pointer;
+    padding-right: var(--spacing-2);
+    padding-left: var(--spacing-1);
+  }
+
+  &__not-accepting-status-dot {
+    display: inline-block;
+    border: 1px solid var(--navbar-background);
+    border-radius: 50%;
+    background: var(--surface-accent-emphasis-high-negative);
+    width: 10px;
+    height: 10px;
+  }
+
+  &__avatar-container {
+    display: flex;
+  }
+
+  &__avatar {
+    position: relative;
+    border: 1px solid var(--border-basic-tertiary);
+
+    &:not(:first-child) {
+      margin-left: -10px;
+    }
+
+    > div {
+      border: 1px solid var(--border-basic-tertiary);
+    }
+  }
+
+  &__available-agents-number {
+    text-transform: uppercase;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    color: var(--content-basic-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  &__invite-button {
+    margin-right: -1px;
+    border: 1px solid var(--content-basic-disabled);
+    border-radius: 24px;
+    background-color: var(--surface-primary-default);
+    padding: 6px 12px;
+    min-width: 0;
+    height: 32px;
+    color: var(--content-basic-primary);
+
+    &--animated {
+      margin-right: 4px;
+      height: 24px;
+
+      &[class*='--animated-label'][class*='--with-left-icon'] {
+        padding-right: 3px;
+        padding-left: 3px;
+
+        &:hover,
+        &:focus-visible {
+          margin-right: -1px;
+          height: 32px;
+        }
+      }
+    }
+  }
+}