1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js
new file mode 100644
index 00000000000..e31446f4bb8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js
@@ -0,0 +1,40 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import PaginationBar from './pagination_bar.vue';
+
+export default {
+  component: PaginationBar,
+  title: 'vue_shared/components/pagination_bar/pagination_bar',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { PaginationBar },
+  props: Object.keys(argTypes),
+  template: `<pagination-bar v-bind="$props" v-on="{ 'set-page-size': setPageSize, 'set-page': setPage }" />`,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  pageInfo: {
+    perPage: 20,
+    page: 2,
+    total: 83,
+    totalPages: 5,
+  },
+  pageSizes: [20, 50, 100],
+};
+
+Default.argTypes = {
+  pageInfo: {
+    description: 'Page info object',
+    control: { type: 'object' },
+  },
+  pageSizes: {
+    description: 'Array of possible page sizes',
+    control: { type: 'array' },
+  },
+
+  // events
+  setPageSize: { action: 'set-page-size' },
+  setPage: { action: 'set-page' },
+};