new component : Rating card

CONTRIBUTING.md

@@ -27,6 +27,7 @@ This mono repository contains multiple packages under the folder `packages`
 - `tailwind-preset` contains the [Tailwind Css](https://tailwindcss.com/) preset and is released under the name `@prestashopcorp/puik-tailwind-preset`
 - `theme` contains all the CSS classes used in our components and is released under the name `@prestashopcorp/puik-theme`
 - `utils` contains all the utility functions used across our packages, this package is bundled with the other packages when it's used and isn't released as a standalone
+- `web-components` contains all the web components and is released under the name `@prestashopcorp/puik-web-components` ([see available web-components](https://github.com/PrestaShopCorp/puik/blob/main/RELEASE-NOTES-V2.md#available-components))
 
 The `playground` folder contains a Vue 3 to help you develop your components
 
@@ -80,7 +81,7 @@ $ pnpm component
 
 This command generates multiples files and injects code in these files
 
-```
+``` plaintext
 puik/
 └── packages/
     ├── components/
@@ -100,11 +101,14 @@ puik/
     ├── puik/
     │   ├── component.ts
     │   └── global.d.ts
-    └── theme/
-        └── src/
-            ├── my-component.scss
-            └── index.scss
-
+    ├── theme/
+    │   └── src/
+    │       ├── my-component.scss
+    │       └── index.scss
+    └── web-components/
+        ├── components/
+        │   └── component.ts
+        └── index.ts
 ```
 
 ### Style

RELEASE-NOTES-V2.md

@@ -44,6 +44,7 @@ Here is the list of available components in the Vue and Web-Components version o
 | Progress-stepper            | ✅  | ✅            |                  |
 | Progress-stepper-step       | ✅  | ✅            |                  |
 | Radio                       | ✅  | ✅            |                  |
+| Rating-card                 | ✅  | ✅            |                  |
 | Select                      | ✅  | ❌            |                  |
 | Sidebar                     | ✅  | ✅            |                  |
 | Sidebar-group-item          | ✅  | ❌            |                  |
@@ -52,6 +53,7 @@ Here is the list of available components in the Vue and Web-Components version o
 | Skeleton-loader             | ✅  | ✅            |                  |
 | Skeleton-loader-group       | ✅  | ✅            |                  |
 | Snackbar                    | ✅  | ❌            | Previously implemented with Headless UI, now moved to Radix Vue (see Storybook documentation for more details)|
+| Sortable-list               | ✅  | ❌            |                  |
 | Spinner-loader              | ✅  | ✅            |                  |
 | Switch                      | ✅  | ✅            |                  |
 | Tab-navigation              | ✅  | ✅            |                  |

packages/components/accordion/stories/accordion.stories.ts

@@ -47,7 +47,7 @@ export default {
     dataTest: {
       control: 'text',
       description:
-        'Set the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`'
+        'Sets the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`'
     }
   }
 } as Meta;

packages/components/alert/stories/alert.stories.ts

