@biggive/components 1.0.161 → 1.0.162

package/dist/collection/components/biggive-basic-card/biggive-basic-card.css

@@ -10,6 +10,24 @@ body.background-secondary {
 body.background-tertiary {
   background-color: #2C089B;
 }
+body.background-brand-1 {
+  background-color: #B30510;
+}
+body.background-brand-2 {
+  background-color: #B30510;
+}
+body.background-brand-3 {
+  background-color: #B30510;
+}
+body.background-brand-4 {
+  background-color: #B30510;
+}
+body.background-brand-5 {
+  background-color: #B30510;
+}
+body.background-brand-6 {
+  background-color: #B30510;
+}
 
 h1, h3, h3, h4, h5, h6 {
   margin-bottom: 0;
@@ -65,6 +83,30 @@ a:hover {
   color: #FF7272;
 }
 
+.colour-brand-1 {
+  color: #B30510;
+}
+
+.colour-brand-2 {
+  color: #6E0887;
+}
+
+.colour-brand-3 {
+  color: #50B400;
+}
+
+.colour-brand-4 {
+  color: #FFE500;
+}
+
+.colour-brand-5 {
+  color: #F07D00;
+}
+
+.colour-brand-6 {
+  color: #CBC8C8;
+}
+
 .colour-white {
   color: #FFFFFF;
 }
@@ -88,6 +130,36 @@ a:hover {
   color: #FF7272;
 }
 
+.text-colour-hover-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
 .text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
@@ -110,6 +182,30 @@ a:hover {
   fill: #FF7272;
 }
 
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -137,6 +233,36 @@ a:hover {
   background-color: #FF7272;
 }
 
+.background-colour-hover-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -227,6 +353,60 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-brand-1 {
+  color: #FFFFFF;
+  background-color: #B30510;
+  border-color: #B30510;
+}
+.button-brand-1:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-2 {
+  color: #FFFFFF;
+  background-color: #6E0887;
+  border-color: #6E0887;
+}
+.button-brand-2:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-3 {
+  color: #FFFFFF;
+  background-color: #50B400;
+  border-color: #50B400;
+}
+.button-brand-3:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-4 {
+  color: #FFFFFF;
+  background-color: #FFE500;
+  border-color: #FFE500;
+}
+.button-brand-4:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-5 {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-5:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-6 {
+  color: #FFFFFF;
+  background-color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.button-brand-6:hover {
+  background-color: #FFFFFF;
+}
+
 .button-white {
   color: #2C089B;
   background-color: #FFFFFF;

package/dist/collection/components/biggive-basic-card/biggive-basic-card.stories.js

@@ -12,7 +12,7 @@ export default {
       name: 'Background colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
       },
     },
     backgroundImageUrl: {
@@ -22,14 +22,14 @@ export default {
       name: 'Card colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
       },
     },
     textColour: {
       name: 'Text colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black', 'transparent'],
       },
     },
     icon: {
@@ -39,7 +39,31 @@ export default {
       name: 'Icon colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'red', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+        options: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'brand-1',
+          'brand-2',
+          'brand-3',
+          'brand-4',
+          'brand-5',
+          'brand-6',
+          'white',
+          'black',
+          'red',
+          'clear-primary',
+          'clear-secondary',
+          'clear-tertiary',
+          'clear-brand-1',
+          'clear-brand-2',
+          'clear-brand-3',
+          'clear-brand-4',
+          'clear-brand-5',
+          'clear-brand-6',
+          'clear-white',
+          'clear-black',
+        ],
       },
     },
     mainTitle: {
@@ -61,7 +85,30 @@ export default {
       name: 'Button colour scheme',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'clear-primary', 'clear-secondary', 'clear-tertiary', 'clear-white', 'clear-black'],
+        options: [
+          'primary',
+          'secondary',
+          'tertiary',
+          'brand-1',
+          'brand-2',
+          'brand-3',
+          'brand-4',
+          'brand-5',
+          'brand-6',
+          'white',
+          'black',
+          'clear-primary',
+          'clear-secondary',
+          'clear-tertiary',
+          'clear-brand-1',
+          'clear-brand-2',
+          'clear-brand-3',
+          'clear-brand-4',
+          'clear-brand-5',
+          'clear-brand-6',
+          'clear-white',
+          'clear-black',
+        ],
       },
     },
     clipBottomLeftCorner: {

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-icon.css

@@ -10,6 +10,24 @@ body.background-secondary {
 body.background-tertiary {
   background-color: #2C089B;
 }
+body.background-brand-1 {
+  background-color: #B30510;
+}
+body.background-brand-2 {
+  background-color: #B30510;
+}
+body.background-brand-3 {
+  background-color: #B30510;
+}
+body.background-brand-4 {
+  background-color: #B30510;
+}
+body.background-brand-5 {
+  background-color: #B30510;
+}
+body.background-brand-6 {
+  background-color: #B30510;
+}
 
 h1, h3, h3, h4, h5, h6 {
   margin-bottom: 0;
@@ -65,6 +83,30 @@ a:hover {
   color: #FF7272;
 }
 
+.colour-brand-1 {
+  color: #B30510;
+}
+
+.colour-brand-2 {
+  color: #6E0887;
+}
+
+.colour-brand-3 {
+  color: #50B400;
+}
+
+.colour-brand-4 {
+  color: #FFE500;
+}
+
+.colour-brand-5 {
+  color: #F07D00;
+}
+
+.colour-brand-6 {
+  color: #CBC8C8;
+}
+
 .colour-white {
   color: #FFFFFF;
 }
@@ -88,6 +130,36 @@ a:hover {
   color: #FF7272;
 }
 
+.text-colour-hover-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
 .text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
@@ -110,6 +182,30 @@ a:hover {
   fill: #FF7272;
 }
 
+.fill-brand-1 {
+  fill: #B30510;
+}
+
+.fill-brand-2 {
+  fill: #6E0887;
+}
+
+.fill-brand-3 {
+  fill: #50B400;
+}
+
+.fill-brand-4 {
+  fill: #FFE500;
+}
+
+.fill-brand-5 {
+  fill: #F07D00;
+}
+
+.fill-brand-6 {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -137,6 +233,36 @@ a:hover {
   background-color: #FF7272;
 }
 
+.background-colour-hover-brand-1:hover,
+.background-colour-brand-1 {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-2:hover,
+.background-colour-brand-2 {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-3:hover,
+.background-colour-brand-3 {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-4:hover,
+.background-colour-brand-4 {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-5:hover,
+.background-colour-brand-5 {
+  background-color: #F07D00;
+}
+
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -227,6 +353,60 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-brand-1 {
+  color: #FFFFFF;
+  background-color: #B30510;
+  border-color: #B30510;
+}
+.button-brand-1:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-2 {
+  color: #FFFFFF;
+  background-color: #6E0887;
+  border-color: #6E0887;
+}
+.button-brand-2:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-3 {
+  color: #FFFFFF;
+  background-color: #50B400;
+  border-color: #50B400;
+}
+.button-brand-3:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-4 {
+  color: #FFFFFF;
+  background-color: #FFE500;
+  border-color: #FFE500;
+}
+.button-brand-4:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-5 {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-5:hover {
+  background-color: #FFFFFF;
+}
+
+.button-brand-6 {
+  color: #FFFFFF;
+  background-color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.button-brand-6:hover {
+  background-color: #FFFFFF;
+}
+
 .button-white {
   color: #2C089B;
   background-color: #FFFFFF;
@@ -556,6 +736,42 @@ a:hover {
 .beneficiary-icon-item.colour-scheme-tertiary svg {
   fill: #000000;
 }
+.beneficiary-icon-item.colour-scheme-brand-1 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-1 svg {
+  fill: #000000;
+}
+.beneficiary-icon-item.colour-scheme-brand-2 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-2 svg {
+  fill: #000000;
+}
+.beneficiary-icon-item.colour-scheme-brand-3 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-3 svg {
+  fill: #000000;
+}
+.beneficiary-icon-item.colour-scheme-brand-4 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-4 svg {
+  fill: #000000;
+}
+.beneficiary-icon-item.colour-scheme-brand-5 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-5 svg {
+  fill: #000000;
+}
+.beneficiary-icon-item.colour-scheme-brand-6 {
+  background-color: #B30510;
+}
+.beneficiary-icon-item.colour-scheme-brand-6 svg {
+  fill: #000000;
+}
 .beneficiary-icon-item.colour-scheme-white {
   background-color: #FFFFFF;
 }

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-icon.stories.js

@@ -5,14 +5,14 @@ export default {
       name: 'Background Colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
       },
     },
     iconColour: {
       name: 'Icon Colour',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
       },
     },
     icon: {