@internetstiftelsen/styleguide 5.0.16 → 5.0.18-beta.0.1

package/package.json

@@ -1,99 +1,80 @@
 {
-	"name": "@internetstiftelsen/styleguide",
-	"version": "5.0.16",
-	"main": "dist/components.js",
-	"ports": {
-		"fractal": "3000"
-	},
-	"scripts": {
-		"start": "npm run dev --trace-deprecation",
-		"start:fractal": "fractal start -s",
-		"build:fractal": "fractal build",
-		"scss": "sass src/app.scss public/assets/css/app.css",
-		"stylelint": "stylelint 'src/**/*.scss' '!**/vendor/**' '!**/colors/_colors-functions.scss' --fix --cache --cache-location '.stylelintcache'",
-		"cssmin": "postcss --use cssnano -b '' public/assets/css/app.css > public/assets/css/app.min.css",
-		"browserify": "browserify public/assets/js/cjs/app.js -o public/assets/js/scripts.js",
-		"babel": "npx babel src --out-dir public/assets/js/cjs --ignore src/**/*.config.js",
-		"eslint": "eslint --fix src",
-		"uglify": "uglifyjs -o public/assets/js/scripts.js public/assets/js/scripts.js",
-		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
-		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
-		"build:js": "npm run eslint && npm run babel && npm run browserify",
-		"build:js:replace:string": "replace \"require('./components');\" \"//require('./components');\" src/ -r --include=\"app.js\"",
-		"build:img": "npm run imagemin",
-		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
-		"watch:js": "onchange 'src/**/*.js' -- npm run build:js",
-		"watch:icons": "onchange 'src/atoms/icon/*.svg' -- npm run create-icons-config",
-		"watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" \"npm:watch:icons\"",
-		"copy:images": "copyfiles -f src/assets/images/* public/assets/images",
-		"copy:videos": "copyfiles -f src/assets/video/* public/assets/video",
-		"copy:fonts": "copyfiles -f src/base/fonts/* public/assets/fonts",
-		"copy:zip": "copyfiles -f src/assets/zip/* public/assets/zip",
-		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:videos && npm run copy:zip",
-		"copy:images:build": "copyfiles -f src/assets/images/* build/assets/images",
-		"copy:videos:build": "copyfiles -f src/assets/video/* build/assets/video",
-		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
-		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
-		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
-		"build": "npm run build:css && npm run build:js:replace:string && npm run build:js && npm run uglify && npm run package-js && npm run build:fractal && npm run copy:build && npm run create-icons-config",
-		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
-		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
-		"create-icons-config": "node ./createIconsJson"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.26.0",
-		"@babel/eslint-parser": "^7.25.9",
-		"@eslint/eslintrc": "^3.1.0",
-		"@eslint/js": "^9.14.0",
-		"@frctl/fractal": "^1.5.15",
-		"@frctl/mandelbrot": "^1.10.3",
-		"@internetstiftelsen/eslint-config": "^4.0.3",
-		"@internetstiftelsen/stylelint-config": "^3.0.0",
-		"babel-cli": "^6.26.0",
-		"babel-eslint": "^10.1.0",
-		"babel-plugin-syntax-dynamic-import": "^6.18.0",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"babel-plugin-transform-custom-element-classes": "^0.1.0",
-		"babel-plugin-transform-es2015-classes": "^6.24.1",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.7.0",
-		"browserify": "^17.0.1",
-		"concat": "^1.0.3",
-		"concurrently": "^9.0.1",
-		"copyfiles": "^2.4.1",
-		"css-loader": "^7.1.2",
-		"cssnano": "^7.0.6",
-		"eslint": "^9.14.0",
-		"globals": "^15.12.0",
-		"imagemin-cli": "^8.0.0",
-		"onchange": "^7.1.0",
-		"postcss-class-prefix": "^0.3.0",
-		"postcss-cli": "^11.0.0",
-		"replace": "^1.2.2",
-		"sass": "^1.80.3",
-		"stylelint": "^16.10.0",
-		"uglify-es": "^3.3.9"
-	},
-	"dependencies": {
-		"@tiptap/core": "^2.9.0",
-		"@tiptap/extension-bold": "^2.9.0",
-		"@tiptap/extension-bullet-list": "^2.9.0",
-		"@tiptap/extension-document": "^2.9.0",
-		"@tiptap/extension-dropcursor": "^2.9.0",
-		"@tiptap/extension-history": "^2.9.0",
-		"@tiptap/extension-italic": "^2.9.0",
-		"@tiptap/extension-link": "^2.9.0",
-		"@tiptap/extension-list-item": "^2.9.0",
-		"@tiptap/extension-paragraph": "^2.9.0",
-		"@tiptap/extension-text": "^2.9.0",
-		"a11y-toggle": "^2.1.0",
-		"focus-trap": "^6.7.3",
-		"glider-js": "^1.7.7",
-		"lodash": "^4.17.21",
-		"smooth-scroll": "^16.1.3",
-		"van11y-accessible-accordion-aria": "^3.0.1"
-	},
-	"fractal": {
-		"main": "fractal.config.js"
-	}
+    "name": "@internetstiftelsen/styleguide",
+    "version": "5.0.18-beta.0.1",
+    "main": "dist/components.js",
+    "ports": {
+        "fractal": "3000"
+    },
+    "scripts": {
+        "start": "npm run dev --trace-deprecation",
+        "start:fractal": "fractal start -s",
+        "build:fractal": "fractal build",
+        "stylelint": "stylelint 'src/**/*.scss' '!**/vendor/**' '!**/colors/_colors-functions.scss' --fix --cache --cache-location '.stylelintcache'",
+        "eslint": "eslint --fix src",
+        "imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
+        "build:img": "npm run imagemin",
+        "watch:icons": "onchange 'src/atoms/icon/*.svg' -- npm run create-icons-config",
+        "watch": "concurrently \"npm:vite:dev\" \"npm:watch:icons\"",
+        "copy:images": "copyfiles -f src/assets/images/* public/assets/images",
+        "copy:videos": "copyfiles -f src/assets/video/* public/assets/video",
+        "copy:fonts": "copyfiles -f src/base/fonts/* public/assets/fonts",
+        "copy:zip": "copyfiles -f src/assets/zip/* public/assets/zip",
+        "copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:videos && npm run copy:zip",
+        "copy:images:build": "copyfiles -f src/assets/images/* build/assets/images",
+        "copy:videos:build": "copyfiles -f src/assets/video/* build/assets/video",
+        "copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
+        "copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
+        "copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
+        "build": "npm run vite:build && npm run package-js && npm run build:fractal && npm run copy:build && npm run create-icons-config",
+        "dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
+        "package-js": "NODE_ENV=production swc src --out-dir dist --ignore \"**/*.config.js\",\"app.js\" --strip-leading-paths",
+        "create-icons-config": "node ./createIconsJson",
+        "vite:dev": "vite dev",
+        "vite:build": "vite build"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "^9.14.0",
+        "@frctl/fractal": "^1.5.15",
+        "@frctl/mandelbrot": "^1.10.3",
+        "@internetstiftelsen/eslint-config": "^4.0.3",
+        "@internetstiftelsen/stylelint-config": "^3.0.0",
+        "@swc/cli": "^0.7.5",
+        "@swc/core": "^1.11.24",
+        "concurrently": "^9.0.1",
+        "copyfiles": "^2.4.1",
+        "eslint": "^9.14.0",
+        "globals": "^15.12.0",
+        "imagemin-cli": "^8.0.0",
+        "lightningcss": "^1.29.3",
+        "onchange": "^7.1.0",
+        "prettier": "3.5.3",
+        "sass": "^1.80.3",
+        "stylelint": "^16.10.0",
+        "vite": "^6.3.5"
+    },
+    "dependencies": {
+        "@tiptap/core": "^2.9.0",
+        "@tiptap/extension-bold": "^2.9.0",
+        "@tiptap/extension-bullet-list": "^2.9.0",
+        "@tiptap/extension-ordered-list": "^2.9.0",
+        "@tiptap/extension-heading": "^2.9.0",
+        "@tiptap/extension-document": "^2.9.0",
+        "@tiptap/extension-dropcursor": "^2.9.0",
+        "@tiptap/extension-history": "^2.9.0",
+        "@tiptap/extension-italic": "^2.9.0",
+        "@tiptap/extension-link": "^2.9.0",
+        "@tiptap/extension-list-item": "^2.9.0",
+        "@tiptap/extension-paragraph": "^2.9.0",
+        "@tiptap/extension-text": "^2.9.0",
+        "a11y-toggle": "^2.1.0",
+        "focus-trap": "^6.7.3",
+        "glider-js": "^1.7.7",
+        "lodash": "^4.17.21",
+        "smooth-scroll": "^16.1.3",
+        "van11y-accessible-accordion-aria": "^3.0.1"
+    },
+    "fractal": {
+        "main": "fractal.config.js"
+    }
 }

