docs: add decorator to wrap story in container (jquense#2385)

noloco-io · Mar 24, 2023 · c7cd908 · c7cd908
1 parent 67db3d7
commit c7cd908
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/stories/Calendar.stories.js b/stories/Calendar.stories.js
@@ -12,13 +12,16 @@ import customComponents from './resources/customComponents'
 export default {
   title: 'Additional Examples',
   component: Calendar,
+  decorators: [
+    (Story) => (
+      <div className="height600">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
-const Template = (args) => (
-  <div className="height600">
-    <BaseCalendar {...args} />
-  </div>
-)
+const Template = (args) => <BaseCalendar {...args} />
 
 export const ComplexDayViewLayout = Template.bind({})
 ComplexDayViewLayout.storyName = 'complex day view layout'

diff --git a/stories/DragAndDrop.stories.js b/stories/DragAndDrop.stories.js
@@ -7,6 +7,13 @@ import customComponents from './resources/customComponents'
 export default {
   title: 'Additional Examples/Drag and Drop',
   component: Calendar,
+  decorators: [
+    (Story) => (
+      <div className="height600">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 const Template = (args) => (

diff --git a/stories/Durations.stories.js b/stories/Durations.stories.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { action } from '@storybook/addon-actions'
 import {
   Calendar,
   Views,
@@ -25,6 +24,13 @@ const DraggableCalendar = withDragAndDrop(Calendar)
 export default {
   title: 'Additional Examples/Event Durations',
   component: Calendar,
+  decorators: [
+    (Story) => (
+      <div className="height600">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 const Template = ({ localizer: loc = 'moment', ...args }) => {

diff --git a/stories/Layout.stories.js b/stories/Layout.stories.js
@@ -9,6 +9,13 @@ import createEvents from './helpers/createEvents'
 export default {
   title: 'Additional Examples/Layout',
   component: Calendar,
+  decorators: [
+    (Story) => (
+      <div className="height600">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 const Template = (args) => <Calendar {...args} />

diff --git a/stories/Timeslots.stories.js b/stories/Timeslots.stories.js
@@ -7,6 +7,13 @@ import { Calendar as BaseCalendar, Views, events } from './helpers'
 export default {
   title: 'Additional Examples/Timeslots',
   component: Calendar,
+  decorators: [
+    (Story) => (
+      <div className="height600">
+        <Story />
+      </div>
+    ),
+  ],
 }
 
 const Template = (args) => <BaseCalendar {...args} />