@usecapsule/core-components 3.2.0-dev.1 → 3.3.0

package/dist/types/components/cpsl-popover/cpsl-popover.d.ts

@@ -7,19 +7,72 @@ export declare class CpslPopover {
     private triggerClicked;
     positionX?: number;
     positionY?: number;
+    /**
+     * ID for the element that the popover anchors to.
+     */
     anchorEl?: HTMLElement;
+    /**
+     * Vertical anchor origin.
+     * Options are: `"left"`, `"center"`, `"right"`.
+     * Default is: `"left"`.
+     */
     anchorOriginHorizontal?: 'left' | 'center' | 'right';
+    /**
+     * Vertical anchor origin.
+     * Options are: `"top"`, `"center"`, `"bottom"`.
+     * Default is: `"bottom"`.
+     */
     anchorOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * If `true` the container will use the width of the content, else it will be set to the width of the trigger.
+     * Default is `true`
+     */
     autoWidth?: boolean;
+    /**
+     * Whether or not to disable to popover.
+     */
     disabled: boolean;
+    /**
+     * Used internally to prevent select from blurring unintentionally.
+     */
     preventBlur: boolean;
+    /**
+     * Vertical transformation origin.
+     * Options are: `"left"`, `"center"`, `"right"`.
+     * Default is: `"left"`.
+     */
     transformOriginHorizontal?: 'left' | 'center' | 'right';
+    /**
+     * Vertical transformation origin.
+     * Options are: `"top"`, `"center"`, `"bottom"`.
+     * Default is: `"bottom"`.
+     */
     transformOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * Which trigger causes the popover to open.
+     * Options are: `"click"`, `"hover"`.
+     * Default is: `"click"`.
+     */
     triggerAction: 'click' | 'hover';
+    /**
+     * ID for the element that triggers the popover to open.
+     */
     trigger: string;
+    /**
+     * Padding from edge of window for the popover container.
+     */
     windowPadding?: number;
-    cpslOpen: EventEmitter<void>;
-    cpslClose: EventEmitter<void>;
+    /**
+     * Emitted when the popover opens.
+     */
+    cpslOpen: EventEmitter;
+    /**
+     * Emitted when the popover closes.
+     */
+    cpslClose: EventEmitter;
+    /**
+     * Call to close the popover manually.
+     */
     closePopover(): Promise<void>;
     onTriggerChange(): void;
     onAnchorChange(): void;

package/dist/types/components/cpsl-progress-indicator/cpsl-progress-indicator.d.ts

@@ -1,5 +1,11 @@
 export declare class CpslProgressIndicator {
+    /**
+     * Total number of steps.
+     */
     totalSteps: number;
+    /**
+     * Current zero based step.
+     */
     step: number;
     render(): any;
 }

package/dist/types/components/cpsl-qr-code/cpsl-qr-code.d.ts

@@ -1,7 +1,17 @@
 export declare class CpslQrCode {
     el: HTMLCpslQrCodeElement;
+    /**
+     * URL for the QR code to link to.
+     */
     url: string;
+    /**
+     * Source for the center image of the QR code.
+     */
     imageSrc?: string;
+    /**
+     * Size of the QR code in pixels.
+     * Default is 250.
+     */
     size?: number;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/cpsl-radio/cpsl-radio.d.ts

@@ -1,6 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslRadio {
+    /**
+     * Whether or not the radio is checked.
+     */
     checked: boolean;
+    /**
+     * Emitted when the radio state changes.
+     */
     cpslRadioChanged: EventEmitter<boolean>;
     private handleRadioClick;
     render(): any;

package/dist/types/components/cpsl-select/cpsl-select.d.ts

@@ -7,20 +7,65 @@ export declare class CpslSelect {
     hasFocus: boolean;
     popoverOpen: boolean;
     hasSelectedItem: boolean;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
     disabled: boolean;
+    /**
+     * Set the max height of the dropdown.
+     */
     dropdownMaxHeight?: number;
+    /**
+     * Error text to show below the input. If this is provided the input will enter an error state.
+     */
     errorText?: string;
+    /**
+     * Format value for display when selected.
+     */
     formatValue?: (value: string) => string;
+    /**
+     * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+     */
     helperText?: string;
+    /**
+     * ID of the element, must be unique for the popover trigger.
+     */
     id: string;
+    /**
+     * The label for the input.
+     */
     label?: string;
+    /**
+     * Placeholder to display if `selectedValue` is empty.
+     */
     placeholder?: string;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
     required: boolean;
+    /**
+     * Value of the selected item.
+     */
     selectedValue?: string;
+    /**
+     * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+     */
     showFormattedSelectedItem?: boolean;
+    /**
+     * If `true`, the label will display an "optional" tag.
+     */
     showOptionalLabel: boolean;
+    /**
+     * Emitted when the input loses focus.
+     */
     cpslBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
     cpslFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the value changes.
+     */
     cpslSelectValueChange: EventEmitter<string>;
     onValueChange(): void;
     handleValueChange(): void;

package/dist/types/components/cpsl-select-item/cpsl-select-item.d.ts

@@ -1,7 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslSelectItem {
+    /**
+     * Whether the item is selected or not.
+     */
     selected?: boolean;
+    /**
+     * Value of the item.
+     */
     value: string;
+    /**
+     * Called when item is clicked.
+     * @internal
+     */
     cpslSelectItemClick: EventEmitter<string>;
     private handleItemClick;
     render(): any;

package/dist/types/components/cpsl-slide-button/cpsl-slide-button.d.ts

@@ -2,11 +2,29 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { IconType } from '../../interface';
 export declare class CpslSlideButton {
     el: HTMLCpslSlideButtonElement;
+    /**
+     * Whether or not the component is disabled. If true, the component will display the `startText`.
+     */
     disabled: boolean;
+    /**
+     * The name of the ending icon to show.
+     */
     endIcon: IconType;
+    /**
+     * The ending text.
+     */
     endText: string;
+    /**
+     * The name of the starting icon to show.
+     */
     startIcon: IconType;
+    /**
+     * The starting text.
+     */
     startText: string;
+    /**
+     * The `cpslComplete` event is fired when the slider is at the end.
+     */
     cpslComplete: EventEmitter<boolean>;
     componentDidLoad(): void;
     private dragElement;

package/dist/types/components/cpsl-spinner/cpsl-spinner.d.ts

@@ -1,5 +1,13 @@
 export declare class CpslSpinner {
+    /**
+     * Size of the spinner in pixels.
+     * Default is 50.
+     */
     size?: number;
+    /**
+     * Rotation speed of the spinner in seconds.
+     * Default is 1.
+     */
     speed?: number;
     render(): any;
 }

package/dist/types/components/cpsl-switch/cpsl-switch.d.ts

@@ -1,6 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslSwitch {
+    /**
+     * Whether or not the switch is checked.
+     */
     checked: boolean;
+    /**
+     * Emitted when the switch state changes.
+     */
     cpslSwitchChanged: EventEmitter<boolean>;
     private handleSwitchClick;
     render(): any;

package/dist/types/components/cpsl-tab/cpsl-tab.d.ts

@@ -3,8 +3,19 @@ import { TabClickEventDetail } from './tab-interface';
 import { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface';
 export declare class CpslTab {
     el: HTMLCpslTabElement;
+    /**
+     * The selected tab component
+     */
     selected: boolean;
+    /**
+     * A tab id must be provided for each `cpsl-tab`. It's used internally to reference
+     * the selected tab or by the router to switch between them.
+     */
     tab: string;
+    /**
+     * Emitted when tabs are clicked
+     * @internal
+     */
     cpslTabButtonClick: EventEmitter<TabClickEventDetail>;
     onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>): void;
     onTabsInit(ev: CustomEvent<TabsChangedEventDetail>): void;

package/dist/types/components/cpsl-tabs/cpsl-tabs.d.ts

@@ -4,9 +4,22 @@ export declare class CpslTabs {
     el: HTMLCpslTabsElement;
     selectedTabRect?: DOMRect;
     loaded: boolean;
+    /**
+     * Whether or not the tabs take the full width of their container.
+     */
     fullWidth?: boolean;
+    /**
+     * The selected tab component
+     */
     selectedTab?: string;
+    /**
+     * Emitted when a tab is changed
+     */
     cpslTabsChanged: EventEmitter<TabsChangedEventDetail>;
+    /**
+     * Emitted when tabs are initialized
+     * @internal
+     */
     cpslTabsInit: EventEmitter<TabsChangedEventDetail>;
     updateSlider(): void;
     updateTab(newValue?: string, oldValue?: string): void;

package/dist/types/components/cpsl-text/cpsl-text.d.ts

@@ -1,6 +1,21 @@
 export declare class CpslText {
+    /**
+     * The color of text.
+     * Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error".
+     * Default is: `"primary"`.
+     */
     color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error';
+    /**
+     * The variant of text.
+     * Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL".
+     * Default is: `"bodyM"`.
+     */
     variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+    /**
+     * The weight of text.
+     * Options are: `"regular"`, `"medium", `"semiBold", `"bold".
+     * Default is: `"regular"`.
+     */
     weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
     private get Content();
     render(): any;

package/dist/types/components/cpsl-tile-button/cpsl-tile-button.d.ts

@@ -1,6 +1,12 @@
 import { IconType } from '../../interface';
 export declare class CpslTileButton {
+    /**
+     * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+     */
     src?: string;
+    /**
+     * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+     */
     icon?: IconType;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -783,7 +783,18 @@ export namespace Components {
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */
-        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        "variant"?: | 'body2XS'
+    | 'bodyXS'
+    | 'bodyS'
+    | 'bodyM'
+    | 'bodyL'
+    | 'bodyXL'
+    | 'headingXS'
+    | 'headingS'
+    | 'headingM'
+    | 'headingL'
+    | 'headingXL'
+    | 'heading2XL';
         /**
           * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
          */
@@ -1125,8 +1136,8 @@ declare global {
         new (): HTMLCpslPillElement;
     };
     interface HTMLCpslPopoverElementEventMap {
-        "cpslOpen": void;
-        "cpslClose": void;
+        "cpslOpen": any;
+        "cpslClose": any;
     }
     interface HTMLCpslPopoverElement extends Components.CpslPopover, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCpslPopoverElementEventMap>(type: K, listener: (this: HTMLCpslPopoverElement, ev: CpslPopoverCustomEvent<HTMLCpslPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2018,11 +2029,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the popover closes.
          */
-        "onCpslClose"?: (event: CpslPopoverCustomEvent<void>) => void;
+        "onCpslClose"?: (event: CpslPopoverCustomEvent<any>) => void;
         /**
           * Emitted when the popover opens.
          */
-        "onCpslOpen"?: (event: CpslPopoverCustomEvent<void>) => void;
+        "onCpslOpen"?: (event: CpslPopoverCustomEvent<any>) => void;
         /**
           * Used internally to prevent select from blurring unintentionally.
          */
@@ -2236,7 +2247,18 @@ declare namespace LocalJSX {
         /**
           * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
          */
-        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        "variant"?: | 'body2XS'
+    | 'bodyXS'
+    | 'bodyS'
+    | 'bodyM'
+    | 'bodyL'
+    | 'bodyXL'
+    | 'headingXS'
+    | 'headingS'
+    | 'headingM'
+    | 'headingL'
+    | 'headingXL'
+    | 'heading2XL';
         /**
           * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
          */

package/dist/types/stencil-public-runtime.d.ts

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/dist/types/utils/theme/generateBorderRadii.d.ts

@@ -1,2 +1,2 @@
 import { Theme } from '../../interface';
-export declare const generateBorderRadii: ({ borderRadius, customBorderRadii }: Pick<Theme, 'borderRadius' | 'customBorderRadii'>) => void;
+export declare const generateBorderRadii: ({ borderRadius, customBorderRadii, }: Pick<Theme, 'borderRadius' | 'customBorderRadii'>) => void;

package/dist/types/utils/theme/generatePalette.d.ts

@@ -4,4 +4,4 @@ export type Palette = {
     backgroundColors: string[];
     isDarkBackground: boolean;
 };
-export declare const generatePalette: ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>) => Palette;
+export declare const generatePalette: ({ foregroundColor, backgroundColor, customPalette, }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>) => Palette;

package/dist/types/utils/theme/generateTheme.d.ts

@@ -1,2 +1,6 @@
 import { Theme } from '../../interface';
+/**
+ * Generates css theme variables.
+ * @returns @boolean Whether background is dark or not.
+ */
 export declare const generateTheme: ({ foregroundColor, backgroundColor, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }: Theme) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "3.2.0-dev.1",
+  "version": "3.3.0",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -21,7 +21,6 @@
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "lint": "eslint src/**/*{.ts,.tsx}",
     "build:css": "sass --embed-sources src/css:./css",
     "build:assets": "ts-node -T ./scripts/buildAssets.ts",
     "storybook": "storybook dev -p 6006",
@@ -37,7 +36,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@stencil-community/eslint-plugin": "^0.7.2",
+    "@chromatic-com/storybook": "^1.6.0",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.10",
     "@storybook/addon-essentials": "^8.1.11",
@@ -51,20 +50,15 @@
     "@storybook/test": "^8.1.11",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^21.9.0",
     "rollup-plugin-dotenv": "^0.5.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
     "storybook": "^8.1.11",
+    "storybook-addon-stencil": "^0.2.1",
     "ts-node": "^10.9.2"
   },
-  "gitHead": "874b9bff5ee0d0149182ffbe7ea48276a3cd8327"
+  "gitHead": "530e3c81e17c2027ff82abe9b77abb8d6bf0fd7a"
 }

package/readme.md

@@ -1,3 +1,48 @@
-# Capsule Core Components
+# component-library
 
-The core stencil library for our common capsule components.
+Cross-framework common component library
+
+## Install
+
+```bash
+yarn install
+```
+
+## Running
+
+The component examples can either be run in React or bare HTML.
+
+### React
+
+```bash
+yarn build
+yarn start-react
+```
+
+### HTML
+
+```bash
+yarn start-html
+```
+
+## Building
+
+This will build the component libraries for both web components and React.
+
+```bash
+yarn build
+```
+
+## Generating New Components
+
+This should be used when adding new components to the library. It will initialize the component, test and styles.
+
+Once run, follow the prompts to name your component.
+
+> **Note** Components **MUST** begin the the `cpsl-` string in order for them to pass linting.
+
+> **Note** The styles should be changed to Sass once the component is generated. Rename the generated `css` file to `scss` and update the import in the component.
+
+```bash
+yarn generate
+```