package/src/app.js

@@ -1,12 +1,12 @@
+import './app.scss';
 import 'a11y-toggle';
 import './focusTrap';
 import './assets/js/conditional';
 
-require('./atoms/grid-toggle/grid-toggle');
-require('./components');
-
-const Button = require('./atoms/button/Button');
-const { open } = require('./molecules/modal/modal');
+import './atoms/grid-toggle/grid-toggle';
+import './components';
+import Button from './atoms/button/Button';
+import { open} from './molecules/modal/modal';
 
 const demoButtons = document.querySelectorAll('button.a-button.has-loader');
 

package/src/assets/js/anchorScroll.js

@@ -7,4 +7,4 @@ const anchorScroll = new SmoothScroll('a[href*="#"]', {
 	ignore: '[data-scroll-ignore]',
 });
 
-module.exports = anchorScroll;
+export default anchorScroll;

package/src/assets/js/offset.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	// Get top of element relative to window
 	offsetTop(el) {
 		const rect = el.getBoundingClientRect();

package/src/atoms/button/Button.js

@@ -38,4 +38,4 @@ class Button {
 	}
 }
 
-module.exports = Button;
+export default Button;

package/src/atoms/icon/heading-3.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
+	<g>
+		<path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
+		<path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
+	</g>
+	<rect style="fill:none;" width="17" height="15"/>
+</svg>

