@ilo-org/twig 0.2.12 → 0.2.13

package/.eslintrc.js

@@ -4,63 +4,51 @@
  * Rule reference: http://eslint.org/docs/rules
  * Individual rule reference: http://eslint.org/docs/rules/NAME-OF-RULE
  */
-const wingsuitCore = require('@wingsuit-designsystem/core');
-const wingsuitConfig = require('./wingsuit.config.js');
+// const wingsuitCore = require("@wingsuit-designsystem/core");
+// const wingsuitConfig = require("./wingsuit.config.js");
 
-const appConfig = wingsuitCore.resolveConfig(
-  'storybook',
-  'development',
-  {},
-  wingsuitConfig,
-  __dirname
-);
-const { namespaces } = appConfig;
-const aliasMap = [];
-Object.keys(namespaces).forEach((key) => {
-  aliasMap.push([key, namespaces[key]]);
-});
+// const appConfig = wingsuitCore.resolveConfig(
+//   "storybook",
+//   "development",
+//   {},
+//   wingsuitConfig,
+//   __dirname
+// );
+// const { namespaces } = appConfig;
+// const aliasMap = [];
+// Object.keys(namespaces).forEach(key => {
+//   aliasMap.push([key, namespaces[key]]);
+// });
 
 module.exports = {
-  extends: [
-    'airbnb-base',
-    'plugin:jest/recommended',
-    'plugin:vue/recommended',
-    'plugin:prettier/recommended',
-    'prettier/vue',
-    'plugin:react/recommended',
-  ],
-  plugins: ['prettier'],
   root: true,
+  extends: ["@ilo-org/eslint-config"],
   globals: {
     Drupal: true,
     jQuery: true,
     _: true,
     BUILD_TARGET: true,
   },
-  env: {
-    browser: true,
-    node: true,
-  },
-  rules: {
-    'react/jsx-uses-react': 1,
-    'prettier/prettier': [
-      'error',
-      {
-        endOfLine: 'auto',
-      },
-    ],
-    'no-console': [0], // turned off for now while we are console.logging everywhere.
-    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-    'import/prefer-default-export': [0],
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      alias: {
-        map: aliasMap,
-      },
-    },
-  },
+  // settings: {
+  //   "import/resolver": {
+  //     alias: {
+  //       map: aliasMap,
+  //     },
+  //   },
+  // },
+  ignorePatterns: [
+    "dist/",
+    "pattern-lab/",
+    "vendor/",
+    "tools/test/vrt/backstop_data",
+    "preview.js-generated-config-entry.js",
+    "storybook-init-framework-entry.js",
+    "tools/new-component/templates",
+    "storybook-static/",
+    "node_modules/",
+    "lib/",
+    "src/stories/",
+    "src/__tests__",
+    "src/components/**/*.args.ts",
+  ],
 };

package/.stylelintrc

