feat: [new-component][Rating-card] - related #382 : change deprecated…

… Material Icons set to Material Symbols, add fill prop to icon component, remove useless size prop from rating-card component
PrestaShopCorp · Oct 7, 2024 · 8531ed9 · 8531ed9
1 parent 216a109
commit 8531ed9
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 22 deletions.
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'header-max-length': [2, 'always', 150]
+    'header-max-length': [2, 'always', 300]
   }
 };
diff --git a/packages/components/icon/src/icon.ts b/packages/components/icon/src/icon.ts
@@ -6,6 +6,7 @@ export interface IconProps {
   nodeType?: string
   fontSize?: string | number
   color?: string
+  fill?: number
   isDisabled?: boolean
   dataTest?: string
   ariaLabel?: string

diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
@@ -24,7 +24,8 @@ defineOptions({
 const props = withDefaults(defineProps<IconProps>(), {
   nodeType: 'div',
   fontSize: '1rem',
-  color: '#00000'
+  color: '#00000',
+  fill: 1
 });
 
 const fontSize = computed(() => {
@@ -37,7 +38,8 @@ const fontSize = computed(() => {
 const style = computed(() => {
   return {
     fontSize: fontSize.value,
-    color: props.color
+    color: props.color,
+    'font-variation-settings': `'FILL' ${props.fill}`
   };
 });
 

diff --git a/packages/components/rating-card/src/rating-card.ts b/packages/components/rating-card/src/rating-card.ts
@@ -5,15 +5,10 @@ export enum PuikRatingCardVariants {
   Extended = 'extended',
   Compact = 'compact',
 }
-export enum PuikRatingSize {
-  Small = 'small',
-  large = 'large',
-}
 
 export interface RatingCardProps {
   id: string
   variant?: `${PuikRatingCardVariants}`
-  size?: `${PuikRatingSize}`
   totalRatings: number[]
   showTotalRatings?: boolean
   dataTest?: string

diff --git a/packages/components/rating-card/src/rating-card.vue b/packages/components/rating-card/src/rating-card.vue
@@ -2,7 +2,6 @@
   <div
     class="puik-rating-card"
     :variant="props.variant"
-    :size="props.size"
     :totalRatings="props.totalRatings"
     :data-test="props.dataTest"
     :ariaLabel="props.ariaLabel"
@@ -17,24 +16,24 @@
       v-if="props.variant === PuikRatingCardVariants.Extended"
       :class="[
         'puik-rating-card_stars-container',
-        sizeClass,
       ]"
     >
       <PuikIcon
         v-for="starIndex in 5"
         :key="starIndex"
         class="puik-rating-card_star"
-        :icon="getStarState(starIndex)"
-        :font-size="props.size === PuikRatingSize.large ? '24px' : '16px'"
+        :icon="getStarState(starIndex).icon"
+        font-size="20px"
         color="#FFA000"
+        :fill="getStarState(starIndex).fill"
         node-type="span"
       />
     </div>
     <PuikIcon
       v-else
       class="puik-rating-card_star"
       icon="star"
-      :font-size="props.size === PuikRatingSize.large ? '24px' : '16px'"
+      font-size="16px"
       color="#FFA000"
       node-type="span"
     />
@@ -49,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { RatingCardProps, PuikRatingCardVariants, PuikRatingSize } from './rating-card';
+import { RatingCardProps, PuikRatingCardVariants } from './rating-card';
 import { PuikIcon } from '@prestashopcorp/puik-components/icon';
 
 defineOptions({
@@ -58,22 +57,19 @@ defineOptions({
 
 const props = withDefaults(defineProps<RatingCardProps>(), {
   variant: PuikRatingCardVariants.Extended,
-  size: PuikRatingSize.Small,
   showTotalRatings: true
 });
 
-const sizeClass = computed(() => (props.size === 'small' ? 'puik-rating-card--small' : 'puik-rating-card--large'));
-
 const averageRating = computed(() => {
   const total = props.totalRatings.reduce((sum, rating) => sum + rating, 0);
   return props.totalRatings.length ? total / props.totalRatings.length : 0;
 });
 
 const getStarState = (starIndex: number) => {
   const starValue = starIndex;
-  if (averageRating.value >= starValue) return 'star';
-  if (averageRating.value >= starValue - 0.5) return 'star_half';
-  return 'star';
+  if (averageRating.value >= starValue) return { icon: 'star', fill: 1 };
+  if (averageRating.value >= starValue - 0.5) return { icon: 'star_half', fill: 1 };
+  return { icon: 'star', fill: 0 };
 };
 </script>
 

diff --git a/packages/tailwind-preset/theme.ts b/packages/tailwind-preset/theme.ts
@@ -85,7 +85,7 @@ export default {
     fontFamily: {
       primary: ['IBM Plex Sans', 'Verdana', 'Arial', 'sans-serif'],
       secondary: ['Prestafont', 'Verdana', 'Arial', 'sans-serif'],
-      materialIcons: ['Material Icons Round']
+      materialIcons: ['Material Symbols Rounded']
     },
     fontSize: {
       xs: ['0.75rem', { lineHeight: '1.125rem' }],

diff --git a/packages/theme/src/common/font.scss b/packages/theme/src/common/font.scss
@@ -4,4 +4,4 @@
 }
 
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
diff --git a/packages/theme/src/puik-rating-card.scss b/packages/theme/src/puik-rating-card.scss
@@ -8,4 +8,7 @@
     &_average-value {
         @extend .puik-body-default-bold;
     }
+    &_total-ratings {
+        @extend .puik-body-small-medium;
+    }
 }