Merge branch 'main' into docs/626-Spinner_Basic_Documentation

.changeset/dry-starfishes-suffer.md

@@ -0,0 +1,5 @@
+---
+"@sl-design-system/shared": patch
+---
+
+Fix missing events types

.gitignore

@@ -57,6 +57,10 @@ node_modules/
 
 # Dist files & folders
 dist
+packages/checklist/**/*.d.ts
+packages/checklist/**/*.d.ts.map
+packages/checklist/**/*.js
+packages/checklist/**/*.js.map
 packages/components/**/*.d.ts
 packages/components/**/*.d.ts.map
 packages/components/**/*.js

.storybook/main.ts

@@ -4,7 +4,7 @@ import { argv } from 'node:process';
 const devMode = !argv.includes('build');
 
 const config: StorybookConfig = {
- stories: ['../packages/components/**/*.stories.ts'],
+ stories: ['../packages/{checklist,components}/**/*.stories.ts'],
  addons: [
  '@storybook/addon-a11y',
  '@storybook/addon-actions',

package.json

@@ -9,6 +9,7 @@
  "workspaces": [
  "chromatic",
  "packages/angular",
+ "packages/checklist",
  "packages/components/*",
  "packages/locales",
  "packages/themes/*",
@@ -40,6 +41,7 @@
  "build": {
  "dependencies": [
  "build:cem",
+ "build:checklist",
  "build:components",
  "build:locales",
  "build:themes",
@@ -59,6 +61,21 @@
  "packages/components/*/custom-elements.json"
  ]
  },
+ "build:checklist": {
+ "command": "node scripts/build-packages.js checklist",
+ "clean": "if-file-deleted",
+ "dependencies": [
+ "build:scss"
+ ],
+ "files": [
+ "packages/checklist/**/*.ts",
+ "!packages/checklist/**/*.d.ts"
+ ],
+ "output": [
+ "packages/checklist/**/*.js",
+ "packages/checklist/**/*.js.map"
+ ]
+ },
  "build:components": {
  "command": "node scripts/build-packages.js components",
  "clean": "if-file-deleted",
@@ -120,10 +137,10 @@
  "command": "node scripts/build-scss.js",
  "clean": "if-file-deleted",
  "files": [
- "packages/components/**/*.scss"
+ "packages/{checklist,components}/**/*.scss"
  ],
  "output": [
- "packages/components/**/*.scss.ts"
+ "packages/{checklist,components}/**/*.scss.ts"
  ]
  },
  "build:themes": {
@@ -205,6 +222,10 @@
  "script": "build:cem",
  "cascade": false
  },
+ {
+ "script": "build:checklist",
+ "cascade": false
+ },
  {
  "script": "build:components",
  "cascade": false

packages/checklist/eslint.config.mjs

@@ -0,0 +1,23 @@
+import config from '../../eslint.config.mjs';
+
+/**
+ * NOTE: All paths are relative to where eslint is run from,
+ * in our case the root of the monorepo.
+ */
+export default [
+ {
+ ignores: [
+ 'packages/checklist/**/*.js',
+ 'packages/checklist/**/*.d.ts',
+ 'packages/checklist/**/*.scss.ts'
+ ]
+ },
+ ...config,
+ {
+ languageOptions: {
+ parserOptions: {
+ project: 'packages/checklist/tsconfig.json'
+ }
+ }
+ }
+];

packages/checklist/index.ts

@@ -0,0 +1 @@
+export * from './src/checklist.js';

packages/checklist/package.json

@@ -0,0 +1,43 @@
+{
+ "name": "@sl-design-system/checklist",
+ "version": "0.0.0",
+ "description": "Checklist component if the SL Design System is successfully installed",
+ "license": "Apache-2.0",
+ "publishConfig": {
+ "registry": "https://npm.pkg.github.com"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/sl-design-system/components.git",
+ "directory": "packages/checklist"
+ },
+ "homepage": "https://sanomalearning.design/getting-started/developers/",
+ "bugs": {
+ "url": "https://github.com/sl-design-system/components/issues"
+ },
+ "type": "module",
+ "main": "./index.js",
+ "module": "./index.js",
+ "types": "./index.d.ts",
+ "customElements": "custom-elements.json",
+ "exports": {
+ ".": "./index.js",
+ "./package.json": "./package.json"
+ },
+ "files": [
+ "**/*.d.ts",
+ "**/*.js",
+ "**/*.js.map",
+ "custom-elements.json"
+ ],
+ "sideEffects": true,
+ "scripts": {
+ "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+ },
+ "dependencies": {
+ "@fortawesome/pro-solid-svg-icons": "^6.1.5",
+ "@open-wc/scoped-elements": "^3.0.5",
+ "@sl-design-system/icon": "0.0.9",
+ "lit": "^3.1.2"
+ }
+}

packages/checklist/src/checklist.scss

@@ -0,0 +1,96 @@
+:host {
+ --_background: var(--sl-color-slds-checklist-background);
+ --_border-radius: var(--sl-border-radius-slds-checklist);
+ --_border: var(--sl-border-width-slds-checklist) solid var(--sl-color-slds-checklist-border);
+ --_box-shadow: var(--sl-box-shadow-slds-checklist);
+ --_color: var(--sl-color-slds-checklist-foreground);
+ --_correct-color: var(--sl-color-slds-checklist-icon-success);
+ --_divider-color: var(--sl-color-slds-checklist-divider);
+ --_header-font: var(--sl-text-slds-checklist-heading);
+ --_incorrect-color: var(--sl-color-slds-checklist-icon-danger);
+ --_link-color: var(--sl-color-slds-checklist-link-idle);
+ --_link-hover-color: var(--sl-color-slds-checklist-link-hover);
+ --_link-active-color: var(--sl-color-slds-checklist-link-active);
+ --_padding: var(--sl-space-2xl);
+ --_paragraph-font: var(--sl-text-slds-checklist-body);
+ --_summary-font: var(--sl-text-slds-checklist-listitem);
+
+ background: var(--_background);
+ border: var(--_border);
+ border-radius: var(--_border-radius);
+ box-shadow: var(--_box-shadow);
+ color: var(--_color);
+ display: inline-flex;
+ flex-direction: column;
+ margin: 1rem;
+ max-inline-size: min(80vw, 500px);
+ padding: var(--_padding);
+}
+
+h1 {
+ font: var(--_header-font);
+ margin: 0;
+}
+
+p {
+ font: var(--_paragraph-font);
+ margin-block: 1rem;
+}
+
+details {
+ border-block-end: 1px solid var(--_divider-color);
+ margin-block-start: 0.75rem;
+ padding-block-end: 0.75rem;
+
+ &[open] {
+ --_icon-color: var(--_incorrect-color);
+ }
+
+ &:last-of-type {
+ margin-block-end: 1rem;
+ }
+
+ p {
+ margin-block: 0.5rem;
+ padding-inline-start: 2.5rem;
+ }
+}
+
+summary {
+ align-items: center;
+ display: flex;
+ font: var(--_summary-font);
+ gap: 1rem;
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
+
+sl-icon {
+ color: var(--_icon-color, var(--_correct-color));
+}
+
+code {
+ font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+ 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+ font-size: 0.9em;
+ font-weight: bolder;
+}
+
+a {
+ color: var(--_link-color);
+
+ &:visited {
+ color: var(--_link-color);
+ }
+
+ &:hover {
+ color: var(--_link-hover-color);
+ text-decoration: underline;
+ }
+
+ &:active {
+ color: var(--_link-active-color);
+ }
+}

packages/checklist/src/checklist.stories.ts

@@ -0,0 +1,15 @@
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import '../index.js';
+
+type Story = StoryObj;
+
+export default {
+ title: 'Checklist',
+ parameters: {
+ layout: 'centered'
+ },
+ render: () => html`<slds-checklist></slds-checklist>`
+} satisfies Meta;
+
+export const Basic: Story = {};