Skip to content

Commit fb59331

Browse files
mawelCaballeromawelCaballero
authored
Merge pull request #635 from dxc-technology/examples-lab
Examples lab
2 parents a7fd770 + 4302196 commit fb59331

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+385
-378
lines changed

‎projects/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.html

+18-38
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,32 @@
1-
<dxc-heading
2-
[level]="3"
3-
weight="normal"
4-
text="Examples"
5-
[margin]="{ bottom: 'small' }"
6-
></dxc-heading>
1+
<dxc-heading [level]="3" weight="normal" text="Examples" [margin]="{ bottom: 'small' }"></dxc-heading>
72

83
<div *ngIf="examples">
94
<div *ngFor="let example of examples; first as isFirst">
10-
<div [id]="example.iframe.title" class="exampleHeader" [ngClass]="{'first': isFirst}" >
11-
<dxc-heading
12-
[text]="example.title"
13-
[level]="5"
14-
></dxc-heading>
5+
<div [id]="example.iframe.title" class="exampleHeader" [ngClass]="{'first': isFirst}">
6+
<dxc-heading [text]="example.title" [level]="5"></dxc-heading>
157

168
<button class="visibilityButton" (click)="changeVisibility(example)">
17-
<svg
18-
xmlns="http://www.w3.org/2000/svg"
19-
width="100%"
20-
height="100%"
21-
viewBox="0 0 24 24"
22-
fit=""
23-
preserveAspectRatio="xMidYMid meet"
24-
focusable="false"
25-
>
9+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
10+
preserveAspectRatio="xMidYMid meet" focusable="false">
2611
<path fill="none" d="M0 0h24v24H0V0z"></path>
27-
<path
28-
_ngcontent-hgo-c501=""
29-
d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
30-
></path>
12+
<path _ngcontent-hgo-c501=""
13+
d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
3114
</svg>
3215
<span *ngIf="!example.visibility">View Example</span>
3316
<span *ngIf="example.visibility">Hide Example</span>
3417
</button>
3518
</div>
3619

37-
<iframe
38-
[src]="example.iframe.src"
39-
*ngIf="example.visibility"
40-
style="
41-
width: 100%;
42-
height: 500px;
43-
border: 0;
44-
border-radius: 4px;
45-
overflow: hidden;
46-
"
47-
title="{{ example.iframe.title }}"
48-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
49-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
50-
></iframe>
20+
<div *ngIf="example.visibility">
21+
<iframe [src]="example.iframe.src" style="
22+
width: 100%;
23+
height: 500px;
24+
border: 0;
25+
border-radius: 4px;
26+
overflow: hidden;
27+
" title="{{ example.iframe.title }}" loading="lazy"
28+
sandbox="allow-forms allow-presentation allow-same-origin allow-scripts"></iframe>
29+
</div>
30+
5131
</div>
5232
</div>

‎projects/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.ts

+14-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import {
2-
Component,
3-
OnInit,
4-
Input,
5-
HostBinding,
6-
OnDestroy,
7-
} from "@angular/core";
1+
import { Component, OnInit, Input } from "@angular/core";
82
import { CodesandboxServiceService } from "../../service/codesandbox-service.service";
9-
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
3+
import { DomSanitizer } from "@angular/platform-browser";
104

