@patternfly/react-core 6.5.0-prerelease.25 → 6.5.0-prerelease.27

package/src/layouts/Grid/examples/GridResponsiveOrdering.tsx

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridResponsiveOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ lg: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridStandardOrdering.tsx

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridStandardOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ default: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithGutters.tsx

@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithGutters: React.FunctionComponent = () => (
+  <Grid hasGutter>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithOverrides.tsx

@@ -0,0 +1,20 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithOverrides: React.FunctionComponent = () => (
+  <Grid sm={6} md={4} lg={3} xl2={1}>
+    <GridItem span={3} rowSpan={2}>
+      span = 3 rowSpan= 2
+    </GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+  </Grid>
+);

package/src/layouts/Stack/examples/Stack.md

@@ -12,24 +12,10 @@ import './stack.css';
 
 ### Basic
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackBasic.tsx"
 ```
 
 ### With gutter
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack hasGutter>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackWithGutter.tsx"
 ```

package/src/layouts/Stack/examples/StackBasic.tsx

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackBasic: React.FunctionComponent = () => (
+  <Stack>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);

package/src/layouts/Stack/examples/StackWithGutter.tsx

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackWithGutter: React.FunctionComponent = () => (
+  <Stack hasGutter>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);