Architecture
Architecture
We have outlined some considerations for your day-to-day work with our development. Please read them carefully:
Web Component
import { customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import style from './my-component.scss';
@customElement('onbrand-my-component')
export class DSMyComponent extends LitElement {
static get styles(){
return unsafeCSS(style);
}
@property({ type: String }) text = '';
render() {
return html `
<p part="my-component" class="${classMap({
'MyComponent': true,
})}">${this.text}</p>`;
}
}Estrutura de pastas (Web Component)
|--- src
| |--- components
| |--- my-component
| |--- ds-my-component.ts
| |--- my-component.scss
| |--- my-component.stories.ts
| |--- my-component.test.tsSaas
@import '../../theme/setTheme.scss';
.MyComponent {
color: $color-neutral-dark-02;
font-family: $font-family-base;
font-size: $font-size-xs;
font-weight: $font-weight-regular;
line-height: $line-height-distant;
margin : 0;
}Storybook
import { html } from 'lit-element';
import './ds-my-component';
export default {
title: 'Texts/MyComponent',
};
const Template = ({ text }) => {
return html`<onbrand-my-component text="${text}"></onbrand-my-component>`;
};
export const Base = Template.bind({});
Base.args = {
text: 'My component'
};
The Polkadot Events Bounty is
funded by the treasury and voted
in by token-holders via OpenGov.
The Polkadot Events Bounty is
funded by the treasury and voted
in by token-holders via OpenGov.
The Polkadot Events Bounty is
funded by the treasury and voted
in by token-holders via OpenGov.