@salesforce/bt-cards-component-example

About

A component-xxx is a read-only element used to do xxx. Use component-xxx to help. Explain what your component does.

See Loom video

How to Getting Started

Let's start by installing component-xxx as a dependency of your project with npm or directly the component .copy and past npm package here

specification

Component-XXX Integration

Reusing component-xxx in SFDX LWC Project or Scratch Orgs ONLY.

the component directly.

This component is a shipped LWC version. That will be run inside a scratch org. Component is composed of the following components:

component-xxx.html	This is the html view of the component wrapped around the template tag.
component-xxx.css	The CSS file specific to component-xxx only. It does not include the styles for it's parent sds-badge. c360-badge extends from sds-badge
component-xxx.ts	This is a LWC specific function. This can be used for adding logic for both the css/html and at the same time apex logic
component-xxx.xml	This file is required if you are planning on deploying component-xxx to a scratch org.
This would be under shipped components.

Reusing component-xxx in LWC OSS ONLY.

Run the following component

npm i @help/component-xxx

For Lightning Web Component (LWC OSS) Integration

/* myComponent.css */ @import "@salesforce-ux/c360-styling-hooks/dist/hooks.custom-props.css";

/* myComponent.js */ import "@salesforce-ux/c360-styling-hooks/dist/hooks.custom-props.css"; import C360Badge from "@salesforce-ux/c360-badge/dist/badge"; window.customElements.define('c360-badge', C360Badge);

HTML Decoration

After that,the HTML of your LWC component template needs to be decorated to have all the named part attributes as per the component's specification. Below is a reference to the component's structure.

Properties & Attributes

Attribute	Type	Default Value	Description
type	status/product/default/transparent	empty	Set the type of the badge
value	success/analytics/red	empty	Set the appropriate state of the badge based on type. Refer below table

Accepted values for various type

Type	Value
status	success/error/warning
product	analytics/service/platform/sales/industry/commerce/employees/learning/experience/work
default/transparent	red/pink/violet/purple/indigo/blue/cloud-blue/teal/green/yellow/orange/ hot-orange

Accessibility

Roles

Please provide an overview of accessibility considerations for your component. ARIA landmark role

Answer the following questions? Is this an interactive element? As component-xxx is an interactive/non-interactive element, this is not by default focusable by keyboard. Please use appropriate tabindex besides role attribute to make them accessible for keyboard interaction.

Extras

Push Requests component-xxx

If you noticed something wrong with the component please feel free to make changes to it. However this change will note override the base component. There will be approval needed for this component.

• Fork the following github component-xxx once this is done make the relevant changes to the following components.
• Make sure to rename your component component-xxx-extended
• Make the changes to this component to either HTML, CSS, or XML of of component-xxx-extended
• Package the component A. Run the following: i. Lerna changed - this will show you changed component ii. Lerna bootstrap - This will bundle your component as an npm package iii. Lerna publish - This will publish your component to npm www.npmjs.com. Note you will need to be authenticated to npm in order to do this. Run the following command. npm adduser to authenticate in your terminal
• Commit the changes and assign your dedicated reviewer within your BPG review the component.

Note: If you make changes more than once to the component ensure you package the component and classify the component as either Patch MINOR or Major when running lerna bootstrap.

Developer Support

Currently the support for these components is the creator: e.g. Damilare Olowoniyi ( Add Slack Link ). **

Team Support

Please contact #bt-design-bpg-storybooks

If you have any question about this component.

Continuous Integration for Chromatic

https://www.chromatic.com/docs/circleci

Documentation other CI tools:

https://www.chromatic.com/docs/github-actions