From 98b5da5fd758ac06398d53426dd6d2c63958b224 Mon Sep 17 00:00:00 2001 From: Dawid Sowa Date: Fri, 6 Dec 2024 15:05:32 +0100 Subject: [PATCH] fix: block parent backdrop-filter for desktop UI --- README.md | 2 +- .../.storybook/preview-head.html | 10 + packages/connect-button/README.md | 19 +- .../src/components/account/account.stories.ts | 53 ++-- .../src/components/connect-button.ts | 1 - .../src/components/pages/sharing.ts | 4 +- .../src/stories/blur-header.stories.ts | 264 ++++++++++++++++++ .../connect-button.stories.css | 0 .../connect-button.stories.ts | 4 +- packages/dapp-toolkit/README.md | 4 +- 10 files changed, 309 insertions(+), 52 deletions(-) create mode 100644 packages/connect-button/src/stories/blur-header.stories.ts rename packages/connect-button/src/{components => stories}/connect-button.stories.css (100%) rename packages/connect-button/src/{components => stories}/connect-button.stories.ts (99%) diff --git a/README.md b/README.md index 53f8ece0..a2fa5133 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ ## How to start? -Install [Node.js] which includes [Node Package Manager][npm]. Use `create-radix-dapp` package - paste following command into your terminal and it will walk you through all required steps! +Install [Node.js] which includes [Node Package Manager][npm]. Use `create-radix-dapp` package - paste following command into your terminal and it will walk you through all required steps. ```bash npx create-radix-dapp@latest diff --git a/packages/connect-button/.storybook/preview-head.html b/packages/connect-button/.storybook/preview-head.html index 7100922b..dfe59ea4 100644 --- a/packages/connect-button/.storybook/preview-head.html +++ b/packages/connect-button/.storybook/preview-head.html @@ -1,3 +1,13 @@ + + diff --git a/packages/connect-button/README.md b/packages/connect-button/README.md index d8d2db1f..a74dbced 100644 --- a/packages/connect-button/README.md +++ b/packages/connect-button/README.md @@ -1,18 +1,6 @@ -# Radix Logo √ Connect Button +# What is √ Connect Button? -[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE) - -The √ Connect Button is a framework agnostic web component to help developers connect users and their Radix Wallet to their dApps. - -It appears as a consistent, Radix-branded UI element that helps users identify your dApp website as a Radix dApp. When used with [Radix dApp Toolkit](https://github.com/radixdlt/radix-dapp-toolkit) it is compatible with the Radix Wallet – and it automatically provides a consistent user experience for users to connect with their wallet and see the current status of the connection between dApp and Radix Wallet. - -- [ √ Connect Button](#--connect-button) -- [Usage](#usage) - - [Getting started](#getting-started) - - [Setting properties programmatically](#setting-properties-programmatically) - - [Events](#events) -- [Playground](#playground) -- [License](#license) +The **√ Connect Button** is a framework agnostic [custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) which appears as a consistent, Radix-branded UI that helps users identify your dApp website as a Radix dApp. It communicates with outer world through attributes and DOM events. # Usage @@ -112,6 +100,9 @@ type ConnectButtonEvents = { You can play around with different settings using our storybook instance. Visit [connect-button-storybook.radixdlt.com](https://connect-button-storybook.radixdlt.com/) to easily experiment with Connect Button. +> [!IMPORTANT] +> Placing Connect Button inside container which uses `backdrop-filter` can cause troubles. Please check ["header with blur"](https://connect-button-storybook.radixdlt.com/?path=/docs/radix-header-with-blur--docs) section inside storybook to check for workaround solution + # License The √ Connect Button binaries are licensed under the [Radix Software EULA](http://www.radixdlt.com/terms/genericEULA) diff --git a/packages/connect-button/src/components/account/account.stories.ts b/packages/connect-button/src/components/account/account.stories.ts index 8c73cc71..e25f4331 100644 --- a/packages/connect-button/src/components/account/account.stories.ts +++ b/packages/connect-button/src/components/account/account.stories.ts @@ -15,22 +15,6 @@ const accounts = [ 'Main', 'account_tdx_21_12x4zx09f8962a9wesfqvxaue0qn6m39r3cpysrjd6dtqppzhrkjrsr', ], - [ - 'Saving', - 'account_tdx_21_12xdjp5dq7haph4c75mst99mc26gkm8mys70v6qlyz0fz86f9ucy0ru', - ], - [ - 'Degen', - 'account_tdx_21_1298kg54s9r9evc5tgglj2wrqsatuflwxg5s3m845uut6t3jtyh6cyy', - ], - [ - 'Gaming', - 'account_tdx_21_12y78nedvqg9svp49fjs4f9y5kreweqxt6vszaprnfq8kjhralku6fz', - ], - [ - 'Trading', - 'account_tdx_21_128pncqprt3gfew04aefqy549ecvfp0a99mxjpa6wcpl2n2ymqr8gj3', - ], [ 'Staking', 'account_tdx_21_12yccemy8vx37qkctmpkgdtatxe8mdmwl9mndv5dx69mj7tg45d4q88', @@ -39,31 +23,40 @@ const accounts = [ 'Professional', 'account_tdx_21_129tr5q2g6eh7zxwzl6tj0ndq87zzuqynqt56xpe3v2pf5k9wp67ju6', ], - [ - 'Fun', - 'account_tdx_21_12xgzze2krhmw95r07y4pccssgyjxzwgem86hndy8cujfzhkggdpt7s', - ], [ 'Travel', 'account_tdx_21_129q44nllnywkm8pscgqfq5wkpcfxtq2xffyca745c3fau3swhkhrjw', ], - [ - 'Alpha', - 'account_tdx_21_12yc8neefcqfum2u4r5xtgder57va8ahdjm3qr9eatyhmdec62ya6m4', - ], - [ - 'Beta', - 'account_tdx_21_12yg7c2752f4uwy6ayljg3g5pvj36xxdy690hj7fpllsed53jsgczz4', - ], [ 'VeryLongAccountNameVeryLongAccountNameVeryLongAccountName', 'account_tdx_21_129vzduy6q5ufxxekf66eqdjy2vrm6ezdl0sh5kjhgrped9p5k6t9nf', ], ] -export const Primary: Story = { +export const Single: Story = { + render: (args) => html` + + `, + args: { + address: + 'account_tdx_21_129tr5q2g6eh7zxwzl6tj0ndq87zzuqynqt56xpe3v2pf5k9wp67ju6', + label: 'Radix Account', + appearanceId: 0, + }, +} + +export const Multiple: Story = { render: () => html` -
+ +
${accounts.map( ([label, address], index) => html` { diff --git a/packages/connect-button/src/components/pages/sharing.ts b/packages/connect-button/src/components/pages/sharing.ts index 0b8ad186..ab8c5716 100644 --- a/packages/connect-button/src/components/pages/sharing.ts +++ b/packages/connect-button/src/components/pages/sharing.ts @@ -81,7 +81,7 @@ export class RadixSharingPage extends LitElement { @@ -89,7 +89,7 @@ export class RadixSharingPage extends LitElement { class=${classMap({ icon: true, 'update-data': true, - disabled: this.accounts.length === 0, + disabled: this.accounts?.length === 0, })} >
Update Account Sharing diff --git a/packages/connect-button/src/stories/blur-header.stories.ts b/packages/connect-button/src/stories/blur-header.stories.ts new file mode 100644 index 00000000..c14d294d --- /dev/null +++ b/packages/connect-button/src/stories/blur-header.stories.ts @@ -0,0 +1,264 @@ +import { StoryObj, Meta } from '@storybook/web-components' +import { html } from 'lit-html' + +export default { + title: 'Radix/Header with blur', +} as Meta + +export const Example: StoryObj = { + render: () => html` + +
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet + ante bibendum mauris porttitor vehicula non varius quam. Integer aliquam + nibh in condimentum eleifend. Ut quis suscipit dui. Quisque vitae varius + nisi, porttitor dapibus mauris. Integer porta turpis in egestas + vestibulum. Aliquam pellentesque massa neque, et interdum augue facilisis + nec. Suspendisse accumsan non sem vel ultrices. Integer sodales tincidunt + ex sed mollis. Proin sit amet magna ut ipsum efficitur placerat. Quisque + justo purus, lacinia efficitur lacus nec, ornare vulputate purus. + Suspendisse vel aliquet mauris. Aliquam auctor ipsum nisl, in commodo + velit aliquet vitae. Aliquam sodales, leo ut laoreet porta, justo lectus + facilisis orci, vel efficitur nisl leo quis tortor. Donec vitae fermentum + mi. Fusce congue tincidunt sagittis. Nunc posuere posuere mauris at + lacinia. Pellentesque quam magna, pulvinar eget vestibulum eget, luctus a + felis. Nulla facilisi. Orci varius natoque penatibus et magnis dis + parturient montes, nascetur ridiculus mus. Curabitur auctor egestas + auctor. Orci varius natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec eu interdum diam. Ut mattis diam id risus + molestie viverra. Praesent vehicula massa eu turpis rutrum bibendum. In + euismod vulputate mi. Duis non tempus eros. Quisque ut efficitur dui. + Maecenas molestie auctor tincidunt. Sed finibus eu lacus commodo dapibus. + Aliquam tincidunt mauris nibh, eget laoreet orci lacinia nec. Duis tempor + neque sed orci maximus, at rhoncus mi tempus. Mauris ante arcu, dapibus at + tellus non, accumsan facilisis nunc. Nullam ac convallis ex. Nam vitae + diam volutpat, fermentum augue sed, fermentum mi. Mauris vestibulum + accumsan turpis, ac tempor mauris hendrerit ut. Quisque hendrerit feugiat + enim sit amet blandit. Sed efficitur ultrices quam viverra accumsan. Donec + vehicula hendrerit purus at laoreet. Cras et ultrices justo, sed hendrerit + tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. Mauris + sit amet interdum mauris, quis fringilla ex. Duis augue enim, gravida ac + lectus fermentum, semper egestas magna. Sed at metus non magna tempus + suscipit nec et massa. Pellentesque ut sem ut nunc gravida vehicula sit + amet at felis. Suspendisse suscipit pulvinar ipsum, non eleifend velit + ultrices eu. Maecenas vitae semper quam. Suspendisse molestie pulvinar + lorem eu iaculis. Sed ut ligula nisl. Pellentesque habitant morbi + tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus + in rhoncus sem. Etiam dignissim ex non efficitur ultricies. Vestibulum + ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia + curae; In finibus, orci et feugiat maximus, sem massa finibus nisi, ut + viverra risus lacus vel est. Vestibulum semper blandit aliquam. Sed a orci + dolor. Vivamus consequat eros urna, vel volutpat erat egestas quis. + Integer accumsan lorem sit amet tristique maximus. Aenean pharetra commodo + dolor. Suspendisse dapibus nibh eget volutpat tempus. Interdum et + malesuada fames ac ante ipsum primis in faucibus. In feugiat scelerisque + risus pharetra vestibulum. Praesent suscipit eget velit id laoreet. Morbi + quis arcu gravida augue placerat pharetra vitae id dui. Nunc congue tempus + eleifend. Ut sed vulputate sem. Vivamus dignissim est ut turpis consequat + dignissim. Aenean eget facilisis dui, vitae rutrum eros. Nullam dignissim + non ipsum a aliquet. Etiam dolor augue, sodales ac magna in, sagittis + tempus leo. Maecenas eu sapien bibendum, consectetur nibh quis, ornare + felis. Quisque ornare luctus lacus sed condimentum. Praesent lorem ex, + efficitur sed orci eget, tincidunt egestas mi. Vivamus blandit sapien sit + amet nunc consectetur feugiat. Cras tempor sagittis est, vitae mollis + libero auctor at. Integer eget enim mollis, elementum arcu a, maximus + diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec + mi lectus, suscipit non dolor commodo, tempor blandit nunc. Interdum et + malesuada fames ac ante ipsum primis in faucibus. Nulla pellentesque + elementum risus scelerisque posuere. Nullam gravida lectus eget eros + molestie bibendum. Suspendisse at elit porttitor, commodo tellus et, + pharetra nisl. Ut fringilla, massa vel sagittis consectetur, tortor purus + ornare risus, in molestie sem nibh in eros. Phasellus ac odio vel tellus + posuere volutpat eu vitae augue. Maecenas finibus ultricies odio, sed + gravida urna vulputate feugiat. Donec nulla quam, tempor vitae bibendum + sed, ultricies ut magna. Sed varius condimentum metus eu ultricies. + Phasellus lacus justo, faucibus ac efficitur a, lobortis suscipit odio. + Sed sed blandit ipsum, ut pellentesque mauris. Duis viverra vehicula + fringilla. Mauris nec tempus nulla. Nulla at tortor at est malesuada + pharetra non ac neque. Integer vel scelerisque leo. Nam non nibh id nibh + placerat semper ullamcorper et justo. Sed elementum euismod interdum. Cras + a auctor purus. Etiam rhoncus pulvinar metus, sit amet mollis justo + suscipit sed. Donec id tristique ante. Ut ut augue cursus, finibus nisi + vel, egestas lectus. Donec eu dolor in justo hendrerit porttitor nec quis + felis. Vestibulum ut fringilla arcu. Donec bibendum ex nec viverra + imperdiet. Pellentesque sed elementum lorem. Integer rutrum neque diam, id + vehicula sapien malesuada at. Morbi efficitur elit vel tempor congue. Nam + a pulvinar odio. Sed nec lobortis diam. Proin fermentum lorem ligula, non + sodales urna tempor vitae. Phasellus nec tincidunt nibh, ac vehicula + purus. Mauris quis dolor ut ante egestas volutpat in ut libero. Integer eu + nibh convallis nulla sodales mattis quis sit amet purus. Duis sed metus + augue. Nam ac quam dignissim, tincidunt mauris feugiat, porttitor risus. + Maecenas quis urna quis magna vulputate porta. Praesent a erat nisi. Donec + pharetra imperdiet tellus, non lobortis nisi tincidunt et. Pellentesque + laoreet, arcu in fermentum egestas, metus tellus feugiat erat, non pretium + ex nibh in dolor. Sed in bibendum diam. Phasellus ante neque, dapibus a + nunc eget, commodo laoreet tortor. Nullam aliquam vitae nisi eu tincidunt. + Pellentesque tristique magna sed nulla rutrum porta. Donec tellus nulla, + auctor et hendrerit posuere, consectetur vel turpis. Phasellus ac interdum + diam. Suspendisse ullamcorper metus eu lacus varius euismod. Suspendisse + est magna, sagittis ac erat quis, interdum interdum tortor. Maecenas + sollicitudin est id condimentum eleifend. Suspendisse potenti. Vivamus + hendrerit nulla quis viverra molestie. Suspendisse ut auctor tortor. + Aliquam sed risus arcu. Donec pulvinar massa id felis malesuada fermentum. + Ut eget diam nec ipsum mollis condimentum. Duis posuere in lectus non + commodo. Curabitur tincidunt tristique scelerisque. Quisque porta diam + risus, vitae blandit purus posuere id. Sed venenatis nisl ac risus laoreet + ornare. Mauris vel justo dignissim, tristique nibh nec, fermentum felis. + Suspendisse egestas massa congue metus mollis, eget venenatis urna + eleifend. Fusce velit lorem, varius ac lectus porta, bibendum egestas + tellus. Donec pellentesque justo sed fringilla finibus. Donec bibendum id + diam sit amet facilisis. Etiam eu diam id libero ultrices ornare non eu + enim. Vivamus et viverra urna. Etiam a tincidunt elit, a lobortis nisl. Ut + consectetur tempor tellus sed egestas. Proin elementum quam ac elit +
+ `, +} + +export const Example2: StoryObj = { + render: () => html` + +
+
+
+ +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet + ante bibendum mauris porttitor vehicula non varius quam. Integer aliquam + nibh in condimentum eleifend. Ut quis suscipit dui. Quisque vitae varius + nisi, porttitor dapibus mauris. Integer porta turpis in egestas + vestibulum. Aliquam pellentesque massa neque, et interdum augue facilisis + nec. Suspendisse accumsan non sem vel ultrices. Integer sodales tincidunt + ex sed mollis. Proin sit amet magna ut ipsum efficitur placerat. Quisque + justo purus, lacinia efficitur lacus nec, ornare vulputate purus. + Suspendisse vel aliquet mauris. Aliquam auctor ipsum nisl, in commodo + velit aliquet vitae. Aliquam sodales, leo ut laoreet porta, justo lectus + facilisis orci, vel efficitur nisl leo quis tortor. Donec vitae fermentum + mi. Fusce congue tincidunt sagittis. Nunc posuere posuere mauris at + lacinia. Pellentesque quam magna, pulvinar eget vestibulum eget, luctus a + felis. Nulla facilisi. Orci varius natoque penatibus et magnis dis + parturient montes, nascetur ridiculus mus. Curabitur auctor egestas + auctor. Orci varius natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Donec eu interdum diam. Ut mattis diam id risus + molestie viverra. Praesent vehicula massa eu turpis rutrum bibendum. In + euismod vulputate mi. Duis non tempus eros. Quisque ut efficitur dui. + Maecenas molestie auctor tincidunt. Sed finibus eu lacus commodo dapibus. + Aliquam tincidunt mauris nibh, eget laoreet orci lacinia nec. Duis tempor + neque sed orci maximus, at rhoncus mi tempus. Mauris ante arcu, dapibus at + tellus non, accumsan facilisis nunc. Nullam ac convallis ex. Nam vitae + diam volutpat, fermentum augue sed, fermentum mi. Mauris vestibulum + accumsan turpis, ac tempor mauris hendrerit ut. Quisque hendrerit feugiat + enim sit amet blandit. Sed efficitur ultrices quam viverra accumsan. Donec + vehicula hendrerit purus at laoreet. Cras et ultrices justo, sed hendrerit + tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. Mauris + sit amet interdum mauris, quis fringilla ex. Duis augue enim, gravida ac + lectus fermentum, semper egestas magna. Sed at metus non magna tempus + suscipit nec et massa. Pellentesque ut sem ut nunc gravida vehicula sit + amet at felis. Suspendisse suscipit pulvinar ipsum, non eleifend velit + ultrices eu. Maecenas vitae semper quam. Suspendisse molestie pulvinar + lorem eu iaculis. Sed ut ligula nisl. Pellentesque habitant morbi + tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus + in rhoncus sem. Etiam dignissim ex non efficitur ultricies. Vestibulum + ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia + curae; In finibus, orci et feugiat maximus, sem massa finibus nisi, ut + viverra risus lacus vel est. Vestibulum semper blandit aliquam. Sed a orci + dolor. Vivamus consequat eros urna, vel volutpat erat egestas quis. + Integer accumsan lorem sit amet tristique maximus. Aenean pharetra commodo + dolor. Suspendisse dapibus nibh eget volutpat tempus. Interdum et + malesuada fames ac ante ipsum primis in faucibus. In feugiat scelerisque + risus pharetra vestibulum. Praesent suscipit eget velit id laoreet. Morbi + quis arcu gravida augue placerat pharetra vitae id dui. Nunc congue tempus + eleifend. Ut sed vulputate sem. Vivamus dignissim est ut turpis consequat + dignissim. Aenean eget facilisis dui, vitae rutrum eros. Nullam dignissim + non ipsum a aliquet. Etiam dolor augue, sodales ac magna in, sagittis + tempus leo. Maecenas eu sapien bibendum, consectetur nibh quis, ornare + felis. Quisque ornare luctus lacus sed condimentum. Praesent lorem ex, + efficitur sed orci eget, tincidunt egestas mi. Vivamus blandit sapien sit + amet nunc consectetur feugiat. Cras tempor sagittis est, vitae mollis + libero auctor at. Integer eget enim mollis, elementum arcu a, maximus + diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec + mi lectus, suscipit non dolor commodo, tempor blandit nunc. Interdum et + malesuada fames ac ante ipsum primis in faucibus. Nulla pellentesque + elementum risus scelerisque posuere. Nullam gravida lectus eget eros + molestie bibendum. Suspendisse at elit porttitor, commodo tellus et, + pharetra nisl. Ut fringilla, massa vel sagittis consectetur, tortor purus + ornare risus, in molestie sem nibh in eros. Phasellus ac odio vel tellus + posuere volutpat eu vitae augue. Maecenas finibus ultricies odio, sed + gravida urna vulputate feugiat. Donec nulla quam, tempor vitae bibendum + sed, ultricies ut magna. Sed varius condimentum metus eu ultricies. + Phasellus lacus justo, faucibus ac efficitur a, lobortis suscipit odio. + Sed sed blandit ipsum, ut pellentesque mauris. Duis viverra vehicula + fringilla. Mauris nec tempus nulla. Nulla at tortor at est malesuada + pharetra non ac neque. Integer vel scelerisque leo. Nam non nibh id nibh + placerat semper ullamcorper et justo. Sed elementum euismod interdum. Cras + a auctor purus. Etiam rhoncus pulvinar metus, sit amet mollis justo + suscipit sed. Donec id tristique ante. Ut ut augue cursus, finibus nisi + vel, egestas lectus. Donec eu dolor in justo hendrerit porttitor nec quis + felis. Vestibulum ut fringilla arcu. Donec bibendum ex nec viverra + imperdiet. Pellentesque sed elementum lorem. Integer rutrum neque diam, id + vehicula sapien malesuada at. Morbi efficitur elit vel tempor congue. Nam + a pulvinar odio. Sed nec lobortis diam. Proin fermentum lorem ligula, non + sodales urna tempor vitae. Phasellus nec tincidunt nibh, ac vehicula + purus. Mauris quis dolor ut ante egestas volutpat in ut libero. Integer eu + nibh convallis nulla sodales mattis quis sit amet purus. Duis sed metus + augue. Nam ac quam dignissim, tincidunt mauris feugiat, porttitor risus. + Maecenas quis urna quis magna vulputate porta. Praesent a erat nisi. Donec + pharetra imperdiet tellus, non lobortis nisi tincidunt et. Pellentesque + laoreet, arcu in fermentum egestas, metus tellus feugiat erat, non pretium + ex nibh in dolor. Sed in bibendum diam. Phasellus ante neque, dapibus a + nunc eget, commodo laoreet tortor. Nullam aliquam vitae nisi eu tincidunt. + Pellentesque tristique magna sed nulla rutrum porta. Donec tellus nulla, + auctor et hendrerit posuere, consectetur vel turpis. Phasellus ac interdum + diam. Suspendisse ullamcorper metus eu lacus varius euismod. Suspendisse + est magna, sagittis ac erat quis, interdum interdum tortor. Maecenas + sollicitudin est id condimentum eleifend. Suspendisse potenti. Vivamus + hendrerit nulla quis viverra molestie. Suspendisse ut auctor tortor. + Aliquam sed risus arcu. Donec pulvinar massa id felis malesuada fermentum. + Ut eget diam nec ipsum mollis condimentum. Duis posuere in lectus non + commodo. Curabitur tincidunt tristique scelerisque. Quisque porta diam + risus, vitae blandit purus posuere id. Sed venenatis nisl ac risus laoreet + ornare. Mauris vel justo dignissim, tristique nibh nec, fermentum felis. + Suspendisse egestas massa congue metus mollis, eget venenatis urna + eleifend. Fusce velit lorem, varius ac lectus porta, bibendum egestas + tellus. Donec pellentesque justo sed fringilla finibus. Donec bibendum id + diam sit amet facilisis. Etiam eu diam id libero ultrices ornare non eu + enim. Vivamus et viverra urna. Etiam a tincidunt elit, a lobortis nisl. Ut + consectetur tempor tellus sed egestas. Proin elementum quam ac elit +
+ `, +} diff --git a/packages/connect-button/src/components/connect-button.stories.css b/packages/connect-button/src/stories/connect-button.stories.css similarity index 100% rename from packages/connect-button/src/components/connect-button.stories.css rename to packages/connect-button/src/stories/connect-button.stories.css diff --git a/packages/connect-button/src/components/connect-button.stories.ts b/packages/connect-button/src/stories/connect-button.stories.ts similarity index 99% rename from packages/connect-button/src/components/connect-button.stories.ts rename to packages/connect-button/src/stories/connect-button.stories.ts index 5f83b236..ba8186b6 100644 --- a/packages/connect-button/src/components/connect-button.stories.ts +++ b/packages/connect-button/src/stories/connect-button.stories.ts @@ -6,8 +6,8 @@ import { RadixButtonStatus, RequestItem, } from 'radix-connect-common' -import './connect-button' -import { ConnectButton } from './connect-button' +import '../components/connect-button' +import { ConnectButton } from '../components/connect-button' import './connect-button.stories.css' import { BUTTON_MIN_WIDTH } from '../constants' diff --git a/packages/dapp-toolkit/README.md b/packages/dapp-toolkit/README.md index b7e5d862..8e2e0974 100644 --- a/packages/dapp-toolkit/README.md +++ b/packages/dapp-toolkit/README.md @@ -6,7 +6,7 @@ RDT supports both desktop and mobile browser web apps. For desktop browsers, it **RDT is composed of:** -- **√ Connect Button** – A framework agnostic web component that keeps a minimal internal state and have properties are pushed to it. +- **√ Connect Button** – A framework agnostic [custom element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) that serves as user interface for RDT ([readme](../connect-button/README.md)) - **Tools** – Abstractions over lower level APIs for developers to build their radix dApps at lightning speed. @@ -34,7 +34,7 @@ Add following code to head section of your page. See example usage inside `examp ## Using `create-radix-dapp` -Use our [CLI tool](https://github.com/radixdlt/create-radix-dapp) to scaffold a new project. Just paste following command into your terminal and it will walk you through all required steps! +Use our [CLI tool](https://github.com/radixdlt/create-radix-dapp) to scaffold a new project. Just paste following command into your terminal and it will walk you through all required steps. ```bash npx create-radix-dapp@latest