From 56813460b985bd81d7f76cad53a05db82db66621 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Fri, 12 Jan 2024 12:47:11 -0300 Subject: [PATCH 1/3] docs(pt): translate challenge 13 (styling) --- .../angular/styling/src/app/page.component.ts | 2 +- .../docs/pt/challenges/angular/13-styling.md | 23 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/pt/challenges/angular/13-styling.md diff --git a/apps/angular/styling/src/app/page.component.ts b/apps/angular/styling/src/app/page.component.ts index a378647..0674532 100644 --- a/apps/angular/styling/src/app/page.component.ts +++ b/apps/angular/styling/src/app/page.component.ts @@ -11,7 +11,7 @@ import { TextComponent } from './text.component'; - This a a blue text + This is a blue text `, }) export class PageComponent {} diff --git a/docs/src/content/docs/pt/challenges/angular/13-styling.md b/docs/src/content/docs/pt/challenges/angular/13-styling.md new file mode 100644 index 0000000..99932df --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/13-styling.md @@ -0,0 +1,23 @@ +--- +title: 🟠 CSS Altamente Personalizável +description: Desafio 13 é sobre criar estilos CSS altamente personalizáveis +author: thomas-laforge +challengeNumber: 13 +command: angular-styling +sidebar: + order: 104 +--- + +## Informação + +Estilização é um aspecto importante do trabalho diário de um desenvolvedor frontend, mas é muitas vezes subestimado. Em aplicações Angular, eu frequentemente vejo pessoas usando `@Input()` para personalizar o estilo de seus componentes. No entanto, `@Input()` deve ser usado apenas para lógica. Outras técnicas, como **variáveis CSS** e **host-context** devem ser usadas para estilização. + +Neste desafio, você precisará usar tanto variáveis CSS como `:host-context` para remover todos `@Input()` de seu código. + +## Restrições + +- Na sua submissão final, seu componente não deve conter nenhuma linha de código. Toda a estilização deve ser manipulada dentro do decorador _(ou arquivos css externos se preferir)_ + +## Bônus + +- Você pode manter o `@Input` no componente `TextStaticComponent` e utilizar `@HostBinding` (documentação [aqui](https://angular.dev/api/core/HostBinding)) para usufruir o autocompletar. From 471166b5247cbf83f17a3085db9088367f029e06 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Fri, 12 Jan 2024 13:15:11 -0300 Subject: [PATCH 2/3] docs(pt): add note section about another possible solution --- docs/src/content/docs/challenges/angular/13-styling.md | 6 +++++- docs/src/content/docs/pt/challenges/angular/13-styling.md | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md index fa38f8b..500b237 100644 --- a/docs/src/content/docs/challenges/angular/13-styling.md +++ b/docs/src/content/docs/challenges/angular/13-styling.md @@ -14,6 +14,10 @@ Styling is an important aspect of a frontend developer's day job, but it is ofte In this challenge, you will need to use both CSS variables and `:host-context` to remove all `@Input()` from your code. -## Constraints: +## Constraints - In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_ + +## Note + +There is also another way to style the `TextStaticComponent` (see [PR](https://github.com/tomalaforge/angular-challenges/pull/341/files#diff-082bc0154adae46609f52c9e366d4768ae9278dcb495a9a7ec7cb0baf393fb1c)) diff --git a/docs/src/content/docs/pt/challenges/angular/13-styling.md b/docs/src/content/docs/pt/challenges/angular/13-styling.md index 99932df..7e55447 100644 --- a/docs/src/content/docs/pt/challenges/angular/13-styling.md +++ b/docs/src/content/docs/pt/challenges/angular/13-styling.md @@ -18,6 +18,6 @@ Neste desafio, você precisará usar tanto variáveis CSS como `:host-context` p - Na sua submissão final, seu componente não deve conter nenhuma linha de código. Toda a estilização deve ser manipulada dentro do decorador _(ou arquivos css externos se preferir)_ -## Bônus +## Nota -- Você pode manter o `@Input` no componente `TextStaticComponent` e utilizar `@HostBinding` (documentação [aqui](https://angular.dev/api/core/HostBinding)) para usufruir o autocompletar. +Há uma outra maneira de estilizar o componente `TextStaticComponent` (ver [PR](https://github.com/tomalaforge/angular-challenges/pull/341/files#diff-082bc0154adae46609f52c9e366d4768ae9278dcb495a9a7ec7cb0baf393fb1c)) From dd94be16a990c55852342e3fae0cc46b02095175 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Fri, 12 Jan 2024 13:52:25 -0300 Subject: [PATCH 3/3] docs(pt): remove doc section --- docs/src/content/docs/challenges/angular/13-styling.md | 4 ---- docs/src/content/docs/pt/challenges/angular/13-styling.md | 4 ---- 2 files changed, 8 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/13-styling.md b/docs/src/content/docs/challenges/angular/13-styling.md index 500b237..1bbd9be 100644 --- a/docs/src/content/docs/challenges/angular/13-styling.md +++ b/docs/src/content/docs/challenges/angular/13-styling.md @@ -17,7 +17,3 @@ In this challenge, you will need to use both CSS variables and `:host-context` t ## Constraints - In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_ - -## Note - -There is also another way to style the `TextStaticComponent` (see [PR](https://github.com/tomalaforge/angular-challenges/pull/341/files#diff-082bc0154adae46609f52c9e366d4768ae9278dcb495a9a7ec7cb0baf393fb1c)) diff --git a/docs/src/content/docs/pt/challenges/angular/13-styling.md b/docs/src/content/docs/pt/challenges/angular/13-styling.md index 7e55447..b734a44 100644 --- a/docs/src/content/docs/pt/challenges/angular/13-styling.md +++ b/docs/src/content/docs/pt/challenges/angular/13-styling.md @@ -17,7 +17,3 @@ Neste desafio, você precisará usar tanto variáveis CSS como `:host-context` p ## Restrições - Na sua submissão final, seu componente não deve conter nenhuma linha de código. Toda a estilização deve ser manipulada dentro do decorador _(ou arquivos css externos se preferir)_ - -## Nota - -Há uma outra maneira de estilizar o componente `TextStaticComponent` (ver [PR](https://github.com/tomalaforge/angular-challenges/pull/341/files#diff-082bc0154adae46609f52c9e366d4768ae9278dcb495a9a7ec7cb0baf393fb1c))