@sebgroup/green-core 1.10.0 → 1.12.0

package/README.md

@@ -1,33 +1,90 @@
-<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>
+<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>
 
-## Install
+<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>
 
-```bash
-yarn install @sebgroup/green-core
+## Getting started
 
-# or use npm
-npm install @sebgroup/green-core
-```
+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
 
-## Use
+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.
 
-```js
-import { GdsButton } from '@sebgroup/green-core'
-import { transitionalStyles } from '@sebgroup/green-core/transitional-styles'
+## 🎉 Contribute
 
-//register transitional styles to get SEB's current visual design
-transitionalStyles()
+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:
+
+```bash
+npx nx run [PROJECT]:storybook
 ```
 
-```html
-<!-- Then use the component in your html -->
-<gds-button>Click me</gds-button>
+Where you replace `[PROJECT]` with a folder name from `green\libs`.
+
+So to start Storybook for each component library run:
+
+```bash
+npx nx run chlorophyll:storybook
+npx nx run react:storybook
+npx nx run angular:storybook
 ```
 
-## Documentation
+If you install nx globally you can omit the npx above.
 
-Check out the [Storybook (@sebgroup/core)](https://sebgroup.github.io/green/latest/core/) for components and documentation.
+```bash
+# Install nx globally
+npm install nx -g
+
+# And start the storybooks
+nx run chlorophyll:storybook
+nx run react:storybook
+nx run angular:storybook
+```

package/components/context-menu/context-menu.d.ts

@@ -16,6 +16,7 @@ import '../../primitives/menu/menu';
  */
 export declare class GdsContextMenu extends GdsElement {
     #private;
+    static styles: import("lit").CSSResult[];
     static shadowRootOptions: ShadowRootInit;
     /**
      * Whether the context menu popover is open.

package/components/context-menu/context-menu.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/grid/grid.d.ts

@@ -0,0 +1,99 @@
+import { CSSResult, LitElement } from 'lit';
+declare type GridSizes = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+/**
+ * @element gds-grid
+ * The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute.
+ *
+ * @status beta
+ *
+ */
+export declare class GdsGrid extends LitElement {
+    static styles: (CSSResult | CSSResult[])[];
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * @property {string} columns - The number of columns for the grid. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the number of columns for that device type respectively.
+     * @example
+     * ```html
+     * <gds-grid columns="2"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid columns="l:8 m:4 s:2"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    columns?: string | undefined;
+    /**
+     * @property {string} `gap` - Defines the gap size between grid items. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid gap="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid gap="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    gap?: GridSizes;
+    /**
+     * @property {string} `row-gap` - Defines the gap size between grid items in vertical axis. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid row-gap="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid row-gap="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    rowGap?: GridSizes;
+    /**
+     * @property {string} padding - Defines the padding size around the grid. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid padding="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid padding="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    padding?: GridSizes;
+    /**
+     * @property {string} auto-columns - Defines the minimum column width in pixels. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. If set, the grid adjusts column size based on content and available width, even without other attributes.
+     * @example
+     * ```html
+     * <gds-grid auto-columns="200"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid auto-columns="l:200 m:100 s:80"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    autoColumns?: GridSizes;
+    /**
+     * Lifecycle method called when the element is connected to the DOM.
+     * It updates the column, gap, and padding variables.
+     */
+    connectedCallback(): void;
+    /**
+     * State variable that holds the CSS variables for column, gap, and padding.
+     */
+    private _gridVariables;
+    /**
+     * Watcher for the 'columns' property.
+     * It updates the column CSS variables when the 'columns' property changes.
+     */
+    private _updateColumnVariables;
+    /**
+     * Watcher for the 'gap' property.
+     * It updates the gap CSS variables when the 'gap' property changes.
+     */
+    private _updateGapVariables;
+    /**
+     * Watcher for the 'row-gap' property.
+     * It updates the row-gap CSS variables when the 'row-gap' property changes.
+     */
+    private _updateRowGapVariables;
+    /**
+     * Watcher for the 'padding' property.
+     * It updates the padding CSS variables when the 'padding' property changes.
+     */
+    private _updatePaddingVariables;
+    /**
+     * Watcher for the 'autoColumns' property.
+     * It updates the min-width for each column on a "--_col-width" variable.
+     */
+    private _updateAutoColumnsVariables;
+    /**
+     * Watcher for the '_gridVariables' property.
+     * It updates the CSS stylesheet when the '_gridVariables' property changes.
+     */
+    private _updateGridCss;
+    render(): any;
+}
+export {};

package/components/grid/grid.style.css.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/index.d.ts

@@ -4,4 +4,5 @@ export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';
+export * from './grid/grid';
 export * from './grouped-list/grouped-list';