Feat/telegram account link

.gitignore

@@ -1,8 +1,3 @@
-*.iml
-*.tfstate
-.terraform
-yootheme
-
 # Logs
 logs
 *.log
@@ -14,9 +9,6 @@ pids
 *.pid
 *.seed
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
 # Coverage directory used by tools like istanbul
 coverage
 
@@ -58,24 +50,10 @@ dist
 # env vars
 .env
 
-# Google Cloud Credentials
-credentials.json
-
 # unique for each install yarn states
 .yarn/build-state.yml
 .yarn/install-state.gz
 
-# local
-.ini
-.ignore
-
-# Exclude all wp themes except current one
-wp-content/themes
-wp-content/themes/!misik!/
-
-# exclude personal files
-effectivnayarabota1/
-
 # tgsnake cache files
 myapp.cache
 myapp.session

fragments/footer-fragment/src/footer-component.tsx

@@ -38,12 +38,14 @@ export const Footer: FC<FooterProps> = memo(({
   const navigationItems = extractFragments(navigationItemsType, 'contentAddons', navigation)
   const mainPage = extractFragment('contentAddons', 'main', navigation)
 
+  const telegramContanctsObj = extractFragment('contactAddons', 'linkTelegram', contactsData)
+
   const appointmentPhone = footerObj?.title
   const telephone = contactsObj?.telephone
   const address = contactsObj?.address
   const workingHours = contactsObj?.workinghours
   const linkVk = contactsObj?.linkVk
-  const linkFb = contactsObj?.linkFb
+  const linkTelegram = telegramContanctsObj?.address
   const by = new Map()
   by.set('title', byObj?.title)
   by.set('content', byObj?.highlightedtext)
@@ -81,7 +83,7 @@ export const Footer: FC<FooterProps> = memo(({
                   </Box>
                 </Box>
               </Box>
-              <SocialLinks linkVk={linkVk} linkFb={linkFb} />
+              <SocialLinks linkTelegram={linkTelegram} linkVk={linkVk} />
             </Row>
             <Layout flexBasis={[24, 24, 40]} />
             <Box width={90} height={136} display={['flex', 'flex', 'none']}>

fragments/footer-fragment/src/footer.interface.ts

@@ -4,7 +4,6 @@ import type { ContactsDataType }  from '@globals/data'
 export interface ContactAddons {
   address: string
   email: string
-  linkFb: string
   linkVk: string
   fragmentId: string
   telephone: string

globals/data/src/queries/get-contacts-data/get-contacts-data.query.ts

@@ -7,7 +7,6 @@ const GET_CONTACTS = gql`
         contactAddons {
           address
           email
-          linkFb
           linkVk
           telephone
           workinghours

site/fragments/contacts-fragment/src/contacts-information/contacts-information.component.tsx

@@ -26,8 +26,8 @@ export const ContactsInformation: FC<ContactsInformationProps> = memo((props) =>
     contactsTitle,
     telephone,
     email,
+    linkTelegram,
     linkVk,
-    linkFb,
   } = contactsData
 
   return (
@@ -74,8 +74,8 @@ export const ContactsInformation: FC<ContactsInformationProps> = memo((props) =>
           </Column>
         </Layout>
       </Column>
-      <Box display={['none', 'none', 'flex']} width='110px'>
-        <SocialLinks linkVk={linkVk} linkFb={linkFb} />
+      <Box display={['none', 'none', 'flex']} width={112}>
+        <SocialLinks linkTelegram={linkTelegram} linkVk={linkVk} />
       </Box>
     </Column>
   )

site/fragments/contacts-fragment/src/contacts.interface.ts

@@ -14,6 +14,6 @@ export type ContactsDataType = {
   contactsTitle: string
   telephone: string
   email: string
+  linkTelegram: string
   linkVk: string
-  linkFb: string
 }

site/fragments/contacts-fragment/src/hooks/use-contacts.hook.ts

@@ -11,12 +11,14 @@ export const useContacts: UseContactsType = (props) => {
 
   const contactsObj = extractFragment('contactAddons', 'info', contactsData)
 
+  const telegramContanctsObj = extractFragment('contactAddons', 'linkTelegram', contactsData)
+
   const address = contactsObj?.address
   const workingHours = contactsObj?.workinghours
   const telephone = contactsObj?.telephone
   const email = contactsObj?.email
   const linkVk = contactsObj?.linkVk
-  const linkFb = contactsObj?.linkFb
+  const linkTelegram = telegramContanctsObj?.address
 
   return {
     addressTitle,
@@ -27,6 +29,6 @@ export const useContacts: UseContactsType = (props) => {
     telephone,
     email,
     linkVk,
-    linkFb,
+    linkTelegram,
   }
 }

site/fragments/hero-fragment/src/hero.component.tsx

@@ -41,6 +41,8 @@ const Hero = forwardRef((
   const contactsObj = extractFragment('contactAddons', 'info', contactsData)
   const backgroundObj = extractFragment('contentAddons', 'hero', uiData)
 
+  const telegramContanctsObj = extractFragment('contactAddons', 'linkTelegram', contactsData)
+
   const title = new Map([
     ['title', leadObj?.title],
     ['highlighted', leadObj?.highlightedtext],
@@ -53,7 +55,7 @@ const Hero = forwardRef((
   const anchor = anchorObj?.title
   const phone = contactsObj?.telephone
   const linkVk = contactsObj?.linkVk
-  const linkFb = contactsObj?.linkFb
+  const linkTelegram = telegramContanctsObj?.address
 
   return (
     <>
@@ -155,7 +157,7 @@ const Hero = forwardRef((
               </Box>
               <Layout flexBasis={[0, 0, 32]} flexShrink={0} flexGrow={[1, 1, 0]} />
               <Box width={96} justifyContent='flex-end'>
-                <SocialLinksDark linkVk={linkVk} linkFb={linkFb} />
+                <SocialLinksDark linkTelegram={linkTelegram} linkVk={linkVk} />
               </Box>
             </Row>
           </Box>

ui/icons/src/TelegramIcon.tsx

@@ -0,0 +1,24 @@
+import { useTheme }  from '@emotion/react'
+/* eslint-disable */
+import React         from 'react'
+
+import { IconProps } from '../icons.interfaces.js'
+
+export const TelegramIcon = React.memo((props: IconProps) => {
+  const theme: any = useTheme()
+  return (
+    <svg
+      width='1em'
+      height='1em'
+      viewBox='0 0 18 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M6.02681 8.17556C5.12524 8.5692 4.19891 8.97368 3.35184 9.44025C2.90954 9.7641 3.49739 9.99319 4.04891 10.2081L4.05017 10.2086C4.13742 10.2425 4.22372 10.2762 4.30489 10.3098C4.37276 10.3307 4.44176 10.3526 4.5117 10.3749C5.12509 10.5703 5.80901 10.7882 6.40451 10.4604C7.38274 9.8985 8.30587 9.24885 9.22834 8.59969C9.53055 8.38699 9.83269 8.17436 10.1367 7.96489L10.1846 7.93399C10.4435 7.7661 11.0259 7.38859 10.8105 7.90879C10.3015 8.46536 9.75643 8.95808 9.20837 9.45347L9.20681 9.45487C8.83706 9.78904 8.46596 10.1244 8.10371 10.4814C7.78822 10.7378 7.46059 11.2533 7.81388 11.6123C8.62657 12.1812 9.45194 12.7363 10.2768 13.2912L10.28 13.2933C10.5487 13.474 10.8175 13.6548 11.0857 13.836C11.5402 14.1989 12.2507 13.9053 12.3506 13.3382C12.3941 13.0828 12.4378 12.8274 12.4815 12.572L12.4843 12.5556C12.7309 11.1138 12.9776 9.67151 13.1955 8.22506C13.2251 7.99815 13.2587 7.77127 13.2923 7.54429C13.3737 6.99412 13.4552 6.44329 13.4807 5.89016C13.4151 5.33816 12.7458 5.45955 12.3733 5.58367C10.4589 6.31215 8.56354 7.09462 6.67571 7.8909C6.46185 7.98563 6.24506 8.08028 6.02681 8.17556Z'
+        fill={theme.colors[props.color || 0] || props.color || '#252C32'}
+      />
+    </svg>
+  )
+})

ui/icons/src/index.ts

@@ -11,4 +11,5 @@ export * from './FooterLogoIcon.js'
 export * from './LogoIcon.js'
 export * from './MenuIcon.js'
 export * from './VkIcon.js'
+export * from './TelegramIcon.js'
 export * from './WheelIcon.js'

ui/social-links/src/social-links-dark.component.tsx

@@ -5,29 +5,29 @@ import type { SocialLinksProps } from './social-links.interface.js'
 import React                     from 'react'
 
 import { Button }                from '@ui/button'
+import { TelegramIcon }          from '@ui/icons'
 import { VkIcon }                from '@ui/icons'
-import { FacebookIcon }          from '@ui/icons'
 import { Box }                   from '@ui/layout'
 import { Layout }                from '@ui/layout'
 import { Link }                  from '@ui/link'
 
-const SocialLinksDark: FC<SocialLinksProps> = ({ linkVk, linkFb }) => (
+const SocialLinksDark: FC<SocialLinksProps> = ({ linkTelegram, linkVk }) => (
   <Box width='100%' justifyContent='flex-end'>
-    <Link href={linkVk} target='_blank'>
+    <Link href={linkTelegram} target='_blank'>
       <Box width={40}>
         <Button color='darkSocial' size='small'>
           <Layout>
-            <VkIcon width={21} height={12} color='white' />
+            <TelegramIcon width={28} height={28} color='white' />
           </Layout>
         </Button>
       </Box>
     </Link>
     <Layout flexBasis={16} flexShrink={0} />
-    <Link href={linkFb} target='_blank'>
+    <Link href={linkVk} target='_blank'>
       <Box width={40}>
         <Button color='darkSocial' size='small'>
           <Layout>
-            <FacebookIcon width={10} height={20} color='white' />
+            <VkIcon width={21} height={12} color='white' />
           </Layout>
         </Button>
       </Box>

ui/social-links/src/social-links.component.tsx

@@ -5,34 +5,34 @@ import type { SocialLinksProps } from './social-links.interface.js'
 import React                     from 'react'
 
 import { Button }                from '@ui/button'
-import { FacebookIcon }          from '@ui/icons'
 import { VkIcon }                from '@ui/icons'
+import { TelegramIcon }          from '@ui/icons'
 import { Box }                   from '@ui/layout'
 import { Layout }                from '@ui/layout'
 import { Link }                  from '@ui/link'
 import { useHover }              from '@ui/utils'
 
-const SocialLinks: FC<SocialLinksProps> = ({ linkVk, linkFb }) => {
+const SocialLinks: FC<SocialLinksProps> = ({ linkTelegram, linkVk }) => {
+  const [hoverTelegram, hoverTelegramProps] = useHover()
   const [hoverVk, hoverVkProps] = useHover()
-  const [hoverFb, hoverFbProps] = useHover()
 
   return (
     <Box width='100%' justifyContent='flex-end'>
-      <Link href={linkVk} target='_blank'>
-        <Box width={48} height={48} {...hoverVkProps}>
+      <Link href={linkTelegram} target='_blank'>
+        <Box width={48} height={48} {...hoverTelegramProps}>
           <Button color='radius'>
             <Layout>
-              <VkIcon width={28} height={28} color={hoverVk ? 'white' : 'black'} />
+              <TelegramIcon width={36} height={36} color={hoverTelegram ? 'white' : 'black'} />
             </Layout>
           </Button>
         </Box>
       </Link>
       <Layout flexBasis={16} flexShrink={0} />
-      <Link href={linkFb} target='_blank'>
-        <Box width={48} height={48} {...hoverFbProps}>
+      <Link href={linkVk} target='_blank'>
+        <Box width={48} height={48} {...hoverVkProps}>
           <Button color='radius'>
             <Layout>
-              <FacebookIcon width={28} height={28} color={hoverFb ? 'white' : 'black'} />
+              <VkIcon width={28} height={28} color={hoverVk ? 'white' : 'black'} />
             </Layout>
           </Button>
         </Box>

ui/social-links/src/social-links.interface.ts

@@ -1,4 +1,4 @@
 export interface SocialLinksProps {
+  linkTelegram: string
   linkVk: string
-  linkFb: string
 }