DS - storybook center stories & group patterns (#5847)

* center stories and make patterns grouping

* remove align center

Author: britt6612

shared/aries-core/.storybook/preview.mjs

@@ -1,6 +1,6 @@
 import React from 'react';
 import { hpe } from 'grommet-theme-hpe';
-import { Grommet } from 'grommet';
+import { Grommet, Box } from 'grommet';
 import { useIsDarkMode } from './darkModeHooks';
 
 export default {
@@ -11,14 +11,21 @@ export default {
       const mode = isDark ? 'dark' : 'light';
 
       return (
-        <Grommet full theme={hpe} themeMode={mode} background={context.globals.background?.value}>
-          <Story />
+        <Grommet
+          full
+          theme={hpe}
+          themeMode={mode}
+          background={context.globals.background?.value}
+        >
+          <Box pad="large" fill>
+            <Story />
+          </Box>
         </Grommet>
       );
     },
   ],
   parameters: {
-    layout: 'fullscreen',
+    layout: 'centered',
     actions: {
       disable: true,
     },

shared/aries-core/src/stories/codeBlocks.stories.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { CodeBlockExample } from 'apps/docs/src/examples/templates/code-blocks/CodeBlocks';
 
 const meta = {
-  title: 'Code Blocks',
+  title: 'Patterns/Code Blocks',
   component: CodeBlockExample,
   parameters: {
     layout: 'centered',

shared/aries-core/src/stories/dashboards.stories.js

@@ -6,7 +6,7 @@ import { ThreeColumnDashboard } from 'apps/docs/src/examples/templates/dashboard
 import { TwoColumnDashboard } from 'apps/docs/src/examples/templates/dashboards/TwoColumnDashboard';
 
 const meta = {
-  title: 'Dashboards',
+  title: 'Patterns/Dashboards',
   parameters: {
     layout: 'fullscreen',
   },

shared/aries-core/src/stories/dataTableCustomization.stories.js

@@ -5,7 +5,7 @@ import { ColumnSettingsExample } from 'apps/docs/src/examples/templates/table-cu
 import { TableCustomizationExample } from 'apps/docs/src/examples/templates/table-customization/components/TableCustomizationExample';
 
 const meta = {
-  title: 'DataTable Customization',
+  title: 'Patterns/DataTable Customization',
   parameters: {
     layout: 'centered',
   },

shared/aries-core/src/stories/emptyState.stories.js

@@ -9,7 +9,7 @@ import { LayerEmptyState } from 'apps/docs/src/examples/templates/empty-state/La
 import { PageEmptyState } from 'apps/docs/src/examples/templates/empty-state/PageEmptyState';
 
 const meta = {
-  title: 'Empty State',
+  title: 'Patterns/Empty State',
 };
 
 export default meta;

shared/aries-core/src/stories/filtering.stories.js

@@ -7,7 +7,7 @@ import { FilteringLists } from 'apps/docs/src/examples/templates/filtering/Filte
 import { QuickFilterToolbar } from 'apps/docs/src/examples/templates/filtering/QuickFilterToolbar';
 
 const meta = {
-  title: 'Filtering',
+  title: 'Patterns/Filtering',
 };
 
 export default meta;

shared/aries-core/src/stories/forms.stories.js

@@ -15,7 +15,7 @@ import { CharacterCounterExample } from 'apps/docs/src/examples/templates/forms/
 import { ChangePasswordExample } from 'apps/docs/src/examples/templates/forms/ChangePasswordExample';
 
 const meta = {
-  title: 'Forms',
+  title: 'Patterns/Forms',
 };
 
 export default meta;

shared/aries-core/src/stories/globalNotifications.stories.js

@@ -9,7 +9,7 @@ import { BannerNotificationWarning } from 'apps/docs/src/examples/templates/glob
 import { BannerNotificationWarningClose } from 'apps/docs/src/examples/templates/global-banner-notifications/Examples/BannerNotificationWarningClose';
 
 const meta = {
-  title: 'Global Notifications',
+  title: 'Patterns/Global Notifications',
 };
 
 export default meta;

shared/aries-core/src/stories/inlineNotifications.stories.js

@@ -8,7 +8,7 @@ import { PromotionExample } from 'apps/docs/src/examples/templates/inline-notifi
 import { StatusUpdateExample } from 'apps/docs/src/examples/templates/inline-notifications/StatusUpdateExample';
 
 const meta = {
-  title: 'Inline Notifications',
+  title: 'Patterns/Inline Notifications',
 };
 
 export default meta;

shared/aries-core/src/stories/lists.stories.js

@@ -10,7 +10,7 @@ import { ListOrderExample } from 'apps/docs/src/examples/templates/list-views/Li
 import { ListScreenExample } from 'apps/docs/src/examples/templates/list-views/ListScreenExample';
 
 const meta = {
-  title: 'Lists',
+  title: 'Patterns/Lists',
 };
 
 export default meta;