@moreonion/foundist 3.5.1 → 3.6.0

package/README.md

@@ -22,8 +22,8 @@ the desired result)!
 
 The setup should give you a quite modern JS/SCSS-environment:
 - Vite (with SCSS, browserlist, PostCSS)
-- Linting (`stylelint`, `eslint`)
-- Prettifying (`prettify`)
+- Linting (`stylelint`, `oxlint`)
+- Prettifying (`prettify`, `oxfmt`)
 - Pre-commit hooks for `.scss` and `.js` files
 
 The entrypoints are at:
@@ -80,5 +80,5 @@ There is a basic settings file provided.
 You might want to install the following VS Code plugins (or re-enable the build in formatters):
 
 - Prettier - Code formatter `esbenp.prettier-vscode` <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
-- ESLint `dbaeumer.vscode-eslint` <https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>
 - stylelint `shinnn.stylelint` <https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint>
+- OXC `oxc.oxc-vscode` <https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -18,36 +18,33 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint:css": "stylelint src/scss && prettier --check 'src/scss/**/*.scss'",
-    "lint:js": "eslint src",
+    "lint:js": "oxlint src/js && oxfmt --check src/js",
     "lint": "yarn run lint:css && yarn run lint:js",
     "fix:css": "stylelint --fix src/scss && prettier --write 'src/scss/**/*.scss'",
-    "fix:js": "eslint --fix src",
+    "fix:js": "oxfmt src/js && oxlint --fix src/js",
     "fix": "yarn run fix:css && yarn run fix:js",
     "prepare": "husky"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "3.5.1",
+    "@moreonion/foundation-base": "3.6.0",
     "foundation-sites": "6.9.0",
     "jquery": "^4.0.0",
-    "sass-embedded": "^1.99.0",
-    "select2": "^4.1.0-rc.0"
+    "sass-embedded": "^1.100.0",
+    "select2": "^4.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.5.0",
-    "eslint": "8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^16.6.0",
-    "eslint-plugin-promise": "^6.6.0",
     "husky": "^9.1.0",
-    "lint-staged": "^16.4.0",
+    "lint-staged": "^17.0.0",
+    "oxfmt": "^0.57.0",
+    "oxlint": "^1.72.0",
     "postcss": "^8.5.0",
-    "prettier": "^3.8.0",
-    "stylelint": "^17.9.0",
+    "prettier": "^3.9.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-recommended-scss": "^17.0.0",
-    "stylelint-scss": "^7.0.0",
-    "vite": "^7.0.0",
+    "stylelint-scss": "^7.2.0",
+    "vite": "^8.0.0",
     "vite-plugin-nunjucks": "^0.2.0"
   },
   "lint-staged": {
@@ -56,8 +53,9 @@
       "prettier --check"
     ],
     "*.js": [
-      "eslint"
+      "oxlint",
+      "oxfmt"
     ]
   },
-  "packageManager": "yarn@4.14.0"
+  "packageManager": "yarn@4.16.0"
 }

package/src/html/includes/form-items/webform-steps.html

@@ -1,16 +1,16 @@
 <div class="form-steps-wrapper">
-    <div class="form-steps webform-progressbar" data-form-steps-total="3" data-form-steps-current="2">
-        <div class="step webform-progressbar-page previous first clickable" data-form-step-number="1">
+    <nav class="form-steps" data-form-steps-total="3" data-form-steps-current="2">
+        <button class="step previous first clickable" data-form-step-number="1">
             <span class="step-number">1</span>
             <span class="step-label">Data</span>
-        </div>
-        <div class="step webform-progressbar-page current" data-form-step-number="2">
+        </button>
+        <button class="step current" data-form-step-number="2">
             <span class="step-number">2</span>
             <span class="step-label">Message</span>
-        </div>
-        <div class="step webform-progressbar-page last" data-form-step-number="3">
+        </button>
+        <button class="step last" data-form-step-number="3">
             <span class="step-number">3</span>
             <span class="step-label">Another form step</span>
-        </div>
-    </div>
+        </button>
+    </nav>
 </div>

package/src/js/example.js

