feat(design-land): add file tabs back to code preview and allow conte…

…nt to be hidden (#2578)

apps/design-land/src/app/core/code-preview/component/code-preview-theme.scss

@@ -1,14 +1,31 @@
 @use 'sass:map';
 @use 'theme' as daff-theme;
 
+
 @mixin code-preview-theme($theme) {
 	$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
 	$base: daff-theme.daff-map-deep-get($theme, 'core.base');
+	$primary: map.get(daff-theme.$theme, primary);
+	$font-color: daff-theme.daff-map-deep-get($theme, 'core.font-color');
+	$border: 1px solid daff-theme.daff-illuminate($base, $gray, 2);
 
 	.design-land-code-preview {
 		&__content {
-			border: 1px solid rgba(daff-theme.daff-illuminate($base, $gray, 2), 0.6);
+			border: $border;
 			border-bottom: 0;
 		}
+
+		&__tab-wrapper {
+			border-left: $border;
+			border-right: $border;
+		}
+
+		&__tab {
+			color: $font-color;
+
+			&.selected {
+				border-bottom: 2px solid daff-theme.daff-color($primary);
+			}
+		}
 	}
 }

apps/design-land/src/app/core/code-preview/component/code-preview.component.html

@@ -1,4 +1,7 @@
 <div #content class="design-land-code-preview__content"></div>
-<div *ngIf="example" class="design-land-code-preview__file-container">
-  <pre class="design-land-code-preview__code-block"><code [class]="'hljs' + ' ' +file.language" [innerHtml]="file.content"></code></pre>
-</div>
+<ng-container *ngIf="example">
+  <div class="design-land-code-preview__tab-wrapper">
+    <button class="design-land-code-preview__tab" [class.selected]="exampleFile === file" (click)="exampleFile = file" *ngFor="let file of example.files">{{ file.language }}</button>
+  </div>
+  <pre class="design-land-code-preview__code-block"><code [class]="'hljs' + ' ' +exampleFile.language" [innerHtml]="exampleFile.content"></code></pre>
+</ng-container>

apps/design-land/src/app/core/code-preview/component/code-preview.component.scss

@@ -1,17 +1,49 @@
+@use 'utilities' as daff;
+
 :host {
+	$root: '.design-land-code-preview';
 	display: block;
-	margin: 20px 0;
+	margin: 1.5rem 0;
+
+	&.hide-content {
+		#{$root}__content {
+			display: none;
+		}
+
+		#{$root}__tab-wrapper {
+			border: none;
+		}
+	}
+
 }
 
 .design-land-code-preview {
+	display: block;
+	margin: 1.5rem 0;
+
 	&__content {
 		display: block;
-    padding: 48px 24px;
-		border-radius: 8px 8px 0 0;
+    padding: 1rem;
+
+		@include daff.breakpoint(mobile) {
+			padding: 2rem;
+		}
 	}
 
 	&__code-block {
-		margin-top: 0;
-		border-radius: 0 0 8px 8px;
+		margin: 0;
+		border-radius: 0;
+	}
+
+	&__tab {
+		@include daff.clickable();
+		appearance: none;
+		border: none;
+		background: none;
+		font-size: 0.875rem;
+		line-height: 1rem;
+		font-weight: 500;
+		padding: 12px 16px;
+		text-transform: uppercase;
 	}
 }

apps/design-land/src/app/core/code-preview/component/code-preview.component.ts

@@ -25,7 +25,6 @@ class CodePreviewBase {
 
 const _codePreviewBase = daffArticleEncapsulatedMixin((CodePreviewBase));
 
-
 @Component({
   selector: 'design-land-code-preview',
   templateUrl: './code-preview.component.html',
@@ -41,22 +40,26 @@ export class CodePreviewComponent extends _codePreviewBase implements OnChanges
   @ViewChild('content', { static: true }) content: ElementRef;
 
   /**
-   * The title of the preview
+   * Property to change the display of the content
    */
-  @Input() title: string;
+  @Input() hideContent = false;
+
+  @HostBinding('class.hide-content') get hideContentClass() {
+    return this.hideContent;
+  }
 
   /**
    * The example code
    */
   @Input() example: DesignLandCodeExample;
 
-  file: DesignLandCodeExampleFile;
+  exampleFile: DesignLandCodeExampleFile;
 
   ngOnChanges() {
     if(this.example){
       this.content.nativeElement.innerHtml = '';
       this.content.nativeElement.appendChild(document.createElement(this.example.element));
-      this.file = this.example.files[0];
+      this.exampleFile = this.example.files[0];
     }
   }
 

apps/design-land/src/app/core/code-preview/component/code-preview.module.ts

@@ -4,14 +4,14 @@ import { NgModule } from '@angular/core';
 import { CodePreviewComponent } from './code-preview.component';
 
 @NgModule({
-  declarations: [
-    CodePreviewComponent,
-  ],
   imports: [
     CommonModule,
   ],
   exports: [
     CodePreviewComponent,
   ],
+  declarations: [
+    CodePreviewComponent,
+  ],
 })
 export class DesignLandCodePreviewModule { }

apps/design-land/src/app/core/code-preview/container/example-viewer.component.html

@@ -1 +1 @@
-<design-land-code-preview [title]="title" [example]="selectedExample$ | async"></design-land-code-preview>
+<design-land-code-preview [title]="title" [example]="selectedExample$ | async" [hideContent]="hideContent"></design-land-code-preview>

apps/design-land/src/app/core/code-preview/container/example-viewer.component.ts

@@ -23,6 +23,8 @@ export class DesignLandExampleViewerContainer implements OnInit {
    */
   @Input() example: string;
 
+  @Input() hideContent = false;
+
   selectedExample$: Observable<DesignLandCodeExample>;
 
   constructor(private codeExamples: CodeExampleService){}