[master] 0.1.30 (#155)

* [develop] exported pagination (#153)

* exported pagination

* added new mobile responsive media queries based on antd

* remove margin in smaller screens

* [develop] update package version (#154)

* exported pagination

* added new mobile responsive media queries based on antd

* remove margin in smaller screens

* update package version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fave-ui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "React UI KiT by Fave",
   "author": "Fave",
   "license": "MIT",

src/Pagination/index.tsx

@@ -4,8 +4,8 @@ import { CaretLeft, CaretRight } from 'phosphor-react'
 import './style.css'
 
 export type PaginationProps = AntPaginationProps & {
-  LeftIcon: React.ReactNode
-  RightIcon: React.ReactNode
+  LeftIcon?: React.ReactNode
+  RightIcon?: React.ReactNode
 }
 
 export const itemRender = (LeftIcon: React.ReactNode, RightIcon: React.ReactNode) => (

src/Table/style.css

@@ -141,6 +141,11 @@
   }
 }
 
+.ant-pagination-item,
+.ant-pagination-total-text {
+  @apply xs:mr-0;
+}
+
 .ant-table-filter-dropdown {
   @apply shadow-md;
   @apply rounded-lg;

src/index.tsx

@@ -142,3 +142,4 @@ export { default as Affix, AffixProps } from './Affix'
 export { default as Mentions, MentionOption, MentionsProps, OptionProps } from './Mentions'
 export { default as InputNumber, InputNumberProps } from './InputNumber'
 export { default as Form, FormItem, FormProps, FormItemProps } from './Form'
+export { default as Pagination, PaginationProps } from './Pagination'

tailwind.config.js

@@ -1,4 +1,16 @@
 module.exports = {
   content: ['./src/**/*.tsx', './src/**/*.ts'],
-  presets: [require('fave-tailwindcss-presets')]
+  presets: [require('fave-tailwindcss-presets')],
+  theme: {
+    extend: {
+      screens: {
+        // overrides existing media queries
+        xs: {'min': '0px', 'max': '575px' },
+        sm: {'min': '576px', 'max': '767px' },
+        md: {'min': '768px', 'max': '991px' },
+        lg: {'min': '992px', 'max': '1199px' },
+        xl: {'min': '1200px'}
+      }
+    },
+  },
 }