v10 updates

examples/ecommerce-jewellery-store/src/components/CardsList.tsx

@@ -17,7 +17,7 @@ export const CardsList = (props: CardListProps) => {
         return (
           <div
             key={index}
-            className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
+            className={`${props.layout === 'grid' ? 'k-col-span-4' : 'k-col-span-3'} k-text-center k-border k-border-primary k-gap-1 k-pb-5`}
           >
             {item.status !== null ? (
               <BadgeContainer>
@@ -41,13 +41,14 @@ export const CardsList = (props: CardListProps) => {
                     horizontal: "start",
                     vertical: "top",
                   }}
+                  style={{zIndex: 1}}
                 >
                   {item.status}
                 </Badge>
               </BadgeContainer>
             ) : (
               <div
-                className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
+                className="k-d-inline-block k-justify-content-center k-align-items-center k-rounded-lg"
                 style={{
                   backgroundImage: `url(${item.img})`,
                   width: "278px",

examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx

@@ -5,6 +5,7 @@ import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
 import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
 import { useCategoriesContext } from "../helpers/CategoriesContext";
 import { useLanguageContext } from "../helpers/LanguageContext";
+import { Button } from "@progress/kendo-react-buttons";
 
 interface FilterComponentProps {
   updateUI: (state: State) => void;
@@ -15,7 +16,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
   const { t } = useLanguageContext();
 
   const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
-  const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
+  const [statusValue, setStatusValue] = React.useState<string>(t.statusesData[1]);
   const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);
 
   const chips = t.categoriesData || [];
@@ -99,7 +100,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   const clearFilters = () => {
     setCategoryValue([]);
-    setStatusValue(t.statusRecommended);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     setSelectedCategory(null);
     updateUI({ filter: undefined, sort: undefined });
@@ -129,10 +130,10 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
           <SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
         </span>
         <span>
-          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
+          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} style={{minWidth: 150}} />
         </span>
       </span>
-      <button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
+      <Button fillMode="flat" onClick={clearFilters}>{t.clearFiltersButton}</Button>
     </section>
   );
 };

examples/ecommerce-jewellery-store/src/components/Footer.tsx

@@ -21,21 +21,21 @@ const Footer: React.FC = () => {
           <a href="#" className="k-d-block k-mb-4 k-text-align-center">
             <img src={viloraLogo} alt="Logo" />
           </a>
-          <p className="k-m-0">{t.cookiesText}</p> 
-          <p className="k-m-0">{t.rightsReservedText}</p>
-          <p className="k-mt-4">{t.subscribeText}</p>
+          <p>{t.cookiesText}</p> 
+          <p>{t.rightsReservedText}</p>
+          <p>{t.subscribeText}</p>
           <Label editorId="email" className="k-sr-only">{t.emailPlaceholder}</Label>
           <TextBox
             placeholder={t.emailPlaceholder}
-            className="k-w-full"
+            className="k-w-full !k-mb-3"
             suffix={() => (
               <InputSuffix>
                 <InputSeparator />
                 <Button themeColor="primary">{t.subscribeButtonText}</Button>
               </InputSuffix>
             )}
           />
-          <p className="k-mt-6">{t.followUsText}</p>  
+          <p>{t.followUsText}</p>  
           <div className="k-d-flex k-gap-2 k-align-items-center">
             <p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
               <SvgIcon icon={facebookIcon} size="xlarge" /> Facebook

examples/ecommerce-jewellery-store/src/components/Header.tsx

@@ -53,12 +53,8 @@ const Header: React.FC = () => {
     }
 
     const selectedCategory = selectedItem.text;
-    if (selectedCategory === t.all) {
-      setSelectedCategory(null);
-    } else {
       setSelectedCategory(selectedCategory ?? null);
       navigate("/category");
-    }
   };
 
   const handleLanguageMenuSelect = (event: MenuSelectEvent) => {
@@ -98,7 +94,7 @@ const Header: React.FC = () => {
           className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
           style={{ paddingLeft: "50px" }}
         >
-          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+          <a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }} className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img src={viloraLogo} alt="Logo" />
           </a>
           <Menu items={translatedItems} onSelect={handleMenuSelect} />

examples/ecommerce-jewellery-store/src/data/items.ts

@@ -5,7 +5,7 @@ const items = [
     },
     {
       "text": "Jewelry",
-      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
+      "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earrings" }, { "text": "Watches" },{ "text": "Necklaces" }],
     },
     {
       "text": "Contacts",

examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx

@@ -86,12 +86,14 @@ export const AllProductsListView = () => {
             <Button
               fillMode="flat"
               svgIcon={gridLayoutIcon}
+              togglable={true}
               selected={currentLayout === "grid"}
               onClick={() => setCurrentLayout("grid")}
             />
             <Button
               fillMode="flat"
               svgIcon={layout2By2Icon}
+              togglable={true}
               selected={currentLayout === "list"}
               onClick={() => setCurrentLayout("list")}
             />

examples/kendo-react-e-commerce-astro-app/src/components/CardsList.tsx

@@ -39,7 +39,7 @@ export const CardsList: React.FC<CardListProps> = (props) => {
           return (
             <div
               key={index}
-              className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
+              className={`${props.layout === 'grid' ? 'k-col-span-4' : 'k-col-span-3'} k-text-center k-border k-border-primary k-gap-1 k-pb-5`}
             >
               {item.status ? (
                 <BadgeContainer>
@@ -63,14 +63,15 @@ export const CardsList: React.FC<CardListProps> = (props) => {
                         horizontal: 'start',
                         vertical: 'top',
                       }}
+                      style={{zIndex: 1}}
                     >
                       {t.statuses[item.status] || item.status}
                     </Badge>
                   )}
                 </BadgeContainer>
               ) : (
                 <div
-                  className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
+                  className="k-d-inline-block k-justify-content-center k-align-items-center k-rounded-lg"
                   style={{
                     backgroundImage: `url(${item.img})`,
                     width: '278px',

examples/kendo-react-e-commerce-astro-app/src/components/FilterComponent.tsx

@@ -8,6 +8,7 @@ import { selectedLanguage } from "../helpers/languageStore";
 import enMessages from "../data/messages/en";
 import frMessages from "../data/messages/fr";
 import esMessages from "../data/messages/es";
+import { Button } from "@progress/kendo-react-buttons";
 
 const translations = {
   en: enMessages,
@@ -28,7 +29,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
   const t = getTranslations(language); 
 
   const [categoryValue, setCategoryValue] = useState<string[]>([]);
-  const [statusValue, setStatusValue] = useState<string>(t.statusesData[0]);
+  const [statusValue, setStatusValue] = useState<string>(t.statusesData[1]);
   const [materialValue, setMaterialValue] = useState<string>(t.materialPlaceholder);
 
   const chips = t.categoriesData || [];
@@ -37,7 +38,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   useEffect(() => {
     setCategoryValue([]);
-    setStatusValue(t.statusesData[0]);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     updateUI({ filter: undefined, sort: undefined }); 
   }, [language, t, updateUI]);
@@ -87,7 +88,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
 
   const clearFilters = () => {
     setCategoryValue([]);
-    setStatusValue(t.statusesData[0]);
+    setStatusValue(t.statusesData[1]);
     setMaterialValue(t.materialPlaceholder);
     updateUI({ filter: undefined, sort: undefined });
   };
@@ -116,12 +117,12 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
           <SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
         </span>
         <span>
-          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
+          <DropDownList data={statuses} value={statusValue} onChange={onStatusChange} style={{minWidth: 150}} />
         </span>
       </span>
-      <button className="k-button k-button-flat" onClick={clearFilters}>
+      <Button fillMode="flat" onClick={clearFilters}>
         {t.clearFiltersButton}
-      </button>
+      </Button>
     </section>
   );
 };

examples/kendo-react-e-commerce-astro-app/src/components/Footer.tsx

@@ -49,21 +49,15 @@ const Footer: React.FC = () => {
             <a href="/" className="k-d-block k-mb-4 k-text-align-center">
               <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
             </a>
-            <p className="k-m-0">
-              {t.cookiesText}
-            </p>
-            <p className="k-m-0">
-              {t.rightsReservedText}
-            </p>
-            <p className="k-mt-4">
-              {t.subscribeText}
-            </p>
+            <p>{t.cookiesText}</p>
+            <p>{t.rightsReservedText}</p>
+            <p>{t.subscribeText}</p>
             <Label editorId="email" className="k-sr-only">
               {t.emailPlaceholder}
             </Label>
             <TextBox
               placeholder={t.emailPlaceholder}
-              className="k-w-full"
+              className="k-w-full !k-mb-3"
               suffix={() => (
                 <InputSuffix>
                   <InputSeparator />
@@ -73,7 +67,7 @@ const Footer: React.FC = () => {
                 </InputSuffix>
               )}
             />
-            <p className="k-mt-6">{t.followUsText}</p>
+            <p>{t.followUsText}</p>
             <div className="k-d-flex k-gap-2 k-align-items-center">
               <p
                 className="k-d-flex k-align-items-center"

examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx

@@ -58,7 +58,7 @@ const Header: React.FC = () => {
           { text: t.menuRings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Rings" },
           { text: t.menuEarrings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Earrings" },
           { text: t.menuWatches, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Watches" },
-          { text: t.menuAll, url: "/kendo-react/kendo-react-e-commerce-astro-app/products" },
+          { text: t.menuNecklaces, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Necklaces" },
         ],
       },
       {
@@ -185,6 +185,7 @@ const Header: React.FC = () => {
               onItemClick={handleThemeChange}
             />
             <Switch
+              className="switch-width"
               onLabel={t.adminLabel}
               offLabel={t.clientLabel}
               checked={isAdminValue}

examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro

@@ -58,6 +58,9 @@
        top: auto;
        z-index: 1000; 
       }
+      .switch-width {
+        width: 72px !important;
+      }
     </style>
     <slot name="head" />
   </head>