@thairath/tr-design-system 0.2.11 → 0.2.12

package/dist/index.esm.js

@@ -3074,14 +3074,14 @@ var TROlineENLogo = _a => {
     fill: getColor('#000000', fill)
   }), /*#__PURE__*/React.createElement("path", {
     d: "M20 0C8.95 0 0 8.95 0 20C0 31.05 8.95 40 20 40C31.05 40 40 31.05 40 20C40 8.95 31.05 0 20 0ZM29.7 15.75L27.19 17.59C26.92 17.79 26.55 17.72 26.36 17.43L26.01 16.88C25.83 16.6 25.4 16.36 25.07 16.36H22.91C22.57 16.36 22.07 16.52 21.8 16.72L21.57 16.89C21.3 17.09 20.98 17.51 20.86 17.83L17.29 27.59C17.17 27.91 17.36 28.17 17.69 28.17H18.28C18.62 28.17 18.8 28.43 18.68 28.75L18.11 30.33C17.99 30.65 17.62 30.91 17.29 30.91H9.1C8.76 30.91 8.58 30.65 8.7 30.33L9.27 28.75C9.36 28.51 9.59 28.31 9.84 28.22C9.92 28.19 10.01 28.17 10.1 28.17H11.01C11.35 28.17 11.72 27.91 11.83 27.59L16.06 16.02C16.18 15.7 16.49 15.28 16.76 15.08L19.48 13.08C19.75 12.88 20.25 12.72 20.59 12.72H27.9C28.24 12.72 28.66 12.95 28.84 13.24L29.87 14.86C30.05 15.15 29.98 15.54 29.7 15.74V15.75ZM32.91 13.39L31.57 14.38C31.3 14.58 30.93 14.51 30.75 14.22L29.55 12.33C29.37 12.05 28.94 11.81 28.61 11.81H10.62C10.28 11.81 9.86 11.58 9.68 11.29L8.74 9.81C8.56 9.53 8.63 9.13 8.91 8.93L10.28 7.93C10.55 7.73 10.92 7.8 11.1 8.09L11.4 8.56C11.58 8.85 12 9.08 12.34 9.08H30.28C30.62 9.08 31.04 9.32 31.22 9.6L33.07 12.51C33.25 12.79 33.18 13.19 32.91 13.39Z",
-    fill: getColor('#00B400', fill)
+    fill: "#00B400"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M31.23 9.6C31.05 9.32 30.62 9.08 30.29 9.08H12.34C12 9.08 11.58 8.84 11.4 8.56L11.1 8.09C10.92 7.81 10.55 7.73 10.28 7.93L8.91 8.93C8.64 9.13 8.56 9.53 8.74 9.81L9.68 11.29C9.86 11.57 10.28 11.81 10.62 11.81H28.6C28.94 11.81 29.36 12.04 29.54 12.33L30.74 14.22C30.92 14.5 31.29 14.58 31.56 14.38L32.9 13.39C33.17 13.19 33.25 12.79 33.06 12.51L31.21 9.6H31.23Z",
-    fill: "transparent"
+    fill: "#ffffff"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M17.27 30.91C17.61 30.91 17.98 30.65 18.09 30.33L18.66 28.75C18.78 28.43 18.59 28.17 18.26 28.17H17.67C17.33 28.17 17.15 27.91 17.27 27.59L20.84 17.83C20.96 17.51 21.27 17.09 21.55 16.89L21.78 16.72C22.05 16.52 22.55 16.36 22.89 16.36H25.05C25.39 16.36 25.81 16.59 25.99 16.88L26.34 17.43C26.52 17.71 26.89 17.79 27.17 17.59L29.68 15.75C29.95 15.55 30.03 15.15 29.85 14.87L28.82 13.25C28.64 12.97 28.21 12.73 27.88 12.73H20.57C20.23 12.73 19.73 12.89 19.46 13.09L16.74 15.09C16.47 15.29 16.15 15.71 16.04 16.03L11.81 27.6C11.69 27.92 11.32 28.18 10.99 28.18H10.08C10 28.18 9.91 28.2 9.82 28.23C9.57 28.32 9.34 28.52 9.25 28.76L8.68 30.34C8.56 30.66 8.75 30.92 9.08 30.92H17.27V30.91Z",
-    fill: "transparent"
-  }), /*#__PURE__*/React.createElement("title", null, "Logo Thairath"));
+    fill: "#ffffff"
+  }), /*#__PURE__*/React.createElement("title", null, "Logo Thairath EN"));
 };
 
 var _excluded$b = ["fill"];
