Merge pull request #559 from deckgo/author

feat(#558): new slide author design

CHANGELOG.md

@@ -2,11 +2,12 @@
 # [1.0.0-rc.20](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.19...v1.0.0-rc.20) (In progress)
 
 ### Applications
-* docs: v1.0.0-rc.9 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
-* remote: v1.0.0-rc.2-2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+* docs: v1.0.0-rc.9-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+* remote: v1.0.0-rc.2-3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
 * demo: v1.0.0-rc.4-5 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
 
 ### New: Web Components
+* slide-author: v1.0.0-rc.3-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/author/CHANGELOG.md))
 * color: v1.0.0-rc.3-3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
 * social: v1.0.0-rc.1-3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/social/CHANGELOG.md))
 

docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.9-1"></a>
+# 1.0.0-rc.9-1 (2020-01-05)
+
+### Features
+
+* new template `author` design
+
 <a name="1.0.0-rc.9"></a>
 # 1.0.0-rc.9 (2020-01-04)
 

docs/docs/components/app-components-social/app-components-social.md

@@ -136,7 +136,7 @@ Without any icons:
 
 ```
 <deckgo-social twitter="daviddalbusco">Twitter</deckgo-social>
-<deckgo-social linkedin="david-dal-busco/">Linkedin</deckgo-social>
+<deckgo-social linkedin="david-dal-busco">Linkedin</deckgo-social>
 <deckgo-social medium="david.dalbusco">Medium</deckgo-social>
 <deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">Stackoverflow</deckgo-social>
 ```

docs/docs/slides/app-slide-author/app-slide-author.md

@@ -24,8 +24,8 @@ The "Author" slide lets you introduce the author of the presentation.
     <deckgo-slide-author img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
         <h1 slot="title">slot="title"</h1>
         <div slot="author">slot="author"</div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon> twitter</deckgo-social></div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco/"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon> linkedin</deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon></deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon></deckgo-social></div>
     </deckgo-slide-author>
   </deckgo-deck>
 </div>
@@ -84,7 +84,7 @@ The "Author" slide's Web Component could be integrated using the tag `<deckgo-sl
       <h2>David</h2>
       <p>Something about me</p>
     </div>
-    <div slot="social-link"><deckgo-social twitter="daviddalbusco">twitter</deckgo-social></div>
+    <div slot="social-link"><deckgo-social twitter="daviddalbusco"></deckgo-social></div>
   </deckgo-slide-author>
 </deckgo-deck>  
 ```
@@ -118,7 +118,8 @@ This component offers the following options which could be set using attributes:
 | img-src | string |  | An image URI, for example a picture of the author. Note: this image will be displayed as a circle. |
 | img-alt | string |  | An optional accessibility alt for the image. |
 | custom-background | boolean | false | If you will provide a background for the all deck and a specific one for this slide, set this option to `true` |
-| custom-actions | boolean | false | If you will provide actions for the all deck and a specific one for this slide, set this option to `true` | 
+| custom-actions | boolean | false | If you will provide actions for the all deck and a specific one for this slide, set this option to `true` |
+| mode | `"circle" \| "cover" \| "none"` | `'cover'` | The design to be applied to the image. `cover` fits the image to the start pane, `circle` displays it in a circle and `none` in case you would not like to display an image | 
 
 ### Example
 
@@ -129,9 +130,9 @@ This component offers the following options which could be set using attributes:
       <h2>David</h2>
       <p>Something about me</p>
     </div>
-    <div slot="social-link"><deckgo-social twitter="daviddalbusco">twitter</deckgo-social></div>
-    <div slot="social-link"><deckgo-social linkedin="david-dal-busco/">linkedin</deckgo-social></div>
-    <div slot="social-link"><deckgo-social medium="david.dalbusco">medium</deckgo-social></div>
+    <div slot="social-link"><deckgo-social twitter="daviddalbusco"></deckgo-social></div>
+    <div slot="social-link"><deckgo-social linkedin="david-dal-busco"></deckgo-social></div>
+    <div slot="social-link"><deckgo-social medium="david.dalbusco"></deckgo-social></div>
   </deckgo-slide-author>
 </deckgo-deck>
 ```
