comp(social-login-buttons) Add GitHub social login button and make co…

…mponents standalone
Hacklone · Jun 14, 2024 · a898c5e · a898c5e
1 parent ea82069
commit a898c5e
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 66 deletions.
diff --git a/projects/social-login-buttons/README.md b/projects/social-login-buttons/README.md
@@ -9,21 +9,12 @@ Cool social login buttons for angular
 Featured buttons:
 - Google 
 - Facebook
+- Apple
+- GitHub
 
 ## Install 
 > npm install --save @angular-cool/social-login-buttons
 
-## Setup
-```javascript
-import { NgModule } from '@angular/core';
-import { CoolSocialLoginButtonsModule } from '@angular-cool/social-login-buttons';
-
-@NgModule({
-    imports: [CoolSocialLoginButtonsModule]
-})
-export class MyAppModule {}
-```
-
 ## Google button
 
 ### Usage
@@ -59,6 +50,56 @@ export class MyAppModule {}
 </cool-facebook-button>
 ```
 
+### API
+#### Inputs
+* \[color]
+  - Type: 'dark' | 'light'
+  - Style of the button
+
+* \[disabled]
+  - Type: boolean
+  - Whether the button is disabled
+
+#### Outputs
+* \(click)
+  - Type: MouseEvent
+  - Called when the button has been clicked## Facebook button
+
+## Apple button
+
+### Usage
+
+```html
+<cool-apple-button color="dark" (click)="onAppleLoginClicked()">
+  Sign in with Apple
+</cool-apple-button>
+```
+
+### API
+#### Inputs
+* \[color]
+  - Type: 'dark' | 'light'
+  - Style of the button
+
+* \[disabled]
+  - Type: boolean
+  - Whether the button is disabled
+
+#### Outputs
+* \(click)
+  - Type: MouseEvent
+  - Called when the button has been clicked
+
+## GitHub button
+
+### Usage
+
+```html
+<cool-github-button color="dark" (click)="onGitHubLoginClicked()">
+  Sign in with GitHub
+</cool-github-button>
+```
+
 ### API
 #### Inputs
 * \[color]

diff --git a/projects/social-login-buttons/package.json b/projects/social-login-buttons/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@angular-cool/social-login-buttons",
-  "version": "13.1.0",
+  "version": "18.0.0",
   "description": "Cool social login buttons for angular",
   "peerDependencies": {
-    "@angular/common": ">=10.0.0",
-    "@angular/core": ">=10.0.0"
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0"
   },
   "repository": {
     "type": "git",
@@ -18,7 +18,9 @@
     "sign-in",
     "google",
     "button",
-    "facebook"
+    "facebook",
+    "apple",
+    "github"
   ],
   "author": "Hacklone <[email protected]>",
   "license": "MIT",

diff --git a/projects/social-login-buttons/src/lib/apple-button/cool-apple-button.component.ts b/projects/social-login-buttons/src/lib/apple-button/cool-apple-button.component.ts
@@ -1,17 +1,14 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'cool-apple-button',
   templateUrl: './cool-apple-button.component.html',
   styleUrls: ['./cool-apple-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
-export class CoolAppleButtonComponent implements OnInit {
-
-  constructor() {
-  }
-
+export class CoolAppleButtonComponent {
   @Input()
   public disabled: boolean;
 
@@ -21,9 +18,6 @@ export class CoolAppleButtonComponent implements OnInit {
   @Output()
   public click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
-  ngOnInit() {
-  }
-
   public onClick(event: MouseEvent) {
     if (this.disabled) {
       return;

diff --git a/projects/social-login-buttons/src/lib/cool-social-login-buttons.module.ts b/projects/social-login-buttons/src/lib/cool-social-login-buttons.module.ts
diff --git a/projects/social-login-buttons/src/lib/facebook-button/cool-facebook-button.component.ts b/projects/social-login-buttons/src/lib/facebook-button/cool-facebook-button.component.ts
@@ -6,12 +6,9 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
   styleUrls: ['./cool-facebook-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
-export class CoolFacebookButtonComponent implements OnInit {
-
-  constructor() {
-  }
-
+export class CoolFacebookButtonComponent {
   @Input()
   public disabled: boolean;
 
@@ -21,9 +18,6 @@ export class CoolFacebookButtonComponent implements OnInit {
   @Output()
   public click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
-  ngOnInit() {
-  }
-
   public onClick(event: MouseEvent) {
     if (this.disabled) {
       return;

diff --git a/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.html b/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.html
@@ -0,0 +1,10 @@
+<button type="button" class="github-button"
+        [class.disabled]="disabled"
+        [class.light]="color === 'light'"
+        [class.dark]="color === 'dark'"
+        (click)="onClick($event)">
+  <span class="icon">
+    <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
+  </span>
+  <span class="text"><ng-content></ng-content></span>
+</button>
diff --git a/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.scss b/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.scss
@@ -0,0 +1,61 @@
+.github-button {
+  height: 36px;
+  background-color: #444444;
+  border: 1px solid #444444;
+  color: #fff;
+  border-radius: 5px;
+  white-space: nowrap;
+  box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05);
+  transition-property: background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  padding: 0;
+  line-height: 1;
+
+  cursor: pointer;
+
+  &.light {
+    background-color: #fff;
+    border: 1px solid #444;
+
+    color: #444;
+
+    .icon {
+      #logo {
+        fill: #444;
+      }
+    }
+  }
+
+  &:focus,
+  &:active,
+  &:hover {
+    outline: 0;
+  }
+
+  .icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 100%;
+    box-sizing: border-box;
+
+    position: relative;
+    top: -5px;
+
+    #logo {
+      fill: #fff;
+    }
+  }
+
+  .text {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 10px 0 10px;
+    font-size: 14px;
+    font-weight: 500;
+
+    text-align: left;
+    user-select: none;
+  }
+}
diff --git a/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.ts b/projects/social-login-buttons/src/lib/github-button/cool-github-button.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'cool-github-button',
+  templateUrl: './cool-github-button.component.html',
+  styleUrls: ['./cool-github-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
+})
+export class CoolGithubButtonComponent {
+  @Input()
+  public disabled: boolean;
+
+  @Input()
+  public color: 'dark' | 'light' = 'dark';
+
+  @Output()
+  public click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  public onClick(event: MouseEvent) {
+    if (this.disabled) {
+      return;
+    }
+
+    this.click.emit(event);
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
diff --git a/projects/social-login-buttons/src/lib/google-button/cool-google-button.component.ts b/projects/social-login-buttons/src/lib/google-button/cool-google-button.component.ts
@@ -6,12 +6,9 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
   styleUrls: ['./cool-google-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.ShadowDom,
+  standalone: true,
 })
-export class CoolGoogleButtonComponent implements OnInit {
-
-  constructor() {
-  }
-
+export class CoolGoogleButtonComponent {
   @Input()
   public disabled: boolean;
 
@@ -21,9 +18,6 @@ export class CoolGoogleButtonComponent implements OnInit {
   @Output()
   public click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
-  ngOnInit() {
-  }
-
   public onClick(event: MouseEvent) {
     if (this.disabled) {
       return;

diff --git a/projects/social-login-buttons/src/public-api.ts b/projects/social-login-buttons/src/public-api.ts
@@ -5,4 +5,4 @@
 export * from './lib/google-button/cool-google-button.component';
 export * from './lib/facebook-button/cool-facebook-button.component';
 export * from './lib/apple-button/cool-apple-button.component';
-export * from './lib/cool-social-login-buttons.module';
+export * from './lib/github-button/cool-github-button.component';