@lukso/web-components 1.6.2 → 1.7.3

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

@@ -1,131 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { TailwindStyledElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives'
-import style from './style.scss?inline'
-import '@/components/lukso-profile'
-
-export type CardVariants = 'basic' | 'with-header' | 'profile'
-
-@customElement('lukso-card')
-export class LuksoCard extends TailwindStyledElement(style) {
-  @property({ type: String })
-  variant: CardVariants = 'basic'
-
-  @property({ type: String, attribute: 'background-url' })
-  backgroundUrl = ''
-
-  @property({ type: String, attribute: 'profile-url' })
-  profileUrl = ''
-
-  @property({ type: String, attribute: 'profile-address' })
-  profileAddress = ''
-
-  @property({ type: Boolean, attribute: 'is-fixed-width' })
-  isFixedWidth = false
-
-  @property({ type: Boolean, attribute: 'is-fixed-height' })
-  isFixedHeight = false
-
-  private defaultStyles = `rounded-3xl  shadow-pink-drop-shadow-2xl`
-
-  basicTemplate() {
-    return html`
-      <div
-        data-testid="card"
-        class="bg-neutral-100 ${customClassMap({
-          [this.defaultStyles]: true,
-          ['w-[362px]']: this.isFixedWidth,
-          ['min-h-[534px]']: this.isFixedHeight,
-        })}"
-      >
-        <slot name="content"></slot>
-      </div>
-    `
-  }
-
-  withHeaderTemplate() {
-    return html`
-      <div
-        data-testid="card"
-        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${customClassMap({
-          [this.defaultStyles]: true,
-          ['w-[362px]']: this.isFixedWidth,
-          ['min-h-[534px]']: this.isFixedHeight,
-        })}"
-      >
-        <div>
-          <slot name="header"></slot>
-        </div>
-        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `
-  }
-
-  profileTemplate() {
-    return html`
-      <div
-        data-testid="card"
-        class="bg-neutral-98 grid grid-rows-[auto,1fr] ${customClassMap({
-          [this.defaultStyles]: true,
-          ['w-[362px]']: this.isFixedWidth,
-          ['min-h-[534px]']: this.isFixedHeight,
-        })}"
-      >
-        <div
-          style=${styleMap({
-            backgroundImage: `url(${this.backgroundUrl})`,
-          })}
-          class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative"
-        >
-          <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10 absolute opacity-10"
-          ></div>
-        </div>
-        <div
-          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-3xl relative"
-        >
-          <lukso-profile
-            profile-url=${this.profileUrl}
-            size="large"
-            profile-address=${this.profileAddress}
-            has-identicon
-            class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
-          ></lukso-profile>
-          <div
-            class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center"
-          >
-            <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
-              shadow-neutral-above-shadow-1xl"
-            ></div>
-          </div>
-
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `
-  }
-
-  render() {
-    switch (this.variant) {
-      case 'with-header':
-        return this.withHeaderTemplate()
-      case 'profile':
-        return this.profileTemplate()
-
-      default:
-        return this.basicTemplate()
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-card': LuksoCard
-  }
-}

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

@@ -1,191 +0,0 @@
-import { html } from 'lit-html'
-import './index'
-
-/**  Documentation and examples of `lukso-card` component. Cards are using `slots` to put content in different places like `header` or `content`.  */
-export default {
-  title: 'Design System/Components/lukso-card',
-  component: 'lukso-card',
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['basic', 'with-header', 'profile'],
-    },
-    content: { control: { type: 'text' } },
-    header: {
-      control: { type: 'text' },
-      if: { arg: 'variant', eq: 'with-header' },
-    },
-    backgroundUrl: {
-      control: { type: 'text' },
-      if: { arg: 'variant', eq: 'profile' },
-    },
-    profileUrl: {
-      control: { type: 'text' },
-      if: { arg: 'variant', eq: 'profile' },
-    },
-    profileAddress: {
-      control: { type: 'text' },
-      if: { arg: 'variant', eq: 'profile' },
-    },
-    isFixedWidth: {
-      control: { type: 'boolean' },
-    },
-    isFixedHeight: {
-      control: { type: 'boolean' },
-    },
-  },
-  args: {
-    variant: 'basic',
-    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    header: 'Dolor sit amet',
-    backgroundUrl: 'images/sample-background.jpg',
-    profileUrl: 'images/sample-avatar.png',
-    profileAddress: '0x9671Db683406EE0817B1f5cB6A3b3BD111477457',
-    isFullWidth: false,
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'defaultStyles',
-        'background-url',
-        'profile-url',
-        'profile-address',
-        'is-fixed-width',
-        'is-fixed-height',
-      ],
-    },
-  },
-}
-
-const DefaultTemplate = ({
-  variant,
-  content,
-  header,
-  isFixedHeight,
-  isFixedWidth,
-}) =>
-  html`
-    <lukso-card
-      variant=${variant}
-      ?is-fixed-width=${isFixedWidth}
-      ?is-fixed-height=${isFixedHeight}
-    >
-      <div slot="header" class="p-6">${header}</div>
-      <div slot="content" class="p-6">${content}</div>
-    </lukso-card>
-  `
-
-const CustomHeaderTemplate = ({
-  variant,
-  content,
-  header,
-  isFixedHeight,
-  isFixedWidth,
-}) =>
-  html`
-    <lukso-card
-      variant=${variant}
-      ?is-fixed-width=${isFixedWidth}
-      ?is-fixed-height=${isFixedHeight}
-    >
-      <div slot="header" class="p-6 relative overflow-hidden min-h-[200px]">
-        <div
-          class="w-[876px] h-[200px] -left-[257px] top-[72px] bg-neutral-95 rounded-[50%] absolute"
-        ></div>
-        ${header}
-      </div>
-      <div slot="content" class="p-6">${content}</div>
-    </lukso-card>
-  `
-
-const ProfileTemplate = ({
-  variant,
-  content,
-  backgroundUrl,
-  profileUrl,
-  profileAddress,
-  isFixedHeight,
-  isFixedWidth,
-}) =>
-  html`
-    <lukso-card
-      variant=${variant}
-      background-url=${backgroundUrl}
-      profile-url=${profileUrl}
-      profile-address=${profileAddress}
-      ?is-fixed-width=${isFixedWidth}
-      ?is-fixed-height=${isFixedHeight}
-    >
-      <div slot="content" class="p-6">${content}</div>
-    </lukso-card>
-  `
-
-/** By default card is using `basic` variant.  */
-export const DefaultCard = DefaultTemplate.bind({})
-DefaultCard.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18025&t=AGmdbG8fXRENuU3o-4',
-  },
-}
-
-/** If you need card with fixed sizes you can add `is-fixed-width` or `is-fixed-height` property.  */
-export const FixedCard = DefaultTemplate.bind({})
-FixedCard.args = {
-  isFixedWidth: true,
-  isFixedHeight: true,
-}
-FixedCard.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18025&t=AGmdbG8fXRENuU3o-4',
-  },
-}
-
-/** Example of `with-header` variant. */
-export const CardWithHeader = DefaultTemplate.bind({})
-CardWithHeader.args = {
-  variant: 'with-header',
-  isFixedWidth: true,
-  isFixedHeight: true,
-}
-CardWithHeader.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18028&t=AGmdbG8fXRENuU3o-4',
-  },
-}
-
-/** Example of `with-header` variant that has additional background element. */
-export const CardWithCustomHeader = CustomHeaderTemplate.bind({})
-CardWithCustomHeader.args = {
-  variant: 'with-header',
-  isFixedWidth: true,
-  isFixedHeight: true,
-}
-CardWithCustomHeader.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18026&t=AGmdbG8fXRENuU3o-4',
-  },
-}
-
-/** Example of `profile` variant. This variant additionally uses `background-url`, `profile-url` and `profile-address` properties.  */
-export const ProfileCard = ProfileTemplate.bind({})
-ProfileCard.args = {
-  variant: 'profile',
-  isFixedWidth: true,
-  isFixedHeight: true,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1096%3A14641&t=AGmdbG8fXRENuU3o-4',
-    },
-  },
-}
-ProfileCard.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18027&t=AGmdbG8fXRENuU3o-4',
-  },
-}

