@sebgroup/green-core 1.7.0 → 1.8.0

package/README.md

@@ -1,112 +1,75 @@
-# ![image](https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png) green
+<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>
 
-Green is an opinionated design system for building content and functionality for SEB. It builds on a set of principles and techniques aimed at maximizing code quality, code reuse, consistency and collaboration.
+<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
 
-## View
+If you are new to Green, checkout [@sebgroup/green-core](https://github.com/sebgroup/green/tree/main/libs/core).
 
-View the components in our [Storybook](https://sebgroup.github.io/green/latest/chlorophyll/)
+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/react)
 
-## Philosophy
+If you're trying to find something specific, here's a full list of packages that we support!
 
-Dream big! Start small! Learn fast!
+| 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
 
-### We only build what we need
+- [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)
 
-If no-one needs a component, we will not build it. If someone needs a component, we will build it. This means that some things in Design Library might not make it into Green. It all depends on what gets used.
+## 📚 Documentation
 
+Documentation currently resides in a few different locations:
 
-### Ease of use, not ease of build
+- [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/)
 
-The components of Green will be used more times than one. This puts a multiplier on the value of every hour spent improving ease of use.
+## 🏦 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.
 
-### Minimum possible flexibility, but _not_ less
+## 🎉 Contribute
 
-Flexibility means decisions must be made. This puts strain on every user of a system. Green goes the other way: Minimum flexibility, maximum clarity. If our users cannot do what they need, we solve that specific problem in a generalized way - no more, no less. Remember: The most flexible system possible is your terminal.
+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
 
-### We don't solve problems we do not have
+### Start Storybook locally
 
-If something _might_ be a performance problem, that is ok. If something _might_ give a to large payload, that is ok. When we suspect a problem, we measure it. If it _is_ a problem, we fix it. See [premature optimization](https://xkcd.com/1691/)
-
-
-### We work from right to left
-
-If something can be deployed, we deploy. Then, if a PR needs a review, we review. Then, and only then, if something can be built, we build. Flow is more important than speed.
-
-
-## The design process
-
-Green is tightly integrated with the design process. The design responsible are part of the team so that decisions can be made effectively and by those most suited.
-
-For the most part we follow the existing design. When changes have to be made for practical reasons, clarity, uniformity, accessibility or any other reason, the design responsible make the call and the change is integrated.
-
-This can, and will, lead to minor inconsistencies in different parts of our offering, especially as Green is not yet (even close to) at 100% adoption. This is fine. Far larger inconsistencies already exist in our current, digital ecosystem. We therefore prioritise the ability to keep moving forward and improve our customers' experience over delaying for the sake of consistency.
-
-In the long run, consistency will be achieved by automating the roll-out of changes, be they visual, functional or qualitative, to keep all parts of our offering on the latest version. When we go Green, we stay green.
-
-
-## Develop
-
-### Yarn
-
-This mono repo is based on `nx` and uses `yarn` instead of `npm`. If you are unused to yarn, see the following instructions:
-
-#### Install yarn
-
-```bash
-npm install yarn -g
-```
-Use the -g flag to install it globally on your computer.
-
-
-#### Install dependencies
-
-```bash
-yarn
-```
-
-#### Add a dependency to a workspace
-
-All projects use a common set of dependencies so if you want to add `leftpad` to the chlorophyll project, just run:
-
-```bash
-yarn add leftpad
-```
-
-#### Run a command in `package.json`
-
-Unlike `npm`, `yarn` doesn't require the `run` command. So if you want to run `lint` in your package or in the project root, simply type:
+To start Storybooks locally on your machine you run the following command:
 
 ```bash
-yarn lint
+npx nx run [PROJECT]:storybook
 ```
 
-### How to contribute?
-
-- Clone the project locally from GitHub - `git clone https://github.com/sebgroup/green.git`.
-- Create a new branch each time - `git checkout -b "DESCRIPTIVE NAME"`.
-- Commit with the Semantic everything inscructions underneath.
-- Pull the latest - `git pull`.
-- Push eveything - `git push`.
-- Make a pull request in GitHub - `https://github.com/sebgroup/green/compare`.
+Where you replace `[PROJECT]` with a folder name from `green\libs`.
 
-### Semantic everything
-
-All projects in Green use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to power [semantic releases](https://semantic-release.gitbook.io/semantic-release/). In order to simplify using this format, install:
-
-```bash
-npm install git-cz -g
-```
-
-To commit, just run `git-cz` in the terminal. Always try to add reference to an issue in the longer description with # and the issue number. Eg `#1337`. 
-
-### Start Storybook
-
-You start the common storybooks with these commands:
+So to start Storybook for each component library run:
 
 ```bash
 npx nx run chlorophyll:storybook
@@ -114,38 +77,14 @@ npx nx run react:storybook
 npx nx run angular:storybook
 ```
 
-Or the general `npx nx run [PROJECT]:storybook` where you replace `[PROJECT]` with a folder name from `green\libs`.
-
 If you install nx globally you can omit the npx above.
 
 ```bash
+# Install nx globally
 npm install nx -g
-```
 
-#### Build
-
-If you want to build the files to see how the output looks use `build-storybook`:
-
-```bash
-npx nx run chlorophyll:build-storybook
-npx nx run react:build-storybook
-npx nx run angular:build-storybook
+# And start the storybooks
+nx run chlorophyll:storybook
+nx run react:storybook
+nx run angular:storybook
 ```
-
-### On SEB Windows computer
-
-For the moment, `yarn` is difficult to use within the SEB environment, so instead you can install the dependencies using `npm`:
-
-```bash
-$ npm i --force
-```
-
-The `--force` flag is necessary in this case to convince `npm` that sub-dependency conflicts are OK.
-
-Don't commit the generated `package-lock.json` file, since we already have a `yarn.lock` file.
-
-If you need to add a new dependency, the `yarn.lock` file needs to be updated, and in that case you still need to use `yarn`. You can do this by temporarily disconnecting from the SEB network, or by using a non-SEB computer.
-
-## Git
-
-We reccommend using [GitHub Desktop](https://desktop.github.com/), as it will work smoothly with both on-prem GitHub and external GitHub without any manual configuration of proxies and certificates. Ask for help on Teams if you need assistance!

package/components/grouped-list/grouped-list.d.ts

@@ -0,0 +1,17 @@
+import { GdsElement } from '../../gds-element';
+import './list-item';
+/**
+ * @element gds-grouped-list
+ * @status beta
+ *
+ * Grouped lists are used to list many datapoints with labels in a structured way.
+ */
+export declare class GdsGroupedList extends GdsElement {
+    private _tStyles?;
+    /**
+     * The label for the list that will render in the shadowDOM as the first <li> element in the list with the class `gds-list-heading`
+     */
+    label: string;
+    connectedCallback(): void;
+    render(): any;
+}

package/components/grouped-list/grouped-list.trans.styles.d.ts

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

package/components/grouped-list/list-item.d.ts

@@ -0,0 +1,11 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-list-item
+ * @status beta
+ *
+ * Used with `gds-grouped-list` to create a list items.
+ */
+export declare class GdsListItem extends GdsElement {
+    connectedCallback(): void;
+    render(): any;
+}

package/components/index.d.ts

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

package/index.js

@@ -77,8 +77,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property10) => {
-        const key = property10;
+      watchedProperties.forEach((property11) => {
+        const key = property11;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -144,7 +144,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-16d025";
+var VER_SUFFIX = "-3d880b";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -2691,10 +2691,62 @@ __decorateClass([
 GdsDatepicker = __decorateClass([
   gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);
+
+// libs/core/src/components/grouped-list/grouped-list.ts
+import { state as state11, property as property10 } from "lit/decorators.js";
+import { when as when5 } from "lit/directives/when.js";
+
+// libs/core/src/components/grouped-list/list-item.ts
+var GdsListItem = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsListItem = __decorateClass([
+  gdsCustomElement("gds-list-item")
+], GdsListItem);
+
+// libs/core/src/components/grouped-list/grouped-list.ts
+var GdsGroupedList = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    constrainSlots(this);
+    TransitionalStyles.instance.apply(this, "gds-grouped-list");
+  }
+  render() {
+    return html`${this._tStyles}${when5(
+      this.label,
+      () => html`<div class="gds-list-heading" aria-hidden="true" id="label">
+            ${this.label}
+          </div>`
+    )}
+      <div role="list" aria-labelledby="label">
+        <slot gds-allow="gds-list-item"></slot>
+      </div>`;
+  }
+};
+__decorateClass([
+  state11()
+], GdsGroupedList.prototype, "_tStyles", 2);
+__decorateClass([
+  property10()
+], GdsGroupedList.prototype, "label", 2);
+GdsGroupedList = __decorateClass([
+  gdsCustomElement("gds-grouped-list")
+], GdsGroupedList);
 export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsGroupedList,
   GdsMenuHeading,
   GdsMenuItem,
   GdsOption,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/transitional-styles.js

@@ -21,6 +21,12 @@ var listbox_trans_styles_default = `/**
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+/** 
+  * @deprecated in favor of Grouped list component
+  */
+/** 
+  * @deprecated in favor of Grouped list component
+  */
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
@@ -3312,10 +3318,42 @@ function register6() {
   TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
 }
 
+// libs/core/src/components/grouped-list/grouped-list.trans.styles.scss
+var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  @layer _base, _overrides;
+  :host {
+    display: block;
+    list-style: none;
+  }
+  @layer _base {
+    .gds-list-heading {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      background-color: var(--gds-ref-pallet-base200, #e9e9e9);
+    }
+    ::slotted([gds-element=gds-list-item]) {
+      all: revert;
+      display: flex;
+      gap: 0.25rem;
+      justify-content: space-between;
+      padding: 1rem;
+      border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);
+    }
+  }
+  @layer _overrides {}
+}`;
+
+// libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
+function register7() {
+  TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
+}
+
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-16d025";
+var VER_SUFFIX = "-3d880b";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {
@@ -3352,6 +3390,7 @@ var registerTransitionalStyles = () => {
   register4();
   register5();
   register6();
+  register7();
 };
 function supportsConstructedStylesheets() {
   try {