@thairath/tr-design-system 0.2.8 → 0.2.10

package/dist/index.esm.js

@@ -6169,7 +6169,8 @@ var TRO_FooterItemGroup = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "
 // footer.tsx
 var TROFooter = _ref => {
   var {
-    dataFile = '/data/menu.json'
+    dataFile = '/data/menu.json',
+    loading
   } = _ref;
   var [data, setData] = useState(null);
   var [error, setError] = useState(false);
@@ -6179,7 +6180,7 @@ var TROFooter = _ref => {
       setError(true);
     });
   }, []);
-  if (!data) return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  if (!data) return /*#__PURE__*/React.createElement("div", null, loading);
   var firstMenu = data && data.naviMenu && data.naviMenu[0] || undefined;
   var sportsMenu = data.naviMenu[5];
   var shopping = data.naviMenu[10];
@@ -6651,14 +6652,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",
@@ -6678,8 +6683,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",
@@ -6753,7 +6761,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"
@@ -6761,7 +6770,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
@@ -6779,7 +6790,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
@@ -6863,10 +6876,10 @@ var TRO_FooterBottom = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
 // src/components/organisms/FooterEN/footerEN.tsx
 var TROENFooter = _ref => {
   var {
-    dataFile = '/data/menuEN.json'
+    dataFile = '/data/menuEN.json',
+    loading
   } = _ref;
   var [data, setData] = useState(null);
-  var [error, setError] = useState(false);
   useEffect(() => {
     var controller = new AbortController();
     fetch(dataFile, {
@@ -6876,15 +6889,21 @@ 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, {
+  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, {
     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
@@ -6892,7 +6911,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
@@ -6900,7 +6921,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
@@ -6931,7 +6954,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",
@@ -6995,7 +7020,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
@@ -8011,5 +8038,5 @@ var TROLThemeProvider = _ref => {
 };
 var useThemeMode = () => useContext(ThemeContext);
 
-export { Button, ButtonWithIcon, CardArticle, Checkbox, Icon, Logo, NavigatorBar, NavigatorFollowUs, NavigatorSlide, RadioButton, Search, Select, TROENFooter, TROENHeader, TROFooter, TROHeader, TROLThemeProvider, Textarea, Textbox, AddCircleIcon as add_circle, AddCircleFilledIcon as add_circle_filled, AppleAppStoreLogo as appleAppStore, ArrowCircleDownIcon as arrow_circle_down, ArrowCircleDownFilledIcon as arrow_circle_down_filled, ArrowCircleLeftIcon as arrow_circle_left, ArrowCircleLeftFilledIcon as arrow_circle_left_filled, ArrowCircleRightIcon as arrow_circle_right, ArrowCircleRightFilledIcon as arrow_circle_right_filled, ArrowCircleUpIcon as arrow_circle_up, ArrowCircleUpFilledIcon as arrow_circle_up_filled, ArrowDownwardAltIcon as arrow_downward_alt, ArrowLeftAltIcon as arrow_left_alt, ArrowRightAltIcon as arrow_right_alt, ArrowUpwardAltIcon as arrow_upward_alt, BedtimeIcon as bedtime, BedtimeFilledIcon as bedtime_filled, BookmarkIcon as bookmark, BookmarkFilledIcon as bookmark_filled, CalendarIcon as calendar, CalendarFilledIcon as calendar_filled, ClearDayIcon as clear_day, ClearDayFilledIcon as clear_day_filled, CloudDoneIcon as cloud_done, CloudDoneFilledIcon as cloud_done_filled, CloudDownloadIcon as cloud_download, CloudDownloadFilledIcon as cloud_download_filled, CloudUpLoadIcon as cloud_upload, CloudUpLoadFilledIcon as cloud_upload_filled, DesktopIcon as desktop, DesktopFilledIcon as desktop_filled, FacebookIcon as facebook, FacebookColorIcon as facebook_color, FeedIcon as feed, FirstPageIcon as first_page, GoogleIcon as google, GooglePlayStoreLogo as googlePlayStore, GoogleColorIcon as google_color, HamburgerIcon as hamburger, HomeIcon as home, HomeFilledIcon as home_filled, HuaweiAppGalleryLogo as huaweiAppGallery, InetLogo as inet, InfoIcon as info, InstagramIcon as instagram, InstagramColorIcon as instagram_color, KeyboardArrowDownIcon as keyboard_arrow_down, KeyboardArrowLeftIcon as keyboard_arrow_left, KeyboardArrowRightIcon as keyboard_arrow_right, KeyboardArrowUpIcon as keyboard_arrow_up, LastPageIcon as last_page, LineAppIcon as line_app, LineAppColorIcon as line_app_color, LinkIcon as link, LockIcon as lock, LockFilledIcon as lock_filled, LogoutIcon as logout, MailIcon as mail, MailFilledIcon as mail_filled, MessagerIcon as messager, MessagerColorIcon as messager_color, MirrorLogo as mirror, MobileIcon as mobile, MobileFilledIcon as mobile_filled, NotifationIcon as notifation, NotifationFilledIcon as notifation_filled, NotificationsActiveIcon as notifications_active, NotificationsActiveFilledIcon as notifications_active_filled, NotificationsOffIcon as notifications_off, NotificationsOffFilledIcon as notifications_off_filled, NotificationsUnreadIcon as notifications_unread, NotificationsUnreadFilledIcon as notifications_unread_filled, PublicIcon as public, SearchIcon as search, ShareIcon as share, ShareFilledIcon as share_filled, SocilaXIcon as social_x, SOPNLogo as sonp, Text as text, Thumbnail as thumbmail, TiktokIcon as tiktok, TiktokColorIcon as tiktok_color, TRFutureperfectLogo as trFuturePerfect, TRLogisticsLogo as trLogistics, TRMoneyLogo as trMoney, TROlineLogo as trOnline, TROlineENLogo as trOnlineEN, TRPlusLogo as trPlus, TRSportLogo as trSport, TRTVLogo as trTV, TrenVG3Logo as trendVG3, TROAppIcon as tro_app, useThemeMode, UserIcon as user, UserFilledIcon as user_filled, VisibilityIcon as visibility, VisibilityFilledIcon as visibility_filled, VisibilityOffIcon as visibility_off, VisibilityOffFilledIcon as visibility_off_filled, YoutubeIcon as youtube };
+export { Button, ButtonWithIcon, CardArticle, Checkbox, Icon, Logo, NavigatorBar, NavigatorFollowUs, NavigatorSlide, RadioButton, Search, Select, TROENFooter, TROENHeader, TROFooter, TROHeader, TROLThemeProvider, Text, Textarea, Textbox, AddCircleIcon as add_circle, AddCircleFilledIcon as add_circle_filled, AppleAppStoreLogo as appleAppStore, ArrowCircleDownIcon as arrow_circle_down, ArrowCircleDownFilledIcon as arrow_circle_down_filled, ArrowCircleLeftIcon as arrow_circle_left, ArrowCircleLeftFilledIcon as arrow_circle_left_filled, ArrowCircleRightIcon as arrow_circle_right, ArrowCircleRightFilledIcon as arrow_circle_right_filled, ArrowCircleUpIcon as arrow_circle_up, ArrowCircleUpFilledIcon as arrow_circle_up_filled, ArrowDownwardAltIcon as arrow_downward_alt, ArrowLeftAltIcon as arrow_left_alt, ArrowRightAltIcon as arrow_right_alt, ArrowUpwardAltIcon as arrow_upward_alt, BedtimeIcon as bedtime, BedtimeFilledIcon as bedtime_filled, BookmarkIcon as bookmark, BookmarkFilledIcon as bookmark_filled, CalendarIcon as calendar, CalendarFilledIcon as calendar_filled, ClearDayIcon as clear_day, ClearDayFilledIcon as clear_day_filled, CloudDoneIcon as cloud_done, CloudDoneFilledIcon as cloud_done_filled, CloudDownloadIcon as cloud_download, CloudDownloadFilledIcon as cloud_download_filled, CloudUpLoadIcon as cloud_upload, CloudUpLoadFilledIcon as cloud_upload_filled, DesktopIcon as desktop, DesktopFilledIcon as desktop_filled, FacebookIcon as facebook, FacebookColorIcon as facebook_color, FeedIcon as feed, FirstPageIcon as first_page, GoogleIcon as google, GooglePlayStoreLogo as googlePlayStore, GoogleColorIcon as google_color, HamburgerIcon as hamburger, HomeIcon as home, HomeFilledIcon as home_filled, HuaweiAppGalleryLogo as huaweiAppGallery, InetLogo as inet, InfoIcon as info, InstagramIcon as instagram, InstagramColorIcon as instagram_color, KeyboardArrowDownIcon as keyboard_arrow_down, KeyboardArrowLeftIcon as keyboard_arrow_left, KeyboardArrowRightIcon as keyboard_arrow_right, KeyboardArrowUpIcon as keyboard_arrow_up, LastPageIcon as last_page, LineAppIcon as line_app, LineAppColorIcon as line_app_color, LinkIcon as link, LockIcon as lock, LockFilledIcon as lock_filled, LogoutIcon as logout, MailIcon as mail, MailFilledIcon as mail_filled, MessagerIcon as messager, MessagerColorIcon as messager_color, MirrorLogo as mirror, MobileIcon as mobile, MobileFilledIcon as mobile_filled, NotifationIcon as notifation, NotifationFilledIcon as notifation_filled, NotificationsActiveIcon as notifications_active, NotificationsActiveFilledIcon as notifications_active_filled, NotificationsOffIcon as notifications_off, NotificationsOffFilledIcon as notifications_off_filled, NotificationsUnreadIcon as notifications_unread, NotificationsUnreadFilledIcon as notifications_unread_filled, PublicIcon as public, SearchIcon as search, ShareIcon as share, ShareFilledIcon as share_filled, SocilaXIcon as social_x, SOPNLogo as sonp, Thumbnail as thumbmail, TiktokIcon as tiktok, TiktokColorIcon as tiktok_color, TRFutureperfectLogo as trFuturePerfect, TRLogisticsLogo as trLogistics, TRMoneyLogo as trMoney, TROlineLogo as trOnline, TROlineENLogo as trOnlineEN, TRPlusLogo as trPlus, TRSportLogo as trSport, TRTVLogo as trTV, TrenVG3Logo as trendVG3, TROAppIcon as tro_app, useThemeMode, UserIcon as user, UserFilledIcon as user_filled, VisibilityIcon as visibility, VisibilityFilledIcon as visibility_filled, VisibilityOffIcon as visibility_off, VisibilityOffFilledIcon as visibility_off_filled, YoutubeIcon as youtube };
 //# sourceMappingURL=index.esm.js.map