Merge pull request #59 from thelia/feat/pagination

feat(pagination): wip, need fields
thelia · Jul 11, 2024 · cfe855e · cfe855e
2 parents 8774059 + 56bff5e
commit cfe855e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/components/Organisms/Pagination/Pagination.stories.js b/components/Organisms/Pagination/Pagination.stories.js
@@ -0,0 +1,25 @@
+import Pagination from './Pagination.twig';
+
+export default {
+  title: 'Design System/Organisms/Pagination'
+};
+
+export const base = {
+  render: (args) => Pagination(args),
+  args: {
+    currentPage: 1,
+    totalPages: 10
+  },
+  argTypes: {
+    currentPage: {
+      control: {
+        type: 'number'
+      }
+    },
+    totalPages: {
+      control: {
+        type: 'number'
+      }
+    }
+  }
+};
diff --git a/components/Organisms/Pagination/Pagination.twig b/components/Organisms/Pagination/Pagination.twig
@@ -0,0 +1,11 @@
+<div class="Pagination">
+	{% include "../../Molecules/Button/Button.twig" with { icon_left: "arrow-left", variant: "tertiary", classes: "Button--large" } %}
+
+	<div class="Pagination-input">
+		{% include '../../Molecules/Fields/FieldNumber/FieldNumber.twig' with { name: "page", max: totalPages, value: currentPage } %}
+		<span class='paragraph-3'>sur
+			{{ totalPages }}</span>
+	</div>
+
+	{% include "../../Molecules/Button/Button.twig" with { icon_left: "arrow-right", variant: "tertiary", classes: "Button--large" } %}
+</div>
diff --git a/components/Organisms/Pagination/pagination.css b/components/Organisms/Pagination/pagination.css
@@ -0,0 +1,11 @@
+.Pagination {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+
+  &-input {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+}