package/src/atoms/icon/richtext-heading-2.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
+	<g>
+		<path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
+		<path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
+	</g>
+	<rect style="fill:none;" width="17" height="15"/>
+</svg>

package/src/atoms/icon/richtext-ordered-list.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.02 18">
+  <path d="M5.52,2.5h12v2.09H5.52v-2.09ZM5.52,7.95h12v2.09H5.52v-2.09ZM5.52,13.41h12v2.09H5.52v-2.09Z"/>
+  <rect style="fill:none;" x=".02" width="18" height="18"/>
+  <path d="M1.32,2.67H.28v-.58h.63c.14,0,.25-.03.31-.09.07-.06.1-.16.1-.31v-.24h.73v4.09h-.73v-2.88Z"/>
+  <path d="M.31,10.39c.33-.23.61-.45.85-.65s.45-.43.63-.69c.19-.26.28-.52.28-.78,0-.19-.05-.34-.15-.45-.1-.11-.24-.17-.44-.17-.22,0-.39.08-.5.24-.11.16-.17.36-.18.6l-.72-.06c0-.25.06-.49.17-.72.11-.23.27-.41.49-.55s.47-.21.76-.21c.25,0,.47.05.66.16.19.11.35.26.46.46.11.2.16.43.16.68,0,.41-.14.8-.41,1.17s-.65.7-1.12.98h1.69v.68H.13v-.55l.18-.13Z"/>
+  <path d="M.73,16.49c-.23-.11-.41-.27-.54-.47-.13-.2-.19-.44-.19-.71l.72-.04c0,.14.03.26.1.37s.16.19.29.24c.12.06.27.09.43.09.24,0,.43-.05.57-.16s.2-.26.2-.45c0-.21-.08-.36-.25-.45-.17-.09-.42-.14-.75-.14v-.57c.24,0,.43-.04.56-.13.14-.08.2-.22.2-.4,0-.15-.05-.27-.15-.36-.1-.09-.24-.13-.41-.13-.19,0-.34.05-.45.15-.11.1-.17.24-.17.41l-.72-.05c0-.23.06-.44.17-.63.12-.19.28-.33.49-.43.21-.1.44-.16.7-.16.25,0,.47.05.66.14.19.09.34.23.45.39.11.17.16.36.16.58,0,.18-.05.34-.14.48s-.22.24-.38.32c.23.08.41.2.55.36s.2.37.2.61c0,.26-.06.48-.19.68-.13.2-.31.35-.54.46-.23.11-.49.16-.79.16s-.57-.06-.8-.17Z"/>
+</svg>

package/src/atoms/icon/sprite.svg

