Merge pull request #952 from SwedbankPay/feature/SWED-2452-various_st…

…yle_fix

SWED-2452 fix various styles & add export-arrow-up-right icon to icon…

RELEASE_NOTES.md

@@ -16,6 +16,10 @@
 - Dialog
   - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
 
+### UI bugfixes
+
+- Input addon (pre or post input) color when input is disabled
+
 ## Maintenance
 
 - npm packages dependencies upgrades

src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap

@@ -357,6 +357,21 @@ exports[`Core: Iconography renders 1`] = `
               </code>
             </td>
           </tr>
+          <tr>
+            <td>
+              <i
+                aria-hidden="true"
+                className="swepay-icon-export-arrow-up-right"
+              />
+            </td>
+            <td>
+              <code
+                className="code-tags code-tags-secondary"
+              >
+                export-arrow-up-right
+              </code>
+            </td>
+          </tr>
           <tr>
             <td>
               <i
@@ -525,6 +540,9 @@ exports[`Core: Iconography renders 1`] = `
                     14
                     
 
+                    15
+                    
+
                   </pre>
                 </td>
                 <td
@@ -555,6 +573,9 @@ exports[`Core: Iconography renders 1`] = `
                     &lt;i class="swepay-icon-menu-hamburger" aria-hidden="true"&gt;&lt;/i&gt;
                     
 
+                    &lt;i class="swepay-icon-export-arrow-up-right" aria-hidden="true"&gt;&lt;/i&gt;
+                    
+
                     &lt;i class="swepay-icon-check-circle-filled-customizable" aria-hidden="true"&gt;&lt;/i&gt;
                     
 

src/App/Identity/identity/Iconography/constants.js

@@ -174,6 +174,10 @@ export const shapes = [
 		title: "Hamburger menu",
 		code: "menu-hamburger",
 	},
+	{
+		title: "Export arrow up-right",
+		code: "export-arrow-up-right",
+	},
 	{
 		title: "Check circle filled customizable",
 		code: "check-circle-filled-customizable",

src/less/components/expandable.less

@@ -100,9 +100,7 @@
 				height: 1.75rem;
 				width: 1.75rem;
 				background-color: currentColor;
-				mask-position: center;
-				mask-repeat: no-repeat;
-				mask: url("../../icons/shapes/chevron_down.svg");
+				mask: url("../../icons/shapes/chevron_down.svg") center no-repeat;
 				margin: 0 0 0 1rem;
 			}
 		}

src/less/components/form.less

@@ -85,8 +85,8 @@ fieldset {
 
 		.checkbox input[type="checkbox"] {
 			+ label:after {
-				background-color: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
+				background-color: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
 				cursor: not-allowed;
 			}
 
@@ -95,12 +95,12 @@ fieldset {
 			}
 
 			&:checked + label:after {
-				background-color: @input-checked-bg-disabled;
+				background-color: var(--input-checked-bg-disabled);
 			}
 
 			&:not(:checked) {
 				&:hover + label:after {
-					border-color: @brand-secondary-light-3;
+					border-color: var(--brand-secondary-light-3);
 				}
 			}
 
@@ -114,8 +114,8 @@ fieldset {
 
 		.radio input[type="radio"] {
 			+ label:before {
-				background-color: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
+				background-color: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
 				box-shadow: none;
 			}
 
@@ -129,12 +129,12 @@ fieldset {
 		.togglebox input[type="checkbox"] {
 			+ label:before,
 			+ label:after {
-				background-color: @input-bg-disabled;
-				border-color: @input-checked-bg-disabled;
+				background-color: var(--input-bg-disabled);
+				border-color: var(--input-checked-bg-disabled);
 			}
 
 			&:checked + label:before {
-				background-color: @input-checked-bg-disabled;
+				background-color: var(--input-checked-bg-disabled);
 			}
 
 			+ label,
@@ -153,7 +153,7 @@ legend {
 	width: 100%;
 	margin-bottom: var(--base-margin);
 	line-height: 2.8rem;
-	color: @brand-secondary;
+	color: var(--brand-secondary);
 	border: 0;
 }
 
@@ -163,7 +163,7 @@ legend {
 	width: 100%;
 	font-size: var(--base-font-size);
 	line-height: var(--input-line-height, 1.5);
-	color: @input-color;
+	color: var(--input-color);
 
 	&.medium {
 		height: 2.5rem;
@@ -212,11 +212,11 @@ legend {
 			opacity: 1; /* iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 */
 
 			&::placeholder {
-				color: @brand-secondary-light-3;
+				color: var(--brand-secondary-light-3);
 			}
 
-			color: @brand-secondary-light-3;
-			border-bottom-color: @brand-secondary-light-3;
+			color: var(--brand-secondary-light-3);
+			border-bottom-color: var(--brand-secondary-light-3);
 		}
 	}
 
@@ -277,8 +277,9 @@ legend {
 	}
 
 	&.disabled,
-	[disabled] {
-		color: @brand-secondary-light-3;
+	[disabled],
+	&:has(input[disabled]) {
+		color: var(--brand-secondary-light-3);
 
 		.input-group-addon {
 			border-color: var(--text-disabled);
@@ -290,7 +291,7 @@ legend {
 		}
 
 		i[data-tooltip] {
-			color: @brand-secondary-light-3;
+			color: var(--brand-secondary-light-3);
 			pointer-events: none;
 		}
 
@@ -363,7 +364,7 @@ legend {
 	}
 
 	input[disabled] + label {
-		color: @brand-secondary-light-3;
+		color: var(--brand-secondary-light-3);
 	}
 }
 
@@ -388,7 +389,7 @@ legend {
 }
 
 .hint-text {
-	color: @medium-brown;
+	color: var(--brown-medium);
 }
 
 textarea {

src/less/components/links.less

@@ -141,7 +141,7 @@ a {
 
 		&.action-link-new-tab {
 			&:after {
-				background-image: url("../../icons/shapes/export-arrow-up-right.svg");
+				background-image: url("../../icons/shapes/export_arrow_up_right.svg");
 				transform: none;
 			}
 		}

src/less/core/iconography.less

@@ -635,7 +635,8 @@ i[class*=" swepay-icon-"] {
 	&.swepay-icon-close,
 	&.swepay-icon-minus-substract,
 	&.swepay-icon-plus-add,
-	&.swepay-icon-menu-hamburger {
+	&.swepay-icon-menu-hamburger,
+	&.swepay-icon-export-arrow-up-right {
 		mask: var(--mask-path) 0 0 / var(--icon-size) var(--icon-size) no-repeat;
 	}
 
@@ -671,6 +672,10 @@ i[class*=" swepay-icon-"] {
 		--mask-path: url("../../icons/shapes/menu_hamburger.svg");
 	}
 
+	&.swepay-icon-export-arrow-up-right {
+		--mask-path: url("../../icons/shapes/export_arrow_up_right.svg");
+	}
+
 	// ICONS styled differently since their color should never be modified.
 	// Therefore it uses background-image instead of mask
 

src/less/variables-payex.less

@@ -35,7 +35,7 @@
 @blue-bright: @brand-secondary-light-2;
 @payex-light-blue: #32b2dd;
 @payex-dark-blue: #1e3a6e;
-@brand-complementary-3: #EF5434;
+@brand-complementary-3: #ef5434;
 
 /* Background Colors */
 @brand-bg-1: #e8f3e6;
@@ -159,6 +159,7 @@ body {
 	--white: #ffffff;
 	--soft-brown: #707070;
 	--medium-brown: #72605e;
+	--brown-medium: #72605e;
 
 	/* Main Brand Color Variants */
 	--brand-primary: #2a9d3f;
@@ -224,7 +225,7 @@ body {
 	// text colors
 	--text-color: var(--brand-secondary);
 	--text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%);
-	--text-link: #1C7D2E;
+	--text-link: #1c7d2e;
 	--text-hover: var(--brand-primary);
 
 	/* Checkbox */

src/less/variables-swedbankpay.less

@@ -263,6 +263,9 @@
 	--input-border-color: var(--brown-soft);
 	--input-border-focus-color: var(--brown-solid);
 	--input-border-success-color: var(--brand-turquoise);
+	--input-checked-bg-disabled: var(--brand-secondary-light-3);
+	--input-bg-disabled: var(--white);
+	--input-color: var(--brand-secondary);
 
 	/* Brand fonts */
 	--brand-headline: "Swedbank Headline", "Arial", sans-serif;