From b4d73e2c44e1aaea6909ce348d95019c38bd08f4 Mon Sep 17 00:00:00 2001 From: Uzhastin-Nikita Date: Mon, 23 May 2022 14:41:43 +0300 Subject: [PATCH] feat: relocate Icon atom from WEB --- src/components/atoms/Icon/Icon.tsx | 22 ++++++ src/components/atoms/Icon/Icon.types.ts | 37 ++++++++++ src/components/atoms/Icon/Icon.utils.test.tsx | 7 ++ src/components/atoms/Icon/Icon.utils.ts | 73 +++++++++++++++++++ .../__snapshots__/Icon.utils.test.tsx.snap | 32 ++++++++ src/components/atoms/Icon/index.ts | 3 + 6 files changed, 174 insertions(+) create mode 100644 src/components/atoms/Icon/Icon.tsx create mode 100644 src/components/atoms/Icon/Icon.types.ts create mode 100644 src/components/atoms/Icon/Icon.utils.test.tsx create mode 100644 src/components/atoms/Icon/Icon.utils.ts create mode 100644 src/components/atoms/Icon/__snapshots__/Icon.utils.test.tsx.snap create mode 100644 src/components/atoms/Icon/index.ts diff --git a/src/components/atoms/Icon/Icon.tsx b/src/components/atoms/Icon/Icon.tsx new file mode 100644 index 0000000..c98fd96 --- /dev/null +++ b/src/components/atoms/Icon/Icon.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +import { Icons } from 'src/components/atoms/Icon/Icon.types' + +import { getIcon } from 'src/components/atoms/Icon/Icon.utils' + +export type IconProps = { + name: Icons | string + tooltip?: string + onClick?: () => void + className?: string +} + +export const Icon = ({ name, onClick, className, tooltip }: IconProps) => { + const IconComponent = getIcon(name) + + return ( +
+ +
+ ) +} diff --git a/src/components/atoms/Icon/Icon.types.ts b/src/components/atoms/Icon/Icon.types.ts new file mode 100644 index 0000000..ba0286f --- /dev/null +++ b/src/components/atoms/Icon/Icon.types.ts @@ -0,0 +1,37 @@ +export enum Icons { + // social + telegram = 'telegram', + facebook = 'facebook', + vkontakte = 'vkontakte', + twitter = 'twitter', + github = 'github', + + // common + gamepad = 'gamepad', + work = 'work', + house = 'house', + star = 'star', + domain = 'domain', + graphics = 'graphics', + + // details + processor = 'processor', + motherboard = 'motherboard', + videocard = 'videocard', + ram = 'ram', + close = 'close', + + // navLinks + call = 'call', + catalog = 'catalog', + delivery = 'delivery', + home = 'home', + + // benefit + dollar = 'dollar', + guality = 'guality', + tool = 'tool', + modules = 'modules', + vector = 'vector', + envelope = 'envelope' +} diff --git a/src/components/atoms/Icon/Icon.utils.test.tsx b/src/components/atoms/Icon/Icon.utils.test.tsx new file mode 100644 index 0000000..619d4ec --- /dev/null +++ b/src/components/atoms/Icon/Icon.utils.test.tsx @@ -0,0 +1,7 @@ +import { ICONS } from './Icon.utils' + +describe('Icon.utils', () => { + it('should match snapshot', () => { + expect(ICONS).toMatchSnapshot() + }) +}) diff --git a/src/components/atoms/Icon/Icon.utils.ts b/src/components/atoms/Icon/Icon.utils.ts new file mode 100644 index 0000000..8bb676a --- /dev/null +++ b/src/components/atoms/Icon/Icon.utils.ts @@ -0,0 +1,73 @@ +// benefit +import DollarImage from '../../../../public/images/benefit/dollar.svg' +import EnvelopeImage from '../../../../public/images/benefit/envelope.svg' +import GualityImage from '../../../../public/images/benefit/guality.svg' +import ModulesImage from '../../../../public/images/benefit/modules.svg' +import ToolImage from '../../../../public/images/benefit/tool.svg' +import VectorImage from '../../../../public/images/benefit/vector.svg' + +// common +import CloseImage from '../../../../public/images/common/close.svg' +import DomainImage from '../../../../public/images/common/domain.svg' +import GamepadImage from '../../../../public/images/common/gamepad.svg' +import GraphicsImage from '../../../../public/images/common/graphics.svg' + +import HouseImage from '../../../../public/images/common/house.svg' +import MotherboardImage from '../../../../public/images/common/motherboard.svg' +import ProcessorImage from '../../../../public/images/common/processor.svg' +import RamImage from '../../../../public/images/common/ram.svg' +import StarImage from '../../../../public/images/common/star.svg' +import VideocardImage from '../../../../public/images/common/videocard.svg' +import WorkImage from '../../../../public/images/common/work.svg' + +// navLinks +import CallImage from '../../../../public/images/navLinks/call.svg' +import CatalogImage from '../../../../public/images/navLinks/catalog.svg' +import DeliveryImage from '../../../../public/images/navLinks/delivery.svg' +import HomeImage from '../../../../public/images/navLinks/home.svg' + +// social +import FacebookImage from '../../../../public/images/social/facebook.svg' +import GithubImage from '../../../../public/images/social/github.svg' +import TelegramImage from '../../../../public/images/social/telegram.svg' +import TwitterImage from '../../../../public/images/social/twitter.svg' +import VKImage from '../../../../public/images/social/vkontakte.svg' + +import { Icons } from './Icon.types' + +export const ICONS: Record = { + [Icons.telegram]: TelegramImage, + [Icons.facebook]: FacebookImage, + [Icons.vkontakte]: VKImage, + [Icons.twitter]: TwitterImage, + [Icons.github]: GithubImage, + // common + [Icons.gamepad]: GamepadImage, + [Icons.work]: WorkImage, + [Icons.house]: HouseImage, + [Icons.star]: StarImage, + [Icons.domain]: DomainImage, + [Icons.graphics]: GraphicsImage, + // details + [Icons.processor]: ProcessorImage, + [Icons.motherboard]: MotherboardImage, + [Icons.videocard]: VideocardImage, + [Icons.ram]: RamImage, + [Icons.close]: CloseImage, + // navLinks + [Icons.call]: CallImage, + [Icons.catalog]: CatalogImage, + [Icons.delivery]: DeliveryImage, + [Icons.home]: HomeImage, + // benefit + [Icons.dollar]: DollarImage, + [Icons.guality]: GualityImage, + [Icons.tool]: ToolImage, + [Icons.modules]: ModulesImage, + [Icons.vector]: VectorImage, + [Icons.envelope]: EnvelopeImage +} + +export const getIcon = (name: Icons | string) => { + return ICONS[name] +} diff --git a/src/components/atoms/Icon/__snapshots__/Icon.utils.test.tsx.snap b/src/components/atoms/Icon/__snapshots__/Icon.utils.test.tsx.snap new file mode 100644 index 0000000..7c5e7f8 --- /dev/null +++ b/src/components/atoms/Icon/__snapshots__/Icon.utils.test.tsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Icon.utils should match snapshot 1`] = ` +Object { + "call": "svg", + "catalog": "svg", + "close": "svg", + "delivery": "svg", + "dollar": "svg", + "domain": "svg", + "envelope": "svg", + "facebook": "svg", + "gamepad": "svg", + "github": "svg", + "graphics": "svg", + "guality": "svg", + "home": "svg", + "house": "svg", + "modules": "svg", + "motherboard": "svg", + "processor": "svg", + "ram": "svg", + "star": "svg", + "telegram": "svg", + "tool": "svg", + "twitter": "svg", + "vector": "svg", + "videocard": "svg", + "vkontakte": "svg", + "work": "svg", +} +`; diff --git a/src/components/atoms/Icon/index.ts b/src/components/atoms/Icon/index.ts new file mode 100644 index 0000000..adc1640 --- /dev/null +++ b/src/components/atoms/Icon/index.ts @@ -0,0 +1,3 @@ +export * from './Icon' +export * from './Icon.types' +export * from './Icon.utils'