115
@Component({
126
selector: "codesandbox-viewer",
137
templateUrl: "./codesandbox-viewer.component.html",
14-
styleUrls:["./codesandbox-viewer.component.scss"]
8+
styleUrls: ["./codesandbox-viewer.component.scss"],
159
})
1610
export class CodesandboxViewer implements OnInit {
1711
@Input()
@@ -31,6 +25,7 @@ export class CodesandboxViewer implements OnInit {
3125
.getExamples(this.path)
3226
.subscribe((resp) => {
3327
this.examples = resp;
28+
console.log(this.examples);
3429
});
3530
}
3631

@@ -40,14 +35,16 @@ export class CodesandboxViewer implements OnInit {
4035

4136
changeVisibility(example) {
4237
example.visibility = !example.visibility;
43-
if(example.visibility){
44-
const element = document.getElementById(example.iframe.title);
45-
element.scrollIntoView({
46-
behavior: "auto",
47-
block: "start"
48-
});
49-
setTimeout(()=>{ window.scroll(0,window.pageYOffset+(element.offsetHeight + 25)); }, 10)
50-
}
38+
if (example.visibility) {
39+
const element = document.getElementById(example.iframe.title);
40+
element.scrollIntoView({
41+
behavior: "auto",
42+
block: "start",
43+
});
44+
setTimeout(() => {
45+
window.scroll(0, window.pageYOffset + (element.offsetHeight + 25));
46+
}, 10);
47+
}
5148
}
5249

5350
OnDestroy() {

‎projects/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.module.ts

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
11
import { NgModule } from "@angular/core";
2-
import { BrowserModule } from '@angular/platform-browser';
3-
import { FormsModule } from '@angular/forms';
4-
import { CommonModule } from '@angular/common';
5-
import { CodesandboxViewer } from './codesandbox-viewer.component';
6-
import { CodesandboxServiceService } from '../../service/codesandbox-service.service';
7-
import { DxcHeadingModule } from '@dxc-technology/halstack-angular';
2+
import { BrowserModule } from "@angular/platform-browser";
3+
import { FormsModule } from "@angular/forms";
4+
import { CommonModule } from "@angular/common";
5+
import { CodesandboxViewer } from "./codesandbox-viewer.component";
6+
import { CodesandboxServiceService } from "../../service/codesandbox-service.service";
7+
import {
8+
DxcHeadingModule,
9+
DxcSpinnerModule,
10+
} from "@dxc-technology/halstack-angular";
811

912
@NgModule({
10-
declarations: [
11-
CodesandboxViewer
12-
],
13+
declarations: [CodesandboxViewer],
1314
imports: [
1415
BrowserModule,
1516
FormsModule,
1617
CommonModule,
17-
DxcHeadingModule
18-
],
19-
exports: [
20-
CodesandboxViewer
21-
],
22-
entryComponents: [
18+
DxcSpinnerModule,
19+
DxcHeadingModule,
2320
],
24-
providers: [
25-
CodesandboxServiceService
26-
]
21+
exports: [CodesandboxViewer],
22+
entryComponents: [],
23+
providers: [CodesandboxServiceService],
2724
})
28-
export class CodesandboxViewerModule { }
25+
export class CodesandboxViewerModule {}

‎projects/dxc-ngx-cdk-site/src/app/service/codesandbox-service.service.ts

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { Injectable, OnDestroy, OnInit } from '@angular/core';
2-
import { HttpClient } from '@angular/common/http';
3-
import { Observable, Subscription } from 'rxjs';
4-
import { map } from 'rxjs/operators';
5-
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
6-
1+
import { Injectable, OnDestroy, OnInit } from "@angular/core";
2+
import { HttpClient } from "@angular/common/http";
3+
import { Observable, Subscription } from "rxjs";
4+
import { map } from "rxjs/operators";
5+
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
76

87
export interface CodesandboxIframe {
98
src: SafeResourceUrl;
@@ -13,34 +12,35 @@ export interface CodesandboxIframe {
1312
export interface CodeSandboxExample {
1413
title: string;
1514
iframe: CodesandboxIframe;
15+
visibility: boolean;
1616
}
1717

18-
1918
@Injectable({
20-
providedIn: 'root'
19+
providedIn: "root",
2120
})
2221
export class CodesandboxServiceService {
23-
2422
subscription: Observable<Array<CodeSandboxExample>>;
2523

26-
constructor(private http: HttpClient, protected _sanitizer: DomSanitizer) {
27-
}
24+
constructor(private http: HttpClient, protected _sanitizer: DomSanitizer) {}
2825

2926
getExamples(examplePathFile: string): Observable<Array<CodeSandboxExample>> {
30-
return this.http.get(examplePathFile).pipe(map((response: any) => {
31-
let examples: Array<CodeSandboxExample> = [];
32-
if (response?.data && Array.isArray(response?.data)) {
33-
examples = response?.data.map((item: any) => ({
34-
title: item.title, iframe:
35-
{
36-
src: this._sanitizer.bypassSecurityTrustResourceUrl(item.iframe.src),
37-
title: item.iframe.title
38-
},
39-
visible: false
40-
}));
41-
}
42-
return examples;
43-
}));
27+
return this.http.get(examplePathFile).pipe(
28+
map((response: any) => {
29+
let examples: Array<CodeSandboxExample> = [];
30+
if (response?.data && Array.isArray(response?.data)) {
31+
examples = response?.data.map((item: any) => ({
32+
title: item.title,
33+
iframe: {
34+
src: this._sanitizer.bypassSecurityTrustResourceUrl(
35+
item.iframe.src
36+
),
37+
title: item.iframe.title,
38+
},
39+
visibility: item.visibility ?? false,
40+
}));
41+
}
42+
return examples;
43+
})
44+
);
4445
}
45-
4646
}

‎projects/dxc-ngx-cdk-site/src/assets/examples/accordion-group.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
{
44
"title": "Uncontrolled Accordion Group",
55
"iframe": {
6-
"src": "https://codesandbox.io/embed/defaultaccordiongroup-ggl6p?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
6+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/uncontrolled-accordion-group/uncontrolled-accordion-group.component.html&initialpath=uncontrolledAccordionGroup",
77
"title": "UncontrolledAccordionGroup"
8-
}
8+
},"visibility":true
99
},
1010
{
1111
"title": "Controlled Accordion Group",
1212
"iframe": {
13-
"src": "https://codesandbox.io/embed/controlledaccordiongroup-68j5d?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
14-
"title": "ControlledAccordionGroup"
13+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/controlled-accordion-group/controlled-accordion-group.component.html&initialpath=controlledAccordionGroup",
14+
"title": "ControlledAccordionGroup"
1515
}
1616
},
1717
{
1818
"title": "Disabled Accordion Group",
1919
"iframe": {
20-
"src": "https://codesandbox.io/embed/disabledaccordiongroup-gheg4?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
20+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/disabled-accordion-group/disabled-accordion-group.component.html&initialpath=disabledAccordionGroup",
2121
"title": "DisabledAccordionGroup"
2222
}
2323
}
2424
]
25-
}
25+
}

‎projects/dxc-ngx-cdk-site/src/assets/examples/accordion.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,38 @@
33
{
44
"title": "Default Accordion",
55
"iframe": {
6-
"src": "https://codesandbox.io/embed/defaultaccordion-l94dh?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
6+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/default-accordion/default-accordion.component.html&initialpath=defaultAccordion",
77
"title": "DefaultAccordion"
8-
}
8+
},
9+
"visibility":true
910
},
1011
{
1112
"title": "Controlled Accordion",
1213
"iframe": {
13-
"src": "https://codesandbox.io/embed/controlledaccordion-ckwrb?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
14+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/controlled-accordion/controlled-accordion.component.html&initialpath=controlledAccordion",
1415
"title": "ControlledAccordion"
1516
}
1617
},
1718
{
1819
"title": "Accordion with Assistive Text",
1920
"iframe": {
20-
"src": "https://codesandbox.io/embed/assistivetextaccordion-jvolv?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
21+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/accordion-with-assistive-text/accordion-with-assistive-text.component.html&initialpath=accordionWithAssistiveText",
2122
"title": "AssistiveTextAccordion"
2223
}
2324
},
2425
{
2526
"title": "Accordion with Icon",
2627
"iframe": {
27-
"src": "https://codesandbox.io/embed/iconaccordion-1herc?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
28+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/accordion-with-icon/accordion-with-icon.component.html&initialpath=accordionWithIcon",
2829
"title": "IconAccordion"
2930
}
3031
},
3132
{
3233
"title": "Disabled Accordion",
3334
"iframe": {
34-
"src": "https://codesandbox.io/embed/disabledaccordion-g4h2e?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
35+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/disabled-icon/disabled-icon.component.html&initialpath=disabledIconAccordion",
3536
"title": "DisabledAccordion"
3637
}
3738
}
3839
]
39-
}
40+
}

