Merge pull request #125 from City-of-Helsinki/react/notification-clas…

…snames React: Allow custom className for Notifications
City-of-Helsinki · Jun 5, 2020 · 7a361fc · 7a361fc
2 parents 7f1d556 + c02ee08
commit 7a361fc
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.3] - June 5, 2020
+### React
+#### Added
+- [Notification][DismissableNotification] `className` prop for applying additional class names to the notification
+
 ## [0.11.2] - June 5, 2020
 ### Documentation site
 #### Added

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Core styles for the Helsinki Design System",
   "author": "Anssi Lehtonen <[email protected]>",
   "contributors": [
@@ -28,7 +28,7 @@
     "@storybook/addons": "6.0.0-beta.13",
     "@storybook/html": "6.0.0-beta.13",
     "copyfiles": "2.2.0",
-    "hds-design-tokens": "0.11.2",
+    "hds-design-tokens": "0.11.3",
     "normalize.css": "8.0.1",
     "postcss": "7.0.30",
     "postcss-cli": "7.1.1",

diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Design tokens for the Helsinki Design System",
   "author": "Niclas Liimatainen <[email protected]>",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "downshift": "5.4.0",
-    "hds-core": "0.11.2",
+    "hds-core": "0.11.3",
     "lodash.isequal": "4.5.0",
     "lodash.uniqueid": "4.0.1",
     "react-spring": "8.0.27"

diff --git a/packages/react/src/components/notification/DismissableNotification.test.tsx b/packages/react/src/components/notification/DismissableNotification.test.tsx
@@ -13,4 +13,17 @@ describe('<DismissableNotification /> spec', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+  it('adds className prop to notification classes', () => {
+    const { container } = render(
+      <DismissableNotification
+        labelText="This is the tooltip label text"
+        closeButtonLabelText="Close tooltip"
+        className="testClass"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+      </DismissableNotification>,
+    );
+    expect(container.querySelector('.notification').classList.contains('testClass')).toBe(true);
+  });
 });
diff --git a/packages/react/src/components/notification/Notification.test.tsx b/packages/react/src/components/notification/Notification.test.tsx
@@ -13,4 +13,13 @@ describe('<Notification /> spec', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+  it('adds className prop to notification classes', () => {
+    const { container } = render(
+      <Notification labelText="This is the tool tip label text" className="testClass">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+      </Notification>,
+    );
+    expect((container.firstChild as HTMLElement).classList.contains('testClass')).toBe(true);
+  });
 });
diff --git a/packages/react/src/components/notification/Notification.tsx b/packages/react/src/components/notification/Notification.tsx
@@ -5,6 +5,7 @@ import styles from './Notification.module.css';
 import { IconInfoCircle, IconError, IconAlertCircle, IconCheck } from '../../icons';
 
 export type NotificationProps = React.PropsWithChildren<{
+  className?: string;
   labelText: string;
   type?: 'notification' | 'error' | 'warning' | 'success';
 }>;
@@ -20,8 +21,9 @@ const Notification: React.FC<NotificationProps> = ({
   children = null,
   labelText,
   type = 'notification',
+  className,
 }: NotificationProps) => (
-  <div className={classNames(styles.notification, styles[type])}>
+  <div className={classNames(styles.notification, styles[type], className)}>
     <div className={styles.label}>
       <span className={styles.icon} aria-hidden="true">
         {icons[type]}

diff --git a/site/package.json b/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "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.11.2",
-    "hds-design-tokens": "0.11.2",
-    "hds-react": "0.11.2",
+    "hds-core": "0.11.3",
+    "hds-design-tokens": "0.11.3",
+    "hds-react": "0.11.3",
     "react-helmet": "6.0.0",
     "rimraf": "3.0.2"
   }