Green Core is a carefully crafted set of Web Components that lays the foundation for the Green Design System.
yarn install @sebgroup/green-core
# or use npm
npm install @sebgroup/green-core
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.
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>`
}
}
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.
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.
Check out the Storybook (@sebgroup/core) for components and documentation.