@@ -156,6 +157,7 @@ The following theming options will affect this component if set on its host or p
 | --slide-author-align | inherit | Modify for example to center if you want to align the content in the middle |
 | --slide-author-text-align | inherit | Modify for example to center if you want to align the text in the middle |
 | --slide-author-img-size | 80% | The size of the image of the left pane |
+| --slide-author-img-border | | The border of the image of the left pane (only apply if `circle` mode is specified) |
 | --slide-author-social-padding-top | 32px | The spacing between the author description and the social links |
 | --zIndex | 1 | The z-index of the slide |
 | --slide-author-social-link-padding | 8px | Padding for the social links |

docs/docs/slides/app-slides-concept/app-slides-concept.md

@@ -153,11 +153,11 @@ The core component of [DeckDeckGo] (`<deckgo-deck/>`) does not contain any slide
 
 <div class="container ion-margin">
   <deckgo-deck embedded={true}>
-    <deckgo-slide-author img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
+    <deckgo-slide-author img-mode="circle" img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
         <h1 slot="title">slot="title"</h1>
         <div slot="author">slot="author"</div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon> twitter</deckgo-social></div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco/"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon> linkedin</deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon></deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon></deckgo-social></div>
     </deckgo-slide-author>
   </deckgo-deck>
 </div>

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0-rc.9-1",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "@deckdeckgo/charts": "^1.0.0-rc.5",
-    "@deckdeckgo/color": "^1.0.0-rc.3-2",
+    "@deckdeckgo/color": "^1.0.0-rc.3-3",
     "@deckdeckgo/core": "^1.0.0-rc.3-4",
     "@deckdeckgo/highlight-code": "^1.0.0-rc.2-1",
     "@deckdeckgo/inline-editor": "^1.0.0-rc.3-3",
     "@deckdeckgo/lazy-img": "^1.0.0-rc.2-2",
     "@deckdeckgo/qrcode": "^1.0.0-rc.1-1",
-    "@deckdeckgo/slide-author": "^1.0.0-rc.2",
+    "@deckdeckgo/slide-author": "^1.0.0-rc.3-1",
     "@deckdeckgo/slide-big-img": "^1.0.0-rc.1",
     "@deckdeckgo/slide-chart": "^1.0.0-rc.2-1",
     "@deckdeckgo/slide-code": "^1.0.0-rc.1",
@@ -34,7 +34,7 @@
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-video": "^1.0.0-rc.1-1",
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.2",
-    "@deckdeckgo/social": "^1.0.0-rc.1-2",
+    "@deckdeckgo/social": "^1.0.0-rc.1-3",
     "@ionic/core": "^4.11.7",
     "idb-keyval": "^3.2.0",
     "rxjs": "^6.5.4"

docs/src/app/pages/docs/components/app-components-social/app-components-social.tsx

