@ilo-org/react 0.12.0 → 0.14.0

package/.storybook/main.ts

@@ -0,0 +1,41 @@
+export const core = {
+  disableTelemetry: true,
+  builder: "@storybook/builder-vite",
+};
+
+export const framework = {
+  name: "@storybook/react-vite",
+};
+
+export const stories = [
+  "../src/stories/**/*.mdx",
+  "../src/stories/**/*.stories.@(js|jsx|ts|tsx)",
+];
+
+export const docs = {
+  defaultName: "Overview",
+  autodocs: "tag",
+};
+
+export const staticDirs = [
+  "../public",
+  { from: "../node_modules/@ilo-org/fonts/font-css", to: "/fonts" },
+];
+
+export const addons = [
+  "@storybook/addon-links",
+  "@storybook/addon-essentials",
+  "@storybook/addon-a11y",
+  "@storybook/addon-styling",
+  "storybook-addon-rtl-direction",
+];
+
+export const typescript = {
+  reactDocgen: "react-docgen-typescript",
+  reactDocgenTypescriptOptions: {
+    compilerOptions: {
+      allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+    },
+  },
+};

package/.storybook/manager-head.html

@@ -0,0 +1,92 @@
+<!-- .storybook/manager-head.html -->
+<style>
+  @import url("/fonts/fonts-google.css");
+  @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+</style>
+
+<!-- Canonical URL -->
+
+<link href="https://react.ui.ilo.org" rel="canonical" />
+
+<!-- Favicon -->
+<link rel="icon" href="/favicon.ico" type="image/x-icon" />
+
+<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);
+  }
+
+  .realm {
+    width: 100%;
+    background: transparent;
+    box-sizing: border-box;
+    text-align: left;
+    font-size: 0.8rem;
+    border-top: 1px solid #d3dce3;
+    padding-top: 15px;
+    color: #1e2dbe;
+    font-weight: 600;
+    font-family: "Nunito Sans", sans-serif;
+    margin-top: -10px;
+  }
+</style>
+
+<script>
+  window.addEventListener("load", function () {
+    const sidebar = document.querySelector(".sidebar-header");
+    const customLabel = document.createElement("div");
+    customLabel.classList.add("realm");
+    customLabel.textContent = "React Components";
+
+    if (sidebar) {
+      sidebar.insertAdjacentElement("afterend", customLabel);
+    }
+  });
+</script>

package/.storybook/manager.ts

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

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+  .story-decorator {
+    padding-top: 2rem;
+  }
+</style>

package/.storybook/preview.tsx

@@ -0,0 +1,81 @@
+import { GlobalProvider } from "../src/components/GlobalProvider";
+import { themeprefix } from "@ilo-org/themes/tokens/theme/base.json";
+import { Decorator } from "@storybook/react";
+import { theme } from "./theme";
+import "./styles.scss";
+import { brand } from "@ilo-org/themes/tokens/brand/base.json";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: ["Welcome", "GettingStarted"],
+      locales: "en-US",
+    },
+  },
+  backgrounds: {
+    values: [
+      { name: "light", value: "white" },
+      { name: "dark", value: brand["ilo-dark-blue"].value },
+    ],
+  },
+  previewTabs: {
+    "storybook/docs/panel": { index: -1 },
+    canvas: { title: "Code", hidden: false },
+  },
+  viewMode: "docs",
+  layout: "padded",
+  docs: {
+    theme: theme,
+    source: {
+      excludeDecorators: true,
+    },
+  },
+};
+
+export const decorators: Decorator[] = [
+  // Providces the GlobalProvider context to all stories
+  (Story) => (
+    <GlobalProvider prefix={themeprefix.value}>
+      <Story />
+    </GlobalProvider>
+  ),
+  // Wraps components in story mode
+  (Story, ctx) => {
+    // Should this story be rendered in full width?
+    const fullWidthStories = ["footer", "localnav", "navigation", "hero"];
+    const isFullWidth = fullWidthStories.some((story) =>
+      ctx.title.toLocaleLowerCase().includes(story)
+    );
+
+    if (ctx.viewMode === "story") {
+      if (isFullWidth) {
+        return <Story />;
+      }
+
+      return (
+        <div className="story-decorator-wrapper ">
+          <div className="story-decorator">
+            <Story />
+          </div>
+        </div>
+      );
+    }
+    return <Story />;
+  },
+];
+
+export const globalTypes = {
+  rtlDirection: {
+    description: "HTML dir attribute",
+    defaultValue: false,
+  },
+};

package/.storybook/styles.scss

@@ -0,0 +1,25 @@
+@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;
+  }
+}

package/.storybook/theme.ts

