feat: add rcfm components

radixdlt · Jun 6, 2024 · de2420c · de2420c
1 parent 09a2dc4
commit de2420c
Show file tree

Hide file tree

Showing 10 changed files with 461 additions and 3 deletions.
diff --git a/packages/connect-button/src/assets/icon-warning.svg b/packages/connect-button/src/assets/icon-warning.svg
diff --git a/packages/connect-button/src/assets/mask-gradient.svg b/packages/connect-button/src/assets/mask-gradient.svg
diff --git a/packages/connect-button/src/components/loading-spinner/loading-spinner.ts b/packages/connect-button/src/components/loading-spinner/loading-spinner.ts
@@ -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>
@@ -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
+  }
+}
diff --git a/packages/connect-button/src/components/mask/mask.ts b/packages/connect-button/src/components/mask/mask.ts
@@ -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>`
   }
@@ -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;
@@ -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;

diff --git a/packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts b/packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts
@@ -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,
+  },
+}
diff --git a/packages/connect-button/src/components/rcfm-page/rcfm-page.ts b/packages/connect-button/src/components/rcfm-page/rcfm-page.ts
@@ -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
+  }
+}
diff --git a/...ages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts b/...ages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts
@@ -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',
+  },
+}