@redneckz/wildless-cms-uni-blocks 0.6.15 → 0.6.16

package/mobile/src/components/ContentPage/renderContentPageHead.tsx

@@ -5,15 +5,19 @@ export function renderContentPageHead(data: ContentPageMeta) {
   const { description, keywords, canonical, robots } = main || {};
 
   return [
-    <title>{title}</title>,
-    <meta name="viewport" content="width=device-width, initial-scale=1" />,
-    description ? <meta name="description" content={description} /> : null,
-    keywords ? <meta name="keywords" content={keywords.join(',')} /> : null,
-    robots ? <meta name="robots" content={robots.join(',')} /> : null,
+    <title key="title">{title}</title>,
+    <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />,
+    description ? <meta key="description" name="description" content={description} /> : null,
+    keywords ? <meta key="keywords" name="keywords" content={keywords.join(',')} /> : null,
+    robots ? <meta key="robots" name="robots" content={robots.join(',')} /> : null,
     renderOpenGraph(og),
     renderTwitter(twitter),
-    canonical ? <link rel="canonical" href={canonical} /> : null,
-    jsonLd ? <script type="application/ld+json">{jsonLd}</script> : null,
+    canonical ? <link key="canonical" rel="canonical" href={canonical} /> : null,
+    jsonLd ? (
+      <script key="jsonLd" type="application/ld+json">
+        {jsonLd}
+      </script>
+    ) : null,
   ].filter(Boolean);
 }
 

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -13,29 +13,38 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className, label, icon, dataTheme = '', onClick }) => (
-    <button
-      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
-        className || ''
-      }`}
-      data-theme={dataTheme}
-      onClick={onClick}
-    >
-      <span className="text-h4 pr-3">{label}</span>
-      {icon ? (
-        <Img
-          image={{
-            icon,
-            iconVersion: 'white',
-          }}
-          className="flex-shrink-0 my-auto"
-          width="20"
-          height="20"
-          asSVG
-        />
-      ) : null}
-    </button>
-  ),
+  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+    const STATE_STYLE =
+      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+
+    return (
+      <button
+        className={[
+          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
+          STATE_STYLE,
+          DIMENSIONS_STYLE,
+          className,
+        ].join(' ')}
+        data-theme={dataTheme}
+        onClick={onClick}
+      >
+        <span className="text-h4 pr-3">{label}</span>
+        {icon ? (
+          <Img
+            image={{
+              icon,
+              iconVersion: 'white',
+            }}
+            className="flex-shrink-0 my-auto"
+            width="20"
+            height="20"
+            asSVG
+          />
+        ) : null}
+      </button>
+    );
+  },
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {

package/package.json

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

package/src/components/ContentPage/renderContentPageHead.tsx

@@ -5,15 +5,19 @@ export function renderContentPageHead(data: ContentPageMeta) {
   const { description, keywords, canonical, robots } = main || {};
 
   return [
-    <title>{title}</title>,
-    <meta name="viewport" content="width=device-width, initial-scale=1" />,
-    description ? <meta name="description" content={description} /> : null,
-    keywords ? <meta name="keywords" content={keywords.join(',')} /> : null,
-    robots ? <meta name="robots" content={robots.join(',')} /> : null,
+    <title key="title">{title}</title>,
+    <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />,
+    description ? <meta key="description" name="description" content={description} /> : null,
+    keywords ? <meta key="keywords" name="keywords" content={keywords.join(',')} /> : null,
+    robots ? <meta key="robots" name="robots" content={robots.join(',')} /> : null,
     renderOpenGraph(og),
     renderTwitter(twitter),
-    canonical ? <link rel="canonical" href={canonical} /> : null,
-    jsonLd ? <script type="application/ld+json">{jsonLd}</script> : null,
+    canonical ? <link key="canonical" rel="canonical" href={canonical} /> : null,
+    jsonLd ? (
+      <script key="jsonLd" type="application/ld+json">
+        {jsonLd}
+      </script>
+    ) : null,
   ].filter(Boolean);
 }
 

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -13,29 +13,38 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className, label, icon, dataTheme = '', onClick }) => (
-    <button
-      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
-        className || ''
-      }`}
-      data-theme={dataTheme}
-      onClick={onClick}
-    >
-      <span className="text-h4 pr-3">{label}</span>
-      {icon ? (
-        <Img
-          image={{
-            icon,
-            iconVersion: 'white',
-          }}
-          className="flex-shrink-0 my-auto"
-          width="20"
-          height="20"
-          asSVG
-        />
-      ) : null}
-    </button>
-  ),
+  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+    const STATE_STYLE =
+      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+
+    return (
+      <button
+        className={[
+          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
+          STATE_STYLE,
+          DIMENSIONS_STYLE,
+          className,
+        ].join(' ')}
+        data-theme={dataTheme}
+        onClick={onClick}
+      >
+        <span className="text-h4 pr-3">{label}</span>
+        {icon ? (
+          <Img
+            image={{
+              icon,
+              iconVersion: 'white',
+            }}
+            className="flex-shrink-0 my-auto"
+            width="20"
+            height="20"
+            asSVG
+          />
+        ) : null}
+      </button>
+    );
+  },
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {