Skip to content

Commit

Permalink
feat: add rcfm components
Browse files Browse the repository at this point in the history
  • Loading branch information
dawidsowardx committed Jun 7, 2024
1 parent 62bc8b6 commit 1e0b5db
Show file tree
Hide file tree
Showing 10 changed files with 461 additions and 3 deletions.
3 changes: 3 additions & 0 deletions packages/connect-button/src/assets/icon-warning.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions packages/connect-button/src/assets/mask-gradient.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { css, html } from 'lit'
import { styleMap } from 'lit/directives/style-map.js'
import { LitElement, css, html } from 'lit'
import { BUTTON_MIN_WIDTH } from '../../constants'
import { customElement, property } from 'lit/decorators.js'

export const LoadingSpinner = html`<div class="loading-spinner-container">
<div class="loading-spinner"></div>
Expand Down Expand Up @@ -65,3 +67,68 @@ export const loadingSpinnerCSS = css`
}
}
`

@customElement('radix-loading-spinner')
export class RadixLoadingSpinner extends LitElement {
@property({
type: Number,
})
size: number = 48

@property({
type: Number,
})
weight: number = 5

@property({
type: String,
})
color: string = 'var(--color-grey-2)'

static styles = [
css`
.loading-spinner-container {
display: flex;
}
.loading-spinner {
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
align-self: center;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`,
]

render() {
return html`<div class="loading-spinner-container">
<div
class="loading-spinner"
style=${styleMap({
width: `${this.size}px`,
height: `${this.size}px`,
minWidth: `${this.size}px`,
minHeight: `${this.size}px`,
border: `${this.weight}px solid color-mix(in srgb, ${this.color} 30%, transparent)`,
borderBottomColor: this.color,
})}
></div>
</div>`
}
}

declare global {
interface HTMLElementTagNameMap {
'radix-loading-spinner': RadixLoadingSpinner
}
}
20 changes: 18 additions & 2 deletions packages/connect-button/src/components/mask/mask.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import { html, css, LitElement } from 'lit'
import { customElement } from 'lit/decorators.js'
import { html, css, LitElement, unsafeCSS } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import MaskGradient from '../../assets/mask-gradient.svg'

@customElement('radix-mask')
export class RadixMask extends LitElement {
@property({
type: Boolean,
reflect: true,
})
isBranded = false

render() {
return html`<slot></slot>`
}
Expand All @@ -16,6 +23,8 @@ export class RadixMask extends LitElement {
right: unset;
height: 100%;
width: 100%;
padding: 16px;
box-sizing: border-box;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
Expand All @@ -26,6 +35,13 @@ export class RadixMask extends LitElement {
z-index: 2147483647;
}
:host([isBranded]) {
align-items: flex-start;
background: #000;
background-image: url(${unsafeCSS(MaskGradient)});
background-size: cover;
}
:host(.hide) {
opacity: 0;
pointer-events: none;
Expand Down
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 packages/connect-button/src/components/rcfm-page/rcfm-page.ts
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
}
}
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',
},
}
Loading

0 comments on commit 1e0b5db

Please sign in to comment.