@thairath/tr-design-system 0.2.9 → 0.2.10

package/dist/index.cjs

@@ -6654,14 +6654,18 @@ var TROENHeader = _ref => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [isMobileView]);
   if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TROEN_Header, null, /*#__PURE__*/React.createElement(TROEN_HeaderTOP, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, null, /*#__PURE__*/React.createElement(Logo, {
+  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"
   })), isMobileView && /*#__PURE__*/React.createElement(HamburgerButton, {
     onClick: () => setIsOpen(!isOpen)
-  }))), /*#__PURE__*/React.createElement(TROEN_NavigatorBar, null, !isMobileView && /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
+  }))), /*#__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",
@@ -6681,8 +6685,11 @@ var TROENHeader = _ref => {
     isOpen: isOpen,
     onClick: () => setIsOpen(false)
   }), /*#__PURE__*/React.createElement(TROEN_SlideNavigatore, {
-    isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(TROEN_SlidebarTop, null, /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
+    isOpen: isOpen,
+    className: "troen--slide-navigator"
+  }, /*#__PURE__*/React.createElement(TROEN_SlidebarTop, {
+    className: "troen--slide-bar-top"
+  }, /*#__PURE__*/React.createElement(TROEN_WrapIcon, {
     onClick: () => setIsOpen(false)
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6756,7 +6763,8 @@ var TROENHeader = _ref => {
     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, {
-    onClick: () => setIsOpen(false)
+    onClick: () => setIsOpen(false),
+    className: "troen--slide-container"
   }, /*#__PURE__*/React.createElement(SlidebarNavLink, {
     href: "/",
     label: "Home"
@@ -6764,7 +6772,9 @@ var TROENHeader = _ref => {
     key: index,
     href: item.link,
     label: item.catergory
-  }))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, null, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
+  }))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, {
+    className: "troen--slide-nav-other"
+  }, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--slidebar-website-menu"
   }, data.thairathWebsite.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6782,7 +6792,9 @@ var TROENHeader = _ref => {
     target: "_blank",
     rel: "noopener noreferrer",
     onClick: () => setIsOpen(false)
-  }, item.name))))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, null, /*#__PURE__*/React.createElement("ul", {
+  }, item.name))))), /*#__PURE__*/React.createElement(TROEN_SlidebarNavOther, {
+    className: "troen--slide-nav-other"
+  }, /*#__PURE__*/React.createElement("ul", {
     className: "troen--slidebar-website-menu"
   }, data.otherLinks.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6870,7 +6882,6 @@ var TROENFooter = _ref => {
     loading
   } = _ref;
   var [data, setData] = React.useState(null);
-  var [error, setError] = React.useState(false);
   React.useEffect(() => {
     var controller = new AbortController();
     fetch(dataFile, {
@@ -6881,14 +6892,20 @@ var TROENFooter = _ref => {
     return () => controller.abort();
   }, [dataFile]);
   if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
-  return /*#__PURE__*/React.createElement(TRO_FooterWrap, null, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement(Logo, {
+  return /*#__PURE__*/React.createElement(TRO_FooterWrap, {
+    className: "troen--footer"
+  }, /*#__PURE__*/React.createElement(TRO_FooterTop, null, /*#__PURE__*/React.createElement(Logo, {
     fill: "Color",
     mode: "auto-width",
     name: "tr_online_en",
     size: "30"
-  })), /*#__PURE__*/React.createElement(TRO_FooterContainer, null, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(TRO_FooterContainer, {
+    className: "troen--footer-container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "troen--footer-wrap-main-manu"
-  }, /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Sections"), /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    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", {
     key: index
@@ -6896,7 +6913,9 @@ var TROENFooter = _ref => {
     href: item.link,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, item.catergory))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
+  }, item.catergory))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("h3", null, "Thairath Website"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu"
   }, data.thairathWebsite.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6904,7 +6923,9 @@ var TROENFooter = _ref => {
     href: item.link,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, item.name)))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("h3", null, "Follow Us"), /*#__PURE__*/React.createElement("ul", {
+  }, item.name)))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("h3", null, "Follow Us"), /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-menu-followus"
   }, data.social.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -6935,7 +6956,9 @@ var TROENFooter = _ref => {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "desktop",
     size: 26
-  }))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, null, /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement(TRO_FooterMenu, {
+    className: "troen--footer-menu"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "trorn--footer-myapp"
   }, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(Icon, {
     fill: "#00B400",
@@ -6999,7 +7022,9 @@ var TROENFooter = _ref => {
     mode: "auto-width",
     name: "inet",
     size: "24"
-  })))))), /*#__PURE__*/React.createElement(TRO_FooterBottom, null, /*#__PURE__*/React.createElement("ul", {
+  })))))), /*#__PURE__*/React.createElement(TRO_FooterBottom, {
+    className: "troen--footer-bottom"
+  }, /*#__PURE__*/React.createElement("ul", {
     className: "troen--footer-website-menu"
   }, data.otherLinks.map((item, index) => /*#__PURE__*/React.createElement("li", {
     key: index
@@ -8032,6 +8057,7 @@ exports.TROENHeader = TROENHeader;
 exports.TROFooter = TROFooter;
 exports.TROHeader = TROHeader;
 exports.TROLThemeProvider = TROLThemeProvider;
+exports.Text = Text;
 exports.Textarea = Textarea;
 exports.Textbox = Textbox;
 exports.add_circle = AddCircleIcon;
@@ -8112,7 +8138,6 @@ exports.share = ShareIcon;
 exports.share_filled = ShareFilledIcon;
 exports.social_x = SocilaXIcon;
 exports.sonp = SOPNLogo;
-exports.text = Text;
 exports.thumbmail = Thumbnail;
 exports.tiktok = TiktokIcon;
 exports.tiktok_color = TiktokColorIcon;