‎projects/dxc-ngx-cdk-site/src/assets/examples/alert.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,58 @@
33
{
44
"title": "Info Alert",
55
"iframe": {
6-
"src": "https://codesandbox.io/embed/infoalert-r3bnj?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
6+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/info-alert/info-alert.component.html&initialpath=infoAlert",
77
"title": "InfoAlert"
88
}
99
},
1010
{
1111
"title": "Succes Alert",
1212
"iframe": {
13-
"src": "https://codesandbox.io/embed/succesalert-7k65h?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
13+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/success-alert/success-alert.component.html&initialpath=successAlert",
1414
"title": "SuccesAlert"
1515
}
1616
},
1717
{
1818
"title": "Warning Alert",
1919
"iframe": {
20-
"src": "https://codesandbox.io/embed/warningalert-b5hmo?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
20+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/warning-alert/warning-alert.component.html&initialpath=warningAlert",
2121
"title": "WarningAlert"
2222
}
2323
},
2424
{
2525
"title": "Error Alert",
2626
"iframe": {
27-
"src": "https://codesandbox.io/embed/erroralert-sjgsi?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
27+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/error-alert/error-alert.component.html&initialpath=errorAlert",
2828
"title": "ErrorAlert"
2929
}
3030
},
3131
{
3232
"title": "Sized Alert",
3333
"iframe": {
34-
"src": "https://codesandbox.io/embed/sizedalert-3chkq?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
34+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/sized-alert/sized-alert.component.html&initialpath=sizedAlert",
3535
"title": "SizedAlert"
3636
}
3737
},
3838
{
3939
"title": "Modal Alert",
4040
"iframe": {
41-
"src": "https://codesandbox.io/embed/modalalert-5ond9?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
41+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/modal-alert/modal-alert.component.html&initialpath=modalAlert",
4242
"title": "ModalAlert"
4343
}
4444
},
4545
{
4646
"title": "Closable Inline Alert",
4747
"iframe": {
48-
"src": "https://codesandbox.io/embed/closableinlinealert-oxglr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
48+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/closable-inline-alert/closable-inline-alert.component.html&initialpath=closableInlineAlert",
4949
"title": "ClosableInlineAlert"
5050
}
5151
},
5252
{
5353
"title": "Alert with children",
5454
"iframe": {
55-
"src": "https://codesandbox.io/embed/alertwithchildren-n7swg?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
55+
"src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/alert-with-children/alert-with-children.component.html&initialpath=alertWithChildren",
5656
"title": "AlertWithChildren"
5757
}
5858
}
5959
]
60-
}
60+
}

0 commit comments

Comments
 (0)