feature(header): issue #95 Add notifications component

Add it in dependencies
Add styles

src/dependencies.pug

@@ -31,4 +31,5 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
 

src/header.pug

@@ -7,12 +7,10 @@
   i#search-icon.icon-magnifier(aria-hidden='true')
   i#close-search-icon.icon-close(aria-hidden='true')
 
-details
+sib-notifications(
-  summary#notifications-button
+  id-suffix="inbox",
-    div.menu-notification
+  bind-user
-      div 7
+)
-  #notifications
-    include page-notifications.pug
 
 sib-display#profile(
   data-fields='first_name, account.picture',

src/page-notifications.pug

@@ -1,7 +0,0 @@
-div.frame
-  h1 Notifications
-
-  sib-display(
-    bind-user
-    data-fields='summary'
-)

src/page-project-profile.pug.orig

@@ -1,58 +0,0 @@
-.frame
-
-  include templates/template-customer.pug
-  include templates/template-team.pug
-
-  sib-display(
-    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
-    extra-context='{"project-profile":"${sdn}/projects/"}'
-    
-    set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
-    value-const-title1='N°',
-    value-const-title2='-',
-    value-entitled='Creation date:'
-
-    set-infos='block-description, block-logo',
-    set-block-description='label-description, description',
-    set-block-logo='customer.logo',
-    value-label-description='DESCRIPTION:',
-    widget-customer.logo='sib-display-img',
-
-    set-block-fee='label-fee, details-cell, details-business',
-    set-details-cell='cell-name, cell-fee, percentage',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
-    value-label-fee='FEE:',
-    value-cell-name='Happy Dev Paris:',
-    value-cell-fee='5',
-    value-percentage='%',
-    value-business-contribution='Business contribution:',
-    value-comma=', ',
-
-    set-block-customer='label-customer, customer',
-    value-label-customer='CUSTOMER INFORMATIONS:'
-    widget-customer='customer-template',
-    
-    set-block-team='label-team, members',
-    value-label-team='TEAM:'
-    widget-members='team-template',
-    multiple-members,
-    
-    bind-resources
-  )
-<<<<<<< HEAD
-
-  div(name='block-team')
-    h2(name='label-team') Team:
-    sib-display(
-      id-suffix='members',
-      data-fields='teammate-img, teammate-profile, teammate-job',
-      set-teammate-img='user.account.picture',
-      set-teammate-profile='user.first_name, user.last_name, user.groups',
-      set-teammate-job='name',
-      widget-user.account.picture='sib-display-img',
-      widget-user.groups='sib-display-lookuplist',
-      next='profile',
-      bind-resources,
-    )
-=======
->>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6

src/styles/header.scss

@@ -73,47 +73,31 @@
 }
 
 details {
-  summary::-webkit-details-marker {
+  position: relative;
-    display: none;
-  }
 
-  #notifications-button {
+  .sib-notifications__button {
-    cursor: pointer;
+    @include icon('bell');
     font-size: 3rem;
-    list-style-type: none;
-    position: relative;
-    @include icon(bell);
-    
-    .menu-notification {
-      //flex-basis: 3em;
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 0;
-      flex-shrink: 0;
-      justify-content: center;
-      left: 0.3rem;
-      position: absolute;
-      top: -0.3rem;
-      width: 2em;
 
-      @extend %notification;
+    &::before {
+      margin-left: 0;
+    }
+
+    img {
+      display: none;
+    }
+
+    .sib-notifications__counter {
+      left: 2.1rem;
+      position: absolute;
+      top: -3px;
     }
   }
 
-  #notifications {
+  .sib-notifications__list {
-    bottom: 0;
-    height: 0;
-    left: 0;
     position: absolute;
     right: 0;
-    z-index: 1;
+    top: 5.6rem;
-  
-    > div {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
   }
 }
 

src/styles/main.scss

@@ -13,6 +13,7 @@
 :root {
   font-size: 62.5%;
   font-family: Open Sans, sans-serif;
+  --sib-notifications-theme: #{$color-46-100-50};
   
   body {
     //box-sizing: border-box;

src/styles/menu-left.scss

@@ -93,7 +93,9 @@
   
         > sib-display {
           
-          @extend %notification;
+          > div:first-of-type {
+            @extend %notification;
+          }
         }
       }
 

src/styles/variables.scss

@@ -6,6 +6,7 @@ $color-white:            hsl(0, 0%,100%);
 $color-selective-yellow: hsl(43, 100%, 50%);
 $color-mikado-yellow:    hsl(45, 95%, 54%);
 $color-mustard:          hsl(46, 100%, 67%);
+$color-46-100-50:        hsl(46, 100%, 50%);
 
 $color-rolling-stone:    hsl(210, 4%, 50%);
 $color-taupe-gray:       hsl(210, 5%, 56%);
@@ -101,18 +102,15 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 }
 
 %notification {
-
+  align-items: center;
-  > div:first-of-type {
+  background-color: $color-mustard;
-    align-items: center;
+  border-radius: 100%;
-    background-color: $color-mustard;
+  color: $color-dark-lava;
-    border-radius: 100%;
+  display: flex !important;
-    color: $color-dark-lava;
+  font-size: 1.3rem;
-    display: flex;
+  height: 1.7em;
-    font-size: 1.3rem;
+  justify-content: center;
-    height: 1.7em;
+  width: 1.7em;
-    justify-content: center;
-    width: 1.7em;
-  }
 }
 
 %shadow {