feat: mapa (#218)

* feat: se agrega componente mapa

* fix: se agrega una correccion para mapa o iframe

* fix: se actualiza el enlace a el mapa de buenos aires como llego.

* fix: se agrega con la direccion de ejemplo

* fix: actualizacion de direccion

* fix: actualizacion de estilos y maquetado segun nuevas card, y pull de master

* fix: correccion de MapaCard a MapCard

* fix: correccion de mapa a map, nombre de la carpeta

.storybook/preview.ts

@@ -33,6 +33,7 @@ const headers = [
   'componentes-listas-lista-de-pasos',
   'componentes-listas-lista-de-enlaces',
   'componentes-listas-lista-informativa',
+  'componentes-mapa',
   'componentes-mensajes-de-estado',
   'componentes-migas-de-pan',
   'componentes-modal',

src/components/Map/Map.stories.scss

@@ -0,0 +1,3 @@
+.storybook__container-card-map {
+  max-width: 340px;
+}

src/components/Map/Map.stories.tsx

@@ -0,0 +1,40 @@
+// Base
+import React from 'react';
+import './Map.stories.scss';
+
+// Addons
+import { withA11y } from '@storybook/addon-a11y';
+import { MapCard } from './index';
+
+// Configuración general del componente
+export default {
+  title: 'Componentes|Mapa',
+  decorators: [withA11y]
+};
+
+export const Map = (): JSX.Element => {
+  const iframeElement = (
+    <iframe
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.561313314447!2d-58.40988132452283!3d-34.64052465944252!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccb0de7f4d675%3A0xfc2ef5324296a64!2sUspallata%203160%2C%20C1437JCL%20CABA!5e0!3m2!1ses!2sar!4v1704218461718!5m2!1ses!2sar"
+      width="600"
+      height="146"
+      title="Mapa de como llegar"
+      style={{ border: '0' }}
+      allowFullScreen
+      loading="lazy"
+      tabIndex={-1}
+      referrerPolicy="no-referrer-when-downgrade"></iframe>
+  );
+  return (
+    <div className="storybook__container-card-map">
+      <MapCard
+        title="Ubicación"
+        description="Av. Uspallata 3160"
+        iframe={iframeElement}
+        link="https://mapa.buenosaires.gob.ar/comollego/?lat=-34.640340&lng=-58.407032&zl=15&modo=transporte&dir=Uspallata+3160"
+      />
+    </div>
+  );
+};
+
+Map.story = { name: 'Mapa' };

src/components/Map/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export interface MapProps {
+  title: string;
+  description?: string;
+  iframe: React.ReactNode;
+  link?: string;
+}
+
+export const MapCard: React.FC<MapProps> = (props: React.PropsWithChildren<MapProps>) => {
+  const { title, description, iframe, link } = props;
+
+  return (
+    <div className="card card-map">
+      <div className="card-body">
+        <h3 className="card-title">{title}</h3>
+        <p className="card-text">{description}</p>
+        <div className="card-iframe">{iframe}</div>
+        <a href={link} className="btn btn-primary btn-lg btn-block" target="_blank" rel="noreferrer" tabIndex={0}>
+          Cómo llego
+        </a>
+      </div>
+    </div>
+  );
+};

src/scss/components/_map.scss

@@ -0,0 +1,26 @@
+.card-map {
+  .card-body {
+    .card-title {
+      @extend .h4;
+      margin-bottom: 0;
+    }
+
+    .card-text {
+      margin-top: 0.25rem;
+    }
+
+    .card-iframe {
+      max-height: 146px;
+      margin: 1rem 0;
+      iframe,
+      div {
+        width: 100%;
+        max-height: 146px;
+        aspect-ratio: 16 / 9;
+        object-fit: cover;
+        outline: none;
+        border-radius: 8px;
+      }
+    }
+  }
+}

src/scss/obelisco.scss

@@ -45,6 +45,7 @@ $theme-colors: map-remove($theme-colors, 'light', 'dark', 'warning');
 @import 'components/list-group';
 @import 'components/list-informative';
 @import 'components/modal';
+@import 'components/map';
 @import 'components/nav';
 @import 'components/navbar';
 @import 'components/pagination';