@lukso/web-components 1.2.2 → 1.3.0

package/src/components/lukso-card/lukso-card.stories.ts

@@ -0,0 +1,135 @@
+import { html } from 'lit-html'
+import './index'
+
+export default {
+  title: 'Design System/Components/Card',
+  component: 'lukso-card',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['basic', 'with-header', 'profile'],
+    },
+    content: { control: { type: 'text' } },
+    header: {
+      control: { type: 'text' },
+      if: { arg: 'variant', eq: 'with-header' },
+    },
+    backgroundUrl: {
+      control: { type: 'text' },
+      if: { arg: 'variant', eq: 'profile' },
+    },
+    profileUrl: {
+      control: { type: 'text' },
+      if: { arg: 'variant', eq: 'profile' },
+    },
+    profileAddress: {
+      control: { type: 'text' },
+      if: { arg: 'variant', eq: 'profile' },
+    },
+  },
+  args: {
+    variant: 'basic',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    header: 'Dolor sit amet',
+    backgroundUrl: 'images/sample-background.jpg',
+    profileUrl: 'images/sample-avatar.png',
+    profileAddress: '0x9671Db683406EE0817B1f5cB6A3b3BD111477457',
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'defaultStyles',
+        'background-url',
+        'profile-url',
+        'profile-address',
+      ],
+    },
+  },
+}
+
+const DefaultTemplate = ({ variant, content, header }) =>
+  html`
+    <lukso-card variant=${variant}>
+      <div slot="header" class="p-6">${header}</div>
+      <div slot="content" class="p-6">${content}</div>
+    </lukso-card>
+  `
+
+const CustomHeaderTemplate = ({ variant, content, header }) =>
+  html`
+    <lukso-card variant=${variant}>
+      <div slot="header" class="p-6 relative overflow-hidden min-h-[200px]">
+        <div
+          class="w-[876px] h-[200px] -left-[257px] top-[72px] bg-neutral-95 rounded-[50%] absolute"
+        ></div>
+        ${header}
+      </div>
+      <div slot="content" class="p-6">${content}</div>
+    </lukso-card>
+  `
+
+const ProfileTemplate = ({
+  variant,
+  content,
+  backgroundUrl,
+  profileUrl,
+  profileAddress,
+}) =>
+  html`
+    <lukso-card
+      variant=${variant}
+      background-url=${backgroundUrl}
+      profile-url=${profileUrl}
+      profile-address=${profileAddress}
+    >
+      <div slot="content" class="p-6">${content}</div>
+    </lukso-card>
+  `
+
+export const DefaultCard = DefaultTemplate.bind({})
+DefaultCard.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18025&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const CardWithHeader = DefaultTemplate.bind({})
+CardWithHeader.args = {
+  variant: 'with-header',
+}
+CardWithHeader.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18028&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const CardWithCustomHeader = CustomHeaderTemplate.bind({})
+CardWithCustomHeader.args = {
+  variant: 'with-header',
+}
+CardWithCustomHeader.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18026&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const ProfileCard = ProfileTemplate.bind({})
+ProfileCard.args = {
+  variant: 'profile',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1096%3A14641&t=AGmdbG8fXRENuU3o-4',
+    },
+  },
+}
+
+ProfileCard.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18027&t=AGmdbG8fXRENuU3o-4',
+  },
+}

package/src/components/lukso-navbar/index.ts

