Hannah Boyd

Intro

Stack

2 | Love Thy Arby's

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.ts

Saas

@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'
};