@lukso/web-components 1.2.2 → 1.3.0

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,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

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