Merge pull request #131 from nih-sparc/update-pagination

Added button pagination and announcement notification

Author: egauzens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nih-sparc/sparc-design-system-components",
-  "version": "0.26.29",
+  "version": "0.26.30",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/components/_el-message.scss

@@ -1,22 +1,17 @@
 @import '../_variables.scss';
 
 .el-message {
-  padding: 15px 3px 15px 15px;
+  padding: 1rem;
   @media screen and (max-width: 767px) {
     min-width: 250px;
   }
-  .el-message__closeBtn {
-    color: #9CA1A3;
-    transform: scale(0.8);
-    top: 35%;
-  }
   &.el-message--success {
     background-color: #F7FFEE;
     border: 1px solid #5E9F69;
     .el-icon-circle-check {
       color: #5E9F69;
       -webkit-text-stroke-width: 0.016rem;
-      padding-right: 15px;
+      padding-right: 1rem;
     }
     .el-message__content {
       color: #303133;
@@ -28,10 +23,31 @@
     .el-icon-circle-close {
       color: #B51D09;
       -webkit-text-stroke-width: 0.016rem;
-      padding-right: 15px;
+      padding-right: 1rem;
+    }
+    .el-message__content {
+      color: #303133;
     }
+  }
+  &.el-message--info {
+    background-color: #f9f2fc;;
+    border: 1px solid $purple;
     .el-message__content {
       color: #303133;
+      margin: 0 .5rem;
+    }
+    .about-icon {
+      background-color: $purple;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: inline-block;
+      content: '';
+      -webkit-mask: url("data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EDataPortal-Icons%3C/title%3E%3Cpath d='M12,5a7,7,0,1,1-7,7,7.008,7.008,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z'/%3E%3Cpath d='M12,7.148a.9.9,0,1,0,.9.9.9.9,0,0,0-.9-.9Z'/%3E%3Cpath d='M12,17.148a1,1,0,0,1-1-1v-5.4a1,1,0,1,1,2,0v5.4A1,1,0,0,1,12,17.148Z'/%3E%3C/svg%3E");
+      mask: url("data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EDataPortal-Icons%3C/title%3E%3Cpath d='M12,5a7,7,0,1,1-7,7,7.008,7.008,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z'/%3E%3Cpath d='M12,7.148a.9.9,0,1,0,.9.9.9.9,0,0,0-.9-.9Z'/%3E%3Cpath d='M12,17.148a1,1,0,0,1-1-1v-5.4a1,1,0,1,1,2,0v5.4A1,1,0,0,1,12,17.148Z'/%3E%3C/svg%3E");
+      -webkit-mask-size: contain;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
     }
   }
 }

src/components/Pagination/src/Pagination.vue

@@ -3,10 +3,11 @@
     <el-pagination
       :page-size="pageSize"
       :page-count="pageCount"
-      :pager-count="5"
+      :pager-count="pagerCount"
       layout="prev, pager, next"
       :total="totalCount"
       :current-page="selected"
+      :background="background"
       @current-change="selectPage"
     />
   </div>
@@ -27,6 +28,14 @@ export default {
     totalCount: {
       type: Number,
       default: 0
+    },
+    background: {
+      type: Boolean,
+      default: false
+    },
+    pagerCount: {
+      type: Number,
+      default: 5
     }
   },
   computed: {
@@ -51,6 +60,39 @@ export default {
   padding-top: 1em;
   text-align: center;
 
+  .is-background {
+    li.more,
+    li.number {
+      background: #f9f2fc;
+      border: 1.5px solid $app-primary-color;
+      color: $app-primary-color;
+      border-radius: 50%;
+    }
+    .el-pager .more::before {
+      line-height: 0;
+    }
+    li.number.active {
+      color: white;
+    }
+    .btn-next, .btn-prev {
+      background: $app-primary-color;
+      color: white;
+      border-radius: 50%;
+    }
+    .btn-next:disabled, .btn-prev:disabled {
+      background: $lightGrey;
+      opacity: 0.3;
+      color: white;
+    }
+    .btn-next .el-icon, .btn-prev .el-icon {
+      font-size: 1rem;
+    }
+    li.number:hover {
+      background: $app-primary-color;
+      color: white !important;
+    }
+  }
+
   button.btn-prev {
     background: transparent;
   }

src/stories/Pagination/pagination.stories.js

@@ -6,19 +6,20 @@ export default {
   includeStories: []
 }
 
-const createDemo = (selected, totalCount, pageSize) => {
+const createDemo = (selected, totalCount, pageSize, background=false) => {
     return {
         components: { Pagination },
         data() {
             return {
                 selected: selected,
                 totalCount: totalCount,
-                pageSize: pageSize
+                pageSize: pageSize,
+                background: background
             }
         },
         template: `
             <div>
-                <pagination :total-count="totalCount" :selected="selected" :page-size="pageSize" />
+                <pagination :total-count="totalCount" :selected="selected" :page-size="pageSize" :background="background"/>
             </div>
         `
     }
@@ -28,6 +29,8 @@ export const Primary = () => createDemo(3, 100, 20)
 
 export const Secondary = () => createDemo(10, 1000, 20)
 
+export const Background = () => createDemo(10, 1000, 20, true)
+
 export const Menu = () => ({
     components: { PaginationMenu },
     data() {

src/stories/Pagination/pagination.stories.mdx

@@ -25,6 +25,9 @@ The pagination component combines pager and page navigation elements to allow th
 ### Collapsed Pager
 <Story name='Collapsed Pager'>{stories.Secondary()}</Story>
 
+### Button Pager
+<Story name='Button Pager'>{stories.Background()}</Story>
+
 # Pagination menu
 
 The Pagination component can be paired with the PaginationMenu component to provide the user a way to change the `pageSize`. The two components can be connected using the two events they emit in tandem.

src/stories/notification/notification.stories.js

@@ -106,3 +106,29 @@ export const FailureNotification = () => ({
     </el-button>
   `
 })
+
+export const InfoNotification = () => ({
+  data() {
+    return {
+      notification : {
+        message: 'Portal Announcement Notification.',
+        showClose: true,
+        iconClass: 'about-icon',
+        customClass: 'el-message--info',
+        duration: 5000
+      }
+    }
+  },
+  methods: {
+    clickHandler() {
+      this.$message(this.notification)
+    }
+  },
+  template: `
+    <el-button
+      plain
+      @click="clickHandler">
+      Show Notification
+    </el-button>
+  `
+})

src/stories/notification/notification.stories.mdx

@@ -140,6 +140,41 @@ methods() {
 }
 ```
 
+```html
+<el-button
+  plain
+  @click="clickHandler">
+  Show Notification
+</el-button>
+```
+
+### Announcement Notification
+
+Announcement messages are used for announcements.
+
+<Story name="Announcement Notification">{stories.InfoNotification()}</Story>
+
+#### Code
+
+```js
+data() {
+  return {
+    notification : {
+      message: 'Portal Announcement Notification.',
+      showClose: true,
+      iconClass: 'el-icon-info',
+      customClass: 'el-message--info',
+      duration: 5000
+    }
+  }
+},
+methods() {
+  clickHandler() {
+    this.$message(this.notification)
+  }
+}
+```
+
 ```html
 <el-button
   plain

utils/notificationMessages.js

@@ -27,6 +27,21 @@ export const failMessage = message => {
   }
 }
 
+/**
+ * Information notification message object
+ * @param {String} message
+ * @return {Object}
+ */
+export const infoMessage = message => {
+  return {
+    message: message,
+    showClose: true,
+    iconClass: 'about-icon',
+    customClass: 'el-message--info',
+    duration: 5000
+  }
+}
+
 /**
 * Notification message object
 * @param {String} message