Merge pull request #255 from City-of-Helsinki/fix/navigation-issue

[Fix] Navigation component name mangling issue

CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 
+## [0.13.2] - September 21, 2020
+### Documentation
+#### Added
+- Sketch file and symbol guidelines to the Contributing section
+- Logo component documentation page
+- HDS Colour contrast accessibility examples and guidelines
+- Localisation guidelines
+
+#### Changed
+- Improved styling of documentation site html elements to improve readability and visuals
+- Search bar placeholder text
+#### Removed
+- Links to HDS Core Logo documentation (Logo is not implemented in HDS Core yet)
+
+### React
+#### Fixed
+- [Navigation] Fixed an issue where the component didn't work correctly in production builds. in ([#255](https://github.com/City-of-Helsinki/helsinki-design-system/pull/255))
+    - The problem was caused by the navigation component names getting mangled in production builds.
+
+
 ## [0.13.1] - September 9, 2020
 ### Documentation
 #### Added

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Core styles for the Helsinki Design System",
   "author": "Anssi Lehtonen <[email protected]>",
   "contributors": [
@@ -29,7 +29,7 @@
     "@storybook/html": "6.0.19",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "0.13.1",
+    "hds-design-tokens": "0.13.2",
     "normalize.css": "8.0.1",
     "postcss": "7.0.30",
     "postcss-cli": "7.1.1",

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Design tokens for the Helsinki Design System",
   "author": "Niclas Liimatainen <[email protected]>",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "license": "MIT",
   "main": "./index.js",
   "module": "./index.js",
@@ -84,7 +84,7 @@
     "@babel/runtime": "7.11.2",
     "@react-aria/visually-hidden": "3.2.0",
     "downshift": "5.4.0",
-    "hds-core": "0.13.1",
+    "hds-core": "0.13.2",
     "lodash.isequal": "4.5.0",
     "lodash.uniqueid": "4.0.1",
     "react-spring": "9.0.0-rc.3"

packages/react/src/common/types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+/**
+ * Extends the React FunctionComponent type with the componentName key
+ */
+export type FCWithName = React.FC & { componentName: string };

packages/react/src/components/navigation/Navigation.tsx

@@ -15,6 +15,7 @@ import { NavigationDropdown } from './navigation-dropdown/NavigationDropdown';
 import { useMobile } from '../../hooks/useMobile';
 import { IconCross, IconMenuHamburger } from '../../icons';
 import { NavigationReducerAction, NavigationReducerState } from './Navigation.interface';
+import { FCWithName } from '../../common/types';
 
 const MOBILE_MENU_TRANSITION: UseTransitionProps = {
   from: { transform: 'translate3d(0, -10%, 0)', opacity: 0.85 },
@@ -107,7 +108,7 @@ const rearrangeChildrenForMobile = (children: React.ReactElement[], authenticate
 
   // moves the component to the start of the array
   const moveComponentToTop = (name: string) => {
-    const index = rearrangedChildren.findIndex((item) => (item?.type as React.FC)?.name === name);
+    const index = rearrangedChildren.findIndex((item) => (item?.type as FCWithName)?.componentName === name);
     if (index > -1) {
       const component = rearrangedChildren.splice(index, 1)[0];
       rearrangedChildren.splice(0, 0, component);
@@ -205,18 +206,18 @@ export const Navigation = ({
   const childrenAsArray = React.Children.toArray(children) as React.ReactElement[];
   // children without the navigation row
   const childrenWithoutNavigation = childrenAsArray.filter(
-    (child) => (child.type as React.FC)?.name !== 'NavigationRow',
+    (child) => (child.type as FCWithName)?.componentName !== 'NavigationRow',
   );
   // filter out the NavigationRow, so that it can be rendered correctly based on the 'navigationRowDisplay' value
-  const navigation = childrenAsArray.filter((child) => (child.type as React.FC)?.name === 'NavigationRow');
+  const navigation = childrenAsArray.filter((child) => (child.type as FCWithName)?.componentName === 'NavigationRow');
 
   // children that will be rendered in the mobile menu
   let menuChildren = null;
 
   if (isMobile) {
     // navigation actions
-    const actions = childrenAsArray.find((child) => (child.type as React.FC).name === 'NavigationActions')?.props
-      ?.children;
+    const actions = childrenAsArray.find((child) => (child.type as FCWithName).componentName === 'NavigationActions')
+      ?.props?.children;
     const items = React.Children.toArray([navigation, actions]) as React.ReactElement[];
 
     // rearrange children

packages/react/src/components/navigation/navigation-actions/NavigationActions.tsx

@@ -5,3 +5,4 @@ import styles from './NavigationActions.module.css';
 export const NavigationActions = ({ children }: React.PropsWithChildren<{}>) => (
   <div className={styles.navigationActions}>{children}</div>
 );
+NavigationActions.componentName = 'NavigationActions';

packages/react/src/components/navigation/navigation-row/NavigationRow.tsx

@@ -37,3 +37,4 @@ export const NavigationRow = ({ display = 'subNav', children }: NavigationRowPro
     <nav className={classNames(styles.navigation, display === 'subNav' && styles.subNav)}>{childrenWithClassName}</nav>
   );
 };
+NavigationRow.componentName = 'NavigationRow';

packages/react/src/components/navigation/navigation-search/NavigationSearch.tsx

@@ -107,3 +107,4 @@ export const NavigationSearch = ({
     </div>
   );
 };
+NavigationSearch.displayName = 'NavigationSearch';

packages/react/src/components/navigation/navigation-user/NavigationUser.tsx

@@ -89,3 +89,4 @@ export const NavigationUser = ({
     </div>
   );
 };
+NavigationUser.componentName = 'NavigationUser';

site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "private": true,
   "description": "Documentation for Helsinki Design System",
   "license": "MIT",
@@ -22,9 +22,9 @@
   "devDependencies": {
     "gatsby-cli": "2.12.29",
     "gatsby-plugin-matomo": "0.8.3",
-    "hds-core": "0.13.1",
-    "hds-design-tokens": "0.13.1",
-    "hds-react": "0.13.1",
+    "hds-core": "0.13.2",
+    "hds-design-tokens": "0.13.2",
+    "hds-react": "0.13.2",
     "react-helmet": "6.0.0",
     "rimraf": "3.0.2"
   }