lm-web-controls 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lm-web-controls",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "leadmetrics-lm-web-controls",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/blocks/copyright/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type CopyrightProps = {
   name: string;
-  className: string;
+  className?: string;
 };
 
 export function Copyright({ name, className }: CopyrightProps) {

package/src/blocks/email/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type EmailProps = {
   value: string;
-  className: string;
+  className?: string;
 };
 
 export function Email({ value, className }: EmailProps) {

package/src/blocks/instaFeed/index.tsx

@@ -7,7 +7,13 @@ import { useEffect, useState } from "react";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-type InstaFeedProps = { apiKey: string; className: string };
+import "../../styles/style.css";
+
+type InstaFeedProps = {
+  apiKey: string;
+  sliderClassName?: string;
+  imgClassName?: string;
+};
 
 type InstagramPost = {
   id: string;
@@ -19,7 +25,11 @@ type InstagramPost = {
 
 type InstagramPostList = InstagramPost[];
 
-export function InstaFeed({ apiKey, className }: InstaFeedProps) {
+export function InstaFeed({
+  apiKey,
+  sliderClassName,
+  imgClassName,
+}: InstaFeedProps) {
   const [igFeeds, setIgFeeds] = useState<InstagramPostList | null>(null);
   const [fetchStatus, setFetchStatus] = useState<string>("Loading feeds...");
 
@@ -78,10 +88,10 @@ export function InstaFeed({ apiKey, className }: InstaFeedProps) {
   return (
     <>
       {igFeeds ? (
-        <Slider {...settings} className={className}>
+        <Slider {...settings} className={`${sliderClassName} lm-slider`}>
           {igFeeds?.map((item, i) => {
             return (
-              <div key={crypto.randomUUID()}>
+              <div key={crypto.randomUUID()} className={imgClassName}>
                 <img src={item.media_url} alt={`image-${i}`} />
               </div>
             );

package/src/blocks/map/index.tsx

@@ -3,12 +3,11 @@ import React from "react";
 type MapProps = {
   id?: string;
   address: string;
-  height: string | number;
-  width: string | number;
-  key: string;
+  height?: string | number;
+  width?: string | number;
 };
 
-export function Map({ id, address, height, width, key }: MapProps) {
+export function Map({ id, address, height, width }: MapProps) {
   return (
     <iframe
       id={id}
@@ -16,7 +15,7 @@ export function Map({ id, address, height, width, key }: MapProps) {
       height={height}
       loading="lazy"
       referrerPolicy="no-referrer-when-downgrade"
-      src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&q=place_id:ChIJaZ6ne_U_rjsRFN98AFmq6hg`}
+      src={address}
     ></iframe>
   );
 }

package/src/blocks/phone/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 type PhoneProps = {
   value: string;
-  country: string;
-  className: string;
+  country?: string;
+  className?: string;
 };
 
 export function Phone({ value, country, className }: PhoneProps) {

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from "./blocks/copyright";
 export * from "./blocks/email";
 export * from "./blocks/instaFeed";
-//export * from "./blocks/map";
+export * from "./blocks/map";
 export * from "./blocks/phone";

package/src/styles/style.css

@@ -0,0 +1,4 @@
+.lm-slider {
+  height: 100vh;
+  background: red;
+}

package/types/lm-web-controls.d.ts

@@ -3,25 +3,36 @@ import React, { Component, ChangeEvent } from "react";
 declare module "lm-web-controls" {
   type EmailProps = {
     value: string;
-    className: string;
+    className?: string;
   };
-  export const Email: React.FC<EmailProps>;
 
   type CopyrightProps = {
     name: string;
-    className: string;
+    className?: string;
   };
-  export const Copyright: React.FC<CopyrightProps>;
 
   type PhoneProps = {
     value: string;
-    country: string;
-    className: string;
+    country?: string;
+    className?: string;
   };
-  export const Phone: React.FC<PhoneProps>;
 
-  //email
+  type MapProps = {
+    id?: string;
+    address: string;
+    height?: string | number;
+    width?: string | number;
+  };
 
-  type InstaFeedProps = { apiKey: string; className: string };
+  type InstaFeedProps = {
+    apiKey: string;
+    sliderClassName?: string;
+    imgClassName?: string;
+  };
+
+  export const Email: React.FC<EmailProps>;
+  export const Copyright: React.FC<CopyrightProps>;
+  export const Phone: React.FC<PhoneProps>;
+  export const Map: React.FC<MapProps>;
   export const InstaFeed: React.FC<InstaFeedProps>;
 }