4 files changed, 59 insertions, 0 deletions
diff --git a/components/Ranking/RankingEntry.stories.js b/components/Ranking/RankingEntry.stories.js
new file mode 100644
index 0000000..20bf6e1
--- /dev/null
+++ b/components/Ranking/RankingEntry.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingEntry from './RankingEntry'
+
+export const rankingEntry = {
+  troop: 'Test',
+  points: 32
+}
+
+storiesOf('Ranking/RankingEntry', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingEntry },
+      template: `<ranking-entry :troop="troop" :points="points" />`,
+      data: () => rankingEntry
+    }
+  })
diff --git a/components/Ranking/RankingFirstEntry.stories.js b/components/Ranking/RankingFirstEntry.stories.js
new file mode 100644
index 0000000..05fa517
--- /dev/null
+++ b/components/Ranking/RankingFirstEntry.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingFirstEntry from './RankingFirstEntry'
+
+import { rankingEntry } from './RankingEntry.stories'
+
+storiesOf('Ranking/RankingFirstEntry', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingFirstEntry },
+      template: `<ranking-first-entry :troop="troop" :points="points" />`,
+      data: () => rankingEntry
+    }
+  })
diff --git a/components/Ranking/RankingFirstEntry.vue b/components/Ranking/RankingFirstEntry.vue
index d9f290b..ad0bea0 100644
--- a/components/Ranking/RankingFirstEntry.vue
+++ b/components/Ranking/RankingFirstEntry.vue
@@ -44,6 +44,7 @@ export default {
 
 .ranking-first-entry__troop {
   grid-column: 2;
+  text-align: center;
 }
 
 .ranking-first-entry__points {
diff --git a/components/Ranking/RankingList.stories.js b/components/Ranking/RankingList.stories.js
new file mode 100644
index 0000000..ad3576b
--- /dev/null
+++ b/components/Ranking/RankingList.stories.js
@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../../.storybook/decorators'
+
+import RankingList from './RankingList'
+
+import { rankingEntry } from './RankingEntry.stories'
+
+const rankingList = {
+  scores: Array.from(Array(3).keys()).map(i => ({
+    ...rankingEntry,
+    troop: `Troop${i}`
+  }))
+}
+
+storiesOf('Ranking/RankingList', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { RankingList },
+      template: `<ranking-list :scores="scores" />`,
+      data: () => rankingList
+    }
+  })