Skip to content

Commit 2f586ea

Browse files
silviyabotevasilviyaboteva
authored
Merge pull request #3000 from telerik/v10-fixes
v10 updates
2 parents 51b80d0 + a482491 commit 2f586ea

File tree

22 files changed

+15804
-15800
lines changed

22 files changed

+15804
-15800
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const CardsList = (props: CardListProps) => {
1717
return (
1818
<div
1919
key={index}
20-
className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
20+
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`}
2121
>
2222
{item.status !== null ? (
2323
<BadgeContainer>
@@ -41,13 +41,14 @@ export const CardsList = (props: CardListProps) => {
4141
horizontal: "start",
4242
vertical: "top",
4343
}}
44+
style={{zIndex: 1}}
4445
>
4546
{item.status}
4647
</Badge>
4748
</BadgeContainer>
4849
) : (
4950
<div
50-
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
51+
className="k-d-inline-block k-justify-content-center k-align-items-center k-rounded-lg"
5152
style={{
5253
backgroundImage: `url(${item.img})`,
5354
width: "278px",

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
55
import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
66
import { useCategoriesContext } from "../helpers/CategoriesContext";
77
import { useLanguageContext } from "../helpers/LanguageContext";
8+
import { Button } from "@progress/kendo-react-buttons";
89

910
interface FilterComponentProps {
1011
updateUI: (state: State) => void;
@@ -15,7 +16,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
1516
const { t } = useLanguageContext();
1617

1718
const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
18-
const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
19+
const [statusValue, setStatusValue] = React.useState<string>(t.statusesData[1]);
1920
const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);
2021

2122
const chips = t.categoriesData || [];
@@ -99,7 +100,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
99100

100101
const clearFilters = () => {
101102
setCategoryValue([]);
102-
setStatusValue(t.statusRecommended);
103+
setStatusValue(t.statusesData[1]);
103104
setMaterialValue(t.materialPlaceholder);
104105
setSelectedCategory(null);
105106
updateUI({ filter: undefined, sort: undefined });
@@ -129,10 +130,10 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
129130
<SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
130131
</span>
131132
<span>
132-
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
133+
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} style={{minWidth: 150}} />
133134
</span>
134135
</span>
135-
<button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
136+
<Button fillMode="flat" onClick={clearFilters}>{t.clearFiltersButton}</Button>
136137
</section>
137138
);
138139
};

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,21 @@ const Footer: React.FC = () => {
2121
<a href="#" className="k-d-block k-mb-4 k-text-align-center">
2222
<img src={viloraLogo} alt="Logo" />
2323
</a>
24-
<p className="k-m-0">{t.cookiesText}</p>
25-
<p className="k-m-0">{t.rightsReservedText}</p>
26-
<p className="k-mt-4">{t.subscribeText}</p>
24+
<p>{t.cookiesText}</p>
25+
<p>{t.rightsReservedText}</p>
26+
<p>{t.subscribeText}</p>
2727
<Label editorId="email" className="k-sr-only">{t.emailPlaceholder}</Label>
2828
<TextBox
2929
placeholder={t.emailPlaceholder}
30-
className="k-w-full"
30+
className="k-w-full !k-mb-3"
3131
suffix={() => (
3232
<InputSuffix>
3333
<InputSeparator />
3434
<Button themeColor="primary">{t.subscribeButtonText}</Button>
3535
</InputSuffix>
3636
)}
3737
/>
38-
<p className="k-mt-6">{t.followUsText}</p>
38+
<p>{t.followUsText}</p>
3939
<div className="k-d-flex k-gap-2 k-align-items-center">
4040
<p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
4141
<SvgIcon icon={facebookIcon} size="xlarge" /> Facebook

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,8 @@ const Header: React.FC = () => {
5353
}
5454

5555
const selectedCategory = selectedItem.text;
56-
if (selectedCategory === t.all) {
57-
setSelectedCategory(null);
58-
} else {
5956
setSelectedCategory(selectedCategory ?? null);
6057
navigate("/category");
61-
}
6258
};
6359

6460
const handleLanguageMenuSelect = (event: MenuSelectEvent) => {
@@ -98,7 +94,7 @@ const Header: React.FC = () => {
9894
className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
9995
style={{ paddingLeft: "50px" }}
10096
>
101-
<a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
97+
<a href="#" onClick={(e) => { e.preventDefault(); navigate('/'); }} className="k-d-sm-flex" style={{ marginRight: "50px" }}>
10298
<img src={viloraLogo} alt="Logo" />
10399
</a>
104100
<Menu items={translatedItems} onSelect={handleMenuSelect} />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const items = [
55
},
66
{
77
"text": "Jewelry",
8-
"items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
8+
"items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earrings" }, { "text": "Watches" },{ "text": "Necklaces" }],
99
},
1010
{
1111
"text": "Contacts",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,14 @@ export const AllProductsListView = () => {
8686
<Button
8787
fillMode="flat"
8888
svgIcon={gridLayoutIcon}
89+
togglable={true}
8990
selected={currentLayout === "grid"}
9091
onClick={() => setCurrentLayout("grid")}
9192
/>
9293
<Button
9394
fillMode="flat"
9495
svgIcon={layout2By2Icon}
96+
togglable={true}
9597
selected={currentLayout === "list"}
9698
onClick={() => setCurrentLayout("list")}
9799
/>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const CardsList: React.FC<CardListProps> = (props) => {
3939
return (
4040
<div
4141
key={index}
42-
className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
42+
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`}
4343
>
4444
{item.status ? (
4545
<BadgeContainer>
@@ -63,14 +63,15 @@ export const CardsList: React.FC<CardListProps> = (props) => {
6363
horizontal: 'start',
6464
vertical: 'top',
6565
}}
66+
style={{zIndex: 1}}
6667
>
6768
{t.statuses[item.status] || item.status}
6869
</Badge>
6970
)}
7071
</BadgeContainer>
7172
) : (
7273
<div
73-
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
74+
className="k-d-inline-block k-justify-content-center k-align-items-center k-rounded-lg"
7475
style={{
7576
backgroundImage: `url(${item.img})`,
7677
width: '278px',

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { selectedLanguage } from "../helpers/languageStore";
88
import enMessages from "../data/messages/en";
99
import frMessages from "../data/messages/fr";
1010
import esMessages from "../data/messages/es";
11+
import { Button } from "@progress/kendo-react-buttons";
1112

1213
const translations = {
1314
en: enMessages,
@@ -28,7 +29,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
2829
const t = getTranslations(language);
2930

3031
const [categoryValue, setCategoryValue] = useState<string[]>([]);
31-
const [statusValue, setStatusValue] = useState<string>(t.statusesData[0]);
32+
const [statusValue, setStatusValue] = useState<string>(t.statusesData[1]);
3233
const [materialValue, setMaterialValue] = useState<string>(t.materialPlaceholder);
3334

3435
const chips = t.categoriesData || [];
@@ -37,7 +38,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
3738

3839
useEffect(() => {
3940
setCategoryValue([]);
40-
setStatusValue(t.statusesData[0]);
41+
setStatusValue(t.statusesData[1]);
4142
setMaterialValue(t.materialPlaceholder);
4243
updateUI({ filter: undefined, sort: undefined });
4344
}, [language, t, updateUI]);
@@ -87,7 +88,7 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
8788

8889
const clearFilters = () => {
8990
setCategoryValue([]);
90-
setStatusValue(t.statusesData[0]);
91+
setStatusValue(t.statusesData[1]);
9192
setMaterialValue(t.materialPlaceholder);
9293
updateUI({ filter: undefined, sort: undefined });
9394
};
@@ -116,12 +117,12 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
116117
<SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
117118
</span>
118119
<span>
119-
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
120+
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} style={{minWidth: 150}} />
120121
</span>
121122
</span>
122-
<button className="k-button k-button-flat" onClick={clearFilters}>
123+
<Button fillMode="flat" onClick={clearFilters}>
123124
{t.clearFiltersButton}
124-
</button>
125+
</Button>
125126
</section>
126127
);
127128
};

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,15 @@ const Footer: React.FC = () => {
4949
<a href="/" className="k-d-block k-mb-4 k-text-align-center">
5050
<img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
5151
</a>
52-
<p className="k-m-0">
53-
{t.cookiesText}
54-
</p>
55-
<p className="k-m-0">
56-
{t.rightsReservedText}
57-
</p>
58-
<p className="k-mt-4">
59-
{t.subscribeText}
60-
</p>
52+
<p>{t.cookiesText}</p>
53+
<p>{t.rightsReservedText}</p>
54+
<p>{t.subscribeText}</p>
6155
<Label editorId="email" className="k-sr-only">
6256
{t.emailPlaceholder}
6357
</Label>
6458
<TextBox
6559
placeholder={t.emailPlaceholder}
66-
className="k-w-full"
60+
className="k-w-full !k-mb-3"
6761
suffix={() => (
6862
<InputSuffix>
6963
<InputSeparator />
@@ -73,7 +67,7 @@ const Footer: React.FC = () => {
7367
</InputSuffix>
7468
)}
7569
/>
76-
<p className="k-mt-6">{t.followUsText}</p>
70+
<p>{t.followUsText}</p>
7771
<div className="k-d-flex k-gap-2 k-align-items-center">
7872
<p
7973
className="k-d-flex k-align-items-center"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const Header: React.FC = () => {
5858
{ text: t.menuRings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Rings" },
5959
{ text: t.menuEarrings, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Earrings" },
6060
{ text: t.menuWatches, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Watches" },
61-
{ text: t.menuAll, url: "/kendo-react/kendo-react-e-commerce-astro-app/products" },
61+
{ text: t.menuNecklaces, url: "/kendo-react/kendo-react-e-commerce-astro-app/products?category=Necklaces" },
6262
],
6363
},
6464
{
@@ -185,6 +185,7 @@ const Header: React.FC = () => {
185185
onItemClick={handleThemeChange}
186186
/>
187187
<Switch
188+
className="switch-width"
188189
onLabel={t.adminLabel}
189190
offLabel={t.clientLabel}
190191
checked={isAdminValue}

0 commit comments

Comments
 (0)