@bliss-design-system/shared

@bliss-design-system/shared

Shared tools for interal use, supporting the development of the Bliss Design System Component Toolkit.

• Installation
• Usage
  • IconMixin
• Troubleshooting

📦 Installation

To install this component, run:

yarn add @bliss-design-system/shared

🏎 Usage

⚠️ All of the tooling below is explicitly to support components built by Bliss.

As we develop this list will likely grow, but at the moment the mixins below support the base structure for some Bliss components.

IconMixin

The IconMixin is designed for components that depend on the usage of the @bliss-design-system/icon. Given the nature of the icon component, we cannot access the icons through another component, and this mixin will 'bake' the desired icon into the component you're building.

The mixin exposes two functions and one variable:

• setIcon: To set the icon passed to your component
• setSVGSymbol: To fetch the SVG that is represented by that icon
• this.icon: The string provided to the icon attribute

import { IconMixin } from '@bliss-design-system/shared'
import { html, LitElement, TemplateResult, PropertyValues} from 'lit-element'

class BlissExample extends IconMixin(LitElement) {
  public firstUpdated(changed: PropertyValues) {
    super.firstUpdated(changed);
    super.setIcon();
  }

  protected render(): TemplateResult {
    return html`
      <div>
        <bliss-icon name='${this.icon}'></bliss-icon>
        ${super.setSVGSymbol}
      </div>
    `
  }
}

customElements.define('bliss-example', BlissExample);

// Usage
<bliss-example icon='rocket'>Start building</bliss-example>

🫕 Contributing

We'd prefer to keep this internal package contribution-free while we work out how exactly we use it and what kinds of tools will live here. That is subject to change in the future though, so feel free to open an issue with any questions you may have in the meantime.

🙃 Troubleshooting

We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [e-mail] or via the #bliss_support Slack channel ✨.