Merge pull request #6 from Teamwork/feat-icon-only

Rename onlyIcon property and update README
Teamwork · Nov 26, 2020 · e492ccb · e492ccb
2 parents f9bc2f9 + fb93ae2
commit e492ccb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -14,11 +14,11 @@ Public components to enhance your interaction with Teamwork
 <teamwork-login-button
   redirectURI="https://www.myapp.com/"
   clientID="myClientID"
-  icon="false"
+  iconOnly
   state="appstate"
   color="slate"
   size="large"
-  borders="default"
+  borders="rounded"
 />
 ```
 
@@ -49,3 +49,14 @@ And somewhere in you template:
 />
 ```
 
+### Parameters
+
+| Name          	| Default   	| Description                                             	| Allowed Values                                                       |
+|---------------	|-----------	|---------------------------------------------------------	|------------------------------------------------------------------------------	|
+| `clientID`    	|           	| **Required**. Client ID from the [Developer Portal](https://developer.teamwork.com/guides/how-to-authenticate-via-app-login-flow/)                 	|                                                                              	|
+| `redirectURI` 	|           	| **Required**. Redirect URI for your Developer Portal app 	|                                                                              	|
+| `state`       	|           	| Optional. Value will be passed to your redirect URI as a query parameter        	|                                                                              	|
+| `size`        	| `medium`  	| Size of the button                                      	| `large` `medium` `small`                                                     	|          	|
+| `borders`     	| `default` 	| Button border style                                      	| `default` `rounded` `square`                                                 	|          	|
+| `color`       	| `white`   	| Button color theme                                        | `slate` `white` `indigo` `pink`                                              	|          	|
+| `iconOnly`    	| `false`   	| Show a compact, icon-only version of the button       	| Attribute presence indicates `true` 	|          	|
diff --git a/dev/index.html b/dev/index.html
@@ -4,9 +4,9 @@
   <head>
     <meta charset="utf-8">
     <title>Teamwork-login-button Demo</title>
-    <script type="module" src="../login-button.js"></script>
+    <script type="module" src="../src/login-button.js"></script>
   </head>
   <body>
-    <teamwork-login-button redirectURI="http://myapp.com" clientID="myapp1" />
+    <teamwork-login-button iconOnly redirectURI="http://myapp.com" clientID="myapp1" />
   </body>
 </html>
diff --git a/src/login-button.js b/src/login-button.js
@@ -243,7 +243,7 @@ export class LoginButton extends LitElement {
       /**
        * Indicated whether only the icon should be rendered
        */
-      icon: { type: Boolean },
+      iconOnly: { type: Boolean },
     };
   }
 
@@ -252,11 +252,11 @@ export class LoginButton extends LitElement {
     this.borders = 'default';
     this.size = 'medium';
     this.color = 'white';
-    this.icon = false;
+    this.iconOnly = false;
   }
 
   get iconClass() {
-    return this.icon ? 'tw-btn--icon' : null;
+    return this.iconOnly ? 'tw-btn--icon' : null;
   }
 
   get borderClass() {
@@ -280,8 +280,9 @@ export class LoginButton extends LitElement {
   }
 
   get linkUrl() {
-    let url = `https://www.teamwork.com/launchpad/login?redirect_uri=${this.redirectURI}&client_id=${this.clientID}`;
-    if (this.state) url = `${url}&state=${this.state}`;
+    const urlParam = (uri) => encodeURIComponent(uri);
+    let url = `https://www.teamwork.com/launchpad/login?redirect_uri=${urlParam(this.redirectURI)}&client_id=${urlParam(this.clientID)}`;
+    if (this.state) url = `${url}&state=${urlParam(this.state)}`;
     return url;
   }
 
@@ -294,7 +295,7 @@ export class LoginButton extends LitElement {
     }
 
     let classes = [this.sizeClass, this.borderClass, this.colorClass, this.logoClass, this.iconClass].join(' ');
-    const textHtml = this.icon ? '' : html`<span>Sign in with Teamwork</span>`;
+    const textHtml = this.iconOnly ? '' : html`<span>Sign in with Teamwork</span>`;
     if (disabled) classes = `${classes} disabled`;
     return html`
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap">

diff --git a/test/login-button.spec.js b/test/login-button.spec.js
@@ -20,7 +20,7 @@ suite('teamwork-login-button', () => {
         >
         <a
           class="tw-btn tw-btn--border-default tw-btn--color-white tw-btn--logo-default tw-btn--size-medium"
-          href="https://www.teamwork.com/launchpad/login?redirect_uri=http://foo.com&client_id=client1"
+          href="https://www.teamwork.com/launchpad/login?redirect_uri=http%3A%2F%2Ffoo.com&client_id=client1"
         >
           <span>Sign in with Teamwork</span>
         </a>