@@ -6645,31 +6645,39 @@ var TROENHeader = _ref => {
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, [isMobileView]);
+  var renderLogo = _ref5 => {
+    var {
+      fillColor = logoColor,
+      logoSize = "24"
+    } = _ref5;
+    var _a;
+    var homeLink = ((_a = data === null || data === void 0 ? void 0 : data.naviMenu.find(item => item.catergory.toLowerCase() === "home")) === null || _a === void 0 ? void 0 : _a.link) || "/";
+    return /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement("a", {
+      href: homeLink,
+      "aria-label": "Thairath Logo"
+    }, /*#__PURE__*/React.createElement(Logo, {
+      fill: fillColor,
+      mode: "auto-width",
+      name: "tr_online_en",
+      size: logoSize
+    })));
+  };
   if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TROEN_Header, {
     className: "troen--header"
-  }, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement(Logo, {
-    fill: logoColor,
-    mode: "auto-width",
-    name: "tr_online_en",
-    size: "24"
+  }, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, renderLogo({
+    fillColor: logoColor
   })), isMobileView && /*#__PURE__*/React.createElement(HamburgerButton, {
     onClick: () => setIsOpen(!isOpen)
   }))), /*#__PURE__*/React.createElement(TROEN_NavigatorBar, {
     className: "troen--navigator-bar"
   }, !isMobileView && /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
     className: "hide ".concat(showStickyLogo ? 'show' : '')
-  }, /*#__PURE__*/React.createElement(Logo, {
-    fill: "Color",
-    mode: "auto-width",
-    name: "tr_online_en",
-    size: "24"
+  }, renderLogo({
+    fillColor: logoColor
   })), /*#__PURE__*/React.createElement(TROEN_NavigatorBarContainer, {
     ref: containerRef
-  }, /*#__PURE__*/React.createElement(NavLink, {
-    href: "/",
-    label: "Home"
-  }), data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement(NavLink, {
+  }, data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement(NavLink, {
     key: index,
     href: item.link,
     label: item.catergory
@@ -6697,70 +6705,13 @@ var TROENHeader = _ref => {
     d: "M16.8008 1.41577L1.01562 17.2235",
     stroke: "white",
     strokeWidth: "2"
-  }))), /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "115",
-    height: "26",
-    viewBox: "0 0 115 26",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M75.479 8.16401H74.6246V12.0696H71.883V0.81958H76.9146C79.3022 0.81958 80.7852 2.23347 80.7852 4.58069C80.7852 6.38068 79.9141 7.45707 78.5272 7.90707L81.4946 12.0696H78.1398L75.479 8.16401ZM76.608 3.42235H74.6246V5.76818H76.608C77.5599 5.76818 78.0115 5.38207 78.0115 4.61124C78.0115 3.84041 77.5279 3.42235 76.608 3.42235Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M114.256 0.81958V12.0696H111.514V7.63346H107.176V12.0696H104.434V0.81958H107.176V5.03068H111.514V0.81958H114.256Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M102.74 0.81958H93.7084V3.40708H96.8417V12.0696H99.6084V3.40708H102.74V0.81958Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M90.4307 9.73901H86.2047L85.3977 12.0696H82.4944L86.5908 0.81958H90.0418L94.1382 12.0696H91.2349L90.4279 9.73901H90.4307ZM89.5275 7.13485L88.3177 3.63069L87.1079 7.13485H89.5275Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M61.4639 9.73901H57.2379L56.4309 12.0696H53.5276L57.624 0.81958H61.0751L65.1714 12.0696H62.2682L61.4611 9.73901H61.4639ZM60.5608 7.13485L59.3509 3.63069L58.1411 7.13485H60.5608Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M40.4962 0.81958H40.3512H31.4644V3.40708V3.42235H34.5293V12.0696H34.5976H37.2709H37.3643V3.42235H40.3512V3.40708H40.4962V0.81958Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M52.0115 0.81958V12.0696H49.2699V7.63346H44.931V12.0696H42.1894V0.81958H44.931V5.03068H49.2699V0.81958H52.0115Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M69.4558 12.0696V0.81958L66.6891 0.81958V12.0696H69.4558Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M42.7541 20.1946C42.7541 23.4043 40.3052 25.8196 37.1175 25.8196C33.9299 25.8196 31.4643 23.4043 31.4643 20.1946C31.4643 16.9849 33.9453 14.5696 37.1175 14.5696C40.2898 14.5696 42.7541 16.9849 42.7541 20.1946ZM32.3131 20.1946C32.3131 22.9529 34.4178 25.0251 37.1175 25.0251C39.8173 25.0251 41.922 22.9529 41.9066 20.1946C41.922 17.4362 39.802 15.364 37.1175 15.364C34.4331 15.364 32.3131 17.4362 32.3131 20.1946Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M55.0715 14.5696V25.8196H53.9244L46.8313 15.5987L46.8955 21.1112V25.8196H46.0397V14.5696H47.17L54.2798 24.7904L54.2157 19.2779V14.5696H55.0715Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M65.1568 25.0001V25.8196H58.56V14.5696H59.4144V25.0001H65.1554H65.1568Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M68.6021 14.5696H69.4551V25.8196H68.6021V14.5696Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M81.9299 14.5696V25.8196H80.7828L73.6897 15.5987L73.7539 21.1112V25.8196H72.8981V14.5696H74.0284L81.1382 24.7904L81.0741 19.2779V14.5696H81.9299Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M86.2854 15.389H92.4293V14.5696H85.4296V25.8196H92.4293V25.0001H86.2854V20.4196H92.4293V19.6001H86.2854V15.389Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M13.345 25.8195C20.2729 25.8195 25.8892 20.2231 25.8892 13.3196C25.8892 6.41601 20.2729 0.81958 13.345 0.81958C6.417 0.81958 0.800781 6.41601 0.800781 13.3196C0.800781 20.2231 6.417 25.8195 13.345 25.8195Z",
-    fill: "#00B400"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M20.3876 6.82232C20.2733 6.64454 20.0071 6.49593 19.7952 6.49593H8.54169C8.32983 6.49593 8.06362 6.34732 7.95072 6.16815L7.76395 5.8751C7.65105 5.69732 7.41829 5.65288 7.24685 5.77787L6.38827 6.40565C6.21684 6.53065 6.17084 6.77926 6.28374 6.95704L6.87331 7.88204C6.98621 8.05982 7.25243 8.20565 7.46568 8.20565H18.7401C18.952 8.20565 19.2182 8.35148 19.3325 8.52926L20.0865 9.70981C20.2008 9.88759 20.4336 9.93204 20.6036 9.80704L21.4455 9.19037C21.6169 9.06537 21.6629 8.81676 21.5486 8.63898L20.389 6.82232H20.3876Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11.6342 20.1378C11.8461 20.1378 12.0788 19.9753 12.1513 19.778L12.5109 18.7919C12.5834 18.5933 12.4691 18.4308 12.2572 18.4308H11.8893C11.6774 18.4308 11.5631 18.2683 11.6356 18.0697L13.8754 11.9697C13.9479 11.7711 14.1472 11.5072 14.3187 11.3822L14.465 11.2753C14.6364 11.1503 14.9487 11.0489 15.1619 11.0489H16.5195C16.7313 11.0489 16.9975 11.1947 17.1118 11.3725L17.332 11.7169C17.4463 11.8947 17.6791 11.9392 17.8505 11.8142L19.4269 10.6628C19.5984 10.5378 19.6444 10.2905 19.5315 10.1114L18.8847 9.09888C18.7704 8.9211 18.5042 8.77527 18.2924 8.77527H13.7068C13.4949 8.77527 13.1813 8.87805 13.0113 9.00305L11.3039 10.253C11.1324 10.378 10.9345 10.6433 10.862 10.8405L8.20964 18.0697C8.13716 18.2683 7.9044 18.4308 7.69254 18.4308H7.12108C7.06812 18.4308 7.01376 18.4405 6.96079 18.46C6.8019 18.5141 6.65695 18.6433 6.60259 18.7919L6.24299 19.778C6.17051 19.9766 6.2848 20.1391 6.49666 20.1391H11.6342V20.1378Z",
-    fill: "white"
-  })))), /*#__PURE__*/React.createElement(TROEN_SlidebarContainer, {
+  }))), /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, renderLogo({
+    fillColor: "White",
+    logoSize: "26"
+  }))), /*#__PURE__*/React.createElement(TROEN_SlidebarContainer, {
     onClick: () => setIsOpen(false),
     className: "troen--slide-container"
-  }, /*#__PURE__*/React.createElement(SlidebarNavLink, {
-    href: "/",
-    label: "Home"
-  }), data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement(SlidebarNavLink, {
+  }, data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement(SlidebarNavLink, {
     key: index,
     href: item.link,
     label: item.catergory
@@ -6873,6 +6824,7 @@ var TROENFooter = _ref => {
     dataFile = '/data/menuEN.json',
     loading
   } = _ref;
+  var _a;
   var [data, setData] = useState(null);
   useEffect(() => {
     var controller = new AbortController();
@@ -6883,15 +6835,19 @@ var TROENFooter = _ref => {
     });
     return () => controller.abort();
   }, [dataFile]);
+  var homeLink = ((_a = data === null || data === void 0 ? void 0 : data.naviMenu.find(item => item.catergory.toLowerCase() === "home")) === null || _a === void 0 ? void 0 : _a.link) || "/";
   if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
   return /*#__PURE__*/React.createElement(TRO_FooterWrap, {
     className: "troen--footer"
-  }, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement(Logo, {
+  }, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement("a", {
+    href: homeLink,
+    "aria-label": "Thairath Logo"
+  }, /*#__PURE__*/React.createElement(Logo, {
     fill: "Color",
     mode: "auto-width",
     name: "tr_online_en",
     size: "30"
-  })), /*#__PURE__*/React.createElement(TRO_FooterContainer, {
+  }))), /*#__PURE__*/React.createElement(TRO_FooterContainer, {
     className: "troen--footer-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: "troen--footer-wrap-main-manu"
@@ -6899,7 +6855,7 @@ var TROENFooter = _ref => {
     className: "troen--footer-menu"
   }, /*#__PURE__*/React.createElement("h3", null, "Sections"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu"
-  }, data.naviMenu.map((item, index) => /*#__PURE__*/React.createElement("li", {
+  }, data.naviMenu.filter(item => item.catergory.toLowerCase() !== "home").map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
   }, /*#__PURE__*/React.createElement("a", {
     href: item.link,