💄(react) align actions column items on the right

The design-system guidelines tell that actions button must be aligned
on the right. To make this behavior effortless this feature adds a
special class to actions column to apply the correct css style in order
to achieve that.

.changeset/tall-pandas-care.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add auto right alignment for the actions column in DataGrid

packages/react/src/components/DataGrid/index.mdx

@@ -163,6 +163,12 @@ The component automatically displays an empty state when there is no data to dis
   <Story id="components-datagrid--empty"/>
 </Canvas>
 
+## Actions alignment
+
+As you can see from examples above there's often a dedicated column for actions ( the right-most one ). Our recommendation
+is to align on the right the actions buttons, in order to make this easy and convenient we automatically align the right
+the cell contents of this column when you give it the `id` `actions`.
+
 ## Do's and don'ts
 
 ### Button

packages/react/src/components/DataGrid/index.scss

@@ -105,6 +105,11 @@
           color: var(--c--theme--colors--greyscale-800);
           font-weight: var(--c--theme--font--weights--medium);
         }
+        &--actions {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
       }
     }
 

packages/react/src/components/DataGrid/index.stories.tsx

@@ -272,8 +272,8 @@ export const DataListOnly = () => {
           { field: "title" },
           { field: "date" },
           {
-            headerName: "action",
+            headerName: "actions",
-            id: "action",
+            id: "actions",
             renderCell: () => {
               return (
                 <Button size="small" color="secondary">

packages/react/src/components/DataGrid/index.tsx

@@ -225,6 +225,8 @@ export const DataGrid = <T extends Row>({
                           key={cell.id}
                           className={classNames({
                             "c__datagrid__row__cell--highlight": highlight,
+                            "c__datagrid__row__cell--actions":
+                              cell.column.id === "actions",
                           })}
                         >
                           {flexRender(