@@ -296,10 +296,30 @@
 			<path d="M18.312 13.274h2.49a9.319 9.319 0 0 1-2.593 6.534 10.434 10.434 0 0 1-6.257 3.353V28h-2.9v-4.839a10.445 10.445 0 0 1-6.257-3.353 9.315 9.315 0 0 1-2.597-6.534h2.49c-.054 2.04.793 4 2.316 5.358a7.89 7.89 0 0 0 5.5 2.109 7.89 7.89 0 0 0 5.5-2.109 6.932 6.932 0 0 0 2.316-5.358h-.008zm-7.813 4.425a4.488 4.488 0 0 1-4.425-4.425V4.425a4.248 4.248 0 0 1 1.314-3.111 4.34 4.34 0 0 1 6.221 0 4.255 4.255 0 0 1 1.314 3.111v8.85a4.488 4.488 0 0 1-4.425 4.425l.001-.001z"/>
 		</symbol>
 
+		<symbol id="icon-richtext-heading-2" viewbox="0 0 17 15">
+			<g>
+				<path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
+				<path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
+			</g>
+			<rect style="fill:none;" width="17" height="15"/>
+		</symbol>
+
+		<symbol id="icon-richtext-heading-3" viewbox="0 0 17 15">
+			<g>
+				<path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
+				<path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
+			</g>
+			<rect style="fill:none;" width="17" height="15"/>
+		</symbol>
+
 		<symbol id="icon-richtext-bold" viewbox="0 0 10 14">
 			<path d="M.55 13.209h4.844c2.109 0 4.056-1.292 4.056-3.6a3.45 3.45 0 0 0-2-3.041A2.797 2.797 0 0 0 8.83 4.14C8.83 1.653 6.747.791 4.857.791H.55v12.418zm2.232-7.418V2.803h2.111c1.063 0 1.89.492 1.89 1.459 0 1.222-.844 1.529-1.714 1.529H2.782zm0 5.291V7.716h2.559A1.734 1.734 0 0 1 7.25 9.359c0 1.169-.67 1.723-1.821 1.723H2.782z"/>
 		</symbol>
 
+		<symbol id="icon-richtext-italic" viewbox="0 0 10 14">
+			<path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
+		</symbol>
+
 		<symbol id="icon-richtext-bullet-list" viewbox="0 0 17 15">
 			<circle cx="1.86" cy="2.291" r="1.86"/>
 			<circle cx="1.86" cy="7.5" r="1.86"/>
@@ -307,8 +327,11 @@
 			<path d="M6.07 1.291H17v2H6.07zM6.07 6.5H17v2H6.07zM6.07 11.709H17v2H6.07z"/>
 		</symbol>
 
-		<symbol id="icon-richtext-italic" viewbox="0 0 10 14">
-			<path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
+		<symbol id="icon-richtext-ordered-list" viewbox="0 0 17 15">
+			<path d="M5.55.75h10.93v2H5.55V.75ZM5.55,5.96h10.93v2H5.55v-2ZM5.55,11.17h10.93v2H5.55v-2Z"/>
+			<path d="M1.22,1.13H.34v-.6h.49c.13,0,.23-.03.29-.09.06-.06.1-.15.1-.29v-.16h.75v3.48h-.75V1.13Z"/>
+			<path d="M.18,7.89c.27-.18.5-.36.71-.53.21-.17.39-.36.56-.58s.25-.44.25-.65c0-.13-.03-.24-.1-.32s-.16-.12-.3-.12c-.29,0-.45.21-.48.63l-.74-.06c0-.21.05-.42.15-.62.1-.2.24-.37.43-.49s.41-.19.67-.19c.22,0,.41.05.58.14.17.09.3.23.4.4s.15.37.15.6c0,.32-.09.63-.28.92-.19.29-.46.54-.81.76h1.23v.7H.11v-.55s.05-.04.07-.05Z"/>
+			<path d="M.64,13.72c-.2-.1-.36-.24-.47-.42-.11-.18-.17-.39-.17-.62l.75-.04c0,.1.02.19.07.27.05.08.12.14.21.18.09.04.2.06.32.06.18,0,.31-.04.41-.11s.15-.18.15-.32c0-.15-.06-.25-.18-.32s-.31-.1-.57-.1v-.59c.18,0,.31-.03.4-.09.09-.06.14-.15.14-.28,0-.11-.03-.19-.1-.25-.07-.06-.16-.09-.28-.09-.14,0-.24.04-.32.11-.08.07-.12.17-.12.29l-.75-.05c0-.2.05-.39.15-.55.1-.16.25-.29.43-.38.18-.09.39-.14.62-.14.21,0,.41.04.57.12.17.08.3.2.39.34s.14.32.14.51c0,.14-.03.27-.09.38-.06.11-.14.21-.25.28.17.07.31.18.4.32.09.14.14.3.14.49,0,.22-.06.42-.17.6-.11.17-.27.31-.47.4-.2.1-.43.14-.7.14s-.5-.05-.7-.15Z"/>
 		</symbol>
 
 		<symbol id="icon-streaming" viewbox="0 0 28 20">

