feat(#558): add option author template no image

deckgo · Jan 5, 2020 · 776ba91 · 776ba91
1 parent 95f1b88
commit 776ba91
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/webcomponents/slides/author/src/components.d.ts b/webcomponents/slides/author/src/components.d.ts
@@ -17,7 +17,7 @@ export namespace Components {
     'customBackground': boolean;
     'hideContent': () => Promise<void>;
     'imgAlt': string;
-    'imgMode': 'cover' | 'circle';
+    'imgMode': 'cover' | 'circle' | 'none';
     'imgSrc': string;
     'lazyLoadContent': () => Promise<void>;
     'revealContent': () => Promise<void>;
@@ -42,7 +42,7 @@ declare namespace LocalJSX {
     'customActions'?: boolean;
     'customBackground'?: boolean;
     'imgAlt'?: string;
-    'imgMode'?: 'cover' | 'circle';
+    'imgMode'?: 'cover' | 'circle' | 'none';
     'imgSrc'?: string;
     'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
   }

diff --git a/webcomponents/slides/author/src/components/slide/deckdeckgo-slide-author.scss b/webcomponents/slides/author/src/components/slide/deckdeckgo-slide-author.scss
@@ -31,6 +31,10 @@ div.deckgo-slide-author {
 
     position:relative;
 
+    &.deckgo-slide-author-none {
+      display: none;
+    }
+
     &.deckgo-slide-author-cover {
       &:before {
         content: "";
@@ -59,6 +63,10 @@ div.deckgo-slide-author {
     flex-direction: column;
     justify-content: center;
 
+    &.deckgo-slide-author-none {
+      width: 100%;
+    }
+
     div.deckgo-slide-author-social {
       display: flex;
       align-items: center;

diff --git a/webcomponents/slides/author/src/components/slide/deckdeckgo-slide-author.tsx b/webcomponents/slides/author/src/components/slide/deckdeckgo-slide-author.tsx
@@ -18,7 +18,7 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
   @Prop() imgSrc: string;
   @Prop() imgAlt: string;
 
-  @Prop({reflectToAttr: true}) imgMode: 'cover' | 'circle' = 'cover';
+  @Prop({reflectToAttr: true}) imgMode: 'cover' | 'circle' | 'none' = 'cover';
 
   @Prop({reflectToAttr: true}) customActions: boolean = false;
   @Prop({reflectToAttr: true}) customBackground: boolean = false;
@@ -64,15 +64,16 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
   }
 
   render() {
-    const classAuthorImg: string = `deckgo-slide-author deckgo-slide-author-start deckgo-slide-author-${this.imgMode} ${this.mobile ? 'deckgo-slide-author-mobile' : ''}`;
+    const classAuthorStart: string = `deckgo-slide-author deckgo-slide-author-start deckgo-slide-author-${this.imgMode} ${this.mobile ? 'deckgo-slide-author-mobile' : ''}`;
+    const classAuthorEnd: string = `deckgo-slide-author deckgo-slide-author-end deckgo-slide-author-${this.imgMode} ${this.mobile ? 'deckgo-slide-author-mobile' : ''}`;
 
     return <Host class={{'deckgo-slide-container': true}}>
       <div class="deckgo-slide">
         <slot name="title"></slot>
-        <div class={classAuthorImg} style={{'--slide-author-color-start-img-url': `url(${this.imgSrc})`}}>
+        <div class={classAuthorStart} style={{'--slide-author-color-start-img-url': `url(${this.imgSrc})`}}>
           {this.renderImage()}
         </div>
-        <div class="deckgo-slide-author deckgo-slide-author-end">
+        <div class={classAuthorEnd}>
           <slot name="author"></slot>
           <div class="deckgo-slide-author-social">
             <slot name="social-link"></slot>
@@ -91,7 +92,7 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
   }
 
   private renderImage() {
-    if (this.imgMode === 'cover') {
+    if (this.imgMode === 'cover' || this.imgMode === 'none') {
       return undefined;
     }
 

diff --git a/webcomponents/slides/author/src/components/slide/readme.md b/webcomponents/slides/author/src/components/slide/readme.md
@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property           | Attribute           | Description | Type                  | Default     |
-| ------------------ | ------------------- | ----------- | --------------------- | ----------- |
-| `customActions`    | `custom-actions`    |             | `boolean`             | `false`     |
-| `customBackground` | `custom-background` |             | `boolean`             | `false`     |
-| `imgAlt`           | `img-alt`           |             | `string`              | `undefined` |
-| `imgMode`          | `img-mode`          |             | `"circle" \| "cover"` | `'cover'`   |
-| `imgSrc`           | `img-src`           |             | `string`              | `undefined` |
+| Property           | Attribute           | Description | Type                            | Default     |
+| ------------------ | ------------------- | ----------- | ------------------------------- | ----------- |
+| `customActions`    | `custom-actions`    |             | `boolean`                       | `false`     |
+| `customBackground` | `custom-background` |             | `boolean`                       | `false`     |
+| `imgAlt`           | `img-alt`           |             | `string`                        | `undefined` |
+| `imgMode`          | `img-mode`          |             | `"circle" \| "cover" \| "none"` | `'cover'`   |
+| `imgSrc`           | `img-src`           |             | `string`                        | `undefined` |
 
 
 ## Events

diff --git a/webcomponents/slides/author/src/index.html b/webcomponents/slides/author/src/index.html
@@ -45,6 +45,27 @@ <h2>David Dal Busco</h2>
     </div>
   </deckgo-slide-author>
 
+  <deckgo-slide-author img-mode="none" img-alt="David" img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
+    <div slot="author">
+      <h2>David Dal Busco</h2>
+      <p>Creator of <a href="https://deckdeckgo.com">DeckDeckGo</a>.</p>
+      <p>Organizer of the Ionic Zürich <a href="https://www.meetup.com/Ionic-Zurich">Meetup</a></p>
+      <p>Zürich, Switzerland</p>
+    </div>
+    <div slot="social-link">
+      <deckgo-social twitter="daviddalbusco">
+        <img slot="icon" alt="DeckDeckGo" src="https://docs.deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 20px; vertical-align: middle;"/>
+        twitter
+      </deckgo-social>
+    </div>
+    <div slot="social-link"><deckgo-social linkedin="david-dal-busco/">linkedin/david-dal-busco</deckgo-social></div>
+    <div slot="social-link"><deckgo-social medium="david.dalbusco"></deckgo-social></div>
+    <div slot="social-link"><deckgo-social dev="daviddalbusco"></deckgo-social></div>
+    <div slot="social-link"><deckgo-social github="peterpeterparker">+daviddalbusco</deckgo-social></div>
+    <div slot="social-link"><deckgo-social full-url="https://daviddalbusco.com">https://daviddalbusco.com</deckgo-social></div>
+    <div slot="social-link"><deckgo-social full-url="https://googlegooglegooglegoogle.com"></deckgo-social></div>
+  </deckgo-slide-author>
+
   <button onclick="slideNext()" slot="actions">Action slide next</button>
 </deckgo-deck>