feat: pagination component (#261)

* feat(pagination): complete pagination functionality

* fix(pagination): fix attribute names

* fix(pagination): change paginate function logic

* docs: add pagination stories

* refactor(pagination): button events

* test: add pagination tests

* test(pagination): revert icon changes

* test: mocking strategy of bl-icon is improved

* test(pagination): complete tests for select helper

* docs: select helper docs for pagination

* fix(pagination): setting page on select changes

* fix(pagination): implement review finding

* feat(select): hide remove icon button on single selection

* fix(pagination): update button variants

Co-authored-by: Murat Çorlu <[email protected]>

commitlint.config.js

@@ -17,7 +17,8 @@ module.exports = {
         'progress-indicator',
         'checkbox',
         'alert',
-        'select'
+        'select',
+        'pagination'
       ],
     ],
   },

package.json

@@ -90,6 +90,7 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@web/dev-server-esbuild": "0.2.16",
+    "@web/dev-server-import-maps": "^0.0.7",
     "@web/dev-server-rollup": "^0.3.17",
     "@web/test-runner": "^0.13.15",
     "@web/test-runner-playwright": "^0.8.6",

src/baklava.ts

@@ -11,4 +11,5 @@ export { default as BlCheckbox } from './components/checkbox/bl-checkbox';
 export { default as BlAlert } from './components/alert/bl-alert';
 export { default as BlSelect } from './components/select/bl-select';
 export { default as BlSelectOption } from './components/select/option/bl-select-option';
+export { default as BlPagination } from './components/pagination/bl-pagination';
 export { getIconPath, setIconPath } from './utilities/asset-paths';

src/components/button/bl-button.css

@@ -117,6 +117,10 @@
   text-decoration: none;
 }
 
+:host([variant='tertiary'][disabled]) .button {
+  --main-color:transparent;
+}
+
 :host([variant='secondary']:hover:not([disabled])) .button {
   --content-color: var(--bl-color-primary-background);
   --bg-color: var(--main-hover-color);

src/components/button/bl-button.stories.mdx

@@ -188,10 +188,18 @@ If button has a limited width and a long text that can not fit in a single line,
 
 ## Disabled Buttons
 
-Disable version of all buttons is the same.
+We have 2 types of disabled buttons: Disable version of Primary and Secondary buttons is the same.
 
 <Canvas columns={1}>
-  <Story name="Disabled Buttons" args={{ disabled: true, content: 'Passive Button' }}>
+  <Story name="Disabled Primary and Secondary Buttons" args={{ disabled: true, content: 'Passive Button' }}>
+    {SizesTemplate.bind({})}
+  </Story>
+</Canvas>
+
+Whereas Tertiary buttons keep their transparent backgrounds.
+
+<Canvas columns={1}>
+  <Story name="Disabled Tertiary Buttons" args={{ disabled: true, content: 'Passive Button',variant:"tertiary" }}>
     {SizesTemplate.bind({})}
   </Story>
 </Canvas>

src/components/pagination/bl-pagination.css

@@ -0,0 +1,65 @@
+:host {
+  width: max-content;
+}
+
+.pagination {
+  display: flex;
+}
+
+.pagination * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page-container {
+  display: flex;
+  align-items: center;
+}
+
+.page-list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  user-select: none;
+}
+
+.dots {
+  margin:0 var(--bl-size-2xs);
+}
+
+.dots::before {
+  content: ' \B7 \B7 \B7';
+  color: var(--bl-color-secondary);
+}
+
+.pagination-helpers {
+  display: flex;
+  align-items: center;
+  margin-right: var(--bl-size-s);
+  gap: var(--bl-size-m);
+}
+
+.jumper,
+.select {
+  display: flex;
+  align-items: center;
+  gap: var(--bl-size-2xs);
+}
+
+label {
+  font: var(--bl-font-title-3-medium);
+  font-size: var(--bl-font-size-m);
+  font-weight: var(--bl-font-weight-medium);
+  line-height: var(--bl-font-size-m);
+  letter-spacing: 0;
+  user-select: none;
+}
+
+bl-input {
+  width: 62px;
+}
+
+bl-select {
+  width:128px;
+}