@lukso/web-components 1.0.1 → 1.0.4

package/src/docs/typography.stories.mdx

@@ -0,0 +1,360 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { html } from 'lit-html'
+import dedent from 'ts-dedent'
+
+<Meta title="Design System/Typography" />
+
+export const Template = ({ name, font }) =>
+  html`<span class="${font}"
+    >The quick brown fox jumps over the lazy dog.</span
+  >`
+
+<h1 id="typography">Typography</h1>
+
+In order to maintain a consistent look and feel woth design in terms of the typography,
+we have a set of CSS classes that we use. Using `font-family`,
+`font-weight` and `font-size` directly in your code should be avoided and instead use this set
+of classes.
+
+### **Font colors**
+
+Colors for the text should be added independently using proper color classes. See example below.
+
+<Source
+  language="html"
+  dark
+  format={false}
+  code={dedent`
+     <span class="heading-h1 text-neutral-20">The quick brown fox jumps over the lazy dog.</span>
+  `}
+/>
+
+### **Table of contents**
+
+- [Headings](#headings)
+- [Paragraph](#paragraph)
+- [Currency](#currency)
+- [Utility](#utility)
+- [Monospaced](#monospaced)
+
+<h3 id="headings">**Headings**</h3>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h1`
+  <Story
+    name="heading-h1"
+    args={{
+      font: 'heading-h1',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h2`
+  <Story
+    name="heading-h2"
+    args={{
+      font: 'heading-h2',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h3`
+  <Story
+    name="heading-h3"
+    args={{
+      font: 'heading-h3',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h4`
+  <Story
+    name="heading-h4"
+    args={{
+      font: 'heading-h4',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h5`
+  <Story
+    name="heading-h5"
+    args={{
+      font: 'heading-h5',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h1-apax`
+  <Story
+    name="heading-h1-apax"
+    args={{
+      font: 'heading-h1-apax',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h4-apax`
+  <Story
+    name="heading-h4-apax"
+    args={{
+      font: 'heading-h4-apax',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `heading-h5-apax`
+  <Story
+    name="heading-h5-apax"
+    args={{
+      font: 'heading-h5-apax',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<h3 id="paragraph">**Paragraph** [↑](#typography)</h3>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-16-regular`
+  <Story
+    name="paragraph-16-regular"
+    args={{
+      font: 'paragraph-16-regular',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-16-semi-bold`
+  <Story
+    name="paragraph-16-semi-bold"
+    args={{
+      font: 'paragraph-16-semi-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-14-regular`
+  <Story
+    name="paragraph-14-regular"
+    args={{
+      font: 'paragraph-14-regular',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-14-medium`
+  <Story
+    name="paragraph-14-medium"
+    args={{
+      font: 'paragraph-14-medium',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-14-semi-bold`
+  <Story
+    name="paragraph-14-semi-bold"
+    args={{
+      font: 'paragraph-14-semi-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-12-regular`
+  <Story
+    name="paragraph-12-regular"
+    args={{
+      font: 'paragraph-12-regular',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-12-medium`
+  <Story
+    name="paragraph-12-medium"
+    args={{
+      font: 'paragraph-12-medium',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `paragraph-12-semi-bold`
+  <Story
+    name="paragraph-12-semi-bold"
+    args={{
+      font: 'paragraph-12-semi-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<h3 id="currency">**Currency** [↑](#typography)</h3>
+
+<Canvas isColumn withSource="open">
+  #### `currency-10-semi-bold`
+  <Story
+    name="currency-10-semi-bold"
+    args={{
+      font: 'currency-10-semi-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `currency-10-bold-uppercase`
+  <Story
+    name="currency-10-bold-uppercase"
+    args={{
+      font: 'currency-10-bold-uppercase',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `currency-14-semi-bold`
+  <Story
+    name="currency-14-semi-bold"
+    args={{
+      font: 'currency-14-semi-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<h3 id="utility">**Utility** [↑](#typography)</h3>
+
+<Canvas isColumn withSource="open">
+  #### `link`
+  <Story
+    name="link"
+    args={{
+      font: 'link',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `button-text`
+  <Story
+    name="button-text"
+    args={{
+      font: 'button-text',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `caption`
+  <Story
+    name="caption"
+    args={{
+      font: 'caption',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<h3 id="monospaced">**Monospaced** [↑](#typography)</h3>
+
+<Canvas isColumn withSource="open">
+  #### `monospace-16-regular`
+  <Story
+    name="monospace-16-regular"
+    args={{
+      font: 'monospace-16-regular',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `monospace-16-bold`
+  <Story
+    name="monospace-16-bold"
+    args={{
+      font: 'monospace-16-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `monospace-12-bold`
+  <Story
+    name="monospace-12-bold"
+    args={{
+      font: 'monospace-12-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas isColumn withSource="open">
+  #### `monospace-10-bold`
+  <Story
+    name="monospace-10-bold"
+    args={{
+      font: 'monospace-10-bold',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/globals.d.ts

@@ -0,0 +1 @@
+declare module '@open-wc/demoing-storybook'

package/src/index.ts

@@ -0,0 +1,3 @@
+// DO NOT MODIFY MANUALLY
+export * from './components/lukso-button/index'
+export * from './components/lukso-test/index'

package/src/postcss.config.ts

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    tailwindcss: {
+      config: './tailwind.config.cjs',
+    },
+    autoprefixer: {},
+  },
+}

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

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

package/src/shared/directives/custom-class-map.ts

@@ -0,0 +1,51 @@
+import { Directive, directive, PartInfo, PartType } from 'lit/directive.js'
+
+export interface ClassInfoList {
+  readonly [classList: string]: boolean
+}
+
+class CustomClassMapDirective extends Directive {
+  constructor(partInfo: PartInfo) {
+    super(partInfo)
+    if (
+      partInfo.type !== PartType.ATTRIBUTE ||
+      partInfo.name !== 'class' ||
+      (partInfo.strings?.length as number) > 2
+    ) {
+      throw new Error(
+        '`customClassMap()` can only be used in the `class` attribute ' +
+          'and must be the only part in the attribute.'
+      )
+    }
+  }
+
+  render(classInfoList: ClassInfoList) {
+    return (
+      ' ' +
+      Object.keys(classInfoList)
+        .filter(key => classInfoList[key])
+        .join(' ') +
+      ' '
+    )
+  }
+}
+
+/**
+ * A directive that applies dynamic CSS classes.
+ * Since build in `classMap` directive can only apply one class name,
+ * this directive is allowing to apply multiple class names.
+ *
+ * This must be used in the `class` attribute and must be the only part used in
+ * the attribute. It takes each property in the `classInfoList` argument and adds
+ * the property names to the element's `classList` if the property value is
+ * truthy; if the property value is falsey, the property name is removed from
+ * the element's `class`.
+ *
+ * For example `{'foo bar': baz}` applies the class `foo bar` if the value of `baz` is
+ * truthy.
+ *
+ * @param classInfoList
+ */
+export const customClassMap = directive(CustomClassMapDirective)
+
+export type { CustomClassMapDirective }

package/src/shared/globals.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss'
+declare module '*.scss?inline'
+declare module '*.css'
+declare module '*.css?inline'
+declare module '*.html'

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

@@ -0,0 +1,69 @@
+import { hslColorMap } from '../utils/hslColorMap'
+
+type ColorMap = {
+  [key: string]: string
+}
+
+/**
+ * Color palette based on the structure thats compatible with Tailwind config
+ */
+export const colorPalette = {
+  neutral: hslColorMap(
+    206,
+    30,
+    [
+      10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
+      97, 98, 100,
+    ]
+  ),
+  honey: hslColorMap(42, 93, [72, 75, 82, 85, 92]),
+  coral: hslColorMap(14, 87, [65, 74, 75, 84, 85, 94]),
+  warm: hslColorMap(25, 100, [77, 87, 97]),
+  'sea-salt': hslColorMap(180, 17, [57, 67, 88]),
+  cloud: hslColorMap(200, 38, [43, 75, 88]),
+  ocean: hslColorMap(209, 38, [38, 75, 88]),
+  sky: hslColorMap(209, 64, [64, 75, 85]),
+  lukso: hslColorMap(335, 33, [70, 80, 90]),
+  yellow: hslColorMap(36, 100, [55, 65, 75, 85]),
+  green: hslColorMap(135, 57, [45, 54, 75, 85]),
+  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]),
+  'gradient-1': {
+    start: '#D39B9D',
+    end: '#9071D1',
+  },
+  'gradient-2': {
+    start: '#F8DAD3',
+    end: '#CC99AE',
+  },
+}
+
+/**
+ * Splits a color map into smaller color maps
+ *
+ * @param colors - color map to split
+ * @param from - index to start from
+ * @param to - index to end at
+ * @returns a new color map
+ */
+const splitColor = (colors: ColorMap, from: number, to: number): ColorMap => {
+  return Object.keys(colors)
+    .slice(from, to)
+    .reduce((result, key) => {
+      result[key] = colors[key]
+
+      return result
+    }, {})
+}
+
+/**
+ * Color map subsets that can be used in the Storybook preview
+ */
+export const neutral1 = splitColor(colorPalette.neutral, 0, 8)
+export const neutral2 = splitColor(colorPalette.neutral, 8, 16)
+export const neutral3 = splitColor(
+  colorPalette.neutral,
+  16,
+  Object.keys(colorPalette.neutral).length
+)

package/src/shared/styles/component.scss

@@ -0,0 +1,13 @@
+/**
+  * @file Component styles
+  *
+  * This file contain general styles that should be applied to any component.
+  * Since Web Components styles are encapsulated within the Shadow DOM, we need
+  * to pass all styles.
+  */
+
+@import './typography';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/shared/styles/fonts.scss

@@ -0,0 +1,97 @@
+/**
+  * @file Fonts
+  *
+  * This file contains all fonts used in designs.
+  */
+
+$font-file-path: '/assets/fonts' !default;
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-ExtraBold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('#{$font-file-path}/PT-Mono-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('#{$font-file-path}/PT-Mono-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}

package/src/shared/styles/index.ts

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

package/src/shared/styles/main.scss

@@ -0,0 +1,12 @@
+/**
+  * @file Main styles
+  *
+  * This file contain general styles that should be applied to host page.
+  */
+
+@import './fonts';
+@import './typography';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;