@lukso/web-components 1.2.1 → 1.3.0

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
+  }
+}

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

@@ -0,0 +1,94 @@
+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: '',
+}
+
+export const SliceAddressBy4 = Template.bind({})
+SliceAddressBy4.args = {
+  name: '',
+  sliceBy: 4,
+}
+
+export const SmallAddress = Template.bind({})
+SmallAddress.args = {
+  name: '',
+  size: 'small',
+}
+
+export const CustomAddressColor = Template.bind({})
+CustomAddressColor.args = {
+  name: '',
+  addressColor: 'neutral-60',
+  size: 'small',
+}

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

@@ -26,14 +26,14 @@ 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,
       })}"
     >
       <div
-        class="text-purple-51 heading-h5-apax whitespace-pre-line flex text-center break-words"
+        class="text-purple-51 heading-h5-apax whitespace-pre-line flex text-center break-words uppercase"
       >
         ${step.label}
       </div>

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

@@ -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
+}