devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

update storybook docs

This commit is contained in:
rr-bw 2024-05-02 22:33:07 -07:00
parent 66884d8cf3
commit ffbe5958f8
No known key found for this signature in database
GPG Key ID: 3FA13C3ADEE51D5D
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
libs/auth/src/angular/anon-layout/anon-layout.mdx
View File

@ -14,7 +14,9 @@ the user is (this includes viewing a Send).
### Incorrect Usage ❌
The AnonLayoutComponent is **not** to be implemented by every component that uses it in that
component's template directly. That is, you will **not** be writing:
component's template directly. For example, if you have a component template called
`example.component.html`, and you want it to use the AnonLayoutComponent, you will **not** be
writing:
```html
<!-- File: example.component.html -->
@ -26,16 +28,17 @@ component's template directly. That is, you will **not** be writing:
### Correct Usage ✅
Instead the AnonLayoutComponent is implemented via routable composition, which gives us the
advantages of nested routes in Angular.
Instead the AnonLayoutComponent is implemented solely in the router via routable composition, which
gives us the advantages of nested routes in Angular.
To allow for routable composition in clients, Auth also has an AnonLayout**Wrapper**Component which
embeds the AnonLayoutComponent.
To allow for routable composition, Auth will also provide a wrapper component in each client, called
AnonLayout**Wrapper**Component.
For clarity:
- AnonLayoutComponent = the base component - `<auth-anon-layout>`
- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules
- AnonLayoutComponent = the Auth-owned library component - `<auth-anon-layout>`
- AnonLayout**Wrapper**Component = the client-specific wrapper component to be used in a client
routing module
The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets:
@ -48,9 +51,9 @@ The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the
</auth-anon-layout>
```
To implement, the developer should not even need to work with the base AnonLayoutComponent directly.
The devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` to construct
the page via routable composition:
To implement, the developer does not need to work with the base AnonLayoutComponent directly. The
devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` (for Web, for
example) to construct the page via routable composition:
```javascript
// File: oss-routing.module.ts
@ -83,20 +86,20 @@ the page via routable composition:
```
And if the AnonLayout**Wrapper**Component is already being used in your client's routing module,
then your work will be as simple as just adding another child route under the
AnonLayout**Wrapper**Component `children` property.
then your work will be as simple as just adding another child route under the `children` array.
### Data Properties
In the `oss-routing.module.ts` example above, notice the data properties being passed in:
- For the `pageTitle` and `pageSubtitle` - pass in a translation key from `messages.json`.
- For the `pageIcon` - import an icon into the router file and use the icon directly.
- For the `pageIcon` - import an icon (of type `Icon`) into the router file and use the icon
directly.
All 3 of these properties are optional.
```javascript
import { LockIcon } from '../lock.icon.ts';
import { LockIcon } from "@bitwarden/auth/angular";
// ...