-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
62bc8b6
commit 1e0b5db
Showing
10 changed files
with
461 additions
and
3 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { Meta, StoryObj } from '@storybook/web-components' | ||
import { html } from 'lit' | ||
import './rcfm-page' | ||
|
||
const meta: Meta = { | ||
title: 'Components / RCfM Page', | ||
} | ||
export default meta | ||
|
||
type Story = StoryObj | ||
|
||
export const Simple: Story = { | ||
render: (args) => | ||
html` <radix-rcfm-page | ||
header=${args.header} | ||
subheader=${args.subheader} | ||
?isError=${args.isError} | ||
?isLoading=${args.isLoading} | ||
> | ||
</radix-rcfm-page>`, | ||
args: { | ||
header: 'This page is no longer active ', | ||
subheader: 'Go back and try again, you can close this tab ', | ||
isError: false, | ||
isLoading: true, | ||
}, | ||
} |
61 changes: 61 additions & 0 deletions
61
packages/connect-button/src/components/rcfm-page/rcfm-page.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { LitElement, css, html } from 'lit' | ||
import { customElement, property } from 'lit/decorators.js' | ||
import '../mask/mask' | ||
import '../wallet-connector-card/wallet-connector-card' | ||
import '../wallet-connector-card/wallet-connector-info' | ||
import '../loading-spinner/loading-spinner' | ||
|
||
@customElement('radix-rcfm-page') | ||
export class RadixRcfmPage extends LitElement { | ||
@property({ | ||
type: String, | ||
}) | ||
header: string = '' | ||
|
||
@property({ | ||
type: String, | ||
}) | ||
subheader: string = '' | ||
|
||
@property({ | ||
type: Boolean, | ||
}) | ||
isError: boolean = false | ||
|
||
@property({ | ||
type: Boolean, | ||
}) | ||
isLoading: boolean = false | ||
|
||
render() { | ||
return html` <radix-mask isBranded> | ||
<radix-wallet-connector-card> | ||
${this.isLoading | ||
? html`<div class="loading-container"> | ||
<radix-loading-spinner></radix-loading-spinner> | ||
</div>` | ||
: html`<radix-wallet-connector-info | ||
header=${this.header} | ||
subheader=${this.subheader} | ||
?isError=${this.isError} | ||
></radix-wallet-connector-info>`} | ||
</radix-wallet-connector-card> | ||
</radix-mask>` | ||
} | ||
|
||
static styles = [ | ||
css` | ||
.loading-container { | ||
display: flex; | ||
justify-content: center; | ||
padding: 18px 0; | ||
} | ||
`, | ||
] | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
'radix-rcfm-page': RadixRcfmPage | ||
} | ||
} |
99 changes: 99 additions & 0 deletions
99
...ages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
import { Meta, StoryObj } from '@storybook/web-components' | ||
import { html } from 'lit' | ||
import '../loading-spinner/loading-spinner' | ||
import './wallet-connector-card' | ||
import './wallet-connector-info' | ||
import '../mask/mask' | ||
|
||
const meta: Meta = { | ||
title: 'Components / Wallet Connector Card', | ||
} | ||
export default meta | ||
|
||
type Story = StoryObj | ||
|
||
export const Simple: Story = { | ||
render: (args) => | ||
html` <radix-wallet-connector-card header=${args.header}> | ||
<h1>Hi</h1> | ||
</radix-wallet-connector-card>`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} | ||
|
||
export const Loading: Story = { | ||
render: (args) => | ||
html` <radix-mask isBranded | ||
><radix-wallet-connector-card header=${args.header}> | ||
<div style="padding: 32px 0;display: flex; justify-content: center;"> | ||
<radix-loading-spinner></radix-loading-spinner> | ||
</div> </radix-wallet-connector-card | ||
></radix-mask>`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} | ||
|
||
export const ErrorState: Story = { | ||
render: (args) => | ||
html` <radix-wallet-connector-card header=${args.header}> | ||
<div style="padding: 18px 0;display: flex; justify-content: center;"> | ||
<radix-wallet-connector-info | ||
header="Connection failed" | ||
subheader="Go back and try again, you can close this tab" | ||
isError | ||
></radix-wallet-connector-info> | ||
</div> | ||
</radix-wallet-connector-card>`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} | ||
|
||
export const ConnectionSuccessfulStory: Story = { | ||
render: (args) => | ||
html` <radix-wallet-connector-card header=${args.header}> | ||
<div style="padding: 18px 0;display: flex; justify-content: center;"> | ||
<radix-wallet-connector-info | ||
header="This page is no longer active " | ||
subheader="You can now close this tab" | ||
></radix-wallet-connector-info> | ||
</div> | ||
</radix-wallet-connector-card>`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} | ||
|
||
export const PageNoLongerActive: Story = { | ||
render: (args) => | ||
html` <radix-wallet-connector-card header=${args.header}> | ||
<div style="padding: 18px 0;display: flex; justify-content: center;"> | ||
<radix-wallet-connector-info | ||
header="Connection successful" | ||
subheader="You can now close this tab" | ||
></radix-wallet-connector-info> | ||
</div> | ||
</radix-wallet-connector-card>`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} | ||
|
||
export const WithMask: Story = { | ||
render: (args) => html` | ||
<radix-mask isBranded> | ||
<radix-wallet-connector-card header=${args.header}> | ||
<div style="padding: 18px 0;display: flex; justify-content: center;"> | ||
<radix-wallet-connector-info | ||
header="Connection successful" | ||
subheader="You can now close this tab" | ||
></radix-wallet-connector-info> | ||
</div> </radix-wallet-connector-card | ||
></radix-mask> | ||
`, | ||
args: { | ||
header: 'Radix Wallet Connector', | ||
}, | ||
} |
Oops, something went wrong.