@redneckz/wildless-cms-uni-blocks 0.6.48 → 0.6.49

package/mobile/lib/components/Footer/MediaButton.js

@@ -30,7 +30,11 @@ const ICONS_MAP = [
         label: 'Google Play',
     },
 ];
-export const MediaButton = JSX(({ version = 'primary', ...rest }) => {
+const BUTTON_SIZE = {
+    default: ' w-14 h-14',
+    small: ' w-12 h-12',
+};
+export const MediaButton = JSX(({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
     const link = useLink();
     const { href, onClick } = link(rest);
     const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
@@ -40,7 +44,8 @@ export const MediaButton = JSX(({ version = 'primary', ...rest }) => {
     const classes = version === 'secondary'
         ? 'bg-white hover:bg-secondary-hover'
         : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
-    const isPrimary = version === 'primary';
-    return (_jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (_jsx(Img, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+    const isPrimary = version === 'primary' ? 'hover:text-black' : '';
+    const rounded = isRounded ? 'rounded-full' : 'rounded-md';
+    return (_jsx("a", { className: `flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (_jsx(Img, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
 });
 //# sourceMappingURL=MediaButton.js.map

package/mobile/lib/components/Footer/MediaButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaButton.js","sourceRoot":"","sources":["../../../src/components/Footer/MediaButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAG9C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,SAAS,GAIV;IACH;QACE,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC;QACjC,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;QAC9B,KAAK,EAAE,UAAU;KAClB;IACD;QACE,OAAO,EAAE,CAAC,QAAQ,CAAC;QACnB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACxB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,OAAO,EAAE,CAAC,OAAO,CAAC;QAClB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACxB,KAAK,EAAE,eAAe;KACvB;IACD;QACE,OAAO,EAAE,CAAC,gBAAgB,CAAC;QAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;QAC3B,KAAK,EAAE,WAAW;KACnB;IACD;QACE,OAAO,EAAE,CAAC,iBAAiB,CAAC;QAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;QAChC,KAAK,EAAE,aAAa;KACrB;CACF,CAAC;AAOF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GACnB,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAEhF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,MAAM,OAAO,GACX,OAAO,KAAK,WAAW;QACrB,CAAC,CAAC,mCAAmC;QACrC,CAAC,CAAC,wFAAwF,CAAC;IAE/F,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IAExC,OAAO,CACL,YACE,SAAS,EAAE,0EAA0E,OAAO,IAC1F,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EACnC,EAAE,EACF,IAAI,EAAE,IAAI,gBACE,KAAK,EACjB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,GAAG,IACF,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAC/B,cAAc,EAAC,wBAAwB,EACvC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,KAAK,SACL,CACH,CAAC,CAAC,CAAC,IAAI,GACN,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"MediaButton.js","sourceRoot":"","sources":["../../../src/components/Footer/MediaButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAG9C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,SAAS,GAIV;IACH;QACE,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC;QACjC,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;QAC9B,KAAK,EAAE,UAAU;KAClB;IACD;QACE,OAAO,EAAE,CAAC,QAAQ,CAAC;QACnB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACxB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,OAAO,EAAE,CAAC,OAAO,CAAC;QAClB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACxB,KAAK,EAAE,eAAe;KACvB;IACD;QACE,OAAO,EAAE,CAAC,gBAAgB,CAAC;QAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;QAC3B,KAAK,EAAE,WAAW;KACnB;IACD;QACE,OAAO,EAAE,CAAC,iBAAiB,CAAC;QAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;QAChC,KAAK,EAAE,aAAa;KACrB;CACF,CAAC;AAWF,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAC5B,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,UAAU,GAAG,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC9E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GACnB,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAEhF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,MAAM,OAAO,GACX,OAAO,KAAK,WAAW;QACrB,CAAC,CAAC,mCAAmC;QACrC,CAAC,CAAC,wFAAwF,CAAC;IAE/F,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAE1D,OAAO,CACL,YACE,SAAS,EAAE,qDAAqD,OAAO,IAAI,OAAO,IAAI,SAAS,IAAI,WAAW,CAAC,UAAU,CAAC,EAAE,EAC5H,IAAI,EAAE,IAAI,gBACE,KAAK,EACjB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,GAAG,IACF,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAC/B,cAAc,EAAC,wBAAwB,EACvC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,KAAK,SACL,CACH,CAAC,CAAC,CAAC,IAAI,GACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/src/components/Footer/MediaButton.tsx

@@ -37,49 +37,59 @@ const ICONS_MAP: Array<{
   },
 ];
 
+export type ButtonSize = 'default' | 'small';
+
 interface MediaButtonProps {
   href?: string;
   version?: BlockVersion;
+  isRounded?: boolean;
+  buttonSize?: ButtonSize;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ version = 'primary', ...rest }) => {
-  const link = useLink();
-  const { href, onClick } = link(rest);
+const BUTTON_SIZE = {
+  default: ' w-14 h-14',
+  small: ' w-12 h-12',
+};
+
+export const MediaButton = JSX<MediaButtonProps>(
+  ({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+    const link = useLink();
+    const { href, onClick } = link(rest);
 
-  const { icon, label } =
-    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { icon, label } =
+      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-  if (!icon) {
-    return null;
-  }
+    if (!icon) {
+      return null;
+    }
 
-  const classes =
-    version === 'secondary'
-      ? 'bg-white hover:bg-secondary-hover'
-      : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
+    const classes =
+      version === 'secondary'
+        ? 'bg-white hover:bg-secondary-hover'
+        : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
 
-  const isPrimary = version === 'primary';
+    const isPrimary = version === 'primary' ? 'hover:text-black' : '';
+    const rounded = isRounded ? 'rounded-full' : 'rounded-md';
 
-  return (
-    <a
-      className={`flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${
-        isPrimary ? 'hover:text-black' : ''
-      }`}
-      href={href}
-      aria-label={label}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={onClick}
-    >
-      {icon ? (
-        <Img
-          image={getIconWithVersion(icon)}
-          imageClassName="group-hover:text-white"
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-    </a>
-  );
-});
+    return (
+      <a
+        className={`flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`}
+        href={href}
+        aria-label={label}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClick}
+      >
+        {icon ? (
+          <Img
+            image={getIconWithVersion(icon)}
+            imageClassName="group-hover:text-white"
+            width="24"
+            height="24"
+            asSVG
+          />
+        ) : null}
+      </a>
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.48",
+  "version": "0.6.49",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Footer/MediaButton.tsx

@@ -37,49 +37,59 @@ const ICONS_MAP: Array<{
   },
 ];
 
+export type ButtonSize = 'default' | 'small';
+
 interface MediaButtonProps {
   href?: string;
   version?: BlockVersion;
+  isRounded?: boolean;
+  buttonSize?: ButtonSize;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ version = 'primary', ...rest }) => {
-  const link = useLink();
-  const { href, onClick } = link(rest);
+const BUTTON_SIZE = {
+  default: ' w-14 h-14',
+  small: ' w-12 h-12',
+};
+
+export const MediaButton = JSX<MediaButtonProps>(
+  ({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+    const link = useLink();
+    const { href, onClick } = link(rest);
 
-  const { icon, label } =
-    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { icon, label } =
+      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-  if (!icon) {
-    return null;
-  }
+    if (!icon) {
+      return null;
+    }
 
-  const classes =
-    version === 'secondary'
-      ? 'bg-white hover:bg-secondary-hover'
-      : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
+    const classes =
+      version === 'secondary'
+        ? 'bg-white hover:bg-secondary-hover'
+        : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
 
-  const isPrimary = version === 'primary';
+    const isPrimary = version === 'primary' ? 'hover:text-black' : '';
+    const rounded = isRounded ? 'rounded-full' : 'rounded-md';
 
-  return (
-    <a
-      className={`flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${
-        isPrimary ? 'hover:text-black' : ''
-      }`}
-      href={href}
-      aria-label={label}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={onClick}
-    >
-      {icon ? (
-        <Img
-          image={getIconWithVersion(icon)}
-          imageClassName="group-hover:text-white"
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-    </a>
-  );
-});
+    return (
+      <a
+        className={`flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`}
+        href={href}
+        aria-label={label}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClick}
+      >
+        {icon ? (
+          <Img
+            image={getIconWithVersion(icon)}
+            imageClassName="group-hover:text-white"
+            width="24"
+            height="24"
+            asSVG
+          />
+        ) : null}
+      </a>
+    );
+  },
+);

package/src/components/Footer/SocialMedia.tsx

@@ -1,21 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { MediaButton } from './MediaButton';
+import { type ButtonSize, MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
   media?: Omit<LinkProps, 'text'>[];
   version?: BlockVersion;
+  isRounded?: boolean;
+  buttonSize?: ButtonSize;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version, children }) => (
-  <div className="font-sans">
-    <div className={`flex gap-2.5 ${className}`}>
-      {media?.map((_, index) => (
-        <MediaButton key={String(index)} version={version} {..._} />
-      ))}
+export const SocialMedia = JSX<SocialMediaProps>(
+  ({ className = '', media, version, isRounded = false, buttonSize, children }) => (
+    <div className="font-sans">
+      <div className={`flex gap-2.5 ${className}`}>
+        {media?.map((_, index) => (
+          <MediaButton
+            key={String(index)}
+            version={version}
+            isRounded={isRounded}
+            buttonSize={buttonSize}
+            {..._}
+          />
+        ))}
+      </div>
+      <span className="text-s-light text-secondary-text">{children}</span>
     </div>
-    <span className="text-s-light text-secondary-text">{children}</span>
-  </div>
-));
+  ),
+);