RDUCP-289: adding Provider Login Buttons pattern (#650)

* Adding Provider Login Button pattern

* Bug fixing

* Fixes on preview

* Update CODEOWNERS

* Small change to keep alphabetic order

* improving based on feedback

CODEOWNERS

@@ -1 +1 @@
-@bruno-colaco-os @glc-outsystems @gnbm @rugoncalves
+* @bruno-colaco-os @glc-outsystems @os-jsplopes @gnbm @rugoncalves

src/scss/04-patterns/06-utilities/_provider-login-button.scss

@@ -0,0 +1,77 @@
+/*! Patterns - Utilities - Provider Login Button */
+////
+/// @group Utilities-Provider_Login_Button
+/// Patterns - Utilities - Provider Login Button
+
+.btn.btn-provider-login {
+	background: var(--color-neutral-0);
+	border-color: var(--color-neutral-6);
+	border-radius: 0;
+	&-logo {
+		&-only {
+			padding: 10px;
+			.btn-provider-login-text {
+				display: none;
+				-servicestudio-display: none !important;
+			}
+		}
+		svg {
+			height: 100%;
+			width: 100%;
+		}
+	}
+	&.btn- {
+		&small {
+			padding: 0 16px;
+			&.btn-provider-login-logo-only {
+				padding: 5px;
+			}
+		}
+		&large {
+			padding: 10px 15px;
+		}
+	}
+	&.soft {
+		border-radius: var(--border-radius-soft);
+	}
+	&.rounded {
+		border-radius: var(--border-radius-rounded);
+	}
+	.btn-provider-login {
+		&-logo {
+			border-radius: 50%;
+			height: 20px;
+			width: 20px;
+		}
+		&-text {
+			color: var(--color-neutral-7);
+			margin-left: 10px;
+			white-space: nowrap;
+		}
+	}
+}
+
+.phone .layout {
+	.btn.btn-provider-login {
+		&.btn-provider-login-logo-only {
+			width: 50px;
+			&.btn- {
+				&small {
+					width: 40px;
+				}
+				&large {
+					width: 55px;
+				}
+			}
+		}
+		.btn-provider-login-text-name {
+			text-align: left;
+			width: 70px;
+			-servicestudio-display: inline-block;
+		}
+
+		&.btn-small .btn-provider-login-text-name {
+			width: 53px;
+		}
+	}
+}

src/scss/OutSystemsUI.scss

@@ -109,6 +109,7 @@
 /*!         - Button Loading                                                    */
 /*!         - Center Content                                                    */
 /*!         - Margin Container                                                  */
+/*!         - Provider Login Button                                             */
 /*!         - Separator                                                         */
 /*!         - Pull to Refresh                                                   */
 /*!         - List Updating                                                     */
@@ -331,6 +332,7 @@
 @import '04-patterns/06-utilities/center-content';
 @import '04-patterns/06-utilities/margin-container';
 @import '04-patterns/06-utilities/separator';
+@import '04-patterns/06-utilities/provider-login-button';
 @import '04-patterns/06-utilities/pull-to-refresh';
 @import '04-patterns/06-utilities/list-updating';