@sebgroup/green-core 1.12.0 → 1.14.0

package/README.md

@@ -1,90 +1,33 @@
-<h1 align="center">
-    <a href="https://seb.io">
-        <img src="https://github.com/sebgroup/green/assets/11420341/2fc122ba-54fc-4f22-b96d-d405079d6e50">
-    </a>
-    <br/>
-    <br/>
-    Green Design System
-</h1>
+<div align="center">
+<img width="600" alt="green-core" src="https://github.com/sebgroup/green/assets/11420341/5d4b25fd-0633-498c-b50f-70f07c01ac16">
+<h1>@sebgroup/green-core</h1>
+<p>Green Core is a carefully crafted set of Web Components that lays the foundation for the Green Design System.</p>
+</div>
 
-<p align="center">Green is an open-source design system built by SEB.<p>
-<p align="center"><a href="https://github.com/sebgroup/green/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache2.0-005FAC"/></a> <a href="https://semver.org/"><img src="https://img.shields.io/badge/semantic%20versioning-006D31"/></a> <a href="https://nx.dev/"><img src="https://img.shields.io/badge/maintained%20with-nx-006D31"/></a> <a href="https://github.com/sebgroup/green/blob/main/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-006D31"/></a></p>
-
-## Getting started
-
-If you are new to Green, checkout [@sebgroup/green-core](https://github.com/sebgroup/green/tree/main/libs/core).
-
-We also provide components for the following technologies:
-
-- [React](https://github.com/sebgroup/green/tree/main/libs/react)
-- [Angular](https://github.com/sebgroup/green/tree/main/libs/angular)
-
-If you're trying to find something specific, here's a full list of packages that we support!
-
-| Package name                                                                                      | Description                                                             |
-| ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| [@sebgroup/green-core](https://github.com/sebgroup/green/tree/main/libs/core)                     | Webcomponent library built with [Lit](https://lit.dev)                  |
-| [@sebgroup/green-react](https://github.com/sebgroup/green/tree/main/libs/react)                   | React component library                                                 |
-| [@sebgroup/green-angular](https://github.com/sebgroup/green/tree/main/libs/angular)               | Angular component library                                               |
-| [@sebgroup/chlorophyll](https://github.com/sebgroup/green/tree/main/libs/chlorophyll)             | Styling framework                                                       |
-| [@sebgroup/green-tokens](https://github.com/sebgroup/green/tree/main/libs/tokens)                 | Design Tokens package                                                   |
-| [@sebgroup/green-charts](https://github.com/sebgroup/green/tree/main/libs/charts)                 | An SEB wrapper of [Billboard.js](https://naver.github.io/billboard.js/) |
-| [@sebgroup/green-react-charts](https://github.com/sebgroup/green/tree/main/libs/react-charts)     | A React version of the charts wrapper                                   |
-| [@sebgroup/green-angular-charts](https://github.com/sebgroup/green/tree/main/libs/angular-charts) | An Angular version of the charts wrapper                                |
-
-## 📋 Table of content
-
-- [Documentation](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#documentation)
-- [Working from SEB](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#working-from-seb)
-- [Contribute](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#contribute)
-- [Working locally with this repo](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#working-locally-with-this-repo)
-
-## 📚 Documentation
-
-Documentation currently resides in a few different locations:
-
-- [User Interface Guidelines (Design Library)](https://designlibrary.sebgroup.com/)
-- [Storybook (@sebgroup/chlorophyll)](https://sebgroup.github.io/green/latest/chlorophyll/)
-- [Storybook (@sebgroup/green-core)](https://sebgroup.github.io/green/latest/core/)
-- [Storybook (@sebgroup/green-react)](https://sebgroup.github.io/green/latest/react/)
-- [Storybook (@sebgroup/green-angular)](https://sebgroup.github.io/green/latest/angular/)
-
-## 🏦 Working from SEB
-
-Working from SEB and on SEB machines you need to setup things in a specific way for everything to work smooth. Checkout our [Developer Guidelines](https://github.sebank.se/pages/seb-common/Developer-garden/detail_pages/green.html) over at Developer Garden.
-
-## 🎉 Contribute
-
-We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our [Contributing Guide](https://github.com/sebgroup/green/blob/main/CONTRIBUTING.md)! 👀
-
-## 🔨 Working locally with this repo
-
-### Start Storybook locally
-
-To start Storybooks locally on your machine you run the following command:
+## Install
 
 ```bash
-npx nx run [PROJECT]:storybook
+yarn install @sebgroup/green-core
+
+# or use npm
+npm install @sebgroup/green-core
 ```
 
-Where you replace `[PROJECT]` with a folder name from `green\libs`.
+## Use
 
-So to start Storybook for each component library run:
+```js
+import { GdsButton } from '@sebgroup/green-core'
+import { transitionalStyles } from '@sebgroup/green-core/transitional-styles'
 
-```bash
-npx nx run chlorophyll:storybook
-npx nx run react:storybook
-npx nx run angular:storybook
+//register transitional styles to get SEB's current visual design
+transitionalStyles()
 ```
 
-If you install nx globally you can omit the npx above.
+```html
+<!-- Then use the component in your html -->
+<gds-button>Click me</gds-button>
+```
 
-```bash
-# Install nx globally
-npm install nx -g
+## Documentation
 
-# And start the storybooks
-nx run chlorophyll:storybook
-nx run react:storybook
-nx run angular:storybook
-```
+Check out the [Storybook (@sebgroup/core)](https://sebgroup.github.io/green/latest/core/) for components and documentation.

package/components/badge/badge.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @element gds-badge
+ * @summary A component that displays a badge with different variants and types.
+ * @documentation https://seb.io/docs/component/badge
+ * @status beta
+ * @since 1.0.0
+ *
+ * @cssprop --gds-badge-background-color - The background color of the badge.
+ * @cssprop --gds-badge-color - The text color of the badge.
+ * @cssprop --gds-badge-font-size - The font size of the badge.
+ * @cssprop --gds-badge-height - The height of the badge.
+ * @cssprop --gds-badge-width - The width of the badge.
+ *
+ * @variant Information - A badge with an information icon and blue background color.
+ * @variant Success - A badge with a checkmark icon and green background color.
+ * @variant Warning - A badge with an exclamation mark icon and yellow background color.
+ * @variant Error - A badge with a cross icon and red background color.
+ *
+ * @type Status - A badge that displays a status.
+ * @type Counter - A badge that displays a count.
+ * @type Indicator - A badge that displays an icon and percentage.
+ *
+ * @example
+ * <gds-badge variant="Information" type="Status">Pending</gds-badge>
+ * <gds-badge variant="Success" type="Counter">10</gds-badge>
+ * <gds-badge variant="Warning" type="Indicator" icon="warning" percentage="50">50%</gds-badge>
+ * <gds-badge variant="Error" type="Status">Failed</gds-badge>
+ *
+ */
+export declare class GdsBadge extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    constructor();
+    variant: string;
+    type: string;
+    icon: string;
+    slotIcon(): import("lit").TemplateResult<1>;
+    slotLabel(): "" | import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/button/button.d.ts

@@ -0,0 +1,46 @@
+import '../icon/icon';
+import '../../primitives/ripple/ripple';
+import { GdsFormControlElement } from '../../components/form-control';
+/**
+ * @element gds-button
+ * @summary A custom button element that can display a label, lead and trail icons, and a ripple effect on click.
+ * @status beta
+ *
+ * @slot - Content to be displayed as the button label.
+ * @slot lead - An optional slot that allows a `gds-icon` element to be placed before the label.
+ * @slot trail - An optional slot that allows a `gds-icon` element to be placed after the label.
+ *
+ * @event click - Fired when the button is clicked.
+ */
+export declare class GdsButton<ValueT = any> extends GdsFormControlElement<ValueT> {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The type of the button.
+     */
+    type?: HTMLButtonElement['type'];
+    /**
+     * The variant of the button. Defaults to "primary".
+     */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Defines which set the button belongs to. Defaults to "neutral".
+     */
+    set: 'neutral' | 'positive' | 'negative';
+    /**
+     * Sets the size of the button. Defaults to "small".
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The label of the button. Use this to add an accessible label to the button when no text is provided in the default slot.
+     */
+    label: string;
+    private _mainSlot?;
+    constructor();
+    render(): any;
+}

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class GdsCheckbox extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    constructor();
+    private inputElement;
+    private exludeAttr;
+    private reflectAttributesToInput;
+    update(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/datepicker/datepicker.d.ts

@@ -18,6 +18,7 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
     #private;
     static styles: import("lit").CSSResult[];
     static shadowRootOptions: ShadowRootInit;
+    get type(): string;
     /**
      * The Date value of the datepicker. This can be set to undefined to clear the datepicker.
      * This can be a string if set via the value attribute in markup, or via the setAttribute DOM API.

package/components/dropdown/dropdown.d.ts

@@ -21,6 +21,7 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
     #private;
     static styles: import("lit").CSSResult;
     static shadowRootOptions: ShadowRootInit;
+    get type(): string;
     /**
      * The label of the dropdown.
      * Will only render if this property is set to a non-empty string.

package/components/form-control.d.ts

@@ -23,7 +23,6 @@ export declare abstract class GdsFormControlElement<ValueT = any> extends GdsEle
     value?: ValueT;
     name: string;
     get form(): HTMLFormElement | null;
-    get type(): string;
     get validity(): ValidityState;
     get validationMessage(): string;
     get willValidate(): boolean;

package/components/icon/icon.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class GdsIcon extends LitElement {
+    static get styles(): import("lit").CSSResult;
+    open: boolean;
+    name: string;
+    static properties: {
+        open: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+        };
+    };
+    render(): import("lit").TemplateResult<1>;
+}

package/components/index.d.ts

@@ -6,3 +6,5 @@ export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';
 export * from './grid/grid';
 export * from './grouped-list/grouped-list';
+export * from './segmented-control/segmented-control';
+export * from './icon/icon';

package/components/input/input.d.ts

@@ -0,0 +1,69 @@
+import { GdsFormControlElement } from '../form-control';
+/**
+ * @summary A custom input element that can be used in forms.
+ * @status beta
+ *
+ * @element gds-input
+ *.
+ * @slot lead - Accepts `gds-icon`. Use this to place an icon in the start of the field.
+ * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example.
+ * @slot extended-supporting-text - A longer supporting text can be placed here. It will be
+ *       displayed in a panel when the user clicks the info button.
+ */
+export declare class GdsInput extends GdsFormControlElement<string> {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    value: string;
+    /**
+     * The label displayed above the field
+     */
+    label: string;
+    /**
+     * The supporting text displayed between the label and the field itself
+     */
+    supportingText: string;
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
+    /**
+     * Whether the field should be clearable or not. Clearable fields will display a clear button when
+     * the field has a value.
+     */
+    clearable: boolean;
+    /**
+     * The maximum number of characters allowed in the field.
+     */
+    maxlength: number;
+    /**
+     * The variant of the input field. The default variant displays a label, supporting text, and
+     * extended supporting text. The simplified variant only displays the field itself and the
+     * supporting text below.
+     *
+     * The simplified variant should only be used in specific cases, for example when the input field
+     * is placed inside a table cell or in a space-constrained layout.
+     *
+     * A typical form should use the default variant.
+     */
+    variant: 'default' | 'simplified';
+    /**
+     * Whether the input field should be multiline or not. Multiline fields will render a textarea
+     * internally instead of an input.
+     */
+    multiline: boolean;
+    private elInput;
+    private elExtendedSupportingTextSlot;
+    constructor();
+    connectedCallback(): void;
+    render(): any;
+    private _setAutoHeight;
+    /**
+     * Event handler for the form reset event.
+     */
+    _handleFormReset: () => void;
+}

package/components/radio/radio-group.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class GdsRadioGroup extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    selectedValue: any;
+    constructor();
+    label: string;
+    private inputElement;
+    private exludeAttr;
+    private reflectAttributesToInput;
+    update(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/radio/radio.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class GdsRadio extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    value: any;
+    constructor();
+    private inputElement;
+    private exludeAttr;
+    private reflectAttributesToInput;
+    update(changedProperties: Map<PropertyKey, unknown>): void;
+    handleClick(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/segmented-control/segment/segment.d.ts

@@ -0,0 +1,19 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * @element gds-segment
+ */
+export declare class GdsSegment<ValueT = any> extends GdsElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the segment is selected
+     * @attr selected
+     */
+    selected: boolean;
+    /**
+     * Value can be used to tie arbitrary data to the segment.
+     * @attr value
+     */
+    value?: ValueT;
+    connectedCallback(): void;
+    render(): any;
+}

package/components/segmented-control/segment/segment.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,50 @@
+import { GdsElement } from '../../gds-element';
+import { GdsSegment } from './segment/segment';
+/**
+ * @element gds-segmented-control
+ * A segmented control is a group of 2-5 buttons that lets the user switch views or sort elements.
+ *
+ * @status beta
+ *
+ * @slot - Segments to display in the control
+ *
+ * @event changed - Fires when the selected segment is changed
+ */
+export declare class GdsSegmentedControl<ValueT = any> extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Minimum width of each segment. Used for calculating the number of visible
+     * segments that can fit based on the available space.
+     * @attr seg-min-width
+     */
+    segMinWidth: number;
+    /**
+     * Size of the segmented control
+     * @attr size
+     */
+    size: 'small' | 'medium';
+    /**
+     * The value of the currently selected segment. Setting this property will
+     * select the segment with the matching value.
+     * @attr value
+     */
+    get value(): ValueT | undefined;
+    set value(val: ValueT | undefined);
+    /**
+     * Returns the segments in the control
+     * @readonly
+     */
+    get segments(): GdsSegment<any>[];
+    private _tStyles?;
+    private _elSlot;
+    private _elIndicator;
+    private _elTrack;
+    private _elSegments;
+    private _showPrevButton;
+    private _showNextButton;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private _recalculateMinWidth;
+}

package/components/segmented-control/segmented-control.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/components/switch/switch.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class GdsSwitch extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    constructor();
+    private inputElement;
+    private exludeAttr;
+    private reflectAttributesToInput;
+    update(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+/**
+ * @element gds-tooltip
+ *
+ * @status beta
+ */
+export declare class GdsTooltip extends LitElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    open: boolean;
+    content: null;
+    position: null;
+    render(): import("lit").TemplateResult<1>;
+}

package/gds-element.d.ts

@@ -4,5 +4,6 @@ export declare class GdsElement extends LitElement {
      * The unscoped name of this element.
      */
     gdsElementName: string;
+    isUsingTransitionalStyles: boolean;
     connectedCallback(): void;
 }

package/generated/locales/sv.d.ts

@@ -30,6 +30,8 @@ export declare const templates: {
     sbc083a1dbee9af73: string;
     scb6b9cb49cf93277: string;
     sd898d99fd9c13de6: string;
+    sdc27791837e94961: string;
+    sdc42f1da42d6411a: string;
     se0955919920ee87d: string;
     se4129fd6b9d7b4c2: string;
     sf295af199c723ec8: string;

package/green-jest-config.cjs

@@ -0,0 +1,24 @@
+/**
+ * This config can be used when using jest for testing an application that directly or
+ * indirectly (through green-react or green-angular) use the Green Core web components.
+ *
+ * The config includes the following:
+ * - `transformIgnorePatterns` to ignore transforming certain Green and Lit files
+ * - `setupFilesAfterEnv` that mocks some browser APIs that are used by the web components
+ */
+
+module.exports = {
+  apply: (config) => {
+    config.transformIgnorePatterns = [
+      ...(config.transformIgnorePatterns || []),
+      'node_modules/(?!.*.mjs$|@sebgroup/green-react|@sebgroup/extract|@sebgroup/green-core|lit-element|lit-html|lit|@lit|@lit-labs/)',
+    ]
+
+    config.setupFilesAfterEnv = [
+      ...(config.setupFilesAfterEnv || []),
+      __dirname + '/setup-jest.js',
+    ]
+
+    return config
+  },
+}