@@ -144,7 +144,7 @@ export class AppComponentsSocial {
 <h3 id="app-components-social-examples-1">Examples</h3>
 <p>Without any icons:</p>
 <deckgo-highlight-code language="javascript">
-      <code slot="code">&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;Twitter&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social linkedin=&quot;david-dal-busco&#47;&quot;&gt;Linkedin&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social medium=&quot;david.dalbusco&quot;&gt;Medium&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social full-url=&quot;https:&#47;&#47;stackoverflow.com&#47;users&#47;5404186&#47;peter-parker&quot;&gt;Stackoverflow&lt;&#47;deckgo-social&gt;</code>
+      <code slot="code">&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;Twitter&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social linkedin=&quot;david-dal-busco&quot;&gt;Linkedin&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social medium=&quot;david.dalbusco&quot;&gt;Medium&lt;&#47;deckgo-social&gt;{'\n'}&lt;deckgo-social full-url=&quot;https:&#47;&#47;stackoverflow.com&#47;users&#47;5404186&#47;peter-parker&quot;&gt;Stackoverflow&lt;&#47;deckgo-social&gt;</code>
     </deckgo-highlight-code><p>With for example <code>ion-icon</code>:</p>
 <deckgo-highlight-code language="javascript">
       <code slot="code">&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;{'\n'}  &lt;ion-icon slot=&quot;icon&quot; name=&quot;logo-twitter&quot;&gt;&lt;&#47;ion-icon&gt;{'\n'}  Twitter{'\n'}&lt;&#47;deckgo-social&gt;{'\n'}{'\n'}&lt;deckgo-social github=&quot;fluster&#47;deckdeckgo&quot;&gt;{'\n'}  &lt;ion-icon slot=&quot;icon&quot; name=&quot;logo-github&quot;&gt;&lt;&#47;ion-icon&gt;{'\n'}  DeckDeckGo on Github{'\n'}&lt;&#47;deckgo-social&gt;</code>

docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx

@@ -55,8 +55,8 @@ export class AppSlideAuthor {
     <deckgo-slide-author img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
         <h1 slot="title">slot="title"</h1>
         <div slot="author">slot="author"</div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon> twitter</deckgo-social></div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco/"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon> linkedin</deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon></deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon></deckgo-social></div>
     </deckgo-slide-author>
   </deckgo-deck>
 </div>
@@ -86,7 +86,7 @@ export class AppSlideAuthor {
     </deckgo-highlight-code><h2 id="app-slide-author-usage">Usage</h2>
 <p>The &quot;Author&quot; slide&#39;s Web Component could be integrated using the tag <code>&lt;deckgo-slide-author/&gt;</code>.</p>
 <deckgo-highlight-code language="javascript">
-      <code slot="code">&lt;deckgo-deck&gt;{'\n'}  &lt;deckgo-slide-author img-src=&quot;&#47;assets&#47;author.jpeg&quot; img-alt=&quot;My self&quot;&gt;{'\n'}    &lt;h1 slot=&quot;title&quot;&gt;Author&lt;&#47;h1&gt;{'\n'}    &lt;div slot=&quot;author&quot;&gt;{'\n'}      &lt;h2&gt;David&lt;&#47;h2&gt;{'\n'}      &lt;p&gt;Something about me&lt;&#47;p&gt;{'\n'}    &lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;twitter&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}  &lt;&#47;deckgo-slide-author&gt;{'\n'}&lt;&#47;deckgo-deck&gt;  </code>
+      <code slot="code">&lt;deckgo-deck&gt;{'\n'}  &lt;deckgo-slide-author img-src=&quot;&#47;assets&#47;author.jpeg&quot; img-alt=&quot;My self&quot;&gt;{'\n'}    &lt;h1 slot=&quot;title&quot;&gt;Author&lt;&#47;h1&gt;{'\n'}    &lt;div slot=&quot;author&quot;&gt;{'\n'}      &lt;h2&gt;David&lt;&#47;h2&gt;{'\n'}      &lt;p&gt;Something about me&lt;&#47;p&gt;{'\n'}    &lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}  &lt;&#47;deckgo-slide-author&gt;{'\n'}&lt;&#47;deckgo-deck&gt;  </code>
     </deckgo-highlight-code><h3 id="app-slide-author-slots">Slots</h3>
 <p>Slots for <code>title</code>, <code>author</code> and <code>social-link</code> are optional. It is recommended that the slot <code>author</code> be filled as to improve the appearance of the slide. </p>
 <p>Notes: </p>
@@ -136,10 +136,16 @@ export class AppSlideAuthor {
 <td>false</td>
 <td>If you will provide actions for the all deck and a specific one for this slide, set this option to <code>true</code></td>
 </tr>
+<tr>
+<td>mode</td>
+<td><code>&quot;circle&quot; | &quot;cover&quot; | &quot;none&quot;</code></td>
+<td><code>&#39;cover&#39;</code></td>
+<td>The design to be applied to the image. <code>cover</code> fits the image to the start pane, <code>circle</code> displays it in a circle and <code>none</code> in case you would not like to display an image</td>
+</tr>
 </tbody></table>
 <h3 id="app-slide-author-example">Example</h3>
 <deckgo-highlight-code language="javascript">
-      <code slot="code">&lt;deckgo-deck&gt;{'\n'}  &lt;deckgo-slide-author img-src=&quot;&#47;assets&#47;author.jpeg&quot;&gt;{'\n'}    &lt;div slot=&quot;author&quot;&gt;{'\n'}      &lt;h2&gt;David&lt;&#47;h2&gt;{'\n'}      &lt;p&gt;Something about me&lt;&#47;p&gt;{'\n'}    &lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;twitter&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social linkedin=&quot;david-dal-busco&#47;&quot;&gt;linkedin&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social medium=&quot;david.dalbusco&quot;&gt;medium&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}  &lt;&#47;deckgo-slide-author&gt;{'\n'}&lt;&#47;deckgo-deck&gt;</code>
+      <code slot="code">&lt;deckgo-deck&gt;{'\n'}  &lt;deckgo-slide-author img-src=&quot;&#47;assets&#47;author.jpeg&quot;&gt;{'\n'}    &lt;div slot=&quot;author&quot;&gt;{'\n'}      &lt;h2&gt;David&lt;&#47;h2&gt;{'\n'}      &lt;p&gt;Something about me&lt;&#47;p&gt;{'\n'}    &lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social twitter=&quot;daviddalbusco&quot;&gt;&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social linkedin=&quot;david-dal-busco&quot;&gt;&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}    &lt;div slot=&quot;social-link&quot;&gt;&lt;deckgo-social medium=&quot;david.dalbusco&quot;&gt;&lt;&#47;deckgo-social&gt;&lt;&#47;div&gt;{'\n'}  &lt;&#47;deckgo-slide-author&gt;{'\n'}&lt;&#47;deckgo-deck&gt;</code>
     </deckgo-highlight-code><h2 id="app-slide-author-theming">Theming</h2>
 <p>The following theming options will affect this component if set on its host or parent.</p>
 <table>
@@ -221,6 +227,11 @@ export class AppSlideAuthor {
 <td>The size of the image of the left pane</td>
 </tr>
 <tr>
+<td>--slide-author-img-border</td>
+<td></td>
+<td>The border of the image of the left pane (only apply if <code>circle</code> mode is specified)</td>
+</tr>
+<tr>
 <td>--slide-author-social-padding-top</td>
 <td>32px</td>
 <td>The spacing between the author description and the social links</td>

docs/src/app/pages/docs/slides/app-slides-concept/app-slides-concept.tsx

@@ -186,11 +186,11 @@ export class AppSlidesConcept {
 </ul>
 <div class="container ion-margin">
   <deckgo-deck embedded={true}>
-    <deckgo-slide-author img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
+    <deckgo-slide-author img-mode="circle" img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
         <h1 slot="title">slot="title"</h1>
         <div slot="author">slot="author"</div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon> twitter</deckgo-social></div>
-        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco/"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon> linkedin</deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social twitter="daviddalbusco"><ion-icon area-label="David on Twitter" slot="icon" name="logo-twitter"></ion-icon></deckgo-social></div>
+        <div slot="social-link" style={{fontSize: '0.5rem'}}><deckgo-social linkedin="david-dal-busco"><ion-icon area-label="David on Linkedin" slot="icon" name="logo-linkedin"></ion-icon></deckgo-social></div>
     </deckgo-slide-author>
   </deckgo-deck>
 </div>

docs/src/app/pages/docs/slides/app-slides-container.scss

@@ -72,6 +72,10 @@ div.container {
     deckgo-slide-big-img {
       --slide-img-max-width: 400px;
     }
+
+    deckgo-slide-author {
+      --slide-height: 200px;
+    }
   }
 }
 

remote/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.2-3"></a>
+# 1.0.0-rc.2-3 (2020-01-05)
+
+### Features
+
+* new template `author` design
+
 <a name="1.0.0-rc.2-2"></a>
 # 1.0.0-rc.2-2 (2020-01-04)