Issue 546 - Adicionar ícone de erro no accordion

src/components/AccountCard/AccountCard.module.scss

@@ -14,6 +14,10 @@
   border-bottom: 0.1rem solid $primaryGray;
 
   background-color: $secondaryWhite;
+
+  &.invalid {
+    background-color: $primaryRed;
+  }
 }
 
 .username {

src/components/AccountCard/AccountCard.spec.tsx

@@ -11,7 +11,7 @@ const makeSut = ({
   username = faker.internet.userName(),
   ...props
 }: Partial<AccountCardProps>): RenderResult =>
-  render(<AccountCard username={username} {...props} />);
+  render(<AccountCard invalid={false} username={username} {...props} />);
 
 describe('AccountCard', () => {
   let user = userEvent.setup();

src/components/AccountCard/AccountCard.tsx

@@ -15,6 +15,7 @@ export function AccountCard({
   avatarURL,
   className,
   hasError = false,
+  invalid = false,
   isEnabled = false,
   isFavorited = false,
   onEnableChange,
@@ -34,7 +35,14 @@ export function AccountCard({
   };
 
   return (
-    <div className={classNames(scss.container, className)} {...props}>
+    <div
+      className={classNames({
+        className,
+        [scss.container]: true,
+        [scss.invalid]: invalid,
+      })}
+      {...props}
+    >
       <Avatar className={scss.avatar} image={avatarURL} username={username} />
       <p className={scss.username}>{username}</p>
       <Button
@@ -46,6 +54,7 @@ export function AccountCard({
       />
       <Switch
         checked={enabled}
+        invalid={invalid}
         onChange={handleEnableChange}
         variant={hasError ? 'error' : 'default'}
       />

src/components/AccountCard/AccountCard.types.ts

@@ -6,6 +6,7 @@ export type AccountCardProps = BaseAccountCardProps & {
   avatarURL?: string;
   hasError?: boolean;
   icon?: string;
+  invalid: boolean;
   isEnabled?: boolean;
   isFavorited?: boolean;
   onEnableChange?: (isEnabled: boolean) => void;

src/components/Switch/Switch.module.scss

@@ -44,6 +44,10 @@
     scale: 0.85;
   }
 
+  &.invalid {
+    color: $secondaryRed;
+  }
+
   &:active::before {
     transform: scale(0.8);
   }

src/components/Switch/Switch.tsx

@@ -7,13 +7,14 @@ import scss from './Switch.module.scss';
 import { SwitchProps } from './Switch.types';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ variant = 'default', ...props }, ref) => {
+  ({ invalid, variant = 'default', ...props }, ref) => {
     const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
       if (props.onChange) props.onChange(event.target.checked);
     };
 
     const classes = classNames(scss.input, {
       [scss.error]: variant === 'error',
+      [scss.invalid]: invalid,
     });
 
     return (

src/components/Switch/Switch.types.ts

@@ -4,6 +4,7 @@ export type BaseSwitchProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'>;
 
 export type SwitchProps = BaseSwitchProps & {
   checked?: boolean;
+  invalid?: boolean;
   onChange?: (checked: boolean) => void;
   variant?: 'default' | 'error';
 };

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.components.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import scss from './SocialAccordion.module.scss';
+
+import { AccountQuantityProps } from './SocialAccordion.type';
+
+export function AccountQuantity({
+  accountQuantity,
+}: AccountQuantityProps): ReactNode {
+  return <span className={scss.accountQuantity}>{accountQuantity}+</span>;
+}

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss

@@ -20,6 +20,10 @@
   border: 1px solid $primaryGray;
 
   cursor: pointer;
+
+  .alertIcon {
+    color: $secondaryRed;
+  }
 }
 
 .socialInfo {

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx

@@ -159,7 +159,7 @@ describe('SocialAccordion', () => {
 
       render(
         <SocialAccordion
-          accounts={[account]}
+          accounts={[{ ...account, valid: true }]}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx

@@ -12,6 +12,7 @@ import scss from './SocialAccordion.module.scss';
 
 import iconPlaceholderForIcon from './assets/facebook.svg';
 
+import { AccountQuantity } from './SocialAccordion.components';
 import { SocialAccordionProps } from './SocialAccordion.type';
 
 function SocialAccordion(props: SocialAccordionProps): ReactNode {
@@ -35,6 +36,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
       <li key={account.id}>
         <AccountCard
           avatarURL={account.avatar}
+          invalid={!account.valid}
           isEnabled={account.valid}
           onEnableChange={(enable) => activateSocialTab(enable, account)}
           username={account.userName}
@@ -69,9 +71,12 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
             </div>
             {props.error && renderError()}
             <div className={scss.accordionInfo}>
-              <span className={scss.accountQuantity}>
-                {props.accounts.length}+
-              </span>
+              {props.accounts.some(({ valid }) => !valid) ? (
+                <Icon className={scss.alertIcon} icon={'alert'} size={16} />
+              ) : (
+                <AccountQuantity accountQuantity={props.accounts.length} />
+              )}
+
               <Icon
                 aria-label={
                   isOpen ? 'Accordion is open' : 'Accordion is closed'

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.type.ts

@@ -12,3 +12,7 @@ export type IAccountList = {
   socialMediaName?: string;
   username: string;
 };
+
+export type AccountQuantityProps = {
+  accountQuantity: number;
+};