@ilo-org/react 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ilo-org/react
 
+## 0.4.2
+
+### Patch Changes
+
+- Updated dependencies [8bc52db6e]
+  - @ilo-org/styles@0.3.0
+
+## 0.4.1
+
+### Patch Changes
+
+- bac3cc9d5: Fix bug preventing the sub-brand from rendering with the proper font size on some mobile browsers
+- Updated dependencies [bac3cc9d5]
+  - @ilo-org/styles@0.2.1
+
 ## 0.4.0
 
 ### Minor Changes

package/lib/cjs/components/Logo/Logo.js

@@ -33,6 +33,8 @@ const BaseLogo = (_a) => {
     const lockupRef = require$$0.useRef(null);
     // The lockup text
     const lockupTextRef = require$$0.useRef(null);
+    // Initial height of the image when it's loaded
+    const initialImageHeight = require$$0.useRef(null);
     // Has the image loaded or not
     const [imageLoaded, setImageLoaded] = require$$0.useState(false);
     // Dynamic height of the image
@@ -41,8 +43,6 @@ const BaseLogo = (_a) => {
     const [fontSizeRatio, setfontSizeRatio] = require$$0.useState(0);
     // Is the logo visible? Default to true if not a subbrand
     const [isLogoVisible, setIsLogoVisible] = require$$0.useState(!subbrand);
-    // Initial height of the image when it's loaded
-    const initialImageHeight = require$$0.useRef(null);
     // Resize observer gets the initial height of the image when
     // it loads and updates the height when it changes in state
     const observer = require$$0.useRef(new ResizeObserver((entries) => {
@@ -59,7 +59,7 @@ const BaseLogo = (_a) => {
         }
     }, [imageLoaded, fontSizeRatio, subbrand]);
     // Set up the Resize observer to watch the image
-    require$$0.useEffect(() => {
+    require$$0.useLayoutEffect(() => {
         if (imageLoaded && lockupRef.current && imageRef.current) {
             const imageEl = imageRef.current;
             observer.current.observe(imageEl);
@@ -70,12 +70,12 @@ const BaseLogo = (_a) => {
     // the lockup container as much as possible without overflowing.
     // Then gets the ratio of full font size to image height which will
     // be used to calculate the font size if the image gets resized
-    require$$0.useEffect(() => {
+    require$$0.useLayoutEffect(() => {
         setFontSize();
     }, [imageLoaded, initialImageHeight.current]);
     // Adjust the font size if for some weird reason the subbrand changes
     // This is mostly just to illustrate how the component works on Storybook
-    require$$0.useEffect(() => {
+    require$$0.useLayoutEffect(() => {
         setFontSize();
     }, [subbrand]);
     function setFontSize() {

package/lib/esm/components/Logo/Logo.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import classNames from 'classnames';
 import '../../GlobalCtx-7fb23cfa.js';
@@ -31,6 +31,8 @@ const BaseLogo = (_a) => {
     const lockupRef = useRef(null);
     // The lockup text
     const lockupTextRef = useRef(null);
+    // Initial height of the image when it's loaded
+    const initialImageHeight = useRef(null);
     // Has the image loaded or not
     const [imageLoaded, setImageLoaded] = useState(false);
     // Dynamic height of the image
@@ -39,8 +41,6 @@ const BaseLogo = (_a) => {
     const [fontSizeRatio, setfontSizeRatio] = useState(0);
     // Is the logo visible? Default to true if not a subbrand
     const [isLogoVisible, setIsLogoVisible] = useState(!subbrand);
-    // Initial height of the image when it's loaded
-    const initialImageHeight = useRef(null);
     // Resize observer gets the initial height of the image when
     // it loads and updates the height when it changes in state
     const observer = useRef(new ResizeObserver((entries) => {
@@ -57,7 +57,7 @@ const BaseLogo = (_a) => {
         }
     }, [imageLoaded, fontSizeRatio, subbrand]);
     // Set up the Resize observer to watch the image
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (imageLoaded && lockupRef.current && imageRef.current) {
             const imageEl = imageRef.current;
             observer.current.observe(imageEl);
@@ -68,12 +68,12 @@ const BaseLogo = (_a) => {
     // the lockup container as much as possible without overflowing.
     // Then gets the ratio of full font size to image height which will
     // be used to calculate the font size if the image gets resized
-    useEffect(() => {
+    useLayoutEffect(() => {
         setFontSize();
     }, [imageLoaded, initialImageHeight.current]);
     // Adjust the font size if for some weird reason the subbrand changes
     // This is mostly just to illustrate how the component works on Storybook
-    useEffect(() => {
+    useLayoutEffect(() => {
         setFontSize();
     }, [subbrand]);
     function setFontSize() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -75,7 +75,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.18",
-    "@ilo-org/styles": "0.2.0",
+    "@ilo-org/styles": "0.3.0",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },

package/src/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useGlobalSettings } from "../../hooks";
 import { InnerLogoProps, LogoProps } from "./Logo.props";
 import classnames from "classnames";
@@ -55,6 +55,9 @@ const BaseLogo: React.FC<InnerLogoProps> = ({
   // The lockup text
   const lockupTextRef = useRef<HTMLSpanElement>(null);
 
+  // Initial height of the image when it's loaded
+  const initialImageHeight = useRef<null | number>(null);
+
   // Has the image loaded or not
   const [imageLoaded, setImageLoaded] = useState(false);
 
@@ -67,9 +70,6 @@ const BaseLogo: React.FC<InnerLogoProps> = ({
   // Is the logo visible? Default to true if not a subbrand
   const [isLogoVisible, setIsLogoVisible] = useState(!subbrand);
 
-  // Initial height of the image when it's loaded
-  const initialImageHeight = useRef<null | number>(null);
-
   // Resize observer gets the initial height of the image when
   // it loads and updates the height when it changes in state
   const observer = useRef(
@@ -90,7 +90,7 @@ const BaseLogo: React.FC<InnerLogoProps> = ({
   }, [imageLoaded, fontSizeRatio, subbrand]);
 
   // Set up the Resize observer to watch the image
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (imageLoaded && lockupRef.current && imageRef.current) {
       const imageEl = imageRef.current;
       observer.current.observe(imageEl);
@@ -102,13 +102,13 @@ const BaseLogo: React.FC<InnerLogoProps> = ({
   // the lockup container as much as possible without overflowing.
   // Then gets the ratio of full font size to image height which will
   // be used to calculate the font size if the image gets resized
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFontSize();
   }, [imageLoaded, initialImageHeight.current]);
 
   // Adjust the font size if for some weird reason the subbrand changes
   // This is mostly just to illustrate how the component works on Storybook
-  useEffect(() => {
+  useLayoutEffect(() => {
     setFontSize();
   }, [subbrand]);