feat(resource-url): se agrega nuevo tipo de recurso tipo url (#652)

Co-authored-by: Daniel Montoya <daniel.montoya@eclass.cl>

Author: Eriold

src/atoms/Icons/DiagonalArrow.tsx

@@ -0,0 +1,14 @@
+import { Base, BaseProps } from './Base'
+
+export function DiagonalArrow(props: BaseProps): JSX.Element {
+  return (
+    <Base {...props} w="16px" h="16px" viewBox="0 0 16 16">
+      <path
+        d="M9.207 5.793L3 12L4.414 13.414L10.621 7.207L13.414 10V3H6.414L9.207 5.793Z"
+        fill="#0189FF"
+      />
+    </Base>
+  )
+}
+
+DiagonalArrow.displayName = 'Download'

src/atoms/Icons/index.tsx

@@ -22,3 +22,4 @@ export * from './TrashCan'
 export * from './TextBubble'
 export * from './Alerts'
 export * from './Close'
+export * from './DiagonalArrow'

src/documentation/pages/Organisms/Resources.tsx

@@ -13,13 +13,21 @@ const dataFakeEvents = [
     resourceTextDownload: 'Descargar',
   },
   {
-    id: '1',
+    id: '2',
     resourceType: 'pdf',
     resourceTitle: 'Calendario semestral',
     resourceDetail: 'Fechas importantes de tus cursos',
     resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
     resourceTextDownload: 'Descargar',
   },
+  {
+    id: '3',
+    resourceType: 'url',
+    resourceTitle: 'Enlace recomendado 1',
+    resourceDetail: 'El fundador de OpenAI habla sobre el futuro ',
+    resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf',
+    resourceTextDownload: 'Ir al recurso',
+  },
 ]
 
 const ResourcesPage: FC = () => {
@@ -58,11 +66,19 @@ const ResourcesPage: FC = () => {
         <Resources {...dataFakeEvents[0]} />
         <Resources {...dataFakeEvents[1]} />
       </Box>
+      <MyTittle>Recurso de tipo url</MyTittle>
+      <MyText>
+        En el caso de que el recurso sea un enlace, el icono se mostrara con un icono de enlace con
+        solo usar resourceType = 'url'
+      </MyText>
+      <Box display="flex" gap="8px">
+        <Resources {...dataFakeEvents[2]} />
+      </Box>
 
       <MyTittle>Tipos de iconos en los recursos disponibles</MyTittle>
       <MyText>
         Existen varios tipos de iconos disponibles: Png, Gif, Ppt, Pptx, Doc, Docx, Xls, Xlsx, Csv,
-        Pdf, Mp4, Avi, Mkv, Mp3, Wav,
+        Pdf, Mp4, Avi, Mkv, Mp3, Wav, Url
       </MyText>
 
       <MyTittle>Modo de uso</MyTittle>

src/organisms/Resources/Icons/Icons.tsx

@@ -17,6 +17,7 @@ import {
   Wav,
   Xls,
   Xlsx,
+  Url,
 } from './index'
 
 interface IconsProps {
@@ -77,6 +78,8 @@ export const Icons: FC<IconsProps> = ({ type }) => {
       return <Mp4 />
     case 'mkv':
       return <Mkv />
+    case 'url':
+      return <Url />
     default:
       return null
   }

src/organisms/Resources/Icons/Url.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { Icon } from '@chakra-ui/react'
+
+import { uniqueId } from '@/services'
+
+export const Url: FC = () => {
+  const id = `clip${uniqueId()}`
+  return (
+    <Icon
+      width="33px"
+      height="32px"
+      viewBox="0 0 33 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath={`url(#${id})`}>
+        <path
+          d="M18.119 10.138L15.878 12.378C15.818 12.439 15.778 12.508 15.72 12.571C16.7848 12.7178 17.7731 13.2067 18.536 13.964C19.472 14.9028 19.9976 16.1743 19.9976 17.5C19.9976 18.8257 19.472 20.0972 18.536 21.036L13.036 26.536C12.0982 27.4738 10.8262 28.0007 9.49996 28.0007C8.1737 28.0007 6.90177 27.4738 5.96396 26.536C5.02616 25.5982 4.4993 24.3263 4.4993 23C4.4993 21.6737 5.02616 20.4018 5.96396 19.464L8.34896 17.079C8.00322 15.7711 7.92499 14.4069 8.11896 13.068L3.84296 17.343C2.34263 18.8433 1.49976 20.8782 1.49976 23C1.49976 25.1218 2.34263 27.1567 3.84296 28.657C5.34329 30.1573 7.37818 31.0002 9.49996 31.0002C11.6217 31.0002 13.6566 30.1573 15.157 28.657L20.657 23.157C21.5848 22.2315 22.2707 21.092 22.6543 19.8389C23.0379 18.5858 23.1074 17.2576 22.8566 15.9713C22.6059 14.685 22.0426 13.4802 21.2164 12.4629C20.3902 11.4456 19.3265 10.6472 18.119 10.138Z"
+          fill="#B0CFE0"
+        />
+        <path
+          d="M17.8429 3.34301L12.3429 8.84301C11.4151 9.76851 10.7292 10.908 10.3456 12.1611C9.96196 13.4142 9.89248 14.7424 10.1432 16.0287C10.394 17.315 10.9573 18.5199 11.7835 19.5371C12.6097 20.5544 13.6734 21.3528 14.8809 21.862L17.1219 19.622C17.1819 19.561 17.2289 19.493 17.2839 19.429C16.2175 19.2834 15.2276 18.7944 14.4639 18.036C13.5279 17.0972 13.0023 15.8257 13.0023 14.5C13.0023 13.1743 13.5279 11.9028 14.4639 10.964L19.9639 5.46401C20.9017 4.5262 22.1737 3.99935 23.4999 3.99935C24.1566 3.99935 24.8069 4.12869 25.4136 4.38C26.0203 4.63131 26.5716 4.99965 27.0359 5.46401C27.5003 5.92836 27.8686 6.47963 28.1199 7.08634C28.3712 7.69305 28.5006 8.34331 28.5006 9.00001C28.5006 9.6567 28.3712 10.307 28.1199 10.9137C27.8686 11.5204 27.5003 12.0717 27.0359 12.536L24.6529 14.918C25 16.2218 25.0819 17.582 24.8939 18.918L29.1569 14.655C30.6293 13.149 31.4485 11.123 31.4365 9.01685C31.4245 6.91066 30.5824 4.89416 29.093 3.40496C27.6035 1.91577 25.5869 1.07404 23.4807 1.06244C21.3745 1.05084 19.3487 1.87031 17.8429 3.34301Z"
+          fill="#B0CFE0"
+        />
+      </g>
+    </Icon>
+  )
+}

src/organisms/Resources/Icons/index.ts

@@ -16,3 +16,4 @@ export * from './Pptx'
 export * from './Wav'
 export * from './Xls'
 export * from './Xlsx'
+export * from './Url'

src/organisms/Resources/Resources.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { Box, Text, Link } from '@chakra-ui/react'
 import { Icons } from './Icons'
 import { vars } from '@/theme'
-import { Download } from '@/atoms/Icons'
+import { Download, DiagonalArrow } from '@/atoms/Icons'
 import { Ripples } from '@/atoms'
 
 interface ResourcesProps {
@@ -90,7 +90,11 @@ export const Resources: FC<ResourcesProps> = ({
               display="flex"
               m="0px"
             >
-              <Download color={vars('colors-main-deepSkyBlue')} />
+              {resourceType === 'url' ? (
+                <DiagonalArrow color={vars('colors-main-deepSkyBlue')} />
+              ) : (
+                <Download color={vars('colors-main-deepSkyBlue')} />
+              )}
               {resourceTextDownload}
             </Text>
           </Box>