Skip to content

Commit f16173f

Browse files
amysortoamysorto
committed
docs: first pass of updated what is angular page
1 parent 40e7904 commit f16173f

37 files changed

+1260
-191
lines changed

‎adev/shared-docs/components/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ ts_library(
1616
"//adev/shared-docs/components/cookie-popup",
1717
"//adev/shared-docs/components/copy-source-code-button",
1818
"//adev/shared-docs/components/icon",
19+
"//adev/shared-docs/components/image-carousel",
1920
"//adev/shared-docs/components/navigation-list",
2021
"//adev/shared-docs/components/search-dialog",
2122
"//adev/shared-docs/components/select",
2223
"//adev/shared-docs/components/slide-toggle",
2324
"//adev/shared-docs/components/table-of-contents",
25+
"//adev/shared-docs/components/testimonials",
2426
"//adev/shared-docs/components/text-field",
2527
"//adev/shared-docs/components/top-level-banner",
2628
"//adev/shared-docs/components/viewers",

‎adev/shared-docs/components/icon/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ ng_module(
1414
visibility = [
1515
"//adev/shared-docs/components:__pkg__",
1616
"//adev/shared-docs/components/copy-source-code-button:__pkg__",
17+
"//adev/shared-docs/components/image-carousel:__pkg__",
1718
"//adev/shared-docs/components/navigation-list:__pkg__",
1819
"//adev/shared-docs/components/table-of-contents:__pkg__",
20+
"//adev/shared-docs/components/testimonials:__pkg__",
1921
"//adev/shared-docs/components/text-field:__pkg__",
2022
"//adev/shared-docs/components/top-level-banner:__pkg__",
2123
"//adev/shared-docs/components/viewers:__pkg__",

‎adev/shared-docs/components/image-carousel/BUILD.bazel

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//tools:defaults.bzl", "karma_web_test_suite", "ng_module", "ts_library")
3+
4+
package(default_visibility = ["//visibility:private"])
5+
6+
ng_module(
7+
name = "image-carousel",
8+
srcs = [
9+
"image-carousel.component.ts",
10+
],
11+
assets = [
12+
":image-carousel.component.css",
13+
"image-carousel.component.html",
14+
],
15+
visibility = [
16+
"//adev/shared-docs/components:__pkg__",
17+
"//adev/shared-docs/components/viewers:__pkg__",
18+
],
19+
deps = [
20+
"//adev/shared-docs/components/icon",
21+
"//packages/core",
22+
],
23+
)
24+
25+
sass_binary(
26+
name = "style",
27+
src = "image-carousel.component.scss",
28+
)
29+
30+
ts_library(
31+
name = "test_lib",
32+
testonly = True,
33+
srcs = glob(
34+
["*.spec.ts"],
35+
),
36+
deps = [
37+
":image-carousel",
38+
"//packages/core",
39+
"//packages/core/testing",
40+
"//packages/platform-browser",
41+
],
42+
)
43+
44+
karma_web_test_suite(
45+
name = "test",
46+
deps = [":test_lib"],
47+
)

‎adev/shared-docs/components/image-carousel/image-carousel.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="docs-image-carousel">
2+
@for (image of imageItems; track image; let i = $index) {
3+
<img src="{{image.imgSrc}}" class="docs-image-carousel-item">
4+
}
5+
</div>

‎adev/shared-docs/components/image-carousel/image-carousel.component.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.docs-image-carousel {
2+
align-items: center;
3+
display: flex;
4+
gap: 1.5rem;
5+
justify-content: center;
6+
}
7+
8+
.docs-image-carousel-item {
9+
max-height: 2rem;
10+
width: auto;
11+
}

‎adev/shared-docs/components/image-carousel/image-carousel.component.spec.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*!
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {ComponentFixture, TestBed} from '@angular/core/testing';
10+
11+
import {Image, ImageCarouselComponent} from './testimonials.component';
12+
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
13+
14+
const imageItems: Image[] = [
15+
{
16+
href: 'https://angular.dev/',
17+
imgSrc: 'company1.png',
18+
imgAltText: 'Company 1 Logo',
19+
},
20+
{
21+
href: 'https://angular.dev/',
22+
imgSrc: 'company2.png',
23+
imgAltText: 'Company 2 Logo',
24+
},
25+
{
26+
href: 'https://angular.dev/',
27+
imgSrc: 'company3.com',
28+
imgAltText: 'Company 3 Logo',
29+
},
30+
];
31+
32+
describe('Image Carousel', () => {
33+
let component: ImageCarouselComponent;
34+
let fixture: ComponentFixture<ImageCarouselComponent>;
35+
36+
beforeEach(async () => {
37+
await TestBed.configureTestingModule({
38+
imports: [ImageCarouselComponent],
39+
providers: [provideExperimentalZonelessChangeDetection()],
40+
}).compileComponents();
41+
fixture = TestBed.createComponent(ImageCarouselComponent);
42+
component = fixture.componentInstance;
43+
component.imageItems = [...imageItems];
44+
fixture.detectChanges();
45+
});
46+
47+
// TODO: Write texts once carousel is finished
48+
});

‎adev/shared-docs/components/image-carousel/image-carousel.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {ChangeDetectionStrategy, Component, Input, signal} from '@angular/core';
2+
3+
export interface Image {
4+
href: string;
5+
imgSrc: string;
6+
imgAltText: string;
7+
}
8+
9+
@Component({
10+
selector: 'docs-image-carousel',
11+
templateUrl: './image-carousel.component.html',
12+
styleUrls: ['./image-carousel.component.scss'],
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
})
15+
export class ImageCarouselComponent {
16+
@Input({required: true}) imageItems!: Image[];
17+
18+
index = signal(0);
19+
20+
nextImage() {
21+
const newIndex = this.index() + 1;
22+
this.index.set(newIndex === this.imageItems.length ? 0 : newIndex);
23+
}
24+
25+
previousImage() {
26+
const newIndex = this.index() - 1;
27+
this.index.set(newIndex < 0 ? this.imageItems.length - 1 : newIndex);
28+
}
29+
}

‎adev/shared-docs/components/testimonials/BUILD.bazel

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//tools:defaults.bzl", "karma_web_test_suite", "ng_module", "ts_library")
3+
4+
package(default_visibility = ["//visibility:private"])
5+
6+
ng_module(
7+
name = "testimonials",
8+
srcs = [
9+
"testimonials.component.ts",
10+
],
11+
assets = [
12+
":testimonials.component.css",
13+
"testimonials.component.html",
14+
],
15+
visibility = [
16+
"//adev/shared-docs/components:__pkg__",
17+
"//adev/shared-docs/components/viewers:__pkg__",
18+
],
19+
deps = [
20+
"//adev/shared-docs/components/icon",
21+
"//packages/core",
22+
],
23+
)
24+
25+
sass_binary(
26+
name = "style",
27+
src = "testimonials.component.scss",
28+
)
29+
30+
ts_library(
31+
name = "test_lib",
32+
testonly = True,
33+
srcs = glob(
34+
["*.spec.ts"],
35+
),
36+
deps = [
37+
":testimonials",
38+
"//packages/core",
39+
"//packages/core/testing",
40+
"//packages/platform-browser",
41+
],
42+
)
43+
44+
karma_web_test_suite(
45+
name = "test",
46+
deps = [":test_lib"],
47+
)

‎adev/shared-docs/components/testimonials/testimonials.component.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div>
2+
<div class="docs-testimonial-quote-container">
3+
<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<path d="M0 16.7436V12.38C0 11.0921 0.242424 9.73606 0.727273 8.31182C1.21212 6.88758 1.88636 5.52394 2.75 4.22091C3.61364 2.91788 4.62879 1.80424 5.79545 0.880005L9.15909 3.28909C8.23485 4.63758 7.44697 6.04667 6.79545 7.51637C6.14394 8.98606 5.81818 10.5845 5.81818 12.3118V16.7436H0ZM11.5909 16.7436V12.38C11.5909 11.0921 11.8333 9.73606 12.3182 8.31182C12.803 6.88758 13.4773 5.52394 14.3409 4.22091C15.2045 2.91788 16.2197 1.80424 17.3864 0.880005L20.75 3.28909C19.8258 4.63758 19.0379 6.04667 18.3864 7.51637C17.7348 8.98606 17.4091 10.5845 17.4091 12.3118V16.7436H11.5909Z" fill="#F637E3"/>
5+
</svg>
6+
<div class="docs-testimonial-quote">
7+
"{{testimonialItems[index()].quote}}"
8+
</div>
9+
</div>
10+
<div class="docs-testimonial-img-container">
11+
<img alt="{{testimonialItems[index()].imgAltText}}" src="{{testimonialItems[index()].imgSrc}}">
12+
</div>
13+
<div class="docs-testimonial-info-container">
14+
<div class="docs-testimonial-info-actions">
15+
<button
16+
type="button"
17+
class="docs-testimonial-button"
18+
aria-label="Previous testimonial"
19+
(click)="previousTestimonial()"
20+
>
21+
<docs-icon>chevron_left</docs-icon>
22+
</button>
23+
@for (entry of testimonialItems; track entry; let i = $index) {
24+
<div class="docs-testimonial-entry {{ $index === index() ? 'docs-testimonial-entry-selected' : '' }}"></div>
25+
}
26+
<button
27+
type="button"
28+
class="docs-testimonial-button"
29+
aria-label="Previous testimonial"
30+
(click)="nextTestimonial()"
31+
>
32+
<docs-icon>chevron_right</docs-icon>
33+
</button>
34+
</div>
35+
<a href="{{testimonialItems[index()].href}}">
36+
<span>Read case study</span>
37+
</a>
38+
</div>
39+
</div>

‎adev/shared-docs/components/testimonials/testimonials.component.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.docs-testimonial-quote {
2+
border-image: var(--pink-to-purple-vertical-gradient) 1;
3+
border-inline-start-width: 1px;
4+
border-style: solid;
5+
border-width: 0;
6+
padding-inline-start: 12px;
7+
}
8+
9+
.docs-testimonial-img-container {
10+
display: flex;
11+
justify-content: flex-end;
12+
margin: 0;
13+
14+
img {
15+
max-height: 40px;
16+
width: fit-content;
17+
}
18+
}
19+
20+
.docs-testimonial-info-container {
21+
align-items: center;
22+
display: flex;
23+
justify-content: space-between;
24+
margin: 0;
25+
}
26+
27+
28+
.docs-testimonial-info-actions {
29+
align-items: center;
30+
display: flex;
31+
gap: 8px;
32+
33+
.docs-testimonial-button {
34+
color: var(--gray-400);
35+
margin: 0;
36+
padding: 0;
37+
}
38+
39+
.docs-testimonial-entry {
40+
background: var(--gray-300);
41+
border-radius: 50%;
42+
height: 8px;
43+
margin-bottom: 4px;
44+
margin-top: 0;
45+
width: 8px;
46+
}
47+
48+
.docs-testimonial-entry-selected {
49+
background: var(--gray-900);
50+
}
51+
}
52+

0 commit comments

Comments
 (0)