update storybook docs
This commit is contained in:
parent
66884d8cf3
commit
ffbe5958f8
|
@ -14,7 +14,9 @@ the user is (this includes viewing a Send).
|
||||||
### Incorrect Usage ❌
|
### Incorrect Usage ❌
|
||||||
|
|
||||||
The AnonLayoutComponent is **not** to be implemented by every component that uses it in that
|
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
|
```html
|
||||||
<!-- File: example.component.html -->
|
<!-- File: example.component.html -->
|
||||||
|
@ -26,16 +28,17 @@ component's template directly. That is, you will **not** be writing:
|
||||||
|
|
||||||
### Correct Usage ✅
|
### Correct Usage ✅
|
||||||
|
|
||||||
Instead the AnonLayoutComponent is implemented via routable composition, which gives us the
|
Instead the AnonLayoutComponent is implemented solely in the router via routable composition, which
|
||||||
advantages of nested routes in Angular.
|
gives us the advantages of nested routes in Angular.
|
||||||
|
|
||||||
To allow for routable composition in clients, Auth also has an AnonLayout**Wrapper**Component which
|
To allow for routable composition, Auth will also provide a wrapper component in each client, called
|
||||||
embeds the AnonLayoutComponent.
|
AnonLayout**Wrapper**Component.
|
||||||
|
|
||||||
For clarity:
|
For clarity:
|
||||||
|
|
||||||
- AnonLayoutComponent = the base component - `<auth-anon-layout>`
|
- AnonLayoutComponent = the Auth-owned library component - `<auth-anon-layout>`
|
||||||
- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules
|
- 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:
|
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>
|
</auth-anon-layout>
|
||||||
```
|
```
|
||||||
|
|
||||||
To implement, the developer should not even need to work with the base AnonLayoutComponent directly.
|
To implement, the developer does not need to work with the base AnonLayoutComponent directly. The
|
||||||
The devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` to construct
|
devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` (for Web, for
|
||||||
the page via routable composition:
|
example) to construct the page via routable composition:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// File: oss-routing.module.ts
|
// 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,
|
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
|
then your work will be as simple as just adding another child route under the `children` array.
|
||||||
AnonLayout**Wrapper**Component `children` property.
|
|
||||||
|
|
||||||
### Data Properties
|
### Data Properties
|
||||||
|
|
||||||
In the `oss-routing.module.ts` example above, notice the data properties being passed in:
|
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 `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.
|
All 3 of these properties are optional.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { LockIcon } from '../lock.icon.ts';
|
import { LockIcon } from "@bitwarden/auth/angular";
|
||||||
|
|
||||||
// ...
|
// ...
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue