@ilo-org/twig 0.2.12 → 0.2.13

package/jest.config.js

@@ -1,18 +1,18 @@
 module.exports = {
-  projects: ['<rootDir>/source/*/jest.config.js'],
+  projects: ["<rootDir>/source/*/jest.config.js"],
 
   // Everything below here is used by merging into per-design-system jest config
   verbose: true,
-  testURL: 'http://localhost/',
-  setupFiles: ['<rootDir>/tools/tests/unit/setupJest.js'],
-  moduleFileExtensions: ['js', 'json', 'vue'],
+  testURL: "http://localhost/",
+  setupFiles: ["<rootDir>/tools/tests/unit/setupJest.js"],
+  moduleFileExtensions: ["js", "json", "vue"],
   moduleNameMapper: {
     // Jest doesn't care about styles, twig, images, fonts, etc
-    '\\.(twig|md|yml|yaml|css|scss|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/tools/tests/unit/__mocks__/fileMock.js',
+    "\\.(twig|md|yml|yaml|css|scss|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/tools/tests/unit/__mocks__/fileMock.js",
   },
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
+    "^.+\\.js$": "babel-jest",
+    "^.+\\.vue$": "vue-jest",
   },
 };

package/outputtwigs.js

@@ -1,7 +1,7 @@
 // The build file for Twig package - this copies the twigs from where Storybook needs them to a more convenient folder for use in a CMS
-const fs = require('fs');
-const path = require('path');
-const theme = require('@ilo-org/themes/tokens/theme/base.json');
+const fs = require("fs");
+const path = require("path");
+const theme = require("@ilo-org/themes/tokens/theme/base.json");
 let buffer = new Buffer.from(`prefix: ${theme.themeprefix.value}`);
 const srcpath = `./src/patterns/components`;
 
