Merge branch 'main' into feature/picker-responsive-group-headers

livechat · Dec 10, 2024 · 6912434 · 6912434
2 parents 287b3d6 + 7ed07d2
commit 6912434
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 56 deletions.
diff --git a/packages/react-components/src/components/Avatar/Avatar.stories.tsx b/packages/react-components/src/components/Avatar/Avatar.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Meta } from '@storybook/react';
 
+import image from '../../stories/assets/avatar.jpg';
 import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 
 import { Avatar, AvatarProps } from './Avatar';
@@ -16,8 +17,6 @@ export const Default = (args: AvatarProps): React.ReactElement => (
   <Avatar {...args} />
 );
 
-const defaultImage =
-  'https://cdn-labs.livechat-files.com/api/file/lc/img/100019504/df59da4b5b0cdb6030efb08787fd255d.jpg';
 const defaultName = 'John Doe';
 
 Default.args = {
@@ -28,7 +27,7 @@ Default.args = {
 export const Types = (): React.ReactElement => (
   <>
     <StoryDescriptor title="Image">
-      <Avatar type="image" src={defaultImage} alt="User avatar" />
+      <Avatar type="image" src={image} alt="User avatar" />
     </StoryDescriptor>
     <StoryDescriptor title="Text">
       <Avatar type="text" text={'Support Heroes'} />
@@ -100,10 +99,10 @@ export const FallbackAvatar = (): React.ReactElement => (
 export const Rim = (): React.ReactElement => (
   <>
     <StoryDescriptor title="Rim">
-      <Avatar withRim type="image" src={defaultImage} />
+      <Avatar withRim type="image" src={image} />
     </StoryDescriptor>{' '}
     <StoryDescriptor title="Rim with status">
-      <Avatar withRim status="available" type="image" src={defaultImage} />
+      <Avatar withRim status="available" type="image" src={image} />
     </StoryDescriptor>
   </>
 );
@@ -113,12 +112,7 @@ export const SizesWithStatus = (): React.ReactElement => {
     <>
       {AvatarSizes.map((size) => (
         <StoryDescriptor title={size} key={size}>
-          <Avatar
-            type="image"
-            src={defaultImage}
-            size={size}
-            status="available"
-          />
+          <Avatar type="image" src={image} size={size} status="available" />
           <Avatar
             type="text"
             text={defaultName}
@@ -137,7 +131,7 @@ export const SizesWithRim = (): React.ReactElement => {
     <>
       {AvatarSizes.map((size) => (
         <StoryDescriptor title={size} key={size} gap="12px">
-          <Avatar type="image" src={defaultImage} size={size} withRim />
+          <Avatar type="image" src={image} size={size} withRim />
           <Avatar
             type="text"
             text={defaultName}

diff --git a/packages/react-components/src/components/Card/Card.module.scss b/packages/react-components/src/components/Card/Card.module.scss
@@ -21,7 +21,6 @@ $base-class: 'card';
 
     &__image {
       border-radius: 4px;
-      background-color: var(--surface-basic-disabled);
       width: 48px;
       height: 48px;
     }

diff --git a/packages/react-components/src/components/Card/Card.stories.tsx b/packages/react-components/src/components/Card/Card.stories.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Meta } from '@storybook/react';
 
+import image from '../../stories/assets/folder.svg';
 import { Card, CardProps } from '../Card';
 
 export default {
@@ -24,7 +25,7 @@ export const Default = (args: CardProps): React.ReactElement => (
 
 Default.args = {
   title: 'Card title',
-  src: 'https://via.placeholder.com/100',
+  src: image,
   alt: 'Image description',
   children:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
@@ -35,7 +36,7 @@ export const Expandable = (): React.ReactElement => (
   <Card
     title="Expandable card"
     description="Click show more to expand"
-    src="https://via.placeholder.com/100"
+    src={image}
     expandableContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -47,7 +48,7 @@ export const WithButtons = (): React.ReactElement => (
   <Card
     title="Expandable card"
     description="Click show more to expand"
-    src="https://via.placeholder.com/100"
+    src={image}
     buttonsOptions={[
       {
         kind: 'secondary',
@@ -70,7 +71,7 @@ export const ExpandableWithButtons = (): React.ReactElement => (
   <Card
     title="Expandable card"
     description="Click show more to expand"
-    src="https://via.placeholder.com/100"
+    src={image}
     expandableContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
     buttonsOptions={[
       {

diff --git a/packages/react-components/src/components/InviteAgents/InviteAgents.stories.tsx b/packages/react-components/src/components/InviteAgents/InviteAgents.stories.tsx
@@ -1,6 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 
+import image from '../../stories/assets/avatar.jpg';
+
 import { InviteAgents } from './InviteAgents';
 
 const meta: Meta<typeof InviteAgents> = {
@@ -37,21 +39,21 @@ const mockAgents = [
     name: 'Alice Johnson 2',
     email: 'alic2@example.com',
     status: 'available' as const,
-    avatar: 'https://via.placeholder.com/150',
+    avatar: image,
     isBot: false,
   },
   {
     name: 'Bob Smith',
     email: 'bob3@example.com',
     status: 'unavailable' as const,
-    avatar: 'https://via.placeholder.com/150',
+    avatar: image,
     isBot: false,
   },
   ...[...Array(10)].map((_, index) => ({
     name: `Unknown Agent ${index}`,
     email: `unknown${index}@example.com`,
     status: 'available' as const,
-    avatar: 'https://via.placeholder.com/150',
+    avatar: image,
     isBot: index % 2 === 0,
   })),
 ];

diff --git a/packages/react-components/src/components/Picker/Picker.stories.tsx b/packages/react-components/src/components/Picker/Picker.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Meta, StoryFn } from '@storybook/react';
 
+import image from '../../stories/assets/avatar.jpg';
 import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 import { customHeightForChromatic } from '../../utils/chromatic-story-helpers';
 import noop from '../../utils/noop';
@@ -171,10 +172,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
             customElement: {
               listItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image" src={image} />
                   <div>
                     <div className="title">Example custom element one</div>
                     <div className="description">Example custom element</div>
@@ -183,10 +181,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
               ),
               selectedItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image selected"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image selected" src={image} />
                   <div className="title selected">
                     Example custom element one
                   </div>
@@ -200,10 +195,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
             customElement: {
               listItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image" src={image} />
                   <div>
                     <div className="title">Example custom element two</div>
                     <div className="description">Example custom element</div>
@@ -212,10 +204,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
               ),
               selectedItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image selected"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image selected" src={image} />
                   <div className="title selected">
                     Example custom element two
                   </div>
@@ -236,10 +225,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
             customElement: {
               listItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image" src={image} />
                   <div>
                     <div className="title">Example custom element one</div>
                     <div className="description">Example custom element</div>
@@ -248,10 +234,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
               ),
               selectedItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image selected"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image selected" src={image} />
                   <div className="title selected">Example element one</div>
                 </CustomPickerOption>
               ),
@@ -263,10 +246,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
             customElement: {
               listItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image" src={image} />
                   <div>
                     <div className="title">Example custom element two</div>
                     <div className="description">Example custom element</div>
@@ -275,10 +255,7 @@ export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
               ),
               selectedItemBody: (
                 <CustomPickerOption>
-                  <img
-                    className="image selected"
-                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-                  />
+                  <img className="image selected" src={image} />
                   <div className="title selected">Example element two</div>
                 </CustomPickerOption>
               ),

diff --git a/packages/react-components/src/components/Picker/constants.tsx b/packages/react-components/src/components/Picker/constants.tsx
@@ -1,5 +1,6 @@
 import { DayMode } from '@livechat/design-system-icons';
 
+import image from '../../stories/assets/avatar.jpg';
 import { Icon } from '../Icon';
 import { TagKind } from '../Tag';
 
@@ -87,7 +88,7 @@ export const DEFAULT_MORE_PICKER_OPTIONS: IPickerListItem[] = [
   {
     key: 'four',
     name: 'Option with avatar',
-    avatarSrc: 'https://avatars2.githubusercontent.com/u/29309941?s=88&v=4',
+    avatarSrc: image,
   },
 ];
 

diff --git a/packages/react-components/src/components/Tag/Tag.stories.tsx b/packages/react-components/src/components/Tag/Tag.stories.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as TablerIcons from '@livechat/design-system-icons';
 import { Meta } from '@storybook/react';
 
+import image from '../../stories/assets/avatar.jpg';
 import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 import noop from '../../utils/noop';
 import { Icon } from '../Icon';
@@ -15,9 +16,7 @@ const exampleIcon = <Icon source={TablerIcons.Smiles} size="small" />;
 const exampleAvatar = (
   <img
     style={{ borderRadius: '50%', width: '20px', height: '20px' }}
-    src={
-      'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200'
-    }
+    src={image}
     alt="tag-avatar"
     data-testid="lc-tag-avatar"
   />

diff --git a/packages/react-components/src/stories/assets/avatar.jpg b/packages/react-components/src/stories/assets/avatar.jpg
diff --git a/packages/react-components/src/stories/assets/folder.svg b/packages/react-components/src/stories/assets/folder.svg