@lukso/web-components 1.6.3 → 1.7.3

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

@@ -1,129 +0,0 @@
-import { html } from 'lit-html'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-
-import './index'
-import '../lukso-icon'
-
-/**  Documentation and examples of `lukso-tag` component. */
-export default {
-  title: 'Design System/Components/lukso-tag',
-  component: 'lukso-tag',
-  argTypes: {
-    content: {
-      control: { type: 'text' },
-    },
-    isRounded: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'large'],
-    },
-    backgroundColor: {
-      control: {
-        type: 'text',
-      },
-    },
-    textColor: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    size: 'small',
-    isRounded: false,
-    content: 'Small Tag',
-    backgroundColor: '',
-    textColor: '',
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'defaultStyles',
-        'smallStyles',
-        'largeStyles',
-        '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
-  >`
-
-/** By default tag is displayed in `small` size. */
-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',
-  },
-}
-
-/** You can change tag size with `size` property. This is example of `large` tag. */
-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',
-  },
-}
-
-/** You can create "pill" tags when adding `is-rounded` property. */
-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',
-  },
-}
-
-/** You can change color of the tag to any from the palette with `text-color` and `background-color` property. */
-export const CustomColorTag = Template.bind({})
-CustomColorTag.args = {
-  content: 'Custom Color Tag',
-  backgroundColor: 'red-55',
-  textColor: 'neutral-100',
-}
-CustomColorTag.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3241&t=AGmdbG8fXRENuU3o-4',
-  },
-}
-
-/** Tags can have icons inside. Please check `lukso-icon` component for more details about using icons. */
-export const IconTag = Template.bind({})
-IconTag.args = {
-  size: 'small',
-  content: unsafeHTML(
-    `<lukso-icon name="information" size="small" class="mr-1"></lukso-icon>Icon Tag`
-  ),
-}
-IconTag.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3234&t=mppskGJvpl3LbsWL-4',
-  },
-}

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

@@ -1,72 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { animate, AnimateController } from '@lit-labs/motion'
-import { classMap } from 'lit/directives/class-map.js'
-
-import { TailwindStyledElement } from '@/shared/tailwind-element'
-import style from './test.component.scss?inline'
-
-@customElement('lukso-test')
-export class LuksoTest extends TailwindStyledElement(style) {
-  @property()
-  name = 'World'
-
-  @property()
-  private clicked = false
-
-  @property({ type: Boolean })
-  disabled = false
-
-  duration = 1000
-  controller = new AnimateController(this, {
-    defaultOptions: {
-      keyframeOptions: {
-        duration: this.duration,
-        fill: 'backwards',
-      },
-    },
-  })
-
-  _onClick() {
-    if (this.disabled) {
-      return
-    }
-    this.clicked = true
-    setTimeout(() => {
-      this.clicked = false
-    }, 2000)
-  }
-
-  render() {
-    const classes = {
-      'text-yellow-200': !this.disabled,
-      'p-2': true,
-      'rounded-full': true,
-      'text-24': true,
-      'bg-blue-800': this.clicked && !this.disabled,
-      'bg-blue-200': !this.clicked && !this.disabled,
-    }
-    return html`
-      <p class="heading-1">
-        Hello,
-        <b class="heading-4">${this.name}</b>
-        !
-      </p>
-      <button
-        ?disabled=${this.disabled}
-        data-testid="button"
-        @click=${this._onClick}
-        class="hover:text-yellow-700 ${classMap(classes)}"
-        ${animate()}
-      >
-        Hello world! 2
-      </button>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-test': LuksoTest
-  }
-}

package/src/components/lukso-test/test.component.scss

@@ -1,7 +0,0 @@
-p {
-  @apply bg-red-200;
-
-  b {
-    @apply text-orange-500;
-  }
-}

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

@@ -1,31 +0,0 @@
-import { html } from 'lit-html'
-import { within } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
-
-import '../lukso-test'
-
-export default {
-  title: 'Test',
-  component: 'lukso-test',
-}
-
-export function Primary({ disabled }) {
-  return html`<lukso-test ?disabled=${disabled}>Hello World</lukso-test>`
-}
-
-Primary.args = {
-  disabled: false,
-}
-
-Primary.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-
-  // 👇 Assert DOM structure
-  await expect(canvas.getByText('Hello World')).toBeInTheDocument()
-
-  // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-  // await userEvent.click(canvas.getByTestId("button"));
-
-  // 👇 Assert DOM structure
-  await expect(canvas.getByText('Hello World')).toBeInTheDocument()
-}

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

@@ -1,105 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { styleMap } from 'lit-html/directives/style-map.js'
-
-import { sliceAddress } from '@/shared/utils/slice-address'
-import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives'
-
-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

