Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@bliss-design-system/shared

Package Overview
Dependencies
2
Maintainers
4
Versions
13
Issues
File Explorer

Advanced tools

@bliss-design-system/shared

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

    1.0.2latest
    npm

Version published
Maintainers
4
Weekly downloads
582
decreased by-17.21%

Weekly downloads

Readme

Source

@bliss-design-system/shared

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

  • Installation
  • Usage
  • 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 bliss@bryter.io or via the #bliss_support Slack channel ✨.

FAQs

Last updated on 17 Aug 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc