From 700a5ac69b8c89de85f1a7e19eb4f8d8ab85b53b Mon Sep 17 00:00:00 2001 From: Vadym Date: Tue, 30 Jul 2024 14:43:32 +0200 Subject: [PATCH] feat(ProductSwitcher): adding platform, accounts and text logo --- packages/icons/svg/text_accounts.svg | 4 ++++ packages/icons/svg/text_logo-full.svg | 7 +++++++ packages/icons/svg/text_platform.svg | 4 ++++ packages/react-components/package.json | 2 +- .../src/components/Icon/IconsShowcase/constans.ts | 3 +++ .../ProductSwitcher/ProductSwitcher.module.scss | 1 + .../components/ProductSwitcher/ProductSwitcher.tsx | 11 ++++++++--- .../src/components/ProductSwitcher/constants.ts | 7 ++++--- 8 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 packages/icons/svg/text_accounts.svg create mode 100644 packages/icons/svg/text_logo-full.svg create mode 100644 packages/icons/svg/text_platform.svg diff --git a/packages/icons/svg/text_accounts.svg b/packages/icons/svg/text_accounts.svg new file mode 100644 index 000000000..22530a5c0 --- /dev/null +++ b/packages/icons/svg/text_accounts.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/svg/text_logo-full.svg b/packages/icons/svg/text_logo-full.svg new file mode 100644 index 000000000..cf4d2ecff --- /dev/null +++ b/packages/icons/svg/text_logo-full.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/icons/svg/text_platform.svg b/packages/icons/svg/text_platform.svg new file mode 100644 index 000000000..bffd32219 --- /dev/null +++ b/packages/icons/svg/text_platform.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 90b90a4cd..a028e2b47 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -15,7 +15,7 @@ ], "scripts": { "dev": "run-p dev:*", - "dev:storybook": "storybook dev -p 6006", + "dev:storybook": "storybook dev -p 6006 --exact-port", "dev:lib": "vite build --mode development -w", "prebuild": "rimraf dist && mkdir dist", "build": "tsc && vite build", diff --git a/packages/react-components/src/components/Icon/IconsShowcase/constans.ts b/packages/react-components/src/components/Icon/IconsShowcase/constans.ts index 72af16fc6..e460ef800 100644 --- a/packages/react-components/src/components/Icon/IconsShowcase/constans.ts +++ b/packages/react-components/src/components/Icon/IconsShowcase/constans.ts @@ -500,4 +500,7 @@ export const IconsData: Record = { Stripe: IconGroup.Brands, Mailchimp: IconGroup.Brands, LayoutSidebarLeft: IconGroup.General, + TextAccounts: IconGroup.Brands, + TextLogoFull: IconGroup.Brands, + TextPlatform: IconGroup.Brands, }; diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss index fe23a7d7c..f3d487f2a 100644 --- a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss +++ b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.module.scss @@ -24,6 +24,7 @@ $base-class: 'product-switcher'; gap: 4px; align-items: center; justify-content: center; + height: 19px; text-decoration: none; color: var(--content-basic-secondary); } diff --git a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx index a1f06e5e1..6bf580e8a 100644 --- a/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx +++ b/packages/react-components/src/components/ProductSwitcher/ProductSwitcher.tsx @@ -1,6 +1,9 @@ import { FC, MouseEvent } from 'react'; import * as React from 'react'; +import { TextLogoFull } from '@livechat/design-system-icons'; + +import { Icon } from '../Icon'; import { Popover } from '../Popover'; import { Tooltip } from '../Tooltip'; import { Text } from '../Typography'; @@ -78,9 +81,11 @@ export const ProductSwitcher: FC = ({ className={styles[`${baseClass}__footer-link`]} > powered by - - text| - + diff --git a/packages/react-components/src/components/ProductSwitcher/constants.ts b/packages/react-components/src/components/ProductSwitcher/constants.ts index 20f6ef710..352017a9b 100644 --- a/packages/react-components/src/components/ProductSwitcher/constants.ts +++ b/packages/react-components/src/components/ProductSwitcher/constants.ts @@ -1,11 +1,12 @@ import { - AccountCircle, ChatBotMono, HelloMono, HelpDeskMono, KnowledgeBaseMono, LiveChatMono, OpenWidgetMono, + TextAccounts, + TextPlatform, } from '@livechat/design-system-icons'; import { OpenWidgetLogoUri } from './openwidgetLogoUri'; @@ -83,7 +84,7 @@ export const ProductSwitcherProducts: IProductOption[] = [ { id: 'platform', name: 'Platform', - icon: HelloMono, + icon: TextPlatform, iconColor: 'var(--content-locked-black)', backgroundColors: { main: 'var(--products-platform)', @@ -95,7 +96,7 @@ export const ProductSwitcherProducts: IProductOption[] = [ { id: 'accounts', name: 'Accounts', - icon: AccountCircle, // TODO - replace with proper icon + icon: TextAccounts, backgroundColors: { main: 'var(--surface-locked-white)', second: 'var(--products-livechat)',