npm - @sebgroup/green-core - Versions diffs - 1.9.1 → 1.10.0 - Mend

@sebgroup/green-core 1.9.1 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 = "-260c87";
+var VER_SUFFIX = "-4c1087";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -1315,7 +1315,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       this._handleValueChange();
       return;
     }
-    if (!this.value) {
+    if (this.value === void 0) {
       if (this.placeholder)
         this.value = this.placeholder.value;
       else
@@ -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 CHANGED Viewed

@@ -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.1",
+  "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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -662,6 +662,7 @@ button[type=button]:where(:not(.primary,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true] {
+  background: var(--sg-form-control-bg-disabled) !important;
   color: var(--text-disabled-color) !important;
   border-color: var(--border-disabled-color) !important;
   cursor: not-allowed;
@@ -1000,6 +1001,7 @@ button.tertiary[aria-disabled=true],
 a.button.tertiary:disabled,
 a.button.tertiary.disabled,
 a.button.tertiary[aria-disabled=true] {
+  background: var(--sg-form-control-bg-disabled) !important;
   color: var(--text-disabled-color) !important;
   border-color: var(--border-disabled-color) !important;
   cursor: not-allowed;
@@ -2577,6 +2579,7 @@ var dropdown_trans_styles_default = `/**
     border-color: rgb(0, 122, 199);
   }
   button:disabled, button.disabled, button[aria-disabled=true] {
+    background: var(--sg-form-control-bg-disabled) !important;
     color: var(--text-disabled-color) !important;
     border-color: var(--border-disabled-color) !important;
     cursor: not-allowed;
@@ -2697,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;
@@ -3032,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;
@@ -3355,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 = "-260c87";
+var VER_SUFFIX = "-4c1087";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {