@ilo-org/twig 0.2.12 → 0.2.14

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,9 @@
 
-> @ilo-org/twig@0.2.12 build:lib /home/runner/work/designsystem/designsystem/packages/twig
-> pnpm output
+> @ilo-org/twig@0.2.14 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> node importprefix.js; node importsvgs.js; pnpm output
 
+theme prefix added
 
-> @ilo-org/twig@0.2.12 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.2.14 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @ilo-org/twig
 
+## 0.2.14
+
+### Patch Changes
+
+- Updated dependencies [1405b9cbf]
+  - @ilo-org/styles@0.1.19
+
+## 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/config/prefix.yml

@@ -0,0 +1 @@
+prefix: ilo

package/apps/storybook/main.js

@@ -1,16 +1,26 @@
-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",
+    },
+    { from: "../../node_modules/@ilo-org/fonts/font-css", to: "/fonts" },
   ],
   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,64 @@
 <!-- .storybook/manager-head.html -->
-<link rel="icon" type="image/x-icon" href="images/favicon.ico"/>
+<style>
+  @import url("/fonts/fonts-google.css");
+  @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+</style>
+
+<link
+  rel="icon"
+  type="image/x-icon"
+  href="https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/favicon.ico"
+/>
+
+<style>
+  :root {
+    --ilo-white: #fff;
+    --ilo-dark-blue: #230050;
+    --ilo-light-blue: #ffcd2d;
+    --ilo-turquoise: #05d2d2;
+    --ilo-purple: #960a55;
+    --ilo-light-blue: rgba(235, 245, 253, 1);
+  }
+
+  body {
+    font-family: "Noto Sans", sans-serif;
+  }
+
+  a[id*="overview"] > svg {
+    color: var(--ilo-purple);
+    font-family: "Overpass", sans-serif;
+  }
+
+  a:not[id*="overview"] > svg {
+    color: var(--ilo-turquoise);
+  }
+
+  /* Remount component */
+  button[title="Remount component"]:hover,
+  button[title="Zoom in"]:hover,
+  button[title="Zoom out"]:hover,
+  button[title="Reset zoom"]:hover,
+  button[title="Change the background of the preview"]:hover,
+  button[title="Apply a grid to the preview"]:hover,
+  button[title="Change the size of the preview"]:hover,
+  button[title="Enable measure"]:hover,
+  button[title="Apply outlines to the preview"]:hover,
+  button[title="Vision simulator"]:hover,
+  button[title="Go full screen [F]"]:hover,
+  a[title="Open canvas in new tab"]:hover,
+  button[title="Copy canvas link"]:hover {
+    color: var(--ilo-dark-blue);
+    background-color: var(--ilo-light-blue);
+  }
+
+  button.sto-1qova3h,
+  button.sto-4f61h0,
+  button[title="Rotate viewport"]:hover {
+    color: var(--ilo-light-blue);
+  }
+
+  button.tabbutton:active,
+  button.tabbutton:focus {
+    border-bottom-color: var(--ilo-light-blue);
+  }
+</style>

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,68 +1,52 @@
-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_
+# ILO Design System
 
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
+## Twig Component Library
 
-<div style={{ paddingTop: '40px', color: 'inherit' }}>
-  <h2
-    style={{
-      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' }}
-  >
-    Twig Component Library 0.2.3
-  </h3>
+<div>
   <a
     class="ilo--button ilo--button--large ilo--button--primary optionalclass"
     href="/docs/introduction--page"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ margin: "1rem 20px 0 0" }}
   >
     <span class="link__label">Get started</span>
   </a>
   <a
-    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
-    href="https://github.com/international-labour-organization/designsystem"
+    class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
+    href="https://brand.ilo.org"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+   style={{ margin: "1rem 20px 0 0" }}
   >
-    <span class="link__label">Follow on Github</span>
+    <span class="link__label">Design Docs</span>
   </a>
   <a
-    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
-    href="https://brand.ilo.org"
+    class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
+    href="https://github.com/international-labour-organization/designsystem"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ margin: "1rem 20px 0 0" }}
   >
-    <span class="link__label">See Design Docs</span>
+    <span class="link__label">Follow on Github</span>
   </a>
+
   <a
-    class="ilo--button ilo--button--large ilo--button--primary optionalclass"
-    href="https://ilo-ui-react.netlify.app"
+    class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
+    href="https://react.ui.ilo.org"
     target="true"
     rel="noopener noreferrer"
-    style={{ color: 'inherit', marginRight: '20px' }}
+    style={{ margin: "1rem 0 0" }}
   >
     <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,25 @@
-@import '@ilo-org/styles/scss/monorepo';
+@import "@ilo-org/themes/build/scss/tokens";
+@import "@ilo-org/styles/scss/monorepo";
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Overpass", sans-serif !important;
+}
+
+button[title="Zoom in"]:hover,
+button[title="Zoom out"]:hover,
+button[title="Reset zoom"]:hover {
+  color: $brand-ilo-dark-blue;
+  background-color: $brand-ilo-light-blue;
+}
+
+a[class*="ilo--button"] {
+  color: $brand-ilo-dark-blue;
+
+  &:hover {
+    color: $brand-ilo-blue;
+  }
+}