@lukso/web-components 1.2.2 → 1.3.1

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

@@ -5,7 +5,7 @@ import { expect } from '@storybook/jest'
 import '../lukso-button'
 
 export default {
-  title: 'Design System/Atoms/Button',
+  title: 'Design System/Components/Button',
   component: 'lukso-button',
   argTypes: {
     variant: {
@@ -22,12 +22,16 @@ export default {
       control: { type: 'select' },
       options: ['small', 'medium'],
     },
+    isFullWidth: {
+      control: { type: 'boolean' },
+    },
   },
   args: {
     text: 'Hello World',
     disabled: false,
     size: 'medium',
     variant: 'primary',
+    isFullWidth: false,
   },
   parameters: {
     controls: {
@@ -39,21 +43,76 @@ export default {
         'linkStyles',
         'mediumSize',
         'smallSize',
+        'is-full-width',
       ],
     },
   },
 }
 
-const Template = ({ variant, disabled, text, size }) =>
-  html`<lukso-button variant=${variant} ?disabled=${disabled} size=${size}
+const Template = ({ variant, disabled, text, size, isFullWidth }) =>
+  html`<lukso-button
+    variant=${variant}
+    ?disabled=${disabled}
+    size=${size}
+    ?is-full-width=${isFullWidth}
     >${text}</lukso-button
   >`
 
-export const Button = Template.bind({})
+export const Primary = Template.bind({})
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9778&t=AGmdbG8fXRENuU3o-4',
+  },
+}
 
-Button.play = async ({ canvasElement }) => {
+Primary.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
 
   // 👇 Assert DOM structure
   expect(canvas.getByText('Hello World')).toBeInTheDocument()
 }
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  variant: 'secondary',
+}
+Secondary.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9745&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const Landing = Template.bind({})
+Landing.args = {
+  variant: 'landing',
+}
+Landing.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9912&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const Link = Template.bind({})
+Link.args = {
+  variant: 'link',
+}
+Link.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9822&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  isFullWidth: true,
+}
+FullWidth.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9778&t=AGmdbG8fXRENuU3o-4',
+  },
+}

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

@@ -0,0 +1,118 @@
+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'
+import '@/components/lukso-profile'
+
+export type CardVariants = 'basic' | 'with-header' | 'profile'
+
+@customElement('lukso-card')
+export class LuksoCard extends TailwindElement {
+  @property({ type: String })
+  variant: CardVariants = 'basic'
+
+  @property({ type: String, attribute: 'background-url' })
+  backgroundUrl = ''
+
+  @property({ type: String, attribute: 'profile-url' })
+  profileUrl = ''
+
+  @property({ type: String, attribute: 'profile-address' })
+  profileAddress = ''
+
+  private defaultStyles = `rounded-3xl w-[362px] min-h-[534px] shadow-pink-drop-shadow-2xl`
+
+  basicTemplate() {
+    return html`
+      <div
+        data-testid="card"
+        class="bg-neutral-100 ${customClassMap({
+          [this.defaultStyles]: true,
+        })}"
+      >
+        <slot name="content"></slot>
+      </div>
+    `
+  }
+
+  withHeaderTemplate() {
+    return html`
+      <div
+        data-testid="card"
+        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${customClassMap({
+          [this.defaultStyles]: true,
+        })}"
+      >
+        <div>
+          <slot name="header"></slot>
+        </div>
+        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `
+  }
+
+  profileTemplate() {
+    return html`
+      <div
+        data-testid="card"
+        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${customClassMap({
+          [this.defaultStyles]: true,
+        })}"
+      >
+        <div
+          style=${styleMap({
+            backgroundImage: `url(${this.backgroundUrl})`,
+          })}
+          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
+        >
+          <div
+            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
+          ></div>
+        </div>
+        <div
+          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl relative"
+        >
+          <lukso-profile
+            profile-url=${this.profileUrl}
+            size="large"
+            profile-address=${this.profileAddress}
+            has-identicon
+            class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
+          ></lukso-profile>
+          <div
+            class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center"
+          >
+            <div
+              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
+              shadow-neutral-above-shadow-1xl"
+            ></div>
+          </div>
+
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `
+  }
+
+  render() {
+    switch (this.variant) {
+      case 'with-header':
+        return this.withHeaderTemplate()
+      case 'profile':
+        return this.profileTemplate()
+
+      default:
+        return this.basicTemplate()
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lukso-card': LuksoCard
+  }
+}

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({})