@lukso/web-components 1.6.3 → 1.7.3

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

@@ -1,184 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-input` component.  */
-export default {
-  title: 'Design System/Forms/lukso-input',
-  component: 'lukso-input',
-  argTypes: {
-    value: {
-      control: { type: 'text' },
-    },
-    name: {
-      control: { type: 'text' },
-    },
-    type: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-    description: {
-      control: { type: 'text' },
-    },
-    error: {
-      control: { type: 'text' },
-    },
-    unit: {
-      control: { type: 'text' },
-    },
-    isFullWidth: {
-      control: { type: 'boolean' },
-    },
-    autofocus: {
-      control: { type: 'boolean' },
-    },
-    min: {
-      control: { type: 'number' },
-    },
-    max: {
-      control: { type: 'number' },
-    },
-    onKeyUp: {
-      description: 'Emitted on key up event.',
-      table: {
-        category: 'Events',
-      },
-    },
-    onKeyDown: {
-      description: 'Emitted on key up down.',
-      table: {
-        category: 'Events',
-      },
-    },
-    onKeyPress: {
-      description: 'Emitted on key press.',
-      table: {
-        category: 'Events',
-      },
-    },
-  },
-  args: {
-    type: 'text',
-    value: '',
-    name: 'input',
-    label: '',
-    description: '',
-    error: '',
-    placeholder: '',
-    unit: '',
-    isFullWidth: false,
-    autofocus: false,
-    min: undefined,
-    max: undefined,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'defaultInputStyles',
-        'defaultUnitStyles',
-        'is-full-width',
-        'hasHocus',
-        'hasHighlight',
-      ],
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=420%3A3617&t=JAexoWba0Re3ntDk-4',
-    },
-  },
-}
-
-const Template = ({
-  value,
-  name,
-  type,
-  placeholder,
-  label,
-  description,
-  error,
-  unit,
-  isFullWidth,
-  autofocus,
-  min,
-  max,
-}) =>
-  html`<lukso-input
-    value=${value}
-    name=${name}
-    type=${type}
-    placeholder=${placeholder}
-    label=${label}
-    description=${description}
-    error=${error}
-    unit=${unit}
-    ?is-full-width=${isFullWidth}
-    ?autofocus=${autofocus}
-    min=${min}
-    max=${max}
-    @on-key-up="handleKeyUp"
-    @on-key-down="handleKeyDown"
-    @on-key-press="handleKeyPress"
-  ></lukso-input>`
-
-/** Example of default input with `value`.  */
-export const DefaultInput = Template.bind({})
-DefaultInput.args = {
-  value: 'Text Input',
-}
-
-/** Example of input with `placeholder` text. */
-export const PlaceholderText = Template.bind({})
-PlaceholderText.args = {
-  placeholder: 'Placeholder Text',
-}
-
-/** Example of input with `label`. */
-export const Label = Template.bind({})
-Label.args = {
-  label: 'Title',
-}
-
-/** Example of input with `label` and `description`. */
-export const LabelAndDescription = Template.bind({})
-LabelAndDescription.args = {
-  label: 'Title',
-  description: 'Description',
-}
-
-/** Example of input with `error`. */
-export const Error = Template.bind({})
-Error.args = {
-  label: 'Title',
-  description: 'Description',
-  error: 'Error message',
-}
-
-/** Example of input with `unit`. */
-export const Unit = Template.bind({})
-Unit.args = {
-  unit: 'unit',
-}
-
-/** If you need input to take full width of the parent element add `is-full-width` property. */
-export const FullWidth = Template.bind({})
-FullWidth.args = {
-  isFullWidth: true,
-}
-
-/** If you need input to be focused add `autofocus` property. */
-export const Autofocus = Template.bind({})
-Autofocus.args = {
-  autofocus: true,
-}
-
-/** With `min` and `max` property you can specify minimum or maximum value that can be entered. It works with `number`, `range`, `date`, `datetime-local`, `month`, `time` and `week` input types */
-export const MinMaxValue = Template.bind({})
-MinMaxValue.args = {
-  min: 1,
-  max: 10,
-  type: 'number',
-}

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

@@ -1,63 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives'
-
-@customElement('lukso-navbar')
-export class LuksoNavbar extends TailwindElement {
-  @property({ type: String })
-  title = ''
-
-  @property({ type: Boolean, attribute: 'is-center' })
-  isCenter = false
-
-  @property({ type: Boolean, attribute: 'is-sticky' })
-  isSticky = false
-
-  private defaultStyles = `bg-neutral-100 shadow-pink-drop-shadow h-78 flex`
-
-  private centerStyles = `justify-center`
-
-  private stickyStyles = `sticky top-0 z-[1000]`
-
-  _onBrandClick() {
-    const event = new CustomEvent('on-brand-click', {
-      bubbles: true,
-      composed: true,
-    })
-    this.dispatchEvent(event)
-  }
-
-  render() {
-    return html`
-      <nav
-        data-testid="navbar"
-        class=${customClassMap({
-          [this.defaultStyles]: true,
-          [this.centerStyles]: this.isCenter,
-          [this.stickyStyles]: this.isSticky,
-        })}
-      >
-        <div
-          class="flex items-center px-10 h-full cursor-pointer"
-          @click=${this._onBrandClick}
-        >
-          <img src="/assets/images/lukso-logo.svg" class="mr-4" />
-          <div
-            class="text-purple-51 heading-h4-medium-uppercase-apax whitespace-pre-line flex leading-none"
-          >
-            ${this.title}
-          </div>
-        </div>
-        <slot></slot>
-      </nav>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-navbar': LuksoNavbar
-  }
-}

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

