@sebgroup/green-core 1.9.2 → 1.10.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/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
+  },
+}

package/index.js

@@ -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 = "-2d68d7";
+var VER_SUFFIX = "-4c1087";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -2318,9 +2318,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
      * The spinner state keeps track of the spinner values regardless of wheter a complete date has been enter yet.
      */
     __privateAdd(this, _spinnerState, {
-      year: "yyyy",
-      month: "mm",
-      day: "dd"
+      year: "YYYY",
+      month: "MM",
+      day: "DD"
     });
   }
   get dateformat() {
@@ -2525,9 +2525,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
   _handleValueChange() {
     if (!this.value) {
       __privateSet(this, _spinnerState, {
-        year: "yyyy",
-        month: "mm",
-        day: "dd"
+        year: "YYYY",
+        month: "MM",
+        day: "DD"
       });
       return;
     }

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.9.2",
+  "version": "1.10.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -40,6 +40,9 @@
     "./localization": {
       "types": "./localization.d.ts",
       "default": "./localization.js"
+    },
+    "./jest-config": {
+      "default": "./green-jest-config.cjs"
     }
   }
 }

package/setup-jest.js

@@ -0,0 +1,34 @@
+global.CSSStyleSheet = function () {}
+global.CSSStyleSheet.prototype.replaceSync = (k) => false
+
+global.HTMLElement.prototype.attachInternals = () => {
+  return new global.ElementInternals()
+}
+
+global.ElementInternals = function () {}
+global.ElementInternals.prototype.setValidity = () => {}
+global.ElementInternals.prototype.setFormValue = () => {}
+
+window.matchMedia = () => {
+  return {
+    matches: false,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+}
+
+global.HTMLElement.prototype.close = () => {}
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})

package/transitional-styles.js

@@ -2700,6 +2700,10 @@ i.sg-icon.sg-icon-ellipsis::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
 }
+i.sg-icon.sg-icon-grip-vertical::before {
+  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+}
 i.sg-icon.sg-icon-next::before {
   background: none;
   border-bottom: 2px solid;
@@ -3035,6 +3039,10 @@ i.sg-icon.sg-icon-ellipsis::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
 }
+i.sg-icon.sg-icon-grip-vertical::before {
+  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+}
 i.sg-icon.sg-icon-next::before {
   background: none;
   border-bottom: 2px solid;
@@ -3358,7 +3366,7 @@ function register7() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-2d68d7";
+var VER_SUFFIX = "-4c1087";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {