feat(Grid): added order responsive props

Author: mtorromeo

apps/docs/src/stories/Layouts/Grid.story.vue

@@ -27,5 +27,22 @@
         <pf-grid-item span="4">span = 4</pf-grid-item>
       </pf-grid>
     </story-canvas>
+
+    <story-canvas title="Item order">
+      <pf-grid gutter>
+        <pf-grid-item span="8" order-2xl="1">span = 8</pf-grid-item>
+        <pf-grid-item span="4" row-span="2">span = 4, rowSpan = 2</pf-grid-item>
+        <pf-grid-item span="2" row-span="3">span = 2, rowSpan = 3</pf-grid-item>
+        <pf-grid-item span="2">span = 2</pf-grid-item>
+        <pf-grid-item span="4">span = 4</pf-grid-item>
+        <pf-grid-item span="2">span = 2</pf-grid-item>
+        <pf-grid-item span="2">span = 2</pf-grid-item>
+        <pf-grid-item span="2">span = 2</pf-grid-item>
+        <pf-grid-item span="4" order="-1">span = 4</pf-grid-item>
+        <pf-grid-item span="2">span = 2</pf-grid-item>
+        <pf-grid-item span="4">span = 4</pf-grid-item>
+        <pf-grid-item span="4" order="2">span = 4</pf-grid-item>
+      </pf-grid>
+    </story-canvas>
   </doc-page>
 </template>

packages/core/src/layouts/Grid/Grid.vue

@@ -1,12 +1,20 @@
 <template>
-  <component :is="component" :class="[styles.grid, ...gridClasses, { [styles.modifiers.gutter]: gutter }]">
+  <component
+    :is="component"
+    :class="[styles.grid, ...gridClasses, { [styles.modifiers.gutter]: gutter }]"
+    :style="{
+      ...cssVarsFromBreakpointProps($props, 'order', gridToken.l_grid_item_Order.name),
+    }"
+  >
     <slot />
   </component>
 </template>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/layouts/Grid/grid';
-import { breakpoints } from '../../breakpoints';
+import * as gridToken from '@patternfly/react-tokens/dist/esm/l_grid_item_Order';
+
+import { breakpoints, cssVarsFromBreakpointProps, type OrderBreakpointProps } from '../../breakpoints';
 import { computed, type Component, type HTMLAttributes } from 'vue';
 
 defineOptions({
@@ -16,7 +24,7 @@ defineOptions({
 export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
                      | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OrderBreakpointProps, /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
   gutter?: boolean;
 

packages/core/src/layouts/Grid/GridItem.vue

@@ -1,12 +1,20 @@
 <template>
-  <component :is="component" :class="[styles.gridItem, ...gridClasses]">
+  <component
+    :is="component"
+    :class="[styles.gridItem, ...gridClasses]"
+    :style="{
+      ...cssVarsFromBreakpointProps($props, 'order', gridToken.l_grid_item_Order.name),
+    }"
+  >
     <slot />
   </component>
 </template>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/layouts/Grid/grid';
-import { breakpoints } from '../../breakpoints';
+import * as gridToken from '@patternfly/react-tokens/dist/esm/l_grid_item_Order';
+
+import { breakpoints, cssVarsFromBreakpointProps, type OrderBreakpointProps } from '../../breakpoints';
 import type { HTMLAttributes, Component } from 'vue';
 import { computed } from 'vue';
 import type { GridSpan } from './Grid.vue';
@@ -15,7 +23,7 @@ defineOptions({
   name: 'PfGridItem',
 });
 
-export interface Props extends /* @vue-ignore */ HTMLAttributes {
+export interface Props extends OrderBreakpointProps, /* @vue-ignore */ HTMLAttributes {
   /** The tag or component to use as container */
   component?: string | Component;