@@ -1,70 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-navbar` component.  */
-export default {
-  title: 'Design System/Components/lukso-navbar',
-  component: 'lukso-navbar',
-  argTypes: {
-    title: {
-      control: { type: 'text' },
-    },
-    isCenter: {
-      control: { type: 'boolean' },
-    },
-    isSticky: {
-      control: { type: 'boolean' },
-    },
-    onBrandClick: {
-      action: 'on-brand-click',
-      description: 'Emitted when brand/logo is clicked',
-      table: {
-        category: 'Events',
-      },
-    },
-  },
-  args: {
-    title: `UNIVERSAL
-PROFILES`,
-    isCenter: false,
-    isSticky: false,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'defaultStyles',
-        'centerStyles',
-        'stickyStyles',
-        'is-center',
-        '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}
-    @on-brand-click="handleBrandClick"
-  ></lukso-navbar>`
-
-/** Example of default navbar. It support `@on-brand-click` event that is fired when clicking on the logo/title. */
-export const DefaultNavbar = Template.bind({})
-
-/** Example of navbar with logo and title in center. You set this by adding `is-center` property. */
-export const CenterNavbar = Template.bind({})
-CenterNavbar.args = {
-  isCenter: true,
-}
-
-/** By default navbar stays at the top of the document. If you want it scroll with the content then ad  `is-sticky` property. */
-export const StickyNavbar = Template.bind({})
-StickyNavbar.args = {
-  isSticky: true,
-}

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

@@ -1,106 +0,0 @@
-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() {
-    return this.sizes[this.size].profileImageSize
-  }
-
-  private identiconSize() {
-    return 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

@@ -1,104 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**
- *  Documentation and examples of `lukso-profile` component.
- *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` property.
- *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` property.
- *  To show profile picture pass valid url in `profile-url` property.
- */
-export default {
-  title: 'Design System/Components/lukso-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>`
-
-/** Example of `x-large` profile in `96x96` pixel size.*/
-export const XLarge = Template.bind({})
-XLarge.args = {
-  size: 'x-large',
-}
-
-/** Example of `large` profile in `80x80` pixel size.*/
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-}
-
-/** Example of `medium` profile in `56x56` pixel size.*/
-export const Medium = Template.bind({})
-Medium.args = {
-  size: 'medium',
-}
-
-/** Example of `small` profile in `40x40` pixel size.*/
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-}
-
-/** Example of `x-small` profile in `24x24` pixel size.*/
-export const XSmall = Template.bind({})
-XSmall.args = {
-  size: 'x-small',
-}
-
-/** When image can't be loaded or missing the placeholder is displayed. */
-export const Unknown = Template.bind({})
-Unknown.args = {
-  profileUrl: '',
-}
-
-/** You can also control if identicon should be visible with `has-identicon` property. */
-export const NoIdenticon = Template.bind({})
-NoIdenticon.args = {
-  hasIdenticon: false,
-}

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

@@ -1,28 +0,0 @@
-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 = ''
-
-  private 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

@@ -1,30 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-sanitize` component. It's used to show potentially dangerous content or HTML in safe way.
- * One of the common use cases is using HTML tags in texts coming from translations.
- */
-export default {
-  title: 'Design System/Components/lukso-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>`
-
-/** This is example if text containing HTML tags. */
-export const Sanitize = Template.bind({})

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

@@ -1,68 +0,0 @@
-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 = `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 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,
-          ['rounded-[56px]']: this.isRounded,
-          ['rounded-lg']: !this.isRounded,
-          [this.smallStyles]: this.size === 'small',
-          [this.largeStyles]: this.size === 'large',
-        })}
-        style=${styleMap({
-          backgroundColor: `var(--${this.backgroundColor})`,
-          borderColor: `var(--${this.backgroundColor})`,
-          color: `var(--${this.textColor})`,
-        })}
-      >
-        <slot></slot>
-      </div>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-tag': LuksoTag
-  }
-}