@lukso/web-components 1.0.7 → 1.2.0

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

@@ -0,0 +1,74 @@
+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/custom-class-map'
+
+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-24 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"
+      >
+        ${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

@@ -0,0 +1,45 @@
+import { html } from 'lit-html'
+
+import '../lukso-wizard'
+
+export default {
+  title: 'Design System/Atoms/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'],
+    },
+  },
+}
+
+const Template = ({ steps, activeStep }) =>
+  html`<lukso-wizard
+    steps=${JSON.stringify(steps)}
+    active-step=${activeStep}
+  ></lukso-wizard>`
+
+export const Wizard = Template.bind({})

package/src/shared/assets/images/index.ts

@@ -0,0 +1 @@
+export default __dirname

package/src/shared/assets/index.ts

@@ -0,0 +1 @@
+export default __dirname

package/src/shared/directives/{custom-class-map.ts → custom-class-map/index.ts}

@@ -4,7 +4,7 @@ export interface ClassInfoList {
   readonly [classList: string]: boolean
 }
 
-class CustomClassMapDirective extends Directive {
+export class CustomClassMapDirective extends Directive {
   constructor(partInfo: PartInfo) {
     super(partInfo)
     if (
@@ -47,5 +47,3 @@ class CustomClassMapDirective extends Directive {
  * @param classInfoList
  */
 export const customClassMap = directive(CustomClassMapDirective)
-
-export type { CustomClassMapDirective }

package/src/shared/directives/index.ts

@@ -0,0 +1 @@
+export * from './custom-class-map'

package/src/shared/styles/color-palette.ts

@@ -1,3 +1,5 @@
+import tinycolor from 'tinycolor2'
+
 import { hslColorMap } from '../utils/hslColorMap'
 
 type ColorMap = {
@@ -29,6 +31,7 @@ export const colorPalette = {
   blue: hslColorMap(216, 96, [50, 60, 75, 85]),
   red: hslColorMap(0, 75, [55, 65, 75, 85]),
   purple: hslColorMap(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
+  pink: hslColorMap(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
   'gradient-1': {
     start: '#D39B9D',
     end: '#9071D1',
@@ -37,6 +40,10 @@ export const colorPalette = {
     start: '#F8DAD3',
     end: '#CC99AE',
   },
+  'gradient-3': {
+    start: tinycolor({ h: 230, s: 20, l: 28 }).toHexString(),
+    end: tinycolor({ h: 230, s: 24, l: 51 }).toHexString(),
+  },
 }
 
 /**

package/src/shared/styles/typography.scss

@@ -37,7 +37,7 @@
   }
 
   .heading-h5-apax {
-    @apply text-8 not-italic font-500 leading-28 font-apax;
+    @apply text-8 not-italic font-500 leading-10 font-apax;
   }
 
   // Paragraph

package/src/shared/{tailwind.element.ts → tailwind-element/index.ts}

@@ -1,6 +1,6 @@
 import { LitElement, unsafeCSS } from 'lit'
 
-import style from './styles/component.scss?inline'
+import style from '@/shared/styles/component.scss?inline'
 
 const tailwindElement = unsafeCSS(style)
 

package/tailwind.config.cjs

@@ -1,7 +1,7 @@
 const { colorPalette } = require('./tools/color-palette.cjs')
 
 module.exports = {
-  content: ['**/*.{ts,html,css,scss}'],
+  content: ['**/*.{ts,html,css,scss,mdx}'],
   theme: {
     fontFamily: {
       inter: ['Inter', 'sans-serif'],
@@ -13,11 +13,56 @@ module.exports = {
       boxShadow: {
         'button-hover-primary': '0px 20px 16px -16px rgba(0, 0, 0, 0.4)',
         'button-hover-secondary': '0px 20px 16px -16px rgba(0, 0, 0, 0.12)',
+        'button-press-primary': '0px 12px 16px -16px rgba(0, 0, 0, 0.4)',
+        'button-press-secondary': '0px 12px 16px -16px rgba(0, 0, 0, 0.12)',
         '1xl': '0px 0px 16px rgba(189, 206, 219, 0.4)',
         '2xl':
           '0px 36px 80px rgba(189, 206, 219, 0.3), 0px 5.01331px 33.4221px rgba(189, 206, 219, 0.0503198), 0px 2.68036px 17.869px rgba(189, 206, 219, 0.0417275), 0px 1.50259px 10.0172px rgba(189, 206, 219, 0.035), 0px 0.798012px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 0.332071px 2.21381px rgba(189, 206, 219, 0.0196802)',
         '3xl':
           '0px 12px 80px rgba(189, 206, 219, 0.3), 0px 73.78px 33.4221px rgba(189, 206, 219, 0.0803), 0px 22.3363px 17.869px rgba(189, 206, 219, 0.0417275), 0px 12.5216px 10.0172px rgba(189, 206, 219, 0.035), 0px 6.6501px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 2.76726px 2.21381px rgba(189, 206, 219, 0.0196802)',
+        'neutral-drop-shadow':
+          '0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08)',
+        'neutral-drop-shadow-1xl':
+          '0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
+        'neutral-drop-shadow-2xl':
+          '0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
+        'neutral-drop-shadow-3xl':
+          '0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
+        'pink-drop-shadow':
+          '0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08)',
+        'pink-drop-shadow-1xl':
+          '0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
+        'pink-drop-shadow-2xl':
+          '0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
+        'pink-drop-shadow-3xl':
+          '0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
+        'neutral-inner-shadow':
+          'inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08)',
+        'neutral-inner-shadow-1xl':
+          'inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15)',
+        'neutral-inner-shadow-2xl':
+          'inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15)',
+        'neutral-inner-shadow-3xl':
+          'inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15)',
+        'neutral-above-shadow':
+          '0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325)',
+        'neutral-above-shadow-1xl':
+          '0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325)',
+        'neutral-above-shadow-2xl':
+          '0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325)',
+        'neutral-above-shadow-3xl':
+          '0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325)',
+        'pink-above-shadow':
+          '0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325)',
+        'pink-above-shadow-1xl':
+          '0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325)',
+        'pink-above-shadow-2xl':
+          '0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325)',
+        'pink-above-shadow-3xl':
+          '0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325)',
+        'wizard-step':
+          '1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16)',
+        'wizard-line': 'inset 0px 0px 2px rgba(0, 0, 0, 0.14)',
       },
       fontSize: {
         8: '8px',
@@ -43,6 +88,7 @@ module.exports = {
         900: '900',
       },
       lineHeight: {
+        10: '10px',
         12: '12px',
         14: '14px',
         15: '15px',
@@ -54,6 +100,16 @@ module.exports = {
         28: '28px',
         31: '31px',
       },
+      transitionDuration: {
+        25: '25ms',
+        250: '250ms',
+      },
+      scale: {
+        98: '.98',
+      },
+      height: {
+        78: '78px',
+      },
     },
   },
   plugins: [],

package/tools/color-palette.cjs

@@ -35,10 +35,11 @@ module.exports = (function () {
         };
         exports.hslColorMap = hslColorMap;
     });
-    define("styles/color-palette", ["require", "exports", "utils/hslColorMap"], function (require, exports, hslColorMap_1) {
+    define("styles/color-palette", ["require", "exports", "tinycolor2", "utils/hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.neutral3 = exports.neutral2 = exports.neutral1 = exports.colorPalette = void 0;
+        tinycolor2_2 = __importDefault(tinycolor2_2);
         /**
          * Color palette based on the structure thats compatible with Tailwind config
          */
@@ -60,6 +61,7 @@ module.exports = (function () {
             blue: (0, hslColorMap_1.hslColorMap)(216, 96, [50, 60, 75, 85]),
             red: (0, hslColorMap_1.hslColorMap)(0, 75, [55, 65, 75, 85]),
             purple: (0, hslColorMap_1.hslColorMap)(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
+            pink: (0, hslColorMap_1.hslColorMap)(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
             'gradient-1': {
                 start: '#D39B9D',
                 end: '#9071D1',
@@ -68,6 +70,10 @@ module.exports = (function () {
                 start: '#F8DAD3',
                 end: '#CC99AE',
             },
+            'gradient-3': {
+                start: (0, tinycolor2_2.default)({ h: 230, s: 20, l: 28 }).toHexString(),
+                end: (0, tinycolor2_2.default)({ h: 230, s: 24, l: 51 }).toHexString(),
+            },
         };
         /**
          * Splits a color map into smaller color maps

package/tools/color-palette.d.ts

@@ -31,6 +31,7 @@ declare module "styles/color-palette" {
         blue: {};
         red: {};
         purple: {};
+        pink: {};
         'gradient-1': {
             start: string;
             end: string;
@@ -39,6 +40,10 @@ declare module "styles/color-palette" {
             start: string;
             end: string;
         };
+        'gradient-3': {
+            start: any;
+            end: any;
+        };
     };
     /**
      * Color map subsets that can be used in the Storybook preview

package/tools/color-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/utils/hslColorMap.ts","../src/shared/styles/color-palette.ts"],"names":[],"mappings":";IAEA;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICjBD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;KA8BxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}
+{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/utils/hslColorMap.ts","../src/shared/styles/color-palette.ts"],"names":[],"mappings":";IAEA;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICfD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}