@@ -1,10 +1,6 @@
 {
-  "extends": [
-    "stylelint-config-prettier"
-  ],
-  "plugins": [
-    "stylelint-scss"
-  ],
+  "extends": ["stylelint-config-prettier"],
+  "plugins": ["stylelint-scss"],
   "rules": {
     "indentation": 2,
     "declaration-colon-space-after": "always",

package/.turbo/turbo-build:lib.log

@@ -1,8 +1,8 @@
 
-> @ilo-org/twig@0.2.12 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.2.13 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > pnpm output
 
 
-> @ilo-org/twig@0.2.12 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.2.13 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ilo-org/twig
 
+## 0.2.13
+
+### Patch Changes
+
+- 7a09aa23c: Fix minor linting errors throughout
+- 7a09aa23c: Update twig storybook deps
+- Updated dependencies [2f60e9d92]
+- Updated dependencies [c9413b943]
+  - @ilo-org/styles@0.1.18
+  - @ilo-org/brand-assets@0.1.0
+  - @ilo-org/utils@0.0.11
+
 ## 0.2.12
 
 ### Patch Changes

package/apps/storybook/assets.js

@@ -1,3 +1,8 @@
+/**
+ * What does this even do?
+ */
+
+// eslint-disable-next-line
 function requireAll(r) {
   r.keys().forEach(r);
 }

package/apps/storybook/main.js

@@ -1,16 +1,25 @@
-const wingsuitCore = require('@wingsuit-designsystem/core');
+const wingsuitCore = require("@wingsuit-designsystem/core");
 
 module.exports = {
   addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-viewport',
-    '@storybook/addon-controls',
-    '@storybook/addon-links',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-postcss',
+    "@storybook/addon-docs",
+    "@storybook/addon-viewport",
+    "@storybook/addon-controls",
+    "@storybook/addon-links",
+    "@storybook/addon-backgrounds",
+    "@storybook/addon-postcss",
+  ],
+  staticDirs: [
+    {
+      from: "../../node_modules/@ilo-org/brand-assets/dist/assets/",
+      to: "/brand-assets",
+    },
   ],
   webpackFinal: (config) => {
-    const final = wingsuitCore.getAppPack(wingsuitCore.resolveConfig('storybook'), [config]);
+    const final = wingsuitCore.getAppPack(
+      wingsuitCore.resolveConfig("storybook"),
+      [config]
+    );
     return final;
   },
 };

package/apps/storybook/manager-head.html

@@ -1,2 +1,2 @@
 <!-- .storybook/manager-head.html -->
-<link rel="icon" type="image/x-icon" href="images/favicon.ico"/>
+<link rel="icon" type="image/x-icon" href="images/favicon.ico" />

package/apps/storybook/manager.js

@@ -1,6 +1,6 @@
 // .storybook/manager.js
-import { addons } from '@storybook/addons';
-import theme from './theme';
+import { addons } from "@storybook/addons";
+import theme from "./theme";
 
 addons.setConfig({
   theme: theme,

package/apps/storybook/patterns/colors.stories.mdx

@@ -1,9 +1,14 @@
-import { Meta, ColorPalette, ColorItem, Subtitle } from '@storybook/addon-docs/blocks';
-const colors = require('../../../src/tokens/exports/_colors.scss');
+import {
+  Meta,
+  ColorPalette,
+  ColorItem,
+  Subtitle,
+} from "@storybook/addon-docs/blocks";
+const colors = require("../../../src/tokens/exports/_colors.scss");
 
 <Meta
   title="Tokens/Colors"
-  parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true } } }}
+  parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
 />
 
 # Colors
@@ -11,7 +16,7 @@ const colors = require('../../../src/tokens/exports/_colors.scss');
 <Subtitle>ILO Brand Colors</Subtitle>
 <ColorPalette>
   {Object.keys(colors).map((key) => {
-    const color = typeof colors[key] === 'string' ? [colors[key]] : colors[key];
+    const color = typeof colors[key] === "string" ? [colors[key]] : colors[key];
     const title = `.${key}`;
     return <ColorItem key={key} title={title} colors={color} />;
   })}

package/apps/storybook/patterns/intro.stories.mdx

@@ -1,27 +1,32 @@
-import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import { Badge } from '@storybook/components';
-import { getStorybook, storiesOf } from '@storybook/react';
-import LinkTo from '@storybook/addon-links/react';
+import { Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Badge } from "@storybook/components";
+import { getStorybook, storiesOf } from "@storybook/react";
+import LinkTo from "@storybook/addon-links/react";
 
 <Meta
   title="Introduction"
-  parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true } } }}
+  parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
 />
 
-<div style={{ paddingTop: '40px', color: 'inherit' }}>
+<div style={{ paddingTop: "40px", color: "inherit" }}>
   <h2
     style={{
-      fontFamily: 'Overpass',
-      fontSize: '56.95px',
-      fontWeight: '700',
-      marginBottom: '40px',
-      border: 'none',
+      fontFamily: "Overpass",
+      fontSize: "56.95px",
+      fontWeight: "700",
+      marginBottom: "40px",
+      border: "none",
     }}
   >
     ILO Design System
   </h2>
   <h3
-    style={{ fontFamily: 'Overpass', fontSize: '45.56px', fontWeight: '700', marginBottom: '40px' }}
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "45.56px",
+      fontWeight: "700",
+      marginBottom: "40px",
+    }}
   >
     Getting Started
   </h3>
