@lukso/web-components 1.2.2 → 1.3.1

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,105 @@
+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 !== '',
+        ['text-neutral-20']: this.addressColor === '',
+      })}"
+    >
+      ${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
+  }
+}

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

@@ -0,0 +1,90 @@
+import { html } from 'lit-html'
+import './index'
+
+export default {
+  title: 'Design System/Components/Username',
+  component: 'lukso-username',
+  argTypes: {
+    name: {
+      control: { type: 'text' },
+    },
+    address: {
+      control: { type: 'text' },
+    },
+    maxWidth: {
+      control: { type: 'number' },
+      if: { arg: 'name', neq: '' },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'small'],
+    },
+    sliceBy: {
+      control: { type: 'number' },
+      if: { arg: 'name', eq: '' },
+    },
+    addressColor: {
+      control: { type: 'text' },
+      if: { arg: 'name', eq: '' },
+    },
+  },
+  args: {
+    name: 'John',
+    address: '0x9671Db683406EE0817B1f5cB6A3b3BD111477457',
+    maxWidth: 200,
+    size: 'large',
+    sliceBy: 8,
+    addressColor: '',
+  },
+  parameters: {
+    controls: {
+      exclude: ['bytesWidth', 'max-width', 'slice-by', 'address-color'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1096%3A14641&t=W8onPGbREKjGG9sS-4',
+    },
+  },
+}
+
+const Template = ({ name, address, maxWidth, size, sliceBy, addressColor }) =>
+  html`<lukso-username
+    name=${name}
+    address=${address}
+    max-width=${maxWidth}
+    size=${size}
+    slice-by=${sliceBy}
+    address-color=${addressColor}
+  ></lukso-username>`
+
+export const DefaultUsername = Template.bind({})
+
+export const LongName = Template.bind({})
+LongName.args = {
+  name: 'ThisIsAReallyLongName',
+}
+
+export const OnlyName = Template.bind({})
+OnlyName.args = {
+  address: '',
+}
+
+export const OnlyAddress = Template.bind({})
+OnlyAddress.args = {
+  name: '',
+  size: 'small',
+}
+
+export const SliceAddressBy4 = Template.bind({})
+SliceAddressBy4.args = {
+  name: '',
+  size: 'small',
+  sliceBy: 4,
+}
+
+export const CustomAddressColor = Template.bind({})
+CustomAddressColor.args = {
+  name: '',
+  addressColor: 'neutral-60',
+  size: 'small',
+}

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

@@ -26,7 +26,7 @@ export class LuksoWizard extends TailwindElement {
 
   stepTemplate(step: WizardStep, index: number) {
     return html`<li
-      class="inline-flex flex-col items-center justify-end w-24 first:-ml-12 last:-mr-12 relative
+      class="inline-flex flex-col items-center justify-end w-[121px] first:-ml-12 last:-mr-12 relative
       [&>.lukso-wizard-circle]:after:last:hidden ${customClassMap({
         [this.completedStepStyles]: index + 1 < this.activeStep,
         [this.activeStepStyles]: index + 1 === this.activeStep,

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

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import '../lukso-wizard'
 
 export default {
-  title: 'Design System/Atoms/Wizard',
+  title: 'Design System/Components/Wizard',
   component: 'lukso-wizard',
   argTypes: {
     steps: {
@@ -33,6 +33,10 @@ LYXe`,
     controls: {
       exclude: ['activeStepStyles', 'completedStepStyles', 'active-step'],
     },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1094%3A13512&t=AGmdbG8fXRENuU3o-4',
+    },
   },
 }
 
@@ -42,4 +46,4 @@ const Template = ({ steps, activeStep }) =>
     active-step=${activeStep}
   ></lukso-wizard>`
 
-export const Wizard = Template.bind({})
+export const BasicWizard = Template.bind({})

package/src/shared/styles/typography.scss

@@ -33,11 +33,11 @@
   }
 
   .heading-h4-apax {
-    @apply text-14 not-italic font-500 leading-20 font-apax;
+    @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
   }
 
   .heading-h5-apax {
-    @apply text-8 not-italic font-500 leading-10 font-apax;
+    @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
   }
 
   // Paragraph
@@ -104,19 +104,19 @@
 
   // Monospaced
 
-  .monospace-16-regular {
+  .monospaced-16-regular {
     @apply text-16 not-italic font-400 leading-22 font-mono;
   }
 
-  .monospace-16-bold {
+  .monospaced-16-bold {
     @apply text-16 not-italic font-700 leading-22 font-mono;
   }
 
-  .monospace-12-bold {
+  .monospaced-12-bold {
     @apply text-12 not-italic font-700 leading-14 font-mono;
   }
 
-  .monospace-10-bold {
+  .monospaced-10-bold {
     @apply text-10 not-italic font-700 leading-14 font-mono;
   }
 }

package/src/shared/utils/__tests__/sliceAddress.spec.ts

@@ -0,0 +1,15 @@
+import { sliceAddress } from '../sliceAddress.js'
+
+test('sliceAddress', () => {
+  expect(sliceAddress()).toEqual('')
+  expect(sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5')).toEqual(
+    '0xA60DDd...8775B5'
+  )
+  expect(sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5', 3)).toEqual(
+    '0xA60...5B5'
+  )
+  expect(
+    sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5', 3, 6)
+  ).toEqual('0xA60...8775B5')
+  expect(sliceAddress('0xA60DDd4eB51', 10)).toEqual('0xA60DDd4eB51')
+})

package/src/shared/utils/sliceAddress.ts

@@ -0,0 +1,30 @@
+/**
+ * Shorten address by removing middle part, i.e: 0x123...789
+ *
+ * @param address - the address
+ * @param sliceBy - slice by amount from top and end, it doesn't include 0x
+ * @returns sliced address
+ */
+export const sliceAddress = (
+  address?: string,
+  startSliceBy = 6,
+  endSliceBy?: number
+): string => {
+  if (!address) {
+    return ''
+  }
+
+  let sliceAddress = ''
+  endSliceBy = endSliceBy || startSliceBy
+
+  if (address.length < startSliceBy + endSliceBy) {
+    return address
+  }
+
+  sliceAddress =
+    address.length > startSliceBy + 2
+      ? `${address.slice(0, startSliceBy + 2)}...${address.slice(-endSliceBy)}`
+      : address
+
+  return sliceAddress
+}