@@ -15,7 +15,7 @@ export default {
   component: PuikAlert,
   argTypes: {
     title: {
-      description: 'Set the alert title',
+      description: 'Sets the alert title',
       control: 'text',
       table: {
         type: {
@@ -27,7 +27,7 @@ export default {
       }
     },
     description: {
-      description: 'Set the alert description (also exists as a default slot)',
+      description: 'Sets the alert description (also exists as a default slot)',
       control: 'text',
       table: {
         type: {
@@ -64,7 +64,7 @@ export default {
     },
     variant: {
       control: 'select',
-      description: 'Set the alert variant',
+      description: 'Sets the alert variant',
       options: alertVariants,
       table: {
         type: {
@@ -112,7 +112,7 @@ export default {
       }
     },
     default: {
-      description: 'Set the alert description via the `default slot`. Useful if you want to create a description a little more complex than a simple text and integrate other puik elements like for example a classic `puik-link` (which can be an alternative to the Link button - see example below)'
+      description: 'Sets the alert description via the `default slot`. Useful if you want to create a description a little more complex than a simple text and integrate other puik elements like for example a classic `puik-link` (which can be an alternative to the Link button - see example below)'
     },
     leftIconBtn: {
       description: 'Set icon on the left side of the Action button with a Material Icon name - cf https://fonts.google.com/icons',

packages/components/avatar/stories/avatar.stories.ts

@@ -92,7 +92,7 @@ export default {
       }
     },
     ariaLabel: {
-      description: 'Set the aria-label attribute for accessibility',
+      description: 'Sets the aria-label attribute for accessibility',
       table: {
         defaultValue: {
           summary: 'undefined'
@@ -152,7 +152,7 @@ export default {
     dataTest: {
       control: 'text',
       description:
-        'Set the data-test attribute for the avatar `image-${dataTest}` `icon-${dataTest}` `initials-${dataTest}`'
+        'Sets the data-test attribute for the avatar `image-${dataTest}` `icon-${dataTest}` `initials-${dataTest}`'
     }
   },
   args: {

packages/components/badge/stories/badge.stories.ts

@@ -14,7 +14,7 @@ export default {
     },
     variant: {
       control: 'select',
-      description: 'Set the badge variant',
+      description: 'Sets the badge variant',
       options: badgeVariants,
       table: {
         type: {
@@ -26,7 +26,7 @@ export default {
       }
     },
     ariaLabel: {
-      description: 'Set the aria-label attribute for accessibility',
+      description: 'Sets the aria-label attribute for accessibility',
       table: {
         defaultValue: {
           summary: 'undefined'
@@ -38,7 +38,7 @@ export default {
     },
     dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute on the badge'
+      description: 'Sets the data-test attribute on the badge'
     }
   },
   args: {

packages/components/button/stories/button.stories.ts

@@ -12,7 +12,7 @@ export default {
   argTypes: {
     variant: {
       control: 'select',
-      description: 'Set the button variant',
+      description: 'Sets the button variant',
       options: buttonVariants,
       table: {
         defaultValue: {
@@ -25,7 +25,7 @@ export default {
     },
     size: {
       control: 'select',
-      description: 'Set the button size',
+      description: 'Sets the button size',
       options: buttonSizes,
       table: {
         defaultValue: {
@@ -37,34 +37,34 @@ export default {
       }
     },
     fluid: {
-      description: 'Set the button as fluid',
+      description: 'Sets the button as fluid',
       table: {
         defaultValue: {
           summary: false
         }
       }
     },
     wrapLabel: {
-      description: 'Set the carriage return of the button label',
+      description: 'Sets the carriage return of the button label',
       table: {
         defaultValue: {
           summary: false
         }
       }
     },
     disabled: {
-      description: 'Set the button as disabled',
+      description: 'Sets the button as disabled',
       table: {
         defaultValue: {
           summary: false
         }
       }
     },
     leftIcon: {
-      description: 'Set the button left icon'
+      description: 'Sets the button left icon'
     },
     rightIcon: {
-      description: 'Set the button right icon'
+      description: 'Sets the button right icon'
     },
     default: {
       control: 'text',
@@ -85,7 +85,7 @@ export default {
         'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`'
     },
     ariaLabel: {
-      description: 'Set the aria-label attribute for accessibility',
+      description: 'Sets the aria-label attribute for accessibility',
       table: {
         defaultValue: {
           summary: 'undefined'
@@ -97,7 +97,7 @@ export default {
     },
     disabledReason: {
       control: 'text',
-      description: 'Set the aria-describedby attribute for accessibility if disabled'
+      description: 'Sets the aria-describedby attribute for accessibility if disabled'
     }
   },
   args: {

packages/components/card/stories/card.stories.ts

@@ -10,7 +10,7 @@ export default {
   component: PuikCard,
   argTypes: {
     variant: {
-      description: 'Set the card variant',
+      description: 'Sets the card variant',
       table: {
         defaultValue: {
           summary: 'default'
@@ -21,7 +21,7 @@ export default {
       }
     },
     ariaLabel: {
-      description: 'Set the aria-label attribute for accessibility',
+      description: 'Sets the aria-label attribute for accessibility',
       table: {
         defaultValue: {
           summary: 'undefined'

packages/components/checkbox/stories/checkbox.stories.ts

@@ -7,11 +7,11 @@ export default {
   argTypes: {
     default: {
       control: 'text',
-      description: 'Set the label via default slot'
+      description: 'Sets the label via default slot'
     },
     label: {
       control: 'text',
-      description: 'Set the checkbox label'
+      description: 'Sets the checkbox label'
     },
     ariaLabel: {
       description: 'If you are planning to set the label via default slot instead of using label prop then in that case you should set the aria-label for better accessibility',
@@ -36,7 +36,7 @@ export default {
       }
     },
     indeterminate: {
-      description: 'Set the indeterminate checkbox  state',
+      description: 'Sets the indeterminate checkbox  state',
       table: {
         defaultValue: {
           summary: false
@@ -48,7 +48,7 @@ export default {
       control: 'none'
     },
     disabled: {
-      description: 'Set the checkbox as disabled',
+      description: 'Sets the checkbox as disabled',
       table: {
         defaultValue: {
           summary: false
@@ -57,7 +57,7 @@ export default {
     },
     dataTest: {
       description:
-        'Set the data-test attribute for the label and the input `label-${dataTest}` `input-${dataTest}`}`',
+        'Sets the data-test attribute for the label and the input `label-${dataTest}` `input-${dataTest}`}`',
       control: 'text'
     }
   },

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

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}`
   };
 });
 

packages/components/icon/stories/icon.stories.ts

@@ -6,10 +6,10 @@ export default {
   component: PuikIcon,
   argTypes: {
     icon: {
-      description: 'Set the icon name'
+      description: 'Sets the icon name'
     },
     fontSize: {
-      description: 'Set the icon font size',
+      description: 'Sets the icon font size',
       control: {
         type: 'range',
         min: 1,
@@ -18,21 +18,21 @@ export default {
       }
     },
     color: {
-      description: 'Set the icon color',
+      description: 'Sets the icon color',
       control: {
         type: 'color'
       }
     },
     nodeType: {
-      description: 'Set the HTML node type',
+      description: 'Sets the HTML node type',
       default: 'div',
       control: {
         type: 'radio',
         options: ['div', 'span']
       }
     },
     dataTest: {
-      description: 'Set the data-test attribute'
+      description: 'Sets the data-test attribute'
     },
     isDisabled: {
       description: 'If the icon is disable',
@@ -41,7 +41,7 @@ export default {
       }
     },
     ariaLabel: {
-      description: 'Set the aria-label attribute for accessibility (if this prop is not present the default aria-label will be set to the icon name)',
+      description: 'Sets the aria-label attribute for accessibility (if this prop is not present the default aria-label will be set to the icon name)',
       table: {
         defaultValue: {
           summary: 'undefined'

packages/components/index.ts

@@ -33,3 +33,4 @@ export * from './avatar';
 export * from './divider';
 export * from './notification-bar';
 export * from './sortable-list';
+export * from './rating-card';