Skip to content

Commit

Permalink
Add cancel button to Rate and update styles for new design.
Browse files Browse the repository at this point in the history 
Change icons and update styles for Rating component.
  • Loading branch information
@myslaf
myslaf committed Mar 5, 2024
1 parent 5dbb535 commit 996919d
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 59 deletions.
96 changes: 51 additions & 45 deletions src/components/atoms/Rating/Rating.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,22 @@ const RatingIconEmpty: React.FC<IconProps> = (props) => {
const { onClick, onMouseEnter, onMouseLeave, rate } = props;
return (
<svg
width="10px"
height="10px"
viewBox="0 0 15 15"
xmlns="http://www.w3.org/2000/svg"
width="40.074"
height="38.272"
viewBox="0 0 40.074 38.272"
onClick={() => (onClick ? onClick(rate) : undefined)}
onMouseEnter={() => (onMouseEnter ? onMouseEnter(rate) : undefined)}
onMouseLeave={() => (onMouseLeave ? onMouseLeave(rate) : undefined)}
>
<path
d="M8.00002 0.270996C8.2841 0.270996 8.5438 0.431498 8.67084 0.685586L10.605 4.55394L14.858 5.17256C15.1405 5.21364 15.3751 5.41151 15.4633 5.68299C15.5515 5.95447 15.478 6.25248 15.2736 6.45175L12.1783 9.46971L12.8746 13.7249C12.9206 14.0061 12.8032 14.2891 12.5717 14.4553C12.3403 14.6214 12.0346 14.6421 11.7829 14.5085L8.00002 12.5013L4.21718 14.5085C3.96546 14.6421 3.65979 14.6214 3.4283 14.4553C3.1968 14.2891 3.07947 14.0061 3.12549 13.7249L3.82179 9.46971L0.726447 6.45175C0.522068 6.25248 0.448522 5.95447 0.536727 5.68299C0.624932 5.41151 0.859594 5.21364 1.14207 5.17256L5.39502 4.55394L7.3292 0.685586C7.45625 0.431498 7.71594 0.270996 8.00002 0.270996ZM8.00002 2.69805L6.56147 5.57516C6.45171 5.79468 6.24148 5.94661 5.9986 5.98194L2.86131 6.43827L5.1486 8.66837C5.32386 8.83925 5.40471 9.08492 5.36518 9.32649L4.85003 12.4746L7.64849 10.9897C7.86833 10.8731 8.13172 10.8731 8.35156 10.9897L11.15 12.4746L10.6349 9.32649C10.5953 9.08492 10.6762 8.83925 10.8514 8.66837L13.1387 6.43827L10.0014 5.98194C9.75856 5.94661 9.54834 5.79468 9.43858 5.57516L8.00002 2.69805Z"
fill="currentColor"
id="_2639925_star_icon"
data-name="2639925_star_icon"
d="M22.207,2.684l4.18,12.377,13.062.151a1.174,1.174,0,0,1,.688,2.116l-10.479,7.8L33.55,37.6a1.174,1.174,0,0,1-1.8,1.307L21.095,31.347,10.438,38.9a1.174,1.174,0,0,1-1.8-1.307l3.892-12.47-10.479-7.8a1.174,1.174,0,0,1,.688-2.116L15.8,15.059l4.18-12.377A1.175,1.175,0,0,1,22.207,2.684Z"
transform="translate(-1.057 -1.384)"
fill="#f8f8f8"
stroke="#eaeaea"
stroke-width="1"
/>
</svg>
);
Expand All @@ -35,18 +40,20 @@ const RatingIconFull: React.FC<IconProps> = (props) => {
const { onClick, onMouseEnter, onMouseLeave, rate } = props;
return (
<svg
width="10px"
height="10px"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="39.036"
height="37.241"
viewBox="0 0 39.036 37.241"
onClick={() => (onClick ? onClick(rate) : undefined)}
onMouseEnter={() => (onMouseEnter ? onMouseEnter(rate) : undefined)}
onMouseLeave={() => (onMouseLeave ? onMouseLeave(rate) : undefined)}
className="filled-star-icon"
>
<path
d="M8.00002 0.0209961C8.2841 0.0209961 8.5438 0.181498 8.67084 0.435586L10.605 4.30394L14.858 4.92256C15.1405 4.96364 15.3751 5.16151 15.4633 5.43299C15.5515 5.70447 15.478 6.00248 15.2736 6.20175L12.1783 9.21971L12.8746 13.4749C12.9206 13.7561 12.8032 14.0391 12.5717 14.2053C12.3403 14.3714 12.0346 14.3921 11.7829 14.2585L8.00002 12.2513L4.21718 14.2585C3.96546 14.3921 3.65979 14.3714 3.4283 14.2053C3.1968 14.0391 3.07947 13.7561 3.12549 13.4749L3.82179 9.21971L0.726447 6.20175C0.522068 6.00248 0.448522 5.70447 0.536727 5.43299C0.624932 5.16151 0.859594 4.96364 1.14207 4.92256L5.39502 4.30394L7.3292 0.435586C7.45625 0.181498 7.71594 0.0209961 8.00002 0.0209961Z"
id="_2639925_star_icon"
data-name="2639925_star_icon"
d="M22.207,2.684l4.18,12.377,13.062.151a1.174,1.174,0,0,1,.688,2.116l-10.479,7.8L33.55,37.6a1.174,1.174,0,0,1-1.8,1.307L21.095,31.347,10.438,38.9a1.174,1.174,0,0,1-1.8-1.307l3.892-12.47-10.479-7.8a1.174,1.174,0,0,1,.688-2.116L15.8,15.059l4.18-12.377A1.175,1.175,0,0,1,22.207,2.684Z"
transform="translate(-1.576 -1.884)"
fill="currentColor"
/>
</svg>
Expand Down Expand Up @@ -84,7 +91,8 @@ const StyledRating = styled.span<RatingProps>`
)};
}
svg {
font-size: ${(props) => (props.size ? props.size : "15px")};
width: ${(props) => (props.size ? props.size : "15px")};
height: ${(props) => (props.size ? props.size : "15px")};
padding-right: 2px;
color: ${({ theme }) =>
getStylesBasedOnTheme(theme.mode, theme.white, theme.gray1)};
Expand Down Expand Up @@ -114,40 +122,38 @@ export const Rating: React.FC<RatingProps> = (props) => {
ratingValue={ratingValue}
className={`wellms-component lms-rating ${className}`}
>
<>
{startToRender.map((index) => {
return index + 1 <= Math.round(ratingValue) ? (
<RatingIconFull
key={index}
rate={index + 1}
onClick={
onRateClick ? (rate: number) => onRateClick(rate) : undefined
}
onMouseEnter={
onIconEnter ? (rate: number) => onIconEnter(rate) : undefined
}
onMouseLeave={
onIconLeave ? (rate: number) => onIconLeave(rate) : undefined
}
/>
) : (
<RatingIconEmpty
key={index}
rate={index + 1}
onClick={
onRateClick ? (rate: number) => onRateClick(rate) : undefined
}
onMouseEnter={
onIconEnter ? (rate: number) => onIconEnter(rate) : undefined
}
onMouseLeave={
onIconLeave ? (rate: number) => onIconLeave(rate) : undefined
}
/>
);
})}
{label && <span className="label">{label}</span>}
</>
{startToRender.map((index) => {
return index + 1 <= Math.round(ratingValue) ? (
<RatingIconFull
key={index}
rate={index + 1}
onClick={
onRateClick ? (rate: number) => onRateClick(rate) : undefined
}
onMouseEnter={
onIconEnter ? (rate: number) => onIconEnter(rate) : undefined
}
onMouseLeave={
onIconLeave ? (rate: number) => onIconLeave(rate) : undefined
}
/>
) : (
<RatingIconEmpty
key={index}
rate={index + 1}
onClick={
onRateClick ? (rate: number) => onRateClick(rate) : undefined
}
onMouseEnter={
onIconEnter ? (rate: number) => onIconEnter(rate) : undefined
}
onMouseLeave={
onIconLeave ? (rate: number) => onIconLeave(rate) : undefined
}
/>
);
})}
{label && <span className="label">{label}</span>}
</StyledRating>
);
};
27 changes: 17 additions & 10 deletions src/components/molecules/Rate/Rate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,30 @@ import { Title } from "../../atoms/Typography/Title";

interface Props extends ExtendableStyledComponent {
submitLabel?: string;
cancelLabel?: string;
header?: string;
onSubmit: (rate: number) => void;
onCancel: () => void;
children?: React.ReactNode;
}

const StyledRate = styled.div`
text-align: center;
.title {
${({ theme }) => {
if (theme.mode !== "dark") {
return `
color: ${theme.primaryColor};
`;
}
}}
margin-bottom: 20px;
}
.selected-info {
margin: 30px 0;
margin: 6px 0 24px 0;
font-size: 14px;
}
.submit-container {
margin-top: 44px;
display: flex;
justify-content: center;
gap: 12px;
width: 100%;
margin-top: 37px;
}
`;

Expand All @@ -40,7 +42,9 @@ export const Rate: React.FC<Props> = (props) => {
const {
header = "Rate.Header",
submitLabel = "Rate.submitButton",
cancelLabel = "Rate.cancelButton",
onSubmit,
onCancel,
className = "",
children,
} = props;
Expand All @@ -63,7 +67,6 @@ export const Rate: React.FC<Props> = (props) => {
<Title className="title" level={4}>
{t(header)}
</Title>
<Text className="selected-info">{selectInfoText}</Text>
<Rating
ratingValue={hoverRate ? hoverRate : selectedRate}
size={"33px"}
Expand All @@ -76,8 +79,12 @@ export const Rate: React.FC<Props> = (props) => {
setHoverRate(undefined);
}}
/>
<Text className="selected-info">{selectInfoText}</Text>
{children}
<div className="submit-container">
<Button mode="white" onClick={onCancel}>
{t(cancelLabel)}
</Button>
<Button
mode="secondary"
onClick={() => onSubmit(selectedRate)}
Expand Down
10 changes: 6 additions & 4 deletions src/styleguide/i18n.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,15 @@ export const resources = {
"Notes.addNew": "Add new note",
"Notes.title": "Notes",
"ProgressBar.defaultLabel": "Progress",
"Rate.Header": "How do you rate this course",
"Rate.Header": "Rate on a scale of 1-5",
"Rate.Select": "Select rate",
"Rate.Select1": "Fatal, disappointments",
"Rate.Select2": "Weak, below expectations",
"Rate.Select3": "Without a revelation, it could be better",
"Rate.Select4": "Good, as expected",
"Rate.Select5": "Sensational, I recommend it heartily",
"Rate.submitButton": "Rate the course",
"Rate.submitButton": "Send",
"Rate.cancelButton": "Cancel",
"Ratings.averageRateLabel": "Average rate",
"PdfPlayer.notFound": "Document not found",
"PdfPlayer.of": "of",
Expand Down Expand Up @@ -299,14 +300,15 @@ export const resources = {
"Notes.addNew": "Dodaj nową notatkę",
"Notes.title": "Notatki",
"ProgressBar.defaultLabel": "Postęp",
"Rate.Header": "Jak oceniasz ten kurs",
"Rate.Header": "Oceń w skali 1 - 5",
"Rate.Select": "Wybierz ocene",
"Rate.Select1": "Fatalny, rozczarowujący",
"Rate.Select2": "Słaby, poniżej oczewikań",
"Rate.Select3": "Bez, rewelacji, mógłby być lepszy",
"Rate.Select4": "Dobry, zgodny z oczekiwaniami",
"Rate.Select5": "Rewelacyjny, polecam serdecznie",
"Rate.submitButton": "Oceń kurs",
"Rate.submitButton": "Wyślij",
"Rate.cancelButton": "Anuluj",
"Ratings.averageRateLabel": "Średnia ocena",
"PdfPlayer.notFound": "Dokument nie został znaleziony",
"PdfPlayer.of": "z",
Expand Down

0 comments on commit 996919d

Please sign in to comment.