@enki-tek/fms-web-components 0.0.2 → 0.0.3

package/components/Pagination/Pagination.scss

@@ -0,0 +1,83 @@
+@import '../variable.scss';
+
+%common-borders {
+    border: 1px solid $gray-200;
+}
+
+:global(.pagination) {
+    display: flex;
+    padding-left: 0;
+    list-style: none;
+    gap: 5px;
+    margin-top: 2rem;
+}
+
+:global(.custom-pagination-list) {
+    display: flex;
+    @extend %common-borders;
+    background: $white;
+}
+
+:global(.custom-pagination-link) {
+    display: flex;
+    align-items: center;
+    @extend %common-borders;
+    background: $white;
+    color: $gray-600;
+    line-height: 16px;
+    /* 100% */
+}
+
+:global(.custom-pagination-link-add) {
+    display: flex;
+    align-items: center;
+    @extend %common-borders;
+    background: $white;
+    color: $gray-500;
+    line-height: 16px;
+    /* 100% */
+}
+
+:global(.page-item.disabled .page-link) {
+    color: $gray-400;
+}
+
+:global(.pagination-lg .page-link) {
+    padding: 12px 16px;
+    font-size: 16px;
+}
+
+:global(.page-link:hover) {
+    z-index: 2;
+    color: $gray-600;
+    @extend %common-borders;
+    background: $green-100;
+}
+
+:global(.page-link:focus) {
+    outline: 0;
+    box-shadow: none;
+}
+
+:global(.page-item.active .page-link) {
+    z-index: 3;
+    color: $white;
+    background-color: $secondary;
+    border-color: $secondary-dark;
+}
+
+.dots-span {
+    display: flex;
+    align-items: end;
+    color: $gray-600;
+}
+
+:global(.page-item:first-child .page-link) {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+:global(.page-item:last-child .page-link) {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}

package/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    export const title: string;
+    export { Pagination as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace noOfItems {
+            namespace control {
+                const type: string;
+            }
+        }
+        namespace itemPerPage {
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        const noOfItems_1: string;
+        export { noOfItems_1 as noOfItems };
+        const itemPerPage_1: string;
+        export { itemPerPage_1 as itemPerPage };
+    }
+}
+import Pagination from "./Pagination.svelte";

package/components/Pagination/Pagination.stories.js

@@ -0,0 +1,18 @@
+import Pagination from './Pagination.svelte';
+
+export default{
+    title:'FMS/Pagination',
+    component:Pagination,
+    tags:['autodocs'],
+    argTypes:{
+        noOfItems:{control:{type:'number'}},
+        itemPerPage:{control:{type:'number'}}
+    }
+};
+
+export const Default = {
+    args:{
+        noOfItems:'200',
+        itemPerPage:'10',
+    }
+}