package/src/components/lukso-card/style.scss

@@ -1,3 +0,0 @@
-:host {
-  @apply w-full;
-}

package/src/components/lukso-icon/icons/add-photo.ts

@@ -1,46 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const addPhoto = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M14 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-    />
-    <path
-      d="M18 3V9"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M21 6L15 6"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.1214 9.87858C15.2929 11.05 15.2929 12.95 14.1214 14.1214C12.95 15.2929 11.05 15.2929 9.87858 14.1214C8.70714 12.95 8.70714 11.05 9.87858 9.87858C11.05 8.70714 12.95 8.70714 14.1214 9.87858Z"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-down-lg.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowDownLg = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M5.25 9.25L12 16L18.75 9.25"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-down-sm.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowDownSm = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M8 10.25L11.75 14L15.5 10.25"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-left-lg.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowLeftLg = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M15 5L8.25 11.75L15 18.5"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-left-sm.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowLeftSm = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M13.625 8.375L9.875 12.125L13.625 15.875"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-right-lg.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowRightLg = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M8.25 18.5L15 11.75L8.25 5"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-right-sm.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowRightSm = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M9.875 15.875L13.625 12.125L9.875 8.375"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-up-lg.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowUpLg = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M18.75 15L12 8.25L5.25 15"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/arrow-up-sm.ts

@@ -1,26 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const arrowUpSm = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M15.5 14L11.75 10.25L8 14"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}

package/src/components/lukso-icon/icons/barbell-outline.ts

@@ -1,54 +0,0 @@
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-
-import { IconOptions } from '@/components/lukso-icon/index.js'
-
-export const barbellOutline = (options: IconOptions) => {
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style=${styleMap({
-      width: `${options.width}px`,
-      height: `${options.height}px`,
-    })}
-  >
-    <path
-      d="M2.25 12H21.75"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M19.5 6.75C19.5 6.33579 19.1642 6 18.75 6C18.3358 6 18 6.33579 18 6.75V17.25C18 17.6642 18.3358 18 18.75 18C19.1642 18 19.5 17.6642 19.5 17.25V6.75Z"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M6 6.75C6 6.33579 5.66421 6 5.25 6C4.83579 6 4.5 6.33579 4.5 6.75V17.25C4.5 17.6642 4.83579 18 5.25 18C5.66421 18 6 17.6642 6 17.25V6.75Z"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M2.25 9.375C2.25 9.16789 2.08211 9 1.875 9C1.66789 9 1.5 9.16789 1.5 9.375V14.625C1.5 14.8321 1.66789 15 1.875 15C2.08211 15 2.25 14.8321 2.25 14.625V9.375Z"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M22.5 9.375C22.5 9.16789 22.3321 9 22.125 9C21.9179 9 21.75 9.16789 21.75 9.375V14.625C21.75 14.8321 21.9179 15 22.125 15C22.3321 15 22.5 14.8321 22.5 14.625V9.375Z"
-      stroke="var(--${options.color})"
-      stroke-width="${options.strokeWidth}"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg> `
-}