package/src/atoms/textarea/rich-text.js

@@ -3,6 +3,8 @@ import Document from '@tiptap/extension-document';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import BulletList from '@tiptap/extension-bullet-list';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Heading from '@tiptap/extension-heading'
 import ListItem from '@tiptap/extension-list-item';
 import Bold from '@tiptap/extension-bold';
 import Italic from '@tiptap/extension-italic';
@@ -23,6 +25,26 @@ function kebabToPascal(str) {
 	return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
 }
 
+function insertHeading(button, editor) {
+
+	const levelAttr = button.dataset.richTextControl;
+
+	const level = parseInt(levelAttr.replace('heading-', ''), 10);
+
+	editor.commands.toggleHeading({ level });
+
+	const toolbar = button.parentElement; // The toolbar div
+	const headingButtons = toolbar.querySelectorAll('button[data-rich-text-control^="heading-"]');
+
+	headingButtons.forEach(btn => {
+		btn.classList.remove('is-active');
+	});
+
+	if (editor.isActive('heading', { level })) {
+		button.classList.add('is-active');
+	}
+}
+
 function insertLink(el, editor) {
 	const addLink = (e, modal, close) => {
 		e.preventDefault();
@@ -97,6 +119,8 @@ function createToolbarButton(el, control, editor) {
 
 		if (control === 'link') {
 			insertLink(el, editor);
+		} else if(control === 'heading-2' || control === 'heading-3') {
+			insertHeading(button, editor);
 		} else {
 			const method = `toggle${kebabToPascal(control)}`;
 
@@ -108,17 +132,33 @@ function createToolbarButton(el, control, editor) {
 }
 
 function toogleButtonState(editor, el) {
-	[].forEach.call(el.parentNode.querySelectorAll('[data-rich-text-control]'), (control) => {
-		if (editor.isActive(control.value)) {
-			control.classList.add('is-active');
+	const buttons = el.parentNode.querySelectorAll('[data-rich-text-control]');
+
+	buttons.forEach((button) => {
+		const control = button.getAttribute('data-rich-text-control');
+		const value = kebabToCamel(control);
+
+		// 🧠 Handle heading separately
+		if (control === 'heading-2' || control === 'heading-3') {
+			const level = parseInt(control.replace('heading-', ''), 10);
+			if (editor.isActive('heading', { level })) {
+				button.classList.add('is-active');
+			} else {
+				button.classList.remove('is-active');
+			}
+			return;
+		}
+
+		// 🔠 Handle all others like bold, italic, bullet-list, etc.
+		if (editor.isActive(value)) {
+			button.classList.add('is-active');
 		} else {
-			control.classList.remove('is-active');
+			button.classList.remove('is-active');
 		}
 
-		if (control.value === 'link' && editor.view.state.selection.empty) {
-			control.disabled = true;
-		} else if (control.value === 'link') {
-			control.disabled = false;
+		// 🔗 Special logic for link
+		if (value === 'link') {
+			button.disabled = editor.view.state.selection.empty;
 		}
 	});
 }
@@ -130,7 +170,7 @@ function createToolbar(el, editor) {
 
 	el.parentNode.insertBefore(toolbar, el);
 
-	['bold', 'italic', 'link', 'bullet-list'].forEach((control) => {
+	['heading-2', 'heading-3', 'bold', 'italic', 'link', 'bullet-list', 'ordered-list'].forEach((control) => {
 		createToolbarButton(toolbar, control, editor);
 	});
 }
@@ -153,6 +193,10 @@ export function setupTextArea(el, onChange = () => {}) {
 			Text,
 			ListItem,
 			BulletList,
+			OrderedList,
+			Heading.configure({
+				levels: [2, 3],
+			}),
 			Bold,
 			Italic,
 			Link.configure({

package/src/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
+[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]

package/src/configurations/typography/_typography.scss

@@ -137,15 +137,6 @@ dl {
 	);
 }
 
-ul,
-ol,
-dl {
-	+ h2,
-	+ .beta {
-		margin-top: func.rhythm(5);
-	}
-}
-
 .small,
 small {
 	@include plumber.plumber(

package/src/molecules/glider/glider-course.js

@@ -61,6 +61,4 @@ if (gliderElementCourse) {
 			});
 		});
 	}
-
-	module.exports = GliderCourse;
 }

package/src/molecules/glider/glider.js

@@ -6,7 +6,8 @@ if (gliderWrappers) {
 	[].forEach.call(gliderWrappers, (gliderWrapper) => {
 		const gliderElement = gliderWrapper.querySelector('.js-glider');
 		const dots = gliderWrapper.classList.toString();
-		const glider = new Glider(gliderElement, {
+
+		gliderElement.glider = new Glider(gliderElement, {
 			scrollLock: true,
 			slidesToShow: 1,
 			slidesToScroll: 1,
@@ -39,6 +40,5 @@ if (gliderWrappers) {
 				},
 			],
 		});
-		module.exports = glider;
 	});
 }

package/src/organisms/accordion/accordion.js

@@ -1,6 +1,5 @@
 import debounce from '../../assets/js/debounce';
-
-require('van11y-accessible-accordion-aria');
+import 'van11y-accessible-accordion-aria';
 
 const className = 'o-accordion';
 const accordionElement = document.querySelector(`.js-${className}`);

package/src/organisms/timeline/timeline.js

@@ -1,8 +1,7 @@
 import '../../assets/js/parallax';
+import offset from '../../assets/js/offset';
 
-const { offsetTop, offsetBottom, offsetLeft } = require('../../assets/js/offset');
-
-
+const { offsetTop, offsetBottom, offsetLeft } = offset;
 const dataLayer = window._mtm || [];
 const progressBar = document.querySelector('.js-progress-bar');
 const decadeContainer = document.querySelector('.js-decade-container');

package/dist/atoms/timeline/anchorScroll.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var _smoothScroll = require('smooth-scroll');
-
-var _smoothScroll2 = _interopRequireDefault(_smoothScroll);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var anchorScroll = new _smoothScroll2.default('a[href*="#"]', {
-	easing: 'easeOutCubic'
-});
-
-module.exports = anchorScroll;

package/dist/atoms/toggle-high-contrast/toggle-high-contrast.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var element = document.querySelector('.js-toggle-high-contrast');
-
-function classToggle() {
-	var body = document.querySelector('body');
-	body.classList.toggle('high-contrast');
-}
-
-if (element) {
-	element.addEventListener('click', classToggle);
-}

package/dist/molecules/glider/glider-single.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var _gliderJs = require('glider-js');
-
-var _gliderJs2 = _interopRequireDefault(_gliderJs);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var gliderElementSingle = document.querySelector('.js-glider-single');
-
-if (gliderElementSingle) {
-	var GliderSingle = new _gliderJs2.default(gliderElementSingle, {
-		scrollLock: true,
-		slidesToShow: 1,
-		slidesToScroll: 1
-	});
-
-	var nextBtns = document.querySelectorAll('.js-glider-next');
-	var prevBtns = document.querySelectorAll('.js-glider-prev');
-	var siteMain = document.querySelector('#siteMain');
-	var zoomImages = document.querySelectorAll('.js-zoom.zoom');
-	var slideIndex = GliderSingle.getCurrentSlide();
-	var bounding = 0;
-
-	var scrollTop = function scrollTop() {
-		siteMain.scrollIntoView();
-	};
-
-	if (nextBtns) {
-		[].forEach.call(nextBtns, function (nextBtn) {
-			nextBtn.addEventListener('click', function () {
-				GliderSingle.scrollItem(slideIndex += 1, true);
-
-				if (siteMain) {
-					bounding = siteMain.getBoundingClientRect();
-					if (bounding.top < 0) {
-						scrollTop();
-					}
-				}
-			});
-		});
-	}
-
-	if (prevBtns) {
-		[].forEach.call(prevBtns, function (prevBtn) {
-			prevBtn.addEventListener('click', function () {
-				GliderSingle.scrollItem(slideIndex -= 1, true);
-
-				if (siteMain) {
-					bounding = siteMain.getBoundingClientRect();
-					if (bounding.top < 0) {
-						scrollTop();
-					}
-				}
-			});
-		});
-	}
-
-	if (zoomImages) {
-		[].forEach.call(zoomImages, function (zoomImage) {
-			zoomImage.addEventListener('click', function () {
-				zoomImage.classList.toggle('is-zoomed');
-			});
-		});
-	}
-
-	module.exports = GliderSingle;
-}