@@ -1,98 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-username` component. It's used to display user name and address in standardized way. */
-export default {
-  title: 'Design System/Components/lukso-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>`
-
-/** By default user name is displayed as `name` prefixed with `@` character and 4 bytes of `address` */
-export const DefaultUsername = Template.bind({})
-
-/** Long names get truncated. You can control width of the component with `max-width` property. */
-export const LongName = Template.bind({})
-LongName.args = {
-  name: 'ThisIsAReallyLongName',
-}
-
-/** Example of component that has only `name` property. */
-export const OnlyName = Template.bind({})
-OnlyName.args = {
-  address: '',
-}
-
-/** Example of component that has only `address` property and `small` size. */
-export const OnlyAddress = Template.bind({})
-OnlyAddress.args = {
-  name: '',
-  size: 'small',
-  sliceBy: 4,
-}
-
-/** You can specify amount of sliced characters in the address with `slice-by` property. */
-export const SliceAddressBy4 = Template.bind({})
-SliceAddressBy4.args = {
-  name: '',
-  sliceBy: 4,
-  size: 'small',
-}
-
-/** Address color can be customized with `address-color` property. */
-export const CustomAddressColor = Template.bind({})
-CustomAddressColor.args = {
-  name: '',
-  addressColor: 'neutral-60',
-  size: 'small',
-}

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

@@ -1,74 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { repeat } from 'lit/directives/repeat.js'
-
-import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives'
-
-export type WizardStep = {
-  label: string
-}
-
-@customElement('lukso-wizard')
-export class LuksoWizard extends TailwindElement {
-  @property({ type: Array })
-  steps: WizardStep[] = []
-
-  @property({ type: Number, attribute: 'active-step' })
-  activeStep = 1
-
-  private activeStepStyles = `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`
-
-  private completedStepStyles = `[&>.lukso-wizard-circle]:after:bg-purple-51
-    [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
-    [&_.lukso-wizard-circle-inner]:from-gradient-3-start
-    [&_.lukso-wizard-circle-inner]:to-gradient-3-end`
-
-  stepTemplate(step: WizardStep, index: number) {
-    return html`<li
-      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-medium-uppercase-apax whitespace-pre-line flex text-center break-words uppercase"
-      >
-        ${step.label}
-      </div>
-      <div
-        class="lukso-wizard-circle bg-pink-95 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
-          border-[1px] border-solid border-[rgba(255,255,255,0.8)]
-          after:block after:absolute after:bottom-[7px] after:w-[calc(100%-16px)] after:ml-[15px] after:h-[2px]
-          after:content:'' after:bg-pink-95 after:shadow-wizard-line"
-      >
-        <div
-          class="lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px] ${customClassMap(
-            {
-              [this.activeStepStyles]: index + 1 === this.activeStep,
-            }
-          )}"
-        ></div>
-      </div>
-    </li>`
-  }
-
-  render() {
-    return html`
-      <ul class="flex justify-center" data-testid="wizard">
-        ${repeat(
-          this.steps || [],
-          step => this.steps.indexOf(step),
-          (step, index) => this.stepTemplate(step, index)
-        )}
-      </ul>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-wizard': LuksoWizard
-  }
-}

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

@@ -1,52 +0,0 @@
-import { html } from 'lit-html'
-
-import '../lukso-wizard'
-
-/** Documentation and examples of `lukso-wizard` component. Steps are passed in `step` property as object containing different labels.
- *  To specify which step is active set `active-step` property.
- */
-export default {
-  title: 'Design System/Components/lukso-wizard',
-  component: 'lukso-wizard',
-  argTypes: {
-    steps: {
-      control: { type: 'object' },
-    },
-    activeStep: { control: { type: 'number', min: 1, step: 1 } },
-  },
-  args: {
-    steps: [
-      {
-        label: `Select
-Profile`,
-      },
-      {
-        label: `Connect
-Wallet`,
-      },
-      {
-        label: `Migrate
-LYXe`,
-      },
-      { label: 'Status' },
-    ],
-    activeStep: 3,
-  },
-  parameters: {
-    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',
-    },
-  },
-}
-
-const Template = ({ steps, activeStep }) =>
-  html`<lukso-wizard
-    steps=${JSON.stringify(steps)}
-    active-step=${activeStep}
-  ></lukso-wizard>`
-
-export const BasicWizard = Template.bind({})

package/src/docs/animations.stories.mdx

@@ -1,83 +0,0 @@
-import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
-import '../components/lukso-icon/index'
-
-<h1>Animations</h1>
-
-Animations can be applied to any element through special CSS classes. For animatingicons you pass animation name.
-
-<Meta title="Design System/Animations" />
-
-### **Example usage**
-
-```html
-<div class="w-[12px] h-[12px] bg-green-54 animate-spin"></div>
-```
-
-### **Animation list**
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-spin`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 animate-spin"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-ping`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-ping"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-pulse`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-bounce`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-bounce"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-pulse-resize`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse-resize"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-resize-in`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-resize-in animation-iteration-infinite animation-duration-1000"></div>
-</div>
-
-<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
-  #### `animate-fade-in`
-  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full opacity-0 animate-fade-in animation-iteration-infinite animation-duration-1000"></div>
-</div>
-
-### **Delay animation**
-
-You can delay animation by adding `animation-delay-[value]` class.
-
-```html
-<div class="animate-spin animation-delay-100"></div>
-```
-
-### **Animation count**
-
-You can set animation count by adding `animation-iteration-[value]` class.
-
-```html
-<div class="animate-spin animation-iteration-infinite"></div>
-```
-
-### **Animation duration**
-
-You can set animation duration by adding `animation-duration-[value]` class.
-
-```html
-<div class="animate-spin animation-duration-1000"></div>
-```
-
-### **Animation fill mode**
-
-You can set animation fill mode by adding `animation-fill-[value]` class.
-
-```html
-<div class="animate-spin animation-fill-forwards"></div>
-```