add storybook docs to anon-layout
This commit is contained in:
parent
a09fd49cb0
commit
577549557a
|
@ -4,6 +4,7 @@ import remarkGfm from "remark-gfm";
|
|||
|
||||
const config: StorybookConfig = {
|
||||
stories: [
|
||||
"../libs/auth/src/**/*.mdx",
|
||||
"../libs/auth/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../libs/components/src/**/*.mdx",
|
||||
"../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
|
|
|
@ -0,0 +1,56 @@
|
|||
import { Meta, Story, Controls } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./anon-layout.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
# AnonLayout Component
|
||||
|
||||
The AnonLayoutComponent is to be used for all unauthenticated pages, where we don't know who the
|
||||
user is (this includes viewing a Send).
|
||||
|
||||
The AnonLayoutComponent is not to be implemented by every component that uses it in the component
|
||||
template directly. Instead the AnonLayoutComponent is implemented via routable composition, which
|
||||
gives us the advantages of nested routes in Angular.
|
||||
|
||||
To implement via routable composition, Web has an AnonymousLayoutComponent which acts as a wrapper
|
||||
and embeds the AnonLayoutComponent. For clarity:
|
||||
|
||||
- AnonLayoutComponent = CL component
|
||||
- AnonymousLayoutComponent = Web component (which wraps the CL component) - found in
|
||||
apps/web/src/app/auth/anonymous-layout.component.ts
|
||||
|
||||
The contents of the AnonymousLayoutComponent are the AnonLayoutComponent (CL) along with the router
|
||||
outlets:
|
||||
|
||||
```html
|
||||
<!-- anonymous-layout.component.html -->
|
||||
|
||||
<auth-anon-layout>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet slot="secondary" name="secondary"></router-outlet>
|
||||
</auth-anon-layout>
|
||||
```
|
||||
|
||||
The developer uses the AnonymousLayoutComponent (Web) in oss-routing.module.ts and constructs the
|
||||
page via routable composition:
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: "",
|
||||
component: AnonymousLayoutComponent, // Web component (not the CL component)
|
||||
children: [
|
||||
{
|
||||
path: "sample-route", // replace with your route
|
||||
component: MyPrimaryComponent, // replace with your component
|
||||
},
|
||||
{
|
||||
path: "",
|
||||
component: MySecondaryComponent, // replace with your component (or remove this secondary outlet entirely if not needed)
|
||||
outlet: "secondary",
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
<Story of={stories.WithSecondaryContent} />
|
Loading…
Reference in New Issue