@@ -13,7 +13,7 @@ const checkFolder = async (dir) => {
 
 const traverseDirectory = (directory) => {
   let files = fs.readdirSync(directory).filter((file) => {
-    return file !== '.DS_Store';
+    return file !== ".DS_Store";
   });
   for (const f in files) {
     const file = files[f];
@@ -22,23 +22,26 @@ const traverseDirectory = (directory) => {
     if (fs.statSync(absolute).isDirectory()) {
       traverseDirectory(absolute);
     } else {
-      if (ext === '.twig' || (ext === '.js' && file !== 'index.js')) {
-        filepath = directory
+      if (ext === ".twig" || (ext === ".js" && file !== "index.js")) {
+        let filepath = directory
           .replace(`src/`, `dist/`)
-          .replace('patterns/', '')
-          .replace(`/${file}`, '');
+          .replace("patterns/", "")
+          .replace(`/${file}`, "");
         checkFolder(filepath);
-        fs.readFile(absolute, 'utf8', function (err, filedata) {
+        fs.readFile(absolute, "utf8", function (err, filedata) {
           let formatted = filedata.replace(/{{prefix}}/g, buffer);
           fs.writeFile(
-            `${path.dirname(absolute).replace(`src/`, `dist/`).replace('patterns/', '')}/${file}`,
+            `${path
+              .dirname(absolute)
+              .replace(`src/`, `dist/`)
+              .replace("patterns/", "")}/${file}`,
             formatted,
-            'utf8',
+            "utf8",
             function (err) {
-              if (err) return console.log('.writeFile', err);
+              if (err) return console.log(".writeFile", err);
             }
           );
-          if (err) return console.log('readFile', err);
+          if (err) return console.log("readFile", err);
         });
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -20,82 +20,73 @@
     "components"
   ],
   "dependencies": {
-    "@wingsuit-designsystem/preset-scss": "^1.2.3",
-    "video.js": "^7.19.2",
+    "video.js": "^7.21.2",
+    "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.1.16",
-    "@ilo-org/styles": "0.1.17",
+    "@ilo-org/styles": "0.1.18",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/preset-env": "^7.8.4",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.9",
-    "@storybook/linter-config": "^2.5.0",
-    "@storybook/react": "^6.4.9",
-    "@storybook/storybook-deployer": "^2.8.7",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@wingsuit-designsystem/cli": "1.2.1",
-    "@wingsuit-designsystem/core": "1.2.1",
-    "@wingsuit-designsystem/pattern": "1.2.1",
-    "@wingsuit-designsystem/preset-scss": "^1.2.3",
-    "@wingsuit-designsystem/storybook": "1.2.1",
-    "autoprefixer": "^10.4.0",
-    "cross-env": "^6.0.3",
-    "eslint": "^6.7.2",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-webpack": "^0.12.0",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^23.7.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-vue": "^6.0.1",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/linter-config": "^3.1.2",
+    "@storybook/react": "^6.5.16",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@types/react": "^16.14.35",
+    "@types/react-dom": "^16.9.17",
+    "@wingsuit-designsystem/cli": "1.2.7",
+    "@wingsuit-designsystem/core": "1.2.7",
+    "@wingsuit-designsystem/pattern": "1.2.7",
+    "@wingsuit-designsystem/preset-scss": "^1.2.7",
+    "@wingsuit-designsystem/storybook": "1.2.7",
+    "autoprefixer": "^10.4.13",
+    "cross-env": "^7.0.3",
     "file-loader": "^6.2.0",
     "fs": "0.0.1-security",
     "fs-extra": "^8.1.0",
-    "glob": "^7.1.6",
+    "glob": "^7.2.3",
     "jquery-once": "^2.2.3",
     "lodash": "^4.17.20",
-    "mini-css-extract-plugin": "^1.3.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss": "^8.4.12",
-    "postcss-loader": "^4.2.0",
-    "postcss-nested": "^4.2.1",
-    "postcss-scss": "^3.0.4",
-    "prettier": "^1.19.1",
+    "mini-css-extract-plugin": "^1.6.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.8",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^4.3.0",
+    "postcss-nested": "^4.2.3",
+    "postcss-scss": "^4.0.6",
     "raw-loader": "^4.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.13.3",
     "require-context": "^1.1.0",
-    "resolve-url-loader": "^3.1.1",
-    "sass-loader": "^10.1.0",
-    "storybook": "^6.5.15",
-    "style-loader": "^1.0.2",
-    "stylelint-scss": "^3.17.2",
-    "webpack": "^4.41.3",
-    "yaml-loader": "^0.6.0",
-    "yo": "^3.1.1"
+    "resolve-url-loader": "^3.1.5",
+    "sass-loader": "^10.4.1",
+    "storybook": "^6.5.16",
+    "style-loader": "^1.3.0",
+    "stylelint-scss": "^3.21.0",
+    "webpack": "^4.46.0",
+    "yaml-loader": "0.6.0",
+    "yo": "^3.1.1",
+    "@ilo-org/eslint-config": "0.0.3",
+    "@ilo-org/prettier-config": "0.0.2"
   },
   "scripts": {
     "storybook": "node importprefix.js; node importsvgs.js; start-storybook --config-dir apps/storybook",
     "build:docs": "node importprefix.js; node importsvgs.js; build-storybook --config-dir apps/storybook -o ./storybook-static",
     "build:lib": "pnpm output",
     "build": "pnpm build:lib",
-    "lint:js": "eslint --ext .js ./",
+    "lint:js": "eslint . --ext .js,.jsx",
     "lint:css": "stylelint '**/*.css'",
-    "lint": "npm run lint:js; npm run lint:css;",
-    "fmt:js": "eslint --fix --ext .js,.vue ./",
-    "fmt:css": "npm run lint:css --fix && prettier --loglevel warn --write '**/*.{css}'",
-    "fmt": "npm run fmt:js; npm run fmt:css",
+    "lint:fix": "pnpm lint:js -- --fix",
+    "lint": "pnpm lint:js && pnpm lint:css",
+    "format": "prettier --check . --ignore-path ../../.prettierignore",
+    "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "ci": "npm run lint && npm run build:drupal",
     "import:prefix": "node importprefix.js",
     "import:svgs": "node importsvgs.js",

package/postcss.config.js

@@ -1,6 +1,6 @@
-const autoprefixer = require('autoprefixer');
+const autoprefixer = require("autoprefixer");
 
 module.exports = {
-  syntax: 'postcss-scss',
+  syntax: "postcss-scss",
   plugins: [autoprefixer],
 };

package/src/namespaces.js

@@ -2,13 +2,13 @@
  * Global namespaces
  */
 
-const path = require('path');
+const path = require("path");
 
-const patterns = path.resolve(__dirname, 'patterns');
+const patterns = path.resolve(__dirname, "patterns");
 
 module.exports = {
   patterns: patterns,
-  components: path.resolve(patterns, 'components'),
-  tokens: path.resolve(__dirname, 'tokens'),
-  svgs: path.resolve(__dirname, 'svgs'),
+  components: path.resolve(patterns, "components"),
+  tokens: path.resolve(__dirname, "tokens"),
+  svgs: path.resolve(__dirname, "svgs"),
 };

package/src/patterns/components/accordion/accordion-item.wingsuit.yml

@@ -1,5 +1,5 @@
 accordion:
-  use: '@components/accordion/accordion-item.twig'
+  use: "@components/accordion/accordion-item.twig"
   label: Accordion Item
   description: A collapsible accordion item.
   fields:

package/src/patterns/components/accordion/accordion.behavior.js

@@ -1,4 +1,4 @@
-import Accordion from './accordion';
+import Accordion from "./accordion";
 
 Drupal.behaviors.accordion = {
   attach() {
@@ -6,7 +6,7 @@ Drupal.behaviors.accordion = {
       document.querySelectorAll(`[data-loadcomponent="Accordion"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading Accordion component....');
+        console.log("loading Accordion component....");
         new Accordion(element);
       }
     );

package/src/patterns/components/accordion/accordion.js

@@ -1,4 +1,4 @@
-import { getUpdatedItems, EVENTS, ARIA, MISC } from '@ilo-org/utils';
+import { EVENTS, ARIA } from "@ilo-org/utils";
 
 /**
  * The Accordion module which handles rendering field labels inline on a form.
@@ -33,7 +33,10 @@ export default class Accordion {
    * @chainable
    */
   init() {
-    this.cacheDomReferences().setupHandlers().enable().evaluateAccordionHeights();
+    this.cacheDomReferences()
+      .setupHandlers()
+      .enable()
+      .evaluateAccordionHeights();
 
     return this;
   }
@@ -49,10 +52,17 @@ export default class Accordion {
      * The field that a user interacts with on a form
      * @type {Object}
      */
-    this.accordionItems = this.element.querySelectorAll('.ilo--accordion--item');
-    this.multipleExpanded = this.element.getAttribute('data-multipleexpanded') === 'true';
-    this.accordionPanels = this.element.querySelectorAll('.ilo--accordion--panel');
-    this.accordionButtons = this.element.querySelectorAll('.ilo--accordion--button');
+    this.accordionItems = this.element.querySelectorAll(
+      ".ilo--accordion--item"
+    );
+    this.multipleExpanded =
+      this.element.getAttribute("data-multipleexpanded") === "true";
+    this.accordionPanels = this.element.querySelectorAll(
+      ".ilo--accordion--panel"
+    );
+    this.accordionButtons = this.element.querySelectorAll(
+      ".ilo--accordion--button"
+    );
     console.log(this.multipleExpanded);
 
     return this;
@@ -81,7 +91,7 @@ export default class Accordion {
    */
   enable() {
     if (this.accordionButtons.length > 0) {
-      this.accordionButtons.forEach((button, i) => {
+      this.accordionButtons.forEach((button) => {
         button.addEventListener(EVENTS.CLICK, (e) => this.onClick(e));
       });
     }
@@ -107,10 +117,10 @@ export default class Accordion {
    * @chainable
    */
   evaluateAccordionHeights() {
-    this.accordionPanels.forEach((item, i) => {
+    this.accordionPanels.forEach((item) => {
       item.style.setProperty(
-        '--height',
-        item.querySelector('.ilo--accordion--innerpanel').scrollHeight + 'px'
+        "--height",
+        item.querySelector(".ilo--accordion--innerpanel").scrollHeight + "px"
       );
     });
 
@@ -124,9 +134,9 @@ export default class Accordion {
    */
   updateAccordionItems(panelbutton) {
     const panel = panelbutton
-      .closest('.ilo--accordion--item')
-      .querySelector('.ilo--accordion--panel');
-    const isopen = panel.classList.contains('ilo--accordion--panel--open');
+      .closest(".ilo--accordion--item")
+      .querySelector(".ilo--accordion--panel");
+    const isopen = panel.classList.contains("ilo--accordion--panel--open");
 
     if (!this.multipleExpanded) {
       this.accordionPanels.forEach((item) => {
@@ -155,10 +165,10 @@ export default class Accordion {
    */
   collapseSection(element) {
     element.parentElement
-      .querySelector('.ilo--accordion--button')
-      .setAttribute(ARIA.EXPANDED, 'false');
-    element.setAttribute(ARIA.HIDDEN, 'false');
-    element.classList.remove('ilo--accordion--panel--open');
+      .querySelector(".ilo--accordion--button")
+      .setAttribute(ARIA.EXPANDED, "false");
+    element.setAttribute(ARIA.HIDDEN, "false");
+    element.classList.remove("ilo--accordion--panel--open");
   }
 
   /**
@@ -170,9 +180,9 @@ export default class Accordion {
    */
   expandSection(element) {
     element.parentElement
-      .querySelector('.ilo--accordion--button')
-      .setAttribute(ARIA.EXPANDED, 'true');
-    element.setAttribute(ARIA.HIDDEN, 'true');
-    element.classList.add('ilo--accordion--panel--open');
+      .querySelector(".ilo--accordion--button")
+      .setAttribute(ARIA.EXPANDED, "true");
+    element.setAttribute(ARIA.HIDDEN, "true");
+    element.classList.add("ilo--accordion--panel--open");
   }
 }

package/src/patterns/components/accordion/accordion.stories.jsx

@@ -1,7 +1,9 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./accordion.wingsuit.yml');
+export default {};
+const patternDefinition = require("./accordion.wingsuit.yml");
 
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/accordion/accordion.wingsuit.yml

@@ -1,7 +1,8 @@
 accordion:
-  use: '@components/accordion/accordion.twig'
+  use: "@components/accordion/accordion.twig"
   label: Accordion
-  description: The accordion component allows the user to show and hide sections of
+  description:
+    The accordion component allows the user to show and hide sections of
     related content on a page. Click the accordions below to
     expand/collapse the accordion content.
   fields:
@@ -36,6 +37,6 @@ accordion:
       options:
         true: True
         false: False
-      preview: 'true'
+      preview: "true"
       required: false
   visibility: storybook

package/src/patterns/components/accordion/index.js

@@ -2,6 +2,6 @@
  * accordion
  */
 // Module template
-import './accordion.twig';
-import './accordion.wingsuit.yml';
-import './accordion.behavior';
+import "./accordion.twig";
+import "./accordion.wingsuit.yml";
+import "./accordion.behavior";

package/src/patterns/components/breadcrumb/breadcrumb.behavior.js

@@ -1,4 +1,4 @@
-import Breadcrumb from './breadcrumb';
+import Breadcrumb from "./breadcrumb";
 
 Drupal.behaviors.breadcrumb = {
   attach() {
@@ -6,7 +6,7 @@ Drupal.behaviors.breadcrumb = {
       document.querySelectorAll(`[data-loadcomponent="Breadcrumb"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading Breadcrumb component....');
+        console.log("loading Breadcrumb component....");
         new Breadcrumb(element);
       }
     );

package/src/patterns/components/breadcrumb/breadcrumb.js

@@ -1,4 +1,4 @@
-import { EVENTS } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Breadcrumb module which handles rendering field labels inline on a form.
@@ -45,9 +45,11 @@ export default class Breadcrumb {
    * @chainable
    */
   cacheDomReferences() {
-    this.breadcrumbs = this.element.querySelector('.ilo--breadcrumb--items');
+    this.breadcrumbs = this.element.querySelector(".ilo--breadcrumb--items");
     this.breadcrumbwidth = this.breadcrumbs.offsetWidth;
-    this.ContextButton = this.element.querySelector(`.${this.prefix}--breadcrumb--item--context`);
+    this.ContextButton = this.element.querySelector(
+      `.${this.prefix}--breadcrumb--item--context`
+    );
     this.ContextMenu = this.element.querySelector(`.context--menu`);
 
     return this;
@@ -85,13 +87,13 @@ export default class Breadcrumb {
    * @return {Object} Breadcrumb A reference to the instance of the class
    * @chainable
    */
-  onResize(e) {
+  onResize() {
     if (this.breadcrumbwidth > this.element.offsetWidth / 2) {
-      this.element.classList.add('contextmenu');
-      this.ContextMenu.classList.remove('open');
+      this.element.classList.add("contextmenu");
+      this.ContextMenu.classList.remove("open");
     } else {
-      this.element.classList.remove('contextmenu');
-      this.ContextMenu.classList.remove('open');
+      this.element.classList.remove("contextmenu");
+      this.ContextMenu.classList.remove("open");
     }
 
     return this;
@@ -104,11 +106,11 @@ export default class Breadcrumb {
    * @chainable
    */
   onClick() {
-    if (this.element.classList.contains('contextmenu')) {
-      if (this.ContextMenu.classList.contains('open')) {
-        this.ContextMenu.classList.remove('open');
+    if (this.element.classList.contains("contextmenu")) {
+      if (this.ContextMenu.classList.contains("open")) {
+        this.ContextMenu.classList.remove("open");
       } else {
-        this.ContextMenu.classList.add('open');
+        this.ContextMenu.classList.add("open");
       }
     }
 

package/src/patterns/components/breadcrumb/breadcrumb.stories.jsx

@@ -1,7 +1,9 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./breadcrumb.wingsuit.yml');
+export default {};
+const patternDefinition = require("./breadcrumb.wingsuit.yml");
 
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/breadcrumb/breadcrumb.wingsuit.yml

@@ -1,5 +1,5 @@
 breadcrumb:
-  use: '@components/breadcrumb/breadcrumb.twig'
+  use: "@components/breadcrumb/breadcrumb.twig"
   label: Breadcrumb
   description: A component for displaying links in a "breadcrumb" ux
   fields:

package/src/patterns/components/breadcrumb/index.js

@@ -2,6 +2,6 @@
  * breadcrumb
  */
 // Module template
-import './breadcrumb.twig';
-import './breadcrumb.wingsuit.yml';
-import './breadcrumb.behavior';
+import "./breadcrumb.twig";
+import "./breadcrumb.wingsuit.yml";
+import "./breadcrumb.behavior";

package/src/patterns/components/button/button.stories.jsx

@@ -1,7 +1,9 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./button.wingsuit.yml');
+export default {};
+const patternDefinition = require("./button.wingsuit.yml");
 
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/button/button.wingsuit.yml

@@ -1,5 +1,5 @@
 button:
-  use: '@components/button/button.twig'
+  use: "@components/button/button.twig"
   label: Button
   description: A button or a link styled like a button.
   fields:
@@ -7,19 +7,19 @@ button:
       type: string
       label: Label
       description: The label for the button
-      preview: 'Button'
+      preview: "Button"
       required: true
     url:
       type: string
       label: url
       description: The url for the button if it's a link
-      preview: ''
+      preview: ""
       required: false
     target:
       type: string
       label: target
       description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
-      preview: 'true'
+      preview: "true"
       required: false
     icon:
       type: string
@@ -31,7 +31,7 @@ button:
       type: string
       label: Class name
       description: optional class name
-      preview: 'optionalclass'
+      preview: "optionalclass"
       required: false
   settings:
     size:
@@ -43,7 +43,7 @@ button:
         small: Small
         medium: Medium
         large: Large
-      preview: 'large'
+      preview: "large"
     type:
       type: select
       label: Type
@@ -55,16 +55,16 @@ button:
         tertiary: Tertiary
         alert: Alert
         icononly: Icon Only
-      preview: 'primary'
+      preview: "primary"
     disabled:
       type: select
       label: Disabled
       description: The disabled state of the button.
       required: false
       options:
-        true: 'true'
+        true: "true"
         false: false
-      preview: 'false'
+      preview: "false"
     kind:
       type: select
       label: Kind
@@ -74,7 +74,7 @@ button:
         button: button
         reset: reset
         submit: submit
-      preview: 'button'
+      preview: "button"
     iconPosition:
       type: select
       label: Icon Position
@@ -89,7 +89,7 @@ button:
       label: Icon Only
       description: Is this an icon-only button?
       options:
-        true: 'true'
+        true: "true"
         false: false
       preview: false
       required: false
@@ -98,7 +98,7 @@ button:
       label: Opens Modal
       description: Does this button trigger open a modal?
       options:
-        true: 'true'
+        true: "true"
         false: false
       preview: false
       required: false

package/src/patterns/components/button/index.js

@@ -2,5 +2,5 @@
  * button
  */
 // Module template
-import './button.twig';
-import './button.wingsuit.yml';
+import "./button.twig";
+import "./button.wingsuit.yml";