@sebgroup/green-core NPM

Install

yarn install @sebgroup/green-core

# or use npm
npm install @sebgroup/green-core

Use

There are three main ways you can use Green Core:

With Lit
With Angular
With React

But that said, the components in Green Core are just regular Web Components, so you can use them with or without any framework.

Using Lit

import { css, customElement, LitElement } from 'lit'

// Transitional styles applies the current 2016 design language to the components
import * as ButtonStyles from '@sebgroup/green-core/components/button/button.trans.styles.js'
// This custom `html` template literal tag from Green Core extends the default `lit-html` tag to handle element version scoping.
import { html } from '@sebgroup/green-core/scoping'

// Import the components that you need
import '@sebgroup/green-core/components/button/index.js'

@customElement('my-app')
export class MyApp extends LitElement {
  static styles = css``

  connectedCallback() {
    super.connectedCallback()

    // Register transitional styles to get SEB's current visual design
    ButtonStyles.register()
  }

  render() {
    return html`<gds-button>Click me!</gds-button>`
  }
}

Using Angular

Angular has support for using web components directly in the template. To enable it, you need to do the following:

Add the CUSTOM_ELEMENTS_SCHEMA in the module where you plan to use the components. It is recommended to add this as locally as possible, only on the moduls/components where you need it, and not in the app module.

You also need the NggCoreWrapperModule from @sebgroup/green-angular.

In your module:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { NggCoreWrapperModule } from '@sebgroup/green-angular'

@NgModule({
    // Add the NggCoreWrapperModule to the `imports` array
    imports: [NggCoreWrapperModule],
    // Add the CUSTOM_ELEMENTS_SCHEMA to the `schemas` array
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

In your component:

import '@sebgroup/green-core/components/button/index.js'

// Transitional styles
import * as ButtonStyles from '@sebgroup/green-core/components/button/button.trans.styles.js'

ButtonStyles.register()

Use the webcomponent in your template with the *nggCoreElement directive.

In your template:

<gds-button *nggCoreElement>Click me!</gds-button>

The *nggCoreElement directive comes from the NggCoreWrapperModule you imported above. It has the same pupose as the custom html template tag mentioned in the Lit example above: It handles custom element scoping for you.

Using React

In most cases, we already exort React wrappers for these components from the @sebgroup/green-react package. In those cases you can just use those. But you can also easily create your own wrappers using @lit/react.

Here is an example:

import React from 'react'
import { createComponent } from '@lit/react'

import { GdsButton } from '@sebgroup/green-core/component/button/index.js'
import * as ButtonStyles from '@sebgroup/green-core/components/button/button.trans.styles.js'
import { getScopedTagName } from '@sebgroup/green-core/scoping'

ButtonStyles.register()

export const Button = createComponent({
  tagName: getScopedTagName('gds-button'),
  elementClass: GdsButton,
  react: React,
  events: { onClick: 'click' }, // Event callbacks need to be explicitly mapped to DOM events
})

Then you can just use <Button /> like a regular React component.