@@ -1,9 +1,4 @@
-import {
-  initFoundation,
-  stickyForm,
-  stickyButton,
-  cookiebar
-} from './foundist'
+import { initFoundation, stickyForm, stickyButton, cookiebar } from './foundist'
 
 // Initialize Foundation
 ;(() => {

package/src/js/foundist.js

@@ -1,19 +1,5 @@
 /* global Drupal */
 
-// Ensure $ is available: Foundation and select2 need to bind to it
-import $ from 'jquery'
-import select2 from 'select2'
-
-/* eslint-disable no-unused-vars */
-import {
-  Accordion,
-  Foundation,
-  Reveal,
-  SmoothScroll,
-  Toggler
-} from 'foundation-sites/js/foundation'
-/* eslint-enable no-unused-vars */
-
 import {
   AdaptiveSticky,
   CookieBar,
@@ -26,6 +12,18 @@ import {
   UserAgent,
   initEventBridge,
 } from '@moreonion/foundation-base'
+/* eslint-disable no-unused-vars */
+import {
+  Accordion,
+  Foundation,
+  Reveal,
+  SmoothScroll,
+  Toggler,
+} from 'foundation-sites/js/foundation'
+// Ensure $ is available: Foundation and select2 need to bind to it
+import $ from 'jquery'
+/* eslint-enable no-unused-vars */
+import select2 from 'select2'
 
 // Add the select2 to jQuery
 // Needed for SelectTwo plugin
@@ -49,11 +47,11 @@ Foundation.plugin(UserAgent, 'UserAgent')
  * Let foundation initialize the initial markup.
  * This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
  */
-export function initFoundation () {
+export function initFoundation() {
   initEventBridge($)
   if (typeof Drupal !== 'undefined') {
     Drupal.behaviors.foundist_initialize = {}
-    Drupal.behaviors.foundist_initialize.attach = (context, settings) => {
+    Drupal.behaviors.foundist_initialize.attach = (context) => {
       $(context).foundation()
       // Show overlays with `data-open` initially.
       const $overlay = $('[data-reveal][data-open]')
@@ -71,10 +69,11 @@ export function initFoundation () {
 
 /**
  * Activate AdaptiveSticky on forms in the sidebar.
+ *
  * @param {object} options - Overrides to the AdaptiveSticky plugin settings.
- * @returns {AdaptiveSticky|undefined} The initialized AdaptiveSticky plugin
+ * @returns {AdaptiveSticky | undefined} The initialized AdaptiveSticky plugin
  */
-export function stickyForm (options = {}) {
+export function stickyForm(options = {}) {
   const $form = $('#sidebar #form, #sidebar .share-buttons')
   if (!$form.length) {
     return
@@ -87,22 +86,23 @@ export function stickyForm (options = {}) {
     target: '#form-outer #form, #form-outer .share-buttons ul',
     offset: $('#form-outer').css('padding-top'),
     mediaQuery: 'large',
-    ...options
+    ...options,
   })
 }
 
 /**
  * Activate StickyButton on CTA markup snippet.
+ *
  * @param {object} options - Overrides to the StickyButton plugin settings.
- * @returns {StickyButton[]|undefined} Array of initialized StickyButton plugins
+ * @returns {StickyButton[] | undefined} Array of initialized StickyButton plugins
  */
-export function stickyButton (options = {}) {
+export function stickyButton(options = {}) {
   let $cta = $('.sticky-cta')
   if (!$cta.length) {
     return
   }
   const defaults = {
-    topOverlap: 0.3
+    topOverlap: 0.3,
   }
   // Find blocking element
   const target = $cta.find('a').attr('href')
@@ -128,17 +128,18 @@ export function stickyButton (options = {}) {
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
       ...defaults,
-      ...options
+      ...options,
     })
   })
 }
 
 /**
  * Activate cookiebar on cookiebar id.
+ *
  * @param {object} options - Overrides to the Cookiebar plugin settings.
- * @returns {Cookiebar|undefined} The initialized Cookiebar plugin
+ * @returns {CookieBar | undefined} The initialized Cookiebar plugin
  */
-export function cookiebar (options = {}) {
+export function cookiebar(options = {}) {
   const $cookiebar = $('#cookiebar')
   if (!$cookiebar.length) {
     return

package/src/scss/components/_headline.scss

@@ -28,8 +28,8 @@ $headline-color: color-pick-contrast(
   if(
     sass($headline-background and $headline-background != none): get-background-color(
         $headline-background
-      )
-      ; else: get-background-color($fallback-background)
+      );
+      else: get-background-color($fallback-background)
   ),
   ($title-color, $body-font-color-alt, $body-font-color),
   6

package/src/scss/components/_settings.scss

@@ -143,7 +143,7 @@ $accordion-radius: rem-calc(5) !default;
 $accordion-separator: true !default;
 $accordion-title-font-size: 1rem !default;
 $accordion-title-line-height: if(
-  sass($accordion-title-font-size == 1rem): unitless-calc($base-line-height) ;
+  sass($accordion-title-font-size == 1rem): unitless-calc($base-line-height);
     else: grid-lineheight($accordion-title-font-size)
 ) !default;
 $accordion-triangle-color: get-color(primary) !default;

package/src/scss/form/_donation-amount-button.scss

@@ -31,8 +31,8 @@ $donation-amount-border-color-focus: if(
   sass($donation-amount-border-color-hover == transparent): color.scale(
       $donation-amount-background-color-checked,
       $lightness: $button-hollow-hover-lightness
-    )
-    ; else: $donation-amount-border-color-hover
+    );
+    else: $donation-amount-border-color-hover
 ) !default;
 
 // Button text colors
@@ -62,7 +62,7 @@ $donation-amount-text-color-checked: if(
 // Button typography
 $donation-amount-font-size: $large-font-size !default;
 $donation-amount-text-offset: if(
-  sass(meta.type-of($button-text-offset) == map): map.get($button-text-offset, default) ;
+  sass(meta.type-of($button-text-offset) == map): map.get($button-text-offset, default);
     else: $button-text-offset
 ) !default;
 

package/src/scss/form/_settings.scss

@@ -64,7 +64,7 @@ $form-label-line-height: if(
 // Borders
 $input-border-width: rem-calc(2) !default;
 $input-border-color: if(
-  sass($input-background == $form-background): color.scale($form-background, $lightness: -10%) ;
+  sass($input-background == $form-background): color.scale($form-background, $lightness: -10%);
     else: color.scale(get-background-color($form-background), $lightness: -5%)
 ) !default;
 $input-border-color-focus: color.scale($input-border-color, $lightness: -10%) !default;

package/src/scss/main.scss

@@ -88,6 +88,7 @@
 @include mo-close-button;
 @include mo-form-group;
 @include mo-form-steps;
+@include mo-form-step-animations;
 @include mo-m2d-message;
 @include mo-recent-supporters;
 @include mo-progress-bar;