@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/Tabs/Tabs.test.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import { Tabs, Props } from './Tabs';
-import { render } from '@testing-library/react';
-import { TabButton as Tab } from './TabButton';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import { Tabs, Props } from "./Tabs";
+import { render } from "@testing-library/react";
+import { TabButton as Tab } from "./TabButton";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
-  'aria-label': 'Entertainment',
+  "aria-label": "Entertainment",
   children: [
     <Tab title="Tab1">Tabpanel1 content</Tab>,
     <Tab title="Tab2">Tabpanel2 content</Tab>,
-    <Tab title="Tab3">Tabpanel3 content</Tab>,
-  ],
+    <Tab title="Tab3">Tabpanel3 content</Tab>
+  ]
 };
 
 const createTabs = (params?: (defaultParams: Props) => Props) => {
@@ -19,39 +19,39 @@ const createTabs = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Tabs {...parameters} data-testid="tabs"></Tabs>);
-  const tabs = queries.getByTestId('tabs');
+  const tabs = queries.getByTestId("tabs");
 
   return {
     ...queries,
-    tabs,
+    tabs
   };
 };
 
-describe('Tabs should render', () => {
-  it('renders without crashing', () => {
+describe("Tabs should render", () => {
+  it("renders without crashing", () => {
     const { tabs } = createTabs();
 
     expect(tabs).toBeDefined();
   });
 
-  it('renders with properties passed', () => {
-    const { tabs } = createTabs((defaultParams) => ({
+  it("renders with properties passed", () => {
+    const { tabs } = createTabs(defaultParams => ({
       ...defaultParams,
-      className: 'testclass',
+      className: "testclass"
     }));
 
-    expect(tabs).toHaveClass('testclass');
+    expect(tabs).toHaveClass("testclass");
   });
 
-  it('switches to tab and tabpanel when selected property is changed', () => {
-    const { tabs } = createTabs((defaultParams) => ({
+  it("switches to tab and tabpanel when selected property is changed", () => {
+    const { tabs } = createTabs(defaultParams => ({
       ...defaultParams,
-      selected: 2,
+      selected: 2
     }));
 
     const tablist = tabs.firstChild as HTMLDivElement;
     const tabpanels = tabs.lastChild as HTMLDivElement;
-    const tabButtons = tablist.querySelectorAll('.tabbutton');
+    const tabButtons = tablist.querySelectorAll(".tabbutton");
 
     const tab1 = tabButtons[0] as HTMLButtonElement;
     const tab3 = tabButtons[2] as HTMLButtonElement;
@@ -59,21 +59,21 @@ describe('Tabs should render', () => {
     const tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     const tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
-    expect(tab1).not.toHaveClass('selected');
-    expect(tab3).toHaveClass('selected');
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab3).toHaveClass("selected");
 
-    expect(tabpanel1).not.toHaveClass('selected');
-    expect(tabpanel3).toHaveClass('selected');
+    expect(tabpanel1).not.toHaveClass("selected");
+    expect(tabpanel3).toHaveClass("selected");
   });
 
-  it('switches to tab and tabpanel when tab is clicked', () => {
-    const { tabs } = createTabs((defaultParams) => ({
-      ...defaultParams,
+  it("switches to tab and tabpanel when tab is clicked", () => {
+    const { tabs } = createTabs(defaultParams => ({
+      ...defaultParams
     }));
 
     const tablist = tabs.firstChild as HTMLDivElement;
     const tabpanels = tabs.lastChild as HTMLDivElement;
-    let tabButtons = tablist.querySelectorAll('.tabbutton');
+    let tabButtons = tablist.querySelectorAll(".tabbutton");
 
     let tab1 = tabButtons[0] as HTMLButtonElement;
     let tab3 = tabButtons[2] as HTMLButtonElement;
@@ -81,15 +81,15 @@ describe('Tabs should render', () => {
     let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
-    expect(tab1).toHaveClass('selected');
-    expect(tab3).not.toHaveClass('selected');
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("selected");
 
-    expect(tabpanel1).toHaveClass('selected');
-    expect(tabpanel3).not.toHaveClass('selected');
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
 
     userEvent.click(tab3);
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
 
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
@@ -97,23 +97,23 @@ describe('Tabs should render', () => {
     tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
-    expect(tab1).not.toHaveClass('selected');
-    expect(tab3).toHaveClass('selected');
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab3).toHaveClass("selected");
 
-    expect(tabpanel1).not.toHaveClass('selected');
-    expect(tabpanel3).toHaveClass('selected');
+    expect(tabpanel1).not.toHaveClass("selected");
+    expect(tabpanel3).toHaveClass("selected");
   });
 
-  it('triggers the onTabChange when switching tabs', () => {
+  it("triggers the onTabChange when switching tabs", () => {
     const onTabChangeHandler = jest.fn();
 
-    const { tabs } = createTabs((defaultParams) => ({
+    const { tabs } = createTabs(defaultParams => ({
       ...defaultParams,
-      onTabChange: onTabChangeHandler,
+      onTabChange: onTabChangeHandler
     }));
 
     const tablist = tabs.firstChild as HTMLDivElement;
-    const tabButtons = tablist.querySelectorAll('.tabbutton');
+    const tabButtons = tablist.querySelectorAll(".tabbutton");
 
     let tab3 = tabButtons[2] as HTMLButtonElement;
 
@@ -123,8 +123,8 @@ describe('Tabs should render', () => {
   });
 });
 
-describe('Tabs should not render other children then tab components', () => {
-  it('renders no tabs', () => {
+describe("Tabs should not render other children then tab components", () => {
+  it("renders no tabs", () => {
     const queries = render(
       <Tabs data-testid="tabs">
         <div>wrong component 1</div>
@@ -132,20 +132,20 @@ describe('Tabs should not render other children then tab components', () => {
       </Tabs>
     );
 
-    const tabs = queries.getByTestId('tabs');
+    const tabs = queries.getByTestId("tabs");
 
     expect(tabs).toBeDefined();
     expect(tabs).toBeEmptyDOMElement;
   });
 });
 
-describe('Tabs should comply with accessibility rules', () => {
-  it('traverse through tabs with keyboard', async () => {
+describe("Tabs should comply with accessibility rules", () => {
+  it("traverse through tabs with keyboard", async () => {
     const { tabs } = createTabs();
 
     const tablist = tabs.firstChild as HTMLDivElement;
     const tabpanels = tabs.lastChild as HTMLDivElement;
-    let tabButtons = tablist.querySelectorAll('.tabbutton');
+    let tabButtons = tablist.querySelectorAll(".tabbutton");
 
     let tab1 = tabButtons[0] as HTMLButtonElement;
     let tab3 = tabButtons[2] as HTMLButtonElement;
@@ -155,107 +155,107 @@ describe('Tabs should comply with accessibility rules', () => {
 
     tab1.focus();
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
     tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
     expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass('selected');
-    expect(tab1).not.toHaveClass('focussed');
-    expect(tab3).not.toHaveClass('selected');
-    expect(tab3).not.toHaveClass('focussed');
-    expect(tabpanel1).toHaveClass('selected');
-    expect(tabpanel3).not.toHaveClass('selected');
+    expect(tab1).toHaveClass("selected");
+    expect(tab1).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveClass("selected");
+    expect(tab3).not.toHaveClass("focussed");
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
 
-    userEvent.keyboard('[ArrowLeft]');
-    userEvent.keyboard('[Space]');
+    userEvent.keyboard("[ArrowLeft]");
+    userEvent.keyboard("[Space]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
     tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
     expect(tab3).toHaveFocus();
-    expect(tab3).toHaveClass('selected');
-    expect(tab1).not.toHaveClass('selected');
-    expect(tab1).not.toHaveClass('focussed');
-    expect(tabpanel3).toHaveClass('selected');
-    expect(tabpanel1).not.toHaveClass('selected');
+    expect(tab3).toHaveClass("selected");
+    expect(tab1).not.toHaveClass("selected");
+    expect(tab1).not.toHaveClass("focussed");
+    expect(tabpanel3).toHaveClass("selected");
+    expect(tabpanel1).not.toHaveClass("selected");
 
-    userEvent.keyboard('[ArrowRight]');
-    userEvent.keyboard('[Enter]');
+    userEvent.keyboard("[ArrowRight]");
+    userEvent.keyboard("[Enter]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
     tabpanel1 = tabpanels.firstChild as HTMLDivElement;
     tabpanel3 = tabpanels.lastChild as HTMLDivElement;
 
     expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass('selected');
-    expect(tab3).not.toHaveClass('selected');
-    expect(tab3).not.toHaveClass('focussed');
-    expect(tabpanel1).toHaveClass('selected');
-    expect(tabpanel3).not.toHaveClass('selected');
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("selected");
+    expect(tab3).not.toHaveClass("focussed");
+    expect(tabpanel1).toHaveClass("selected");
+    expect(tabpanel3).not.toHaveClass("selected");
 
-    userEvent.keyboard('[End]');
+    userEvent.keyboard("[End]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab3).toHaveFocus();
-    expect(tab3).toHaveClass('focussed');
-    expect(tab1).not.toHaveClass('focussed');
+    expect(tab3).toHaveClass("focussed");
+    expect(tab1).not.toHaveClass("focussed");
 
-    userEvent.keyboard('[Home]');
+    userEvent.keyboard("[Home]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass('selected');
-    expect(tab3).not.toHaveClass('focussed');
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("focussed");
 
     // should have no effect
-    userEvent.keyboard('a');
+    userEvent.keyboard("a");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass('selected');
-    expect(tab3).not.toHaveClass('focussed');
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("focussed");
 
-    userEvent.keyboard('[ArrowRight]');
+    userEvent.keyboard("[ArrowRight]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab1).not.toHaveFocus();
     expect(tab3).not.toHaveFocus();
-    expect(tab1).not.toHaveClass('focussed');
-    expect(tab3).not.toHaveClass('focussed');
+    expect(tab1).not.toHaveClass("focussed");
+    expect(tab3).not.toHaveClass("focussed");
 
-    userEvent.keyboard('[ArrowLeft]');
+    userEvent.keyboard("[ArrowLeft]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
     expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass('selected');
-    expect(tab3).not.toHaveClass('focussed');
+    expect(tab1).toHaveClass("selected");
+    expect(tab3).not.toHaveClass("focussed");
 
-    userEvent.keyboard('[ArrowLeft]');
+    userEvent.keyboard("[ArrowLeft]");
 
-    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tabButtons = tablist.querySelectorAll(".tabbutton");
     tab1 = tabButtons[0] as HTMLButtonElement;
     tab3 = tabButtons[2] as HTMLButtonElement;
 
@@ -263,6 +263,6 @@ describe('Tabs should comply with accessibility rules', () => {
 
     expect(tab1).not.toHaveFocus();
     expect(tab3).not.toHaveFocus();
-    expect(tab1).toHaveClass('selected');
+    expect(tab1).toHaveClass("selected");
   });
 });

package/src/Tabs/Tabs.tsx

@@ -4,25 +4,25 @@ import React, {
   MutableRefObject,
   useEffect,
   useRef,
-  useState,
-} from 'react';
-import { generateID } from '../util/helper';
-import { Props as TabProps } from './Tab';
-import { TabButton } from './TabButton';
-import { TabPanel } from './TabPanel';
-import classes from './Tabs.module.scss';
+  useState
+} from "react";
+import { generateID } from "../util/helper";
+import { Props as TabProps } from "./Tab";
+import { TabButton } from "./TabButton";
+import { TabPanel } from "./TabPanel";
+import classes from "./Tabs.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
   selected?: number;
-  'aria-label'?: string;
+  "aria-label"?: string;
   onTabChange?: (index: number) => void;
 }
 
 export const Tabs = ({
   children,
   selected = 0,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   onTabChange,
   className,
   ...rest
@@ -58,7 +58,7 @@ export const Tabs = ({
       top:
         selectedTabButton.offsetTop +
         selectedTabButton.offsetHeight -
-        indicatorRef.current!.offsetHeight,
+        indicatorRef.current!.offsetHeight
     });
     setIndicatorWidth(selectedTabButton.offsetWidth);
   };
@@ -68,20 +68,20 @@ export const Tabs = ({
     let currentFocussedTab = focussedTab === -1 ? selectedTab : focussedTab;
 
     switch (e.code) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         setFocussedTab(currentFocussedTab === min ? max : currentFocussedTab - 1);
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         setFocussedTab(currentFocussedTab === max ? min : currentFocussedTab + 1);
         break;
-      case 'Home':
+      case "Home":
         setFocussedTab(min);
         break;
-      case 'End':
+      case "End":
         setFocussedTab(max);
         break;
-      case 'Space':
-      case 'Enter':
+      case "Space":
+      case "Enter":
         activateTab(currentFocussedTab);
         break;
     }
@@ -106,7 +106,7 @@ export const Tabs = ({
       selected: selectedTab === index,
       focussed: focussedTab === index,
       onTabButtonClick: () => activateTab(index),
-      children: child.props.title,
+      children: child.props.title
     })
   );
 
@@ -117,33 +117,33 @@ export const Tabs = ({
       selected: selectedTab === index,
       tabId: tabIds[index],
       tabPanelId: tabPanelIds[index],
-      children: child.props.children,
+      children: child.props.children
     })
   );
 
   return (
-    <div {...rest} className={`${classes['tabs']} ${className ?? ''}`}>
+    <div {...rest} className={`${classes["tabs"]} ${className ?? ""}`}>
       <div
         role="tablist"
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         aria-label={ariaLabel}
-        className={classes['tablist']}
+        className={classes["tablist"]}
       >
-        <div className={classes['tabdivider']} />
+        <div className={classes["tabdivider"]} />
         {tabButtons}
         <div
-          className={classes['indicator']}
+          className={classes["indicator"]}
           ref={indicatorRef}
           aria-hidden="true"
           tabIndex={-1}
           style={{
             width: indicatorWidth,
-            ...indicatorPosition,
+            ...indicatorPosition
           }}
         />
       </div>
-      <div className={classes['tabpanels']}>{tabPanels}</div>
+      <div className={classes["tabpanels"]}>{tabPanels}</div>
     </div>
   );
 };

package/src/TextEllipsis/TextEllipsis.test.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from 'react';
-import { render } from '@testing-library/react';
-import user from '@testing-library/user-event';
-import { Props, TextEllipsis } from './TextEllipsis';
+import React, { useEffect, useRef } from "react";
+import { render } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { Props, TextEllipsis } from "./TextEllipsis";
 
 const defaultParams: Props = {};
 
@@ -15,48 +15,48 @@ const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
       content
     </TextEllipsis>
   );
-  const textEllipsis = queries.getByTestId('TextEllipsis');
+  const textEllipsis = queries.getByTestId("TextEllipsis");
 
   return {
     ...queries,
-    textEllipsis,
+    textEllipsis
   };
 };
 
-describe('TextEllipsis should render', () => {
-  it('renders without crashing', () => {
+describe("TextEllipsis should render", () => {
+  it("renders without crashing", () => {
     const { textEllipsis, getAllByText } = createTextEllipsis();
 
     expect(textEllipsis).toBeDefined();
-    expect(getAllByText('content')).toHaveLength(2);
+    expect(getAllByText("content")).toHaveLength(2);
   });
 
-  it('does not show popover when full text is visible', () => {
+  it("does not show popover when full text is visible", () => {
     const { textEllipsis, getByRole } = createTextEllipsis();
 
-    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
     user.hover(textEllipsis);
-    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
   });
 
-  it('shows popover with full text when base text has ellipsis', () => {
+  it("shows popover with full text when base text has ellipsis", () => {
     const { textEllipsis, getByRole } = createTextEllipsis();
 
-    Object.defineProperty(textEllipsis, 'offsetWidth', { configurable: true, value: 1 });
-    Object.defineProperty(textEllipsis, 'scrollWidth', { configurable: true, value: 2 });
+    Object.defineProperty(textEllipsis, "offsetWidth", { configurable: true, value: 1 });
+    Object.defineProperty(textEllipsis, "scrollWidth", { configurable: true, value: 2 });
 
-    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
     user.hover(textEllipsis);
-    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'false');
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "false");
     user.unhover(textEllipsis);
-    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -72,7 +72,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/TextEllipsis/TextEllipsis.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from 'react';
-import { Popover } from '../Popover/Popover';
-import classes from './TextEllipsis.module.scss';
+import React, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from "react";
+import { Popover } from "../Popover/Popover";
+import classes from "./TextEllipsis.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children?: string;
   popoverClassName?: string;
 }
@@ -35,7 +35,7 @@ export const TextEllipsis = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        className={`${classes['text-ellipsis']} ${className ?? ''}`}
+        className={`${classes["text-ellipsis"]} ${className ?? ""}`}
         ref={ref || textContainer}
       >
         {children}
@@ -45,7 +45,7 @@ export const TextEllipsis = React.forwardRef<HTMLDivElement, Props>(
           show={showPopover}
           role="tooltip"
           anchorEl={textContainer}
-          className={`${classes.popover} ${popoverClassName ?? ''}`}
+          className={`${classes.popover} ${popoverClassName ?? ""}`}
         >
           {children}
         </Popover>

package/src/Tiles/Tile.module.scss

@@ -1,4 +1,4 @@
-@import '../mixins.module.scss';
+@import "../mixins.module.scss";
 
 .tile {
   border: 1px solid #e9e9eb;