@@ -19,7 +19,7 @@ export class LuksoNavbar extends TailwindElement {
 
   private centerStyles = `justify-center`
 
-  private stickyStyles = `sticky top-0 z-10`
+  private stickyStyles = `sticky top-0 z-[1000]`
 
   _onBrandClick() {
     const event = new CustomEvent('click-brand', {

package/src/components/lukso-navbar/lukso-navbar.stories.ts

@@ -2,7 +2,7 @@ import { html } from 'lit-html'
 import './index'
 
 export default {
-  title: 'Design System/Atoms/Navbar',
+  title: 'Design System/Components/Navbar',
   component: 'lukso-navbar',
   argTypes: {
     title: {
@@ -31,14 +31,23 @@ PROFILES`,
         'is-sticky',
       ],
     },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1097%3A14669&t=AGmdbG8fXRENuU3o-4',
+    },
   },
 }
 
 const Template = ({ title, isCenter, isSticky }) =>
   html`<lukso-navbar
     title=${title}
-    ?is-center="${isCenter}"
-    ?is-sticky="${isSticky}"
+    ?is-center=${isCenter}
+    ?is-sticky=${isSticky}
   ></lukso-navbar>`
 
-export const Navbar = Template.bind({})
+export const DefaultNavbar = Template.bind({})
+
+export const CenterNavbar = Template.bind({})
+CenterNavbar.args = {
+  isCenter: true,
+}

package/src/components/lukso-profile/index.ts

@@ -0,0 +1,100 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import makeBlockie from 'ethereum-blockies-base64'
+
+import { TailwindElement } from '@/shared/tailwind-element'
+
+export type ProfileSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
+type SizeDef = { identiconSize?: number; profileImageSize: number }
+
+@customElement('lukso-profile')
+export class LuksoProfile extends TailwindElement {
+  @property({ type: String, attribute: 'profile-url' })
+  profileUrl = ''
+
+  @property({ type: String, attribute: 'profile-address' })
+  profileAddress = ''
+
+  @property({ type: Boolean, attribute: 'has-identicon' })
+  hasIdenticon = false
+
+  @property({ type: String })
+  size: ProfileSize = 'large'
+
+  sizes: Record<ProfileSize, SizeDef> = {
+    'x-small': {
+      identiconSize: undefined,
+      profileImageSize: 24,
+    },
+    small: {
+      identiconSize: 16,
+      profileImageSize: 40,
+    },
+    medium: {
+      identiconSize: 20,
+      profileImageSize: 56,
+    },
+    large: {
+      identiconSize: 24,
+      profileImageSize: 80,
+    },
+    'x-large': {
+      identiconSize: 28,
+      profileImageSize: 96,
+    },
+  }
+
+  private profileImageSize = () => this.sizes[this.size].profileImageSize
+  private identiconSize = () => this.sizes[this.size].identiconSize
+  private defaultProfileUrl = 'assets/images/profile-default.png'
+
+  private identicon = () => {
+    return this.hasIdenticon && this.profileAddress && this.identiconSize()
+      ? makeBlockie(this.profileAddress)
+      : ''
+  }
+
+  render() {
+    return html`
+      <div
+        data-testid="profile"
+        style=${styleMap({
+          backgroundImage: `url(${this.defaultProfileUrl})`,
+          width: `${this.profileImageSize()}px`,
+          height: `${this.profileImageSize()}px`,
+        })}
+        class="rounded-full bg-[50%] bg-no-repeat bg-cover bg-neutral-90
+          outline outline-2 outline-neutral-100"
+      >
+        <div
+          style=${styleMap({
+            backgroundImage: `url(${this.profileUrl})`,
+            width: `${this.profileImageSize()}px`,
+            height: `${this.profileImageSize()}px`,
+          })}
+          class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
+          "
+        >
+          ${this.identicon()
+            ? html`<img
+                src=${this.identicon()}
+                class="absolute shadow-shadow-1xl rounded-full
+                  outline outline-2 outline-neutral-100 right-0 bottom-0"
+                style=${styleMap({
+                  width: `${this.identiconSize()}px`,
+                  height: `${this.identiconSize()}px`,
+                })}
+              />`
+            : ''}
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-profile': LuksoProfile
+  }
+}

package/src/components/lukso-profile/lukso-profile.stories.ts

@@ -0,0 +1,87 @@
+import { html } from 'lit-html'
+import './index'
+
+export default {
+  title: 'Design System/Components/Profile',
+  component: 'lukso-profile',
+  argTypes: {
+    profileUrl: {
+      control: { type: 'text' },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['x-small', 'small', 'medium', 'large', 'x-large'],
+    },
+    profileAddress: {
+      control: { type: 'text' },
+    },
+    hasIdenticon: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: {
+    profileUrl: 'images/sample-avatar.png',
+    size: 'x-large',
+    profileAddress: '0x9671Db683406EE0817B1f5cB6A3b3BD111477457',
+    hasIdenticon: true,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'sizes',
+        'profile-url',
+        'profileImageSize',
+        'identiconSize',
+        'identicon',
+        'profile-address',
+        'has-identicon',
+        'defaultProfileUrl',
+      ],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=378%3A3395&t=AGmdbG8fXRENuU3o-4',
+    },
+  },
+}
+
+const Template = ({ profileUrl, size, profileAddress, hasIdenticon }) =>
+  html`<lukso-profile
+    profile-url=${profileUrl}
+    size=${size}
+    profile-address=${profileAddress}
+    ?has-identicon=${hasIdenticon}
+  ></lukso-profile>`
+
+export const XLarge = Template.bind({})
+XLarge.args = {
+  size: 'x-large',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+  size: 'medium',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+}
+
+export const XSmall = Template.bind({})
+XSmall.args = {
+  size: 'x-small',
+}
+
+export const Unknown = Template.bind({})
+Unknown.args = {
+  profileUrl: '',
+  hasIdenticon: false,
+}

package/src/components/lukso-sanitize/index.ts

@@ -0,0 +1,28 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import DOMPurify from 'dompurify'
+
+import { TailwindElement } from '@/shared/tailwind-element'
+
+@customElement('lukso-sanitize')
+export class LuksoSanitize extends TailwindElement {
+  @property({ type: String, attribute: 'html-content' })
+  htmlContent = ''
+
+  sanitize = () => {
+    return DOMPurify.sanitize(this.htmlContent)
+  }
+
+  render() {
+    // in order to show HTML we  need to use unsafeHTML directive.
+    // This is safe since we already sanitized content
+    return html`${unsafeHTML(this.sanitize())}`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-sanitize': LuksoSanitize
+  }
+}

package/src/components/lukso-sanitize/lukso-sanitize.stories.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit-html'
+import './index'
+
+export default {
+  title: 'Design System/Components/Sanitize',
+  component: 'lukso-sanitize',
+  argTypes: {
+    htmlContent: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    htmlContent:
+      'This is sample text containing html tags like <b>bold</b> or <a class="text-sky-64" href="/">link</a>.',
+  },
+  parameters: {
+    controls: {
+      exclude: ['sanitize', 'html-content'],
+    },
+  },
+}
+
+const Template = ({ htmlContent }) =>
+  html`<lukso-sanitize html-content=${htmlContent}></lukso-sanitize>`
+
+export const Sanitize = Template.bind({})

package/src/components/lukso-tag/index.ts

@@ -0,0 +1,68 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { TailwindElement } from '@/shared/tailwind-element'
+import { customClassMap } from '@/shared/directives'
+
+export type TagSizes = 'small' | 'large'
+
+@customElement('lukso-tag')
+export class LuksoTag extends TailwindElement {
+  @property({ type: String })
+  size: TagSizes = 'small'
+
+  @property({ type: Boolean, attribute: 'is-rounded' })
+  isRounded = false
+
+  @property({ type: String, attribute: 'background-color' })
+  backgroundColor = ''
+
+  @property({ type: String, attribute: 'text-color' })
+  textColor = ''
+
+  private defaultStyles = `rounded-lg inline-flex items-center justify-center border border-neutral-20 text-neutral-20`
+  private smallStyles = `paragraph-12-medium h-[28px]`
+  private largeStyles = `paragraph-14-medium h-[34px]`
+  private roundedStyles = `rounded-[56px]`
+
+  private padding = () => {
+    if (this.size === 'small' && this.isRounded) {
+      return 'px-3'
+    }
+
+    if (this.size === 'large') {
+      return 'px-4'
+    }
+
+    return 'px-2'
+  }
+
+  render() {
+    return html`
+      <div
+        data-testid="tag"
+        class=${customClassMap({
+          [this.defaultStyles]: true,
+          [this.padding()]: true,
+          [this.roundedStyles]: this.isRounded,
+          [this.smallStyles]: this.size === 'small',
+          [this.largeStyles]: this.size === 'large',
+        })}
+        style=${styleMap({
+          backgroundColor: this.backgroundColor,
+          borderColor: this.backgroundColor,
+          color: this.textColor,
+        })}
+      >
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-tag': LuksoTag
+  }
+}

package/src/components/lukso-tag/lukso-tag.stories.ts

@@ -0,0 +1,107 @@
+import { html } from 'lit-html'
+import './index'
+
+export default {
+  title: 'Design System/Components/Tag',
+  component: 'lukso-tag',
+  argTypes: {
+    content: {
+      control: { type: 'text' },
+    },
+    isRounded: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'large'],
+    },
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
+    },
+    textColor: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+  args: {
+    size: 'small',
+    isRounded: false,
+    content: 'Small Tag',
+    backgroundColor: '',
+    textColor: '',
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'defaultStyles',
+        'smallStyles',
+        'largeStyles',
+        'roundedStyles',
+        'is-rounded',
+        'background-color',
+        'text-color',
+        'padding',
+      ],
+    },
+  },
+}
+
+const Template = ({ content, size, isRounded, backgroundColor, textColor }) =>
+  html`<lukso-tag
+    size=${size}
+    ?is-rounded=${isRounded}
+    background-color=${backgroundColor}
+    text-color=${textColor}
+    >${content}</lukso-tag
+  >`
+
+export const DefaultTag = Template.bind({})
+DefaultTag.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3234&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const LargeTag = Template.bind({})
+LargeTag.args = {
+  size: 'large',
+  content: 'Large Tag',
+}
+LargeTag.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3234&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const RoundedTag = Template.bind({})
+RoundedTag.args = {
+  isRounded: true,
+}
+RoundedTag.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1083%3A13483&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const CustomColorTag = Template.bind({})
+CustomColorTag.args = {
+  content: 'Custom Color Tag',
+  backgroundColor: '#E96464',
+  textColor: '#FFFFFF',
+}
+CustomColorTag.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3241&t=AGmdbG8fXRENuU3o-4',
+  },
+}

package/src/components/lukso-username/index.ts

@@ -0,0 +1,104 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { sliceAddress } from '@/shared/utils/sliceAddress'
+
+import { TailwindElement } from '@/shared/tailwind-element'
+import { customClassMap } from '@/shared/directives/custom-class-map'
+import { styleMap } from 'lit-html/directives/style-map.js'
+
+export type UsernameSize = 'small' | 'large'
+
+@customElement('lukso-username')
+export class LuksoUsername extends TailwindElement {
+  @property({ type: String })
+  name = ''
+
+  @property({ type: String })
+  address = ''
+
+  @property({ type: Number, attribute: 'max-width' })
+  maxWidth = 200
+
+  @property({ type: 'string' })
+  size: UsernameSize = 'large'
+
+  @property({ type: Number, attribute: 'slice-by' })
+  sliceBy = 8
+
+  @property({ type: String, attribute: 'address-color' })
+  addressColor = 'neutral-20'
+
+  /** Width of the first 4 bytes of the address */
+  private bytesWidth = 52
+
+  /**
+   * Template for 4byte address
+   * e.g: #1234
+   */
+  private addressBytesTemplate() {
+    return html`<div class="inline-block text-neutral-60">
+      #${this.address.slice(2, 6)}
+    </div>`
+  }
+
+  /**
+   * Template for name
+   * e.g: @John
+   */
+  private nameTemplate() {
+    return html`<div
+      class="inline-block whitespace-nowrap overflow-hidden text-ellipsis text-transparent
+      bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
+      style=${styleMap({
+        maxWidth: `${this.maxWidth - this.bytesWidth}px`,
+      })}
+    >
+      @${this.name}
+    </div>`
+  }
+
+  /**
+   * Template for address
+   * e.g: 0x123...789
+   */
+  private addressTemplate() {
+    return html`<div
+      class="inline-block ${customClassMap({
+        ['text-' + this.addressColor]: this.addressColor !== 'neutral-20',
+      })}"
+    >
+      ${sliceAddress(this.address, this.sliceBy, this.sliceBy)}
+    </div>`
+  }
+
+  render() {
+    const template = (() => {
+      if (this.name && this.address) {
+        return html`${this.nameTemplate()}${this.addressBytesTemplate()}`
+      }
+
+      if (this.name) {
+        return this.nameTemplate()
+      }
+
+      if (this.address) {
+        return this.addressTemplate()
+      }
+    })()
+
+    return html`<div
+      class="inline-flex ${customClassMap({
+        'monospaced-12-bold': this.size === 'small',
+        'monospaced-16-bold': this.size === 'large',
+      })}"
+    >
+      ${template}
+    </div>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-username': LuksoUsername
+  }
+}