@@ -0,0 +1,46 @@
+// .storybook/YourTheme.js
+
+import { create } from "@storybook/theming/create";
+import ilo_logo from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
+import brandColors from "@ilo-org/themes/tokens/brand/base.json";
+
+const { brand } = brandColors;
+
+export const theme = create({
+  base: "light",
+  brandTitle: "ILO Design System for React",
+  brandUrl: "https://www.ilo.org/",
+  brandImage: ilo_logo,
+  brandTarget: "_self",
+
+  colorPrimary: brand["ilo-dark-blue"].value,
+  colorSecondary: brand["ilo-blue"].value,
+
+  // UI
+  appBg: brand["ilo-light-blue"].value,
+  appContentBg: brand["ilo-white"].value,
+  appBorderColor: brand["ilo-grey-ui"].value,
+  appBorderRadius: 0,
+
+  fontBase: "'Noto Sans', sans-serif",
+  fontCode: "'Fira Code', monospace",
+
+  // Text colors
+  textColor: brand["ilo-dark-blue"].value,
+  textInverseColor: brand["ilo-white"].value,
+  textMutedColor: brand["ilo-grey-accessible"].value,
+
+  // Toolbar default and active colors
+  barTextColor: brand["ilo-white"].value,
+  barSelectedColor: brand["ilo-yellow"].value,
+  barBg: brand["ilo-dark-blue"].value,
+
+  buttonBg: brand["ilo-white"].value,
+  buttonBorder: brand["ilo-grey-ui"].value,
+  booleanBg: brand["ilo-light-blue"].value,
+  booleanSelectedBg: brand["ilo-white"].value,
+  inputBg: brand["ilo-light-blue"].value,
+  inputBorder: brand["ilo-grey-ui"].value,
+  inputTextColor: brand["ilo-dark-blue"].value,
+  inputBorderRadius: 3,
+});

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

@@ -0,0 +1,15 @@
+
+> @ilo-org/react@0.14.0 build:lib /home/runner/work/designsystem/designsystem/packages/react
+> rollup -c
+
+
+src/index.ts, src/components/**/index.ts, src/components/**/*.tsx, src/hooks/*.ts, src/utils/*.ts → lib/esm, lib/cjs...
+(!) Mixing named and default exports
+https://rollupjs.org/configuration-options/#output-exports
+The following entry modules are using named and default exports together:
+src/components/Fieldset/Fieldset.tsx
+src/components/FormControl/FormControl.tsx
+src/hooks/usePrevious.ts
+
+Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
+created lib/esm, lib/cjs in 16s

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @ilo-org/react
 
+## 0.14.0
+
+### Minor Changes
+
+- 977e15006: Fixes a bug where some distribution assets weren't getting included in Design System packages while a lot of non-essential development assets were. At the same time, this removes some `src` directories from the packages which some consumers might have been using.
+
+### Patch Changes
+
+- 0d38e6428: Update video.js types
+- f226b7be3: added home screen
+- 8e6c502a7: Fixes some layout issues in List that caused parts of the list item numbers to get chopped off in ordered lists when they were rendered in containers with hidden overflow, as well as some incorrect rendering in RTL layouts.
+- f5a78ab73: Fix profile hover in dark mode in text card
+- 92f05c1fe: commonjs module resolution
+- Updated dependencies [3ceaceaa3]
+- Updated dependencies [13bcd92df]
+- Updated dependencies [8e6c502a7]
+- Updated dependencies [f5a78ab73]
+- Updated dependencies [d0a08d7c3]
+- Updated dependencies [977e15006]
+  - @ilo-org/styles@0.16.0
+  - @ilo-org/brand-assets@0.5.0
+  - @ilo-org/fonts@0.2.0
+  - @ilo-org/icons-react@0.1.0
+  - @ilo-org/themes@0.8.0
+  - @ilo-org/utils@0.1.0
+
+## 0.13.0
+
+### Minor Changes
+
+- 16e117853: Refactor card group to fix styles and use individual card components
+
+### Patch Changes
+
+- de97f52fc: removed extra dirs from bundle
+- 10dadfad7: Fix design bug in pagination for rtl
+- 53c5be426: Sync footer and navigation markup with twig
+- 65f03a82a: Fix tagline on navigation
+- Updated dependencies [7e1460a88]
+- Updated dependencies [10dadfad7]
+- Updated dependencies [5bc989f5d]
+  - @ilo-org/styles@0.15.0
+
 ## 0.12.0
 
 ### Minor Changes

package/lib/cjs/components/Cards/CardGroup/CardGroup.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Cards_DataCard_DataCard = require('../DataCard/DataCard.js');
+var components_Cards_DetailCard_DetailCard = require('../DetailCard/DetailCard.js');
+var components_Cards_FactlistCard_FactListCard = require('../FactlistCard/FactListCard.js');
+var components_Cards_FeatureCard_FeatureCard = require('../FeatureCard/FeatureCard.js');
+var components_Cards_MultilinkCard_MultiLinkCard = require('../MultilinkCard/MultiLinkCard.js');
+var components_Cards_PromoCard_PromoCard = require('../PromoCard/PromoCard.js');
+var components_Cards_StatCard_StatCard = require('../StatCard/StatCard.js');
+var components_Cards_TextCard_TextCard = require('../TextCard/TextCard.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+require('../../Link/Link.js');
+require('../../List/List.js');
+require('../../List/ListItem.js');
+require('../../LinkList/LinkList.js');
+require('../../Profile/Profile.js');
+
+const cardMapper = {
+    stat: components_Cards_StatCard_StatCard,
+    multilink: components_Cards_MultilinkCard_MultiLinkCard,
+    text: components_Cards_TextCard_TextCard,
+    promo: components_Cards_PromoCard_PromoCard,
+    feature: components_Cards_FeatureCard_FeatureCard,
+    detail: components_Cards_DetailCard_DetailCard,
+    factlist: components_Cards_FactlistCard_FactListCard,
+    data: components_Cards_DataCard_DataCard,
+};
+const CardGroup = ({ cards, cardCount, cta, type }) => {
+    const Cards = cardMapper[type];
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--cardgroup`;
+    const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards && cards.map((card, index) => jsxRuntime.jsx(Cards, Object.assign({}, card), index)) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+};
+
+module.exports = CardGroup;