@dropi/ui-components 1.0.0

package/src/components-source/toast/toast.component.spec.ts

@@ -0,0 +1,368 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ToastComponent } from './toast.component';
+import { MessageService } from 'primeng/api';
+import { ToastService } from '@app/services/toast.service';
+import { SettingsService } from '../../services/setting.service';
+import { Subject } from 'rxjs';
+import { ToastProps } from '@app/utilities/interfaces/ui/toast.interface';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
+  let mockMessageService: any;
+  let mockToastService: any;
+  let mockSettingsService: any;
+  let toastOpenSubject: Subject<ToastProps>;
+
+  beforeEach(async () => {
+    toastOpenSubject = new Subject<ToastProps>();
+
+    mockMessageService = {
+      add: jest.fn(),
+      clear: jest.fn(),
+    };
+
+    mockToastService = {
+      toastOpen$: toastOpenSubject.asObservable(),
+      showSuccess: jest.fn(),
+      showError: jest.fn(),
+      showWarning: jest.fn(),
+      showInfo: jest.fn(),
+    };
+
+    mockSettingsService = {
+      getBrand: jest.fn().mockReturnValue({ name: 'Dropi' }),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [ToastComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MessageService, useValue: mockMessageService },
+        { provide: ToastService, useValue: mockToastService },
+        { provide: SettingsService, useValue: mockSettingsService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ToastComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.forceBrandIsDropi).toBe(false);
+    });
+
+    it('should load animations configuration', () => {
+      expect(component.animations).toBeDefined();
+      expect(component.animations.success).toContain('success.json');
+      expect(component.animations.error).toContain('failure.json');
+      expect(component.animations.warn).toContain('warning.json');
+      expect(component.animations.info).toContain('question.json');
+    });
+
+    it('should load icons configuration', () => {
+      expect(component.icons).toBeDefined();
+      expect(component.icons.success).toContain('check.svg');
+      expect(component.icons.error).toContain('cross-circle.svg');
+      expect(component.icons.warn).toContain('info.svg');
+      expect(component.icons.info).toContain('comment-round-info.svg');
+    });
+  });
+
+  describe('Configuración de marca', () => {
+    it('should detect Dropi brand', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'Dropi' });
+
+      component.ngOnInit();
+
+      expect(component.brandName).toBe('dropi');
+      expect(component.brandIsDropi).toBe(true);
+    });
+
+    it('should detect other brands', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'OtherBrand' });
+
+      component.ngOnInit();
+
+      expect(component.brandName).toBe('otherbrand');
+      expect(component.brandIsDropi).toBe(false);
+    });
+
+    it('should force Dropi brand when requested', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'OtherBrand' });
+      component.forceBrandIsDropi = true;
+
+      component.ngOnInit();
+
+      expect(component.brandIsDropi).toBe(true);
+    });
+
+    it('should handle null brand name', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: null });
+
+      expect(() => component.ngOnInit()).not.toThrow();
+    });
+  });
+
+  describe('Suscripción a eventos de toast', () => {
+    it('should subscribe to toast open events', () => {
+      // Initialize component ngOnInit manually
+      component.ngOnInit();
+
+      const toastProps: ToastProps = {
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Operation completed',
+      };
+
+      toastOpenSubject.next(toastProps);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(toastProps);
+    });
+
+    it('should handle success toast', () => {
+      mockMessageService.add.mockClear();
+      component.ngOnInit();
+
+      const successToast: ToastProps = {
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Item saved successfully',
+      };
+
+      toastOpenSubject.next(successToast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(successToast);
+    });
+
+    it('should handle error toast', () => {
+      mockMessageService.add.mockClear();
+      component.ngOnInit();
+
+      const errorToast: ToastProps = {
+        severity: 'error',
+        summary: 'Error',
+        detail: 'An error occurred',
+      };
+
+      toastOpenSubject.next(errorToast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(errorToast);
+    });
+
+    it('should handle warning toast', () => {
+      mockMessageService.add.mockClear();
+      component.ngOnInit();
+
+      const warnToast: ToastProps = {
+        severity: 'warn',
+        summary: 'Warning',
+        detail: 'Please check your input',
+      };
+
+      toastOpenSubject.next(warnToast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(warnToast);
+    });
+
+    it('should handle info toast', () => {
+      mockMessageService.add.mockClear();
+      component.ngOnInit();
+
+      const infoToast: ToastProps = {
+        severity: 'info',
+        summary: 'Information',
+        detail: 'New features available',
+      };
+
+      toastOpenSubject.next(infoToast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(infoToast);
+    });
+  });
+
+  describe('Múltiples toasts', () => {
+    it('should handle multiple toast messages', () => {
+      mockMessageService.add.mockClear();
+      component.ngOnInit();
+
+      const toast1: ToastProps = {
+        severity: 'success',
+        summary: 'Success',
+        detail: 'First message',
+      };
+
+      const toast2: ToastProps = {
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Second message',
+      };
+
+      toastOpenSubject.next(toast1);
+      toastOpenSubject.next(toast2);
+
+      expect(mockMessageService.add).toHaveBeenCalledTimes(2);
+      expect(mockMessageService.add).toHaveBeenNthCalledWith(1, toast1);
+      expect(mockMessageService.add).toHaveBeenNthCalledWith(2, toast2);
+    });
+  });
+
+  describe('Propiedades de toast', () => {
+    it('should handle toast with life property', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      component.ngOnInit();
+
+      const toastProps: ToastProps = {
+        severity: 'info',
+        summary: 'Info',
+        detail: 'Auto-close message',
+        life: 5000,
+      };
+
+      toastOpenSubject.next(toastProps);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(toastProps);
+    });
+
+    it('should handle toast with sticky property', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      component.ngOnInit();
+
+      const toastProps: ToastProps = {
+        severity: 'warn',
+        summary: 'Warning',
+        detail: 'Sticky message',
+        sticky: true,
+      };
+
+      toastOpenSubject.next(toastProps);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(toastProps);
+    });
+
+    it('should handle toast with closable property', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      component.ngOnInit();
+
+      const toastProps: ToastProps = {
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Closable message',
+        closable: true,
+      };
+
+      toastOpenSubject.next(toastProps);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(toastProps);
+    });
+  });
+
+  describe('Ciclo de vida', () => {
+    it('should unsubscribe on destroy', () => {
+      component.ngOnInit();
+      const unsubscribeSpy = jest.spyOn(component['suscriptions'], 'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(unsubscribeSpy).toHaveBeenCalled();
+    });
+
+    it('should not throw error if destroyed before init', () => {
+      expect(() => component.ngOnDestroy()).not.toThrow();
+    });
+  });
+
+  describe('Configuración de assets', () => {
+    it('should have correct animation paths', () => {
+      expect(component.animations.success).toBe('/assets/lottie-files/success.json');
+      expect(component.animations.warn).toBe('/assets/lottie-files/warning.json');
+      expect(component.animations.info).toBe('/assets/lottie-files/question.json');
+      expect(component.animations.error).toBe('/assets/lottie-files/failure.json');
+    });
+
+    it('should have correct icon paths', () => {
+      expect(component.icons.success).toBe('/assets/img/icons/custom/check.svg');
+      expect(component.icons.warn).toBe('/assets/img/icons/custom/info.svg');
+      expect(component.icons.info).toBe('/assets/img/icons/custom/comment-round-info.svg');
+      expect(component.icons.error).toBe('/assets/img/icons/custom/cross-circle.svg');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete toast workflow', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      // Initialize
+      component.ngOnInit();
+      expect(component.brandIsDropi).toBe(true);
+
+      // Show success
+      const successToast: ToastProps = {
+        severity: 'success',
+        summary: 'Saved',
+        detail: 'Your changes have been saved',
+      };
+      toastOpenSubject.next(successToast);
+      expect(mockMessageService.add).toHaveBeenCalledWith(successToast);
+
+      // Show error
+      const errorToast: ToastProps = {
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Failed to save',
+      };
+      toastOpenSubject.next(errorToast);
+      expect(mockMessageService.add).toHaveBeenCalledWith(errorToast);
+
+      // Cleanup
+      component.ngOnDestroy();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty toast properties', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      component.ngOnInit();
+
+      const emptyToast: ToastProps = {
+        severity: 'info',
+        summary: '',
+        detail: '',
+      };
+
+      toastOpenSubject.next(emptyToast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(emptyToast);
+    });
+
+    it('should handle toast without detail', () => {
+      // Clear any previous calls
+      mockMessageService.add.mockClear();
+
+      component.ngOnInit();
+
+      const toast: ToastProps = {
+        severity: 'success',
+        summary: 'Success',
+      };
+
+      toastOpenSubject.next(toast);
+
+      expect(mockMessageService.add).toHaveBeenCalledWith(toast);
+    });
+  });
+});

package/src/components-source/toast/toast.component.ts

@@ -0,0 +1,59 @@
+import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MessageService } from 'primeng/api';
+
+import { ToastService } from '@app/services/toast.service';
+import { ToastProps } from '@app/utilities/interfaces/ui/toast.interface';
+import { CommonModule } from '@angular/common';
+import { SettingsService } from '../../services/setting.service';
+import { ToastModule } from 'primeng/toast';
+
+@Component({
+  selector: 'app-toast',
+  templateUrl: './toast.component.html',
+  styleUrls: ['./toast.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ToastModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ToastComponent implements OnInit {
+  @Input() forceBrandIsDropi: boolean = false;
+  private readonly suscriptions: Subscription = new Subscription();
+  brandName: string;
+  brandIsDropi: boolean;
+
+  animations = {
+    success: '/assets/lottie-files/success.json',
+    warn: '/assets/lottie-files/warning.json',
+    info: '/assets/lottie-files/question.json',
+    error: '/assets/lottie-files/failure.json',
+  };
+
+  icons = {
+    success: '/assets/img/icons/custom/check.svg',
+    warn: '/assets/img/icons/custom/info.svg',
+    info: '/assets/img/icons/custom/comment-round-info.svg',
+    error: '/assets/img/icons/custom/cross-circle.svg',
+  };
+
+  constructor(
+    private readonly messageService: MessageService,
+    private readonly toastService: ToastService,
+    private readonly settingsService: SettingsService,
+  ) {}
+
+  ngOnInit() {
+    this.brandName = this.settingsService.getBrand()?.name?.toLowerCase();
+    this.brandIsDropi = this.forceBrandIsDropi || this.brandName === 'dropi';
+
+    this.suscriptions.add(
+      this.toastService.toastOpen$.subscribe((props: ToastProps) => {
+        this.messageService.add(props);
+      }),
+    );
+  }
+
+  ngOnDestroy() {
+    this.suscriptions.unsubscribe();
+  }
+}

package/src/components-source/toast/toast.stories.ts

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Toast notification component stories for Storybook
+ * @description Toast notification system for displaying feedback messages
+ */
+import { DropiToastStoryComponent } from '@app/ui/storybook-doc-components/dropi-toast/dropi-toast.component';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ToastService } from '@app/services/toast.service';
+import '@dotlottie/player-component';
+
+const meta: Meta<DropiToastStoryComponent> = {
+  title: 'UI Dropi/Toast',
+  component: DropiToastStoryComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [ToastService],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    previewTabs: {
+      canvas: { hidden: true },
+      'storybook/docs/panel': { hidden: false },
+    },
+    controls: { disable: true },
+    options: {
+      showPanel: false,
+    },
+    docs: {
+      description: {
+        component: `
+# Toast Component
+
+A notification system for displaying temporary feedback messages to users.
+
+## Key Features
+- **Multiple types**: Success, error, warning, info
+- **Auto-dismiss**: Configurable duration
+- **Brand support**: Different styles for Dropi and White Label
+- **Animated**: Smooth entry/exit animations
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * Default toast configuration
+ */
+export const Default: StoryObj<DropiToastStoryComponent> = {};
+
+/**
+ * Toast with Dropi branding
+ */
+export const Dropi: StoryObj<DropiToastStoryComponent> = {
+  args: {
+    forceBrandIsDropi: true,
+  },
+};
+
+/**
+ * Toast with White Label branding
+ */
+export const WhiteLabel: StoryObj<DropiToastStoryComponent> = {
+  args: {
+    forceBrandIsDropi: false,
+  },
+};

package/src/components-source/tooltip/tooltip.component.html

@@ -0,0 +1,46 @@
+<span
+  (click)="question.show($event)"
+  (mouseenter)="question.show($event)"
+  (mouseleave)="question.hide($event)"
+  class="icon-tooltip"
+>
+  <ng-container *ngIf="!outlined; else tooltipOutlined">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.99972 0.144531C5.64351 0.144531 4.31775 0.546696 3.1901 1.30017C2.06245 2.05364 1.18355 3.12458 0.66455 4.37756C0.145549 5.63054 0.00975496 7.00928 0.274339 8.33943C0.538924 9.66959 1.192 10.8914 2.15099 11.8504C3.10998 12.8094 4.33181 13.4625 5.66196 13.7271C6.99212 13.9916 8.37086 13.8558 9.62384 13.3368C10.8768 12.8178 11.9478 11.9389 12.7012 10.8113C13.4547 9.68364 13.8569 8.35789 13.8569 7.00167C13.8549 5.18365 13.1318 3.44065 11.8463 2.15511C10.5607 0.869576 8.81775 0.146498 6.99972 0.144531ZM6.99972 11.5731C6.8867 11.5731 6.77622 11.5396 6.68225 11.4768C6.58828 11.414 6.51504 11.3248 6.47179 11.2203C6.42854 11.1159 6.41722 11.001 6.43927 10.8902C6.46132 10.7793 6.51575 10.6775 6.59566 10.5976C6.67558 10.5177 6.7774 10.4633 6.88824 10.4412C6.99909 10.4192 7.11398 10.4305 7.2184 10.4737C7.32281 10.517 7.41206 10.5902 7.47485 10.6842C7.53764 10.7782 7.57115 10.8887 7.57115 11.0017C7.57115 11.1532 7.51095 11.2986 7.40378 11.4057C7.29662 11.5129 7.15127 11.5731 6.99972 11.5731ZM8.10258 7.29081C7.93395 7.39625 7.79605 7.54423 7.70276 7.71988C7.60947 7.89552 7.56408 8.09263 7.57115 8.29139V8.71596C7.57115 8.86751 7.51095 9.01285 7.40378 9.12002C7.29662 9.22718 7.15127 9.28739 6.99972 9.28739C6.84817 9.28739 6.70283 9.22718 6.59566 9.12002C6.4885 9.01285 6.42829 8.86751 6.42829 8.71596V8.29139C6.41985 7.8882 6.51947 7.4901 6.71682 7.13841C6.91417 6.78672 7.20205 6.49426 7.55058 6.29139C7.76171 6.1751 7.93066 5.99504 8.0333 5.77695C8.13593 5.55886 8.16698 5.3139 8.12201 5.0771C8.07748 4.8515 7.96672 4.6443 7.80386 4.48195C7.64101 4.31961 7.43346 4.20949 7.20772 4.16567C7.04299 4.13518 6.87357 4.14128 6.71146 4.18354C6.54935 4.22579 6.39851 4.30317 6.26962 4.4102C6.14073 4.51722 6.03695 4.65127 5.96562 4.80286C5.8943 4.95444 5.85717 5.11986 5.85686 5.28739C5.85686 5.43894 5.79666 5.58428 5.6895 5.69145C5.58233 5.79861 5.43699 5.85882 5.28544 5.85882C5.13388 5.85882 4.98854 5.79861 4.88138 5.69145C4.77421 5.58428 4.71401 5.43894 4.71401 5.28739C4.71415 4.88425 4.82091 4.48832 5.02347 4.13976C5.22602 3.7912 5.51716 3.50241 5.86735 3.30269C6.21754 3.10297 6.61432 2.99942 7.01745 3.00255C7.42058 3.00568 7.81571 3.11537 8.16276 3.3205C8.5098 3.52562 8.79643 3.81889 8.99355 4.17055C9.19067 4.52221 9.29128 4.91975 9.28517 5.32284C9.27906 5.72593 9.16645 6.12024 8.95876 6.46576C8.75107 6.81128 8.45569 7.0963 8.10258 7.29081Z"
+        fill="#7B8190"
+      />
+    </svg>
+  </ng-container>
+</span>
+
+<div
+  (click)="question.show($event)"
+  (mouseenter)="question.show($event)"
+  (mouseleave)="question.hide($event)"
+  class="icon-tooltip"
+  style="width: 100%"
+></div>
+
+<div class="questiontooltip">
+  <p-overlayPanel #question [styleClass]="'question-tooltip'" [appendTo]="questionTooltip">
+    <div class="inner-container" [innerHTML]="text"></div>
+  </p-overlayPanel>
+</div>
+
+<ng-template #tooltipOutlined>
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 1.5C5.0111 1.5 4.0444 1.79324 3.22215 2.34265C2.39991 2.89206 1.75904 3.67295 1.3806 4.58658C1.00217 5.50021 0.90315 6.50555 1.09608 7.47545C1.289 8.44536 1.76521 9.33627 2.46447 10.0355C3.16373 10.7348 4.05465 11.211 5.02455 11.4039C5.99446 11.5969 6.99979 11.4978 7.91342 11.1194C8.82705 10.741 9.60794 10.1001 10.1573 9.27785C10.7068 8.45561 11 7.48891 11 6.5C10.9986 5.17436 10.4713 3.90342 9.53395 2.96605C8.59658 2.02868 7.32564 1.50143 6 1.5ZM6 10.6667C5.17591 10.6667 4.37033 10.4223 3.68513 9.96446C2.99992 9.50662 2.46587 8.85587 2.1505 8.09451C1.83514 7.33316 1.75263 6.49538 1.9134 5.68712C2.07417 4.87887 2.47101 4.13644 3.05372 3.55372C3.63644 2.971 4.37887 2.57417 5.18713 2.41339C5.99538 2.25262 6.83316 2.33514 7.59452 2.6505C8.35588 2.96587 9.00662 3.49992 9.46446 4.18512C9.9223 4.87033 10.1667 5.67591 10.1667 6.5C10.1655 7.6047 9.72608 8.6638 8.94494 9.44494C8.1638 10.2261 7.1047 10.6655 6 10.6667Z"
+      fill="#A3ABBF"
+    />
+    <path
+      d="M6.29881 3.60945C6.05853 3.56567 5.81157 3.57523 5.57539 3.63746C5.33922 3.6997 5.11961 3.81307 4.9321 3.96957C4.7446 4.12607 4.59378 4.32187 4.49032 4.54311C4.38686 4.76435 4.33329 5.00563 4.3334 5.24986C4.3334 5.36037 4.3773 5.46635 4.45544 5.54449C4.53358 5.62263 4.63956 5.66653 4.75006 5.66653C4.86057 5.66653 4.96655 5.62263 5.04469 5.54449C5.12283 5.46635 5.16673 5.36037 5.16673 5.24986C5.16662 5.12727 5.19357 5.00616 5.24564 4.89518C5.29772 4.78419 5.37363 4.68607 5.46799 4.60779C5.56234 4.52952 5.6728 4.47302 5.79149 4.44234C5.91018 4.41166 6.03418 4.40754 6.15464 4.43028C6.31924 4.46223 6.47058 4.54252 6.58933 4.6609C6.70808 4.77928 6.78884 4.93036 6.82131 5.09486C6.8541 5.26753 6.83146 5.44615 6.75662 5.60517C6.68179 5.7642 6.55859 5.89549 6.40464 5.98028C6.14971 6.12797 5.93905 6.34133 5.79461 6.59811C5.65017 6.8549 5.57723 7.14572 5.58339 7.44028V7.74986C5.58339 7.86037 5.62729 7.96635 5.70543 8.04449C5.78357 8.12263 5.88955 8.16653 6.00006 8.16653C6.11057 8.16653 6.21655 8.12263 6.29469 8.04449C6.37283 7.96635 6.41673 7.86037 6.41673 7.74986V7.44028C6.4115 7.29529 6.44456 7.15147 6.51259 7.02332C6.58061 6.89517 6.6812 6.7872 6.80423 6.71028C7.10611 6.54448 7.3492 6.28922 7.50009 5.97962C7.65098 5.67001 7.70225 5.32126 7.64684 4.98133C7.59143 4.6414 7.43208 4.32698 7.19068 4.08132C6.94929 3.83565 6.63772 3.67081 6.29881 3.60945Z"
+      fill="#A3ABBF"
+    />
+    <path
+      d="M6.41674 8.99987C6.41674 8.76975 6.23019 8.5832 6.00007 8.5832C5.76995 8.5832 5.5834 8.76975 5.5834 8.99987C5.5834 9.22999 5.76995 9.41654 6.00007 9.41654C6.23019 9.41654 6.41674 9.22999 6.41674 8.99987Z"
+      fill="#A3ABBF"
+    />
+  </svg>
+</ng-template>

package/src/components-source/tooltip/tooltip.component.scss

@@ -0,0 +1,44 @@
+.icon-tooltip {
+  cursor: pointer;
+}
+
+.question-tooltip {
+  background: #495057;
+  color: #fff;
+  padding: 0px;
+  font-size: 12px;
+  border-radius: 4px;
+  max-width: 200px;
+  text-align: center;
+  margin-left: -8px;
+  .p-overlaypanel-content {
+    padding: 6px 10px !important;
+  }
+  .content-div {
+    line-height: 16px;
+    color: #ffffffb0;
+  }
+
+  &:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #495057;
+  }
+
+  &:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #495057;
+  }
+
+  &:before {
+    border-width: 7px;
+    margin-left: -12px;
+  }
+
+  .inner-container {
+    margin: 0;
+    padding: 0;
+    text-align: start;
+  }
+}