@@ -37,11 +42,11 @@ This package provides the implementation of the Design System using [Twig](https
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Installation and PNPM Commands
@@ -91,11 +96,11 @@ pnpm import:svgs
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Architecture
@@ -121,11 +126,11 @@ Wingsuit consumes the `component.wingsuit.yml` file, which is a [UI Pattern YAML
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Javascript
@@ -147,11 +152,11 @@ Javascript will look in the `ComponentMap` Class for a JS Class called `Componen
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Questions and Feedback
@@ -161,11 +166,11 @@ Javascript will look in the `ComponentMap` Class for a JS Class called `Componen
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Accessibility Standards
@@ -175,11 +180,11 @@ Javascript will look in the `ComponentMap` Class for a JS Class called `Componen
 
 <h4
   style={{
-    fontFamily: 'Overpass',
-    fontSize: '29px',
-    fontWeight: '700',
-    marginBottom: '40px',
-    marginTop: '40px',
+    fontFamily: "Overpass",
+    fontSize: "29px",
+    fontWeight: "700",
+    marginBottom: "40px",
+    marginTop: "40px",
   }}
 >
   Contributing

package/apps/storybook/patterns/typeset.stories.mdx

@@ -1,11 +1,11 @@
-import { Meta, Subtitle } from '@storybook/addon-docs/blocks';
-import { Typeset } from '@wingsuit-designsystem/storybook';
-const fontFamilies = require('../../../src/tokens/exports/_font-families.scss');
-const fontHeadingSizes = require('../../../src/tokens/exports/_font-sizes-heading.scss');
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
+import { Typeset } from "@wingsuit-designsystem/storybook";
+const fontFamilies = require("../../../src/tokens/exports/_font-families.scss");
+const fontHeadingSizes = require("../../../src/tokens/exports/_font-sizes-heading.scss");
 
 <Meta
   title="Tokens/Typography"
-  parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true } } }}
+  parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
 />
 
 # Typography
@@ -21,7 +21,11 @@ const fontHeadingSizes = require('../../../src/tokens/exports/_font-sizes-headin
         <Subtitle>
           <b>{key} Font Family:</b> {fontFamilies[key]}
         </Subtitle>
-        <Typeset fontFamily={fontFamilies[key]} classNamePrefix="." fontSizes={fontHeadingSizes} />
+        <Typeset
+          fontFamily={fontFamilies[key]}
+          classNamePrefix="."
+          fontSizes={fontHeadingSizes}
+        />
       </div>
     );
   })}

package/apps/storybook/patterns/welcome.stories.mdx

@@ -1,11 +1,11 @@
-import { Meta, Canvas } from '@storybook/addon-docs/blocks';
-import { Badge } from '@storybook/components';
-import { getStorybook, storiesOf } from '@storybook/react';
-import LinkTo from '@storybook/addon-links/react';
+import { Meta, Canvas } from "@storybook/addon-docs/blocks";
+import { Badge } from "@storybook/components";
+import { getStorybook, storiesOf } from "@storybook/react";
+import LinkTo from "@storybook/addon-links/react";
 
 <Meta
   title="Welcome"
-  parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true } } }}
+  parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
 />
 
 ### Current Project Status: _Proof of Concept_
@@ -13,20 +13,25 @@ import LinkTo from '@storybook/addon-links/react';
 Browse example stories now by navigating to them in the sidebar.
 View their code in the `src/stories` directory to learn how they work.
 
-<div style={{ paddingTop: '40px', color: 'inherit' }}>
+<div style={{ paddingTop: "40px", color: "inherit" }}>
   <h2
     style={{
-      fontFamily: 'Overpass',
-      fontSize: '56.95px',
-      fontWeight: '700',
-      marginBottom: '40px',
-      border: 'none',
+      fontFamily: "Overpass",
+      fontSize: "56.95px",
+      fontWeight: "700",
+      marginBottom: "40px",
+      border: "none",
     }}
   >
     ILO Design System
   </h2>
   <h3
-    style={{ fontFamily: 'Overpass', fontSize: '45.56px', fontWeight: '700', marginBottom: '40px' }}
+    style={{
+      fontFamily: "Overpass",
+      fontSize: "45.56px",
+      fontWeight: "700",
+      marginBottom: "40px",
+    }}
   >
     Twig Component Library 0.2.3
   </h3>
@@ -35,7 +40,7 @@ View their code in the `src/stories` directory to learn how they work.
     href="/docs/introduction--page"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ color: "inherit", marginRight: "20px" }}
   >
     <span class="link__label">Get started</span>
   </a>
@@ -44,7 +49,7 @@ View their code in the `src/stories` directory to learn how they work.
     href="https://github.com/international-labour-organization/designsystem"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ color: "inherit", marginRight: "20px" }}
   >
     <span class="link__label">Follow on Github</span>
   </a>
@@ -53,7 +58,7 @@ View their code in the `src/stories` directory to learn how they work.
     href="https://brand.ilo.org"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ color: "inherit", marginRight: "20px" }}
   >
     <span class="link__label">See Design Docs</span>
   </a>
@@ -62,7 +67,7 @@ View their code in the `src/stories` directory to learn how they work.
     href="https://ilo-ui-react.netlify.app"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ color: "inherit", marginRight: "20px" }}
   >
     <span class="link__label">ILO Design System for React</span>
   </a>

package/apps/storybook/preview-body.html

@@ -1,4 +1,4 @@
 <!--  .storybook/preview-body.html -->
 <body class="wingsuit-body font-sans">
-<div id="root" class="wingsuit-root"></div>
+  <div id="root" class="wingsuit-root"></div>
 </body>

package/apps/storybook/preview.js

@@ -1,25 +1,25 @@
-import { configure, initJsBehaviors } from '@wingsuit-designsystem/storybook';
-import { addParameters } from '@storybook/react';
-import './styles.scss';
+import { configure, initJsBehaviors } from "@wingsuit-designsystem/storybook";
+import { addParameters } from "@storybook/react";
+import "./styles.scss";
 
-const namespaces = require('../../src/namespaces');
+const namespaces = require("../../src/namespaces");
 
-initJsBehaviors('Drupal');
+initJsBehaviors("Drupal");
 
 addParameters({
-  viewMode: 'docs',
+  viewMode: "docs",
   previewTabs: {
-    'storybook/docs/panel': {
+    "storybook/docs/panel": {
       index: 1,
-      title: 'Documentation',
+      title: "Documentation",
     },
-    canvas: { title: 'Canvas', hidden: false },
+    canvas: { title: "Canvas", hidden: false },
   },
   options: {
     storySort: {
-      method: 'alphabetical',
-      order: ['Welcome', 'Intro', 'Tokens', ['Colors', 'Typography']],
-      locales: 'en-US',
+      method: "alphabetical",
+      order: ["Welcome", "Intro", "Tokens", ["Colors", "Typography"]],
+      locales: "en-US",
     },
   },
 });
@@ -27,10 +27,10 @@ addParameters({
 configure(
   module,
   [
-    require.context('./patterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
-    require.context('wspatterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
+    require.context("./patterns", true, /\.stories(\.jsx|\.js|\.mdx)$/),
+    require.context("wspatterns", true, /\.stories(\.jsx|\.js|\.mdx)$/),
   ],
-  require.context('./config', false, /\.json|\.ya?ml$/),
-  require.context('wspatterns', true, /\.twig$/),
+  require.context("./config", false, /\.json|\.ya?ml$/),
+  require.context("wspatterns", true, /\.twig$/),
   namespaces
 );

package/apps/storybook/styles.scss

@@ -1 +1 @@
-@import '@ilo-org/styles/scss/monorepo';
+@import "@ilo-org/styles/scss/monorepo";

package/apps/storybook/theme.js

@@ -1,11 +1,11 @@
 // .storybook/YourTheme.js
 
-import { create } from '@storybook/theming';
+import { create } from "@storybook/theming";
 
 export default create({
-  base: 'light',
-  brandTitle: 'ILO UI Kit',
-  brandUrl: 'https://www.ilo.org/',
+  base: "light",
+  brandTitle: "ILO UI Kit",
+  brandUrl: "https://www.ilo.org/",
   brandImage:
-    'https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/apple-touch-icon-precomposed.png',
+    "https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/apple-touch-icon-precomposed.png",
 });

package/babel.config.js

@@ -1,16 +1,16 @@
 module.exports = {
   presets: [
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
-        useBuiltIns: 'entry',
+        useBuiltIns: "entry",
         corejs: 3,
       },
     ],
   ],
   env: {
     test: {
-      presets: [['@babel/preset-env']],
+      presets: [["@babel/preset-env"]],
     },
   },
 };

package/importprefix.js

@@ -1,9 +1,9 @@
-const theme = require('@ilo-org/themes/tokens/theme/base.json');
-const fs = require('fs');
-const path = 'apps/storybook/config/prefix.yml';
+const theme = require("@ilo-org/themes/tokens/theme/base.json");
+const fs = require("fs");
+const path = "apps/storybook/config/prefix.yml";
 let buffer = new Buffer.from(`prefix: ${theme.themeprefix.value}`);
 
-fs.open(path, 'w', function (err, fd) {
+fs.open(path, "w", function (err, fd) {
   if (err) {
     console.log("Can't open file");
   } else {
@@ -11,7 +11,7 @@ fs.open(path, 'w', function (err, fd) {
       if (err) {
         console.log("Can't write to file");
       } else {
-        console.log('theme prefix added');
+        console.log("theme prefix added");
       }
     });
   }

package/importsvgs.js

@@ -1,5 +1,5 @@
-const fs = require('fs-extra');
-const source = 'node_modules/@ilo-org/icons/svg';
-const destination = 'images';
+const fs = require("fs-extra");
+const source = "node_modules/@ilo-org/icons/svg";
+const destination = "images";
 
 fs.copy(source, destination);