@speakapbv/dough-extended-components-for-speakap - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

CHANGELOG.md

@@ -7,2 +7,10 @@ ### Changelog
 
+#### [v1.2.4](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.2.3...v1.2.4)
+
+> 16 March 2020
+
+-   added news item [`7e4d800`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/7e4d80003076bb8b6021e694c260105869379fa1)
+-   updated version to v1.2.4 [`f862028`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/f862028fc097e8588145818a12a06f5ce8f1bf1f)
+-   updated toggle to be reverted on UserDropMenu [`6707fd2`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/6707fd2145bc5087f67a29c491bd2efbd61a8f1e)
+
 #### [v1.2.3](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.2.1...v1.2.3)
@@ -12,5 +20,5 @@
 
-- cleanedup styles [`a3c1767`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/a3c176758d4aaaf15087a2c032c9306f888485bc)
-- added data attributes support for menu button [`579141f`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/579141f0a9b7cd8a0940bdfb94cce93111cf5bdc)
-- updated type declerations [`639533b`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/639533b77cca6c0399642ae14bf6fe4d3aa02b13)
+-   cleanedup styles [`a3c1767`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/a3c176758d4aaaf15087a2c032c9306f888485bc)
+-   added data attributes support for menu button [`579141f`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/579141f0a9b7cd8a0940bdfb94cce93111cf5bdc)
+-   updated type declerations [`639533b`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/639533b77cca6c0399642ae14bf6fe4d3aa02b13)
 
@@ -21,5 +29,5 @@ #### [v1.2.1](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.1.3...v1.2.1)
 
-- added update card [`c51fc47`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/c51fc4721a3eed619730784c87e530c7eedc08bf)
-- added comment box components [`0885758`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/0885758b29a5826f4fd9e8d0ceb09d3100a21c13)
-- added likes container [`546ce6c`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/546ce6c249d59483831aa6787ff4b0c45f541e96)
+-   added update card [`c51fc47`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/c51fc4721a3eed619730784c87e530c7eedc08bf)
+-   added comment box components [`0885758`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/0885758b29a5826f4fd9e8d0ceb09d3100a21c13)
+-   added likes container [`546ce6c`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/546ce6c249d59483831aa6787ff4b0c45f541e96)
 
@@ -30,5 +38,5 @@ #### [v1.1.3](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.1.2...v1.1.3)
 
-- added NetworksDropMenu [`63931f7`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/63931f7e000390e55c10f402bdf3d07b28486025)
-- version updated to v1.1.3 [`cd5ec7a`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/cd5ec7a41cc71ad3e1ac0d7a662d97bf574131ad)
-- updated app headers box sizings [`b097776`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/b0977766a3db61c13c498ada37981f3d401389ad)
+-   added NetworksDropMenu [`63931f7`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/63931f7e000390e55c10f402bdf3d07b28486025)
+-   version updated to v1.1.3 [`cd5ec7a`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/cd5ec7a41cc71ad3e1ac0d7a662d97bf574131ad)
+-   updated app headers box sizings [`b097776`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/b0977766a3db61c13c498ada37981f3d401389ad)
 
@@ -39,5 +47,5 @@ #### [v1.1.2](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.1.1...v1.1.2)
 
-- added autochangelog [`0c7cb21`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/0c7cb2189c6259322847eec40108e0c278df3d1d)
-- version [`2dbf191`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/2dbf191d935648f29f77b86c9448157c98b7c588)
-- reverted husky usage [`66cac42`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/66cac424c63dcb4d8034b398217f8c19bff5d31e)
+-   added autochangelog [`0c7cb21`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/0c7cb2189c6259322847eec40108e0c278df3d1d)
+-   version [`2dbf191`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/2dbf191d935648f29f77b86c9448157c98b7c588)
+-   reverted husky usage [`66cac42`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/66cac424c63dcb4d8034b398217f8c19bff5d31e)
 
@@ -48,5 +56,5 @@ #### [v1.1.1](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.1.0...v1.1.1)
 
-- updated version to 1.1.1 [`dfca373`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/dfca373e0f6674b4572c1be598b99bd74073d466)
-- removed unnecessary scroll stuff from AppContent [`9313b1b`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/9313b1b77428198c89389dfb4deb49cec3f34f9d)
-- fixed positions and layout structures bodyscroll [`fb77373`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/fb77373eaa7715f7a28d35f905d5173b0eab54ca)
+-   updated version to 1.1.1 [`dfca373`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/dfca373e0f6674b4572c1be598b99bd74073d466)
+-   removed unnecessary scroll stuff from AppContent [`9313b1b`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/9313b1b77428198c89389dfb4deb49cec3f34f9d)
+-   fixed positions and layout structures bodyscroll [`fb77373`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/fb77373eaa7715f7a28d35f905d5173b0eab54ca)
 
@@ -57,5 +65,5 @@ #### [v1.1.0](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.0.0...v1.1.0)
 
-- updated layout sctructure for all frame components [`c0040e6`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/c0040e64e4efe94d9c85f440bea61ad3808e6eba)
-- added ApplicationContent component [`e73e121`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/e73e121898f6b5a37c3114d6a37515bfb82adea9)
-- updated menu button structure [`60fa6fa`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/60fa6fadcdc2e7cc37a06416e317810708f784cf)
+-   updated layout sctructure for all frame components [`c0040e6`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/c0040e64e4efe94d9c85f440bea61ad3808e6eba)
+-   added ApplicationContent component [`e73e121`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/e73e121898f6b5a37c3114d6a37515bfb82adea9)
+-   updated menu button structure [`60fa6fa`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/60fa6fadcdc2e7cc37a06416e317810708f784cf)
 
@@ -66,4 +74,4 @@ #### v1.0.0
 
-- init configs [`4dc01bc`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/4dc01bcb499d3ed81916caa7ef4d842c1e452764)
-- updated structure [`e00ab80`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/e00ab806bfce8525398877ae94b68e57ba7116b9)
-- updated styles and supportive components [`280dbc4`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/280dbc48b7f948301b9627c2a43da8c0a4fa4be9)
+-   init configs [`4dc01bc`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/4dc01bcb499d3ed81916caa7ef4d842c1e452764)
+-   updated structure [`e00ab80`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/e00ab806bfce8525398877ae94b68e57ba7116b9)
+-   updated styles and supportive components [`280dbc4`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/280dbc48b7f948301b9627c2a43da8c0a4fa4be9)

dist/index.d.ts

@@ -1,2 +0,2 @@
-declare module "@speakapbv/dough-component-library" {
+declare module "@speakapbv/dough-extended-components-for-speakap" {
     import * as React from "react";
@@ -24,2 +24,15 @@
 
+    /** NewsContentBox */
+    export interface NewsContentBoxProps {
+        newsPicture: string;
+        newsTitle: string;
+        userPicture: string;
+        userName: string;
+        publishDateText: string;
+        onUserClicked?(): void;
+        menuButtons?: Array<JSX.Element | Element>;
+        menuButtons?: Array<JSX.Element | Element>;
+    }
+    export const NewsContentBox: React.FunctionComponent<NewsContentBoxProps>;
+
     /** EventContentBox */
@@ -66,3 +79,3 @@ export interface EventContentBoxProps {
         notificationIcon: JSX.Element | Element;
-        onNotificationsStatusChanged?(disabled: boolean): void;
+        onNotificationsStatusChanged?(enabled: boolean): void;
         onSignoutClick(): void;
@@ -69,0 +82,0 @@ onClose?(): void;

dist/index.es.js

@@ -237,3 +237,3 @@ import React, { forwardRef, useState, useRef, useEffect, Children } from 'react';
  * @property {(JSX.Element | Element )} notificationIcon
- * @property {(disabled:boolean):void=>{}} [onNotificationsStatusChanged]
+ * @property {(enabled:boolean):void=>{}} [onNotificationsStatusChanged]
  * @property {():void=>{}} onSignoutClick
@@ -250,6 +250,6 @@ * @property {():void=>{}} [onClose]
 var UserDropMenu = function UserDropMenu(props) {
-  var _useState = useState(!props.notificationStatus),
+  var _useState = useState(props.notificationStatus || false),
       _useState2 = _slicedToArray(_useState, 2),
-      notificationsDisabled = _useState2[0],
-      setNotificationsDisabled = _useState2[1];
+      notificationsEnabled = _useState2[0],
+      setNotificationsEnabled = _useState2[1];
 
@@ -294,6 +294,6 @@ return React.createElement(DropMenu, {
     onChange: function onChange(val) {
-      setNotificationsDisabled(val);
+      setNotificationsEnabled(val);
       props.onNotificationsStatusChanged(val);
     },
-    value: notificationsDisabled,
+    value: notificationsEnabled,
     color: colors.PRIMARY,
@@ -375,3 +375,3 @@ size: sizes.NORMAL,
 
-var css_248z$2 = ".speakap-menu-button-container {\n  margin-top: 16px;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 48px;\n  height: 42px;\n  padding-left: 16px;\n  padding-right: 8px;\n  margin-left: -8px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  overflow: hidden; }\n  body:not(.no-transition) .speakap-menu-button-container {\n    transition: all 450ms cubic-bezier(0.25, 1, 0, 1); }\n  body.no-transition .speakap-menu-button-container {\n    transition: none 0ms linear;\n    transition-delay: 0ms !important; }\n  .speakap-menu-button-container + .speakap-menu-button-container {\n    margin-top: 8px; }\n  .speakap-menu-button-container .speakap-menu-button-wrapper {\n    width: 100%;\n    min-width: 32px;\n    box-sizing: border-box; }\n    .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button {\n      width: 100%;\n      min-width: 32px; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button {\n        overflow: hidden;\n        width: 100%;\n        transition-duration: 0ms;\n        justify-content: flex-start;\n        min-height: 32px;\n        padding: 0; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label {\n          font-size: 0.875rem;\n          opacity: 0;\n          margin-left: 20px;\n          height: 42px;\n          display: -webkit-box;\n          display: -moz-box;\n          display: -webkit-flex;\n          display: -ms-flexbox;\n          display: flex;\n          flex-flow: row nowrap;\n          align-items: center;\n          overflow: hidden;\n          flex: 1;\n          justify-content: flex-start;\n          text-align: left;\n          min-width: 150px; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text {\n            flex: 1; }\n            .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text + * {\n              cursor: pointer;\n              pointer-events: all !important; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-icon {\n          color: var(--dough-color-text-light); }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper {\n          background-color: transparent !important; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n            display: none; }\n  .speakap-menu-button-container > .dough-badge-content-wrapper {\n    right: initial;\n    top: 4px;\n    left: 24px; }\n  .speakap-menu-button-container:hover, .speakap-menu-button-container.speakap-menu-button-active {\n    background-color: var(--dough-color-header); }\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent *, .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent * {\n      color: var(--dough-color-white); }\n";
+var css_248z$2 = ".speakap-menu-button-container {\n  margin-top: 16px;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 48px;\n  height: 42px;\n  padding-left: 16px;\n  padding-right: 8px;\n  margin-left: -8px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  overflow: hidden; }\n  body:not(.no-transition) .speakap-menu-button-container {\n    transition: all 450ms cubic-bezier(0.25, 1, 0, 1); }\n  body.no-transition .speakap-menu-button-container {\n    transition: none 0ms linear;\n    transition-delay: 0ms !important; }\n  .speakap-menu-button-container + .speakap-menu-button-container {\n    margin-top: 8px; }\n  .speakap-menu-button-container .speakap-menu-button-wrapper {\n    width: 100%;\n    min-width: 32px;\n    box-sizing: border-box; }\n    .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button {\n      overflow: hidden;\n      width: 100%;\n      transition-duration: 0ms;\n      justify-content: flex-start;\n      min-height: 32px;\n      padding: 0; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label {\n        font-size: 0.875rem;\n        opacity: 0;\n        margin-left: 20px;\n        height: 42px;\n        display: -webkit-box;\n        display: -moz-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n        overflow: hidden;\n        flex: 1;\n        justify-content: flex-start;\n        text-align: left;\n        min-width: 150px; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text {\n          flex: 1; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text + * {\n            cursor: pointer;\n            pointer-events: all !important; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-icon {\n        color: var(--dough-color-text-light); }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper {\n        background-color: transparent !important; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n          display: none; }\n  .speakap-menu-button-container > .dough-badge-content-wrapper {\n    right: initial;\n    top: 4px;\n    left: 24px; }\n  .speakap-menu-button-container:hover, .speakap-menu-button-container.speakap-menu-button-active {\n    background-color: var(--dough-color-header); }\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent *, .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent * {\n      color: var(--dough-color-white); }\n";
 styleInject(css_248z$2);
@@ -415,3 +415,3 @@
 
-var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n  width: 100vw;\n  min-height: 100vh; }\n  .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n    width: 100%;\n    padding-top: 80px;\n    padding-bottom: 24px;\n    box-sizing: border-box; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n  height: 56px;\n  max-height: 56px;\n  min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n  overflow-x: hidden;\n  overflow-y: auto;\n  margin: 0 auto;\n  max-width: 1328px;\n  padding-left: 88px;\n  padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
+var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n  width: 100vw;\n  min-height: 100vh; }\n  .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n    width: 100%;\n    padding-top: 80px;\n    padding-bottom: 24px;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n  height: 56px;\n  max-height: 56px;\n  min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n  overflow-x: hidden;\n  overflow-y: auto;\n  margin: 0 auto;\n  max-width: 1328px;\n  padding-left: 88px;\n  padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
 styleInject(css_248z$3);
@@ -916,2 +916,3 @@
     width: "100%",
+    height: "184px",
     src: props.eventPicture
@@ -962,2 +963,72 @@ }, React.createElement(LayoutContainer, {
 
+/**
+ * @typedef {Object} NewsContentBoxProps
+ * @property {string} newsPicture
+ * @property {string} newsTitle
+ * @property {string} userPicture
+ * @property {string} userName
+ * @property {string} publishDateText
+ * @property {():void=>{}} [onUserClicked]
+ * @property {(Array<JSX.Element | Element>)} [menuButtons]
+ * @property {(Array<JSX.Element | Element>)} [menuButtons]
+ */
+
+/**
+ * NewsContentBox
+ * @type {import('react').FunctionComponent<NewsContentBoxProps>}
+ */
+
+var NewsContentBox = function NewsContentBox(props) {
+  return React.createElement(Container, {
+    padding: sizes.NONE
+  }, React.createElement(Image, {
+    width: "100%",
+    height: "184px",
+    src: props.newsPicture
+  }, React.createElement(LayoutContainer, {
+    fillParent: true,
+    layoutType: "vertical",
+    className: "speakap-event-image-container"
+  }, props.menuButtons && props.menuButtons.length > 0 && React.createElement(LayoutFlexBox, {
+    padding: sizes.XS,
+    autoFit: false,
+    spacing: spacings.STRETCH,
+    horizontalAlign: "right"
+  }, React.createElement(DropMenu, {
+    color: colors.TRANSPARENT,
+    className: "button-over-image",
+    size: sizes.SMALL,
+    alignFromRight: true
+  }, props.menuButtons)))), React.createElement(Container, {
+    paddingHorizontal: sizes.NORMAL,
+    paddingVertical: sizes.SMALL
+  }, React.createElement(H4, {
+    color: colorsText.DARK
+  }, props.newsTitle)), React.createElement(LayoutContainer, null, React.createElement(LayoutFlexBox, {
+    paddingHorizontal: sizes.NORMAL,
+    autoFit: false
+  }, React.createElement(Link, {
+    underline: false,
+    onClick: props.onUserClicked
+  }, React.createElement(Image, {
+    src: props.userPicture,
+    rounded: true,
+    size: sizes.XS
+  }))), React.createElement(LayoutFlexBox, {
+    autoFit: false,
+    spacing: spacings.STRETCH,
+    paddingHorizontal: sizes.NONE
+  }, React.createElement(H7, null, React.createElement(Link, {
+    color: colorsText.DARK,
+    underline: false,
+    onClick: props.onUserClicked
+  }, props.userName)), React.createElement(Subtitle, null, props.publishDateText))), React.createElement(Spacer, {
+    type: "vertical",
+    size: sizes.SMALL
+  }), React.createElement(Container, {
+    paddingVertical: sizes.NONE
+  }, props.children));
+};
+NewsContentBox.displayName = "NewsContentBox";
+
 var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n  margin-left: -24px;\n  margin-right: -24px;\n  width: calc(100% + 48px); }\n  .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    text-align: center; }\n    .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n      outline: none;\n      -webkit-tap-highlight-color: transparent; }\n";
@@ -1023,2 +1094,2 @@ styleInject(css_248z$9);
 
-export { ApplicationContent, ApplicationFrame, ApplicationHeader, ApplicationHeaderCenter, ApplicationHeaderLeft, ApplicationHeaderRight, ApplicationNavigation, CommentBox, CommentsContainer, EventContentBox, LikesContainer, MenuButton, NetworksDropMenu, Page, PageContentCenter, PageContentLeft, PageContentRight, PostContentBox, RsvpStatusToggle, RsvpStatusTogglesContainer, SearchTextBox, UpdateCard, UserDropMenu };
+export { ApplicationContent, ApplicationFrame, ApplicationHeader, ApplicationHeaderCenter, ApplicationHeaderLeft, ApplicationHeaderRight, ApplicationNavigation, CommentBox, CommentsContainer, EventContentBox, LikesContainer, MenuButton, NetworksDropMenu, NewsContentBox, Page, PageContentCenter, PageContentLeft, PageContentRight, PostContentBox, RsvpStatusToggle, RsvpStatusTogglesContainer, SearchTextBox, UpdateCard, UserDropMenu };

dist/index.js

@@ -244,3 +244,3 @@ 'use strict';
  * @property {(JSX.Element | Element )} notificationIcon
- * @property {(disabled:boolean):void=>{}} [onNotificationsStatusChanged]
+ * @property {(enabled:boolean):void=>{}} [onNotificationsStatusChanged]
  * @property {():void=>{}} onSignoutClick
@@ -257,6 +257,6 @@ * @property {():void=>{}} [onClose]
 var UserDropMenu = function UserDropMenu(props) {
-  var _useState = React.useState(!props.notificationStatus),
+  var _useState = React.useState(props.notificationStatus || false),
       _useState2 = _slicedToArray(_useState, 2),
-      notificationsDisabled = _useState2[0],
-      setNotificationsDisabled = _useState2[1];
+      notificationsEnabled = _useState2[0],
+      setNotificationsEnabled = _useState2[1];
 
@@ -301,6 +301,6 @@ return React__default.createElement(doughComponentLibrary.DropMenu, {
     onChange: function onChange(val) {
-      setNotificationsDisabled(val);
+      setNotificationsEnabled(val);
       props.onNotificationsStatusChanged(val);
     },
-    value: notificationsDisabled,
+    value: notificationsEnabled,
     color: doughComponentLibrary.colors.PRIMARY,
@@ -382,3 +382,3 @@ size: doughComponentLibrary.sizes.NORMAL,
 
-var css_248z$2 = ".speakap-menu-button-container {\n  margin-top: 16px;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 48px;\n  height: 42px;\n  padding-left: 16px;\n  padding-right: 8px;\n  margin-left: -8px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  overflow: hidden; }\n  body:not(.no-transition) .speakap-menu-button-container {\n    transition: all 450ms cubic-bezier(0.25, 1, 0, 1); }\n  body.no-transition .speakap-menu-button-container {\n    transition: none 0ms linear;\n    transition-delay: 0ms !important; }\n  .speakap-menu-button-container + .speakap-menu-button-container {\n    margin-top: 8px; }\n  .speakap-menu-button-container .speakap-menu-button-wrapper {\n    width: 100%;\n    min-width: 32px;\n    box-sizing: border-box; }\n    .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button {\n      width: 100%;\n      min-width: 32px; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button {\n        overflow: hidden;\n        width: 100%;\n        transition-duration: 0ms;\n        justify-content: flex-start;\n        min-height: 32px;\n        padding: 0; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label {\n          font-size: 0.875rem;\n          opacity: 0;\n          margin-left: 20px;\n          height: 42px;\n          display: -webkit-box;\n          display: -moz-box;\n          display: -webkit-flex;\n          display: -ms-flexbox;\n          display: flex;\n          flex-flow: row nowrap;\n          align-items: center;\n          overflow: hidden;\n          flex: 1;\n          justify-content: flex-start;\n          text-align: left;\n          min-width: 150px; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text {\n            flex: 1; }\n            .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text + * {\n              cursor: pointer;\n              pointer-events: all !important; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-icon {\n          color: var(--dough-color-text-light); }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper {\n          background-color: transparent !important; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n            display: none; }\n  .speakap-menu-button-container > .dough-badge-content-wrapper {\n    right: initial;\n    top: 4px;\n    left: 24px; }\n  .speakap-menu-button-container:hover, .speakap-menu-button-container.speakap-menu-button-active {\n    background-color: var(--dough-color-header); }\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent *, .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent * {\n      color: var(--dough-color-white); }\n";
+var css_248z$2 = ".speakap-menu-button-container {\n  margin-top: 16px;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 48px;\n  height: 42px;\n  padding-left: 16px;\n  padding-right: 8px;\n  margin-left: -8px;\n  display: -webkit-box;\n  display: -moz-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  overflow: hidden; }\n  body:not(.no-transition) .speakap-menu-button-container {\n    transition: all 450ms cubic-bezier(0.25, 1, 0, 1); }\n  body.no-transition .speakap-menu-button-container {\n    transition: none 0ms linear;\n    transition-delay: 0ms !important; }\n  .speakap-menu-button-container + .speakap-menu-button-container {\n    margin-top: 8px; }\n  .speakap-menu-button-container .speakap-menu-button-wrapper {\n    width: 100%;\n    min-width: 32px;\n    box-sizing: border-box; }\n    .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button {\n      overflow: hidden;\n      width: 100%;\n      transition-duration: 0ms;\n      justify-content: flex-start;\n      min-height: 32px;\n      padding: 0; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label {\n        font-size: 0.875rem;\n        opacity: 0;\n        margin-left: 20px;\n        height: 42px;\n        display: -webkit-box;\n        display: -moz-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n        overflow: hidden;\n        flex: 1;\n        justify-content: flex-start;\n        text-align: left;\n        min-width: 150px; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text {\n          flex: 1; }\n          .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-label > .speakap-menu-button-label-text + * {\n            cursor: pointer;\n            pointer-events: all !important; }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button > .dough-button-icon {\n        color: var(--dough-color-text-light); }\n      .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper {\n        background-color: transparent !important; }\n        .speakap-menu-button-container .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button .dough-button-background-wrapper > .dough-button-background-glow {\n          display: none; }\n  .speakap-menu-button-container > .dough-badge-content-wrapper {\n    right: initial;\n    top: 4px;\n    left: 24px; }\n  .speakap-menu-button-container:hover, .speakap-menu-button-container.speakap-menu-button-active {\n    background-color: var(--dough-color-header); }\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container:hover > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent *, .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent,\n    .speakap-menu-button-container.speakap-menu-button-active > .speakap-menu-button-wrapper > .speakap-menu-button > .dough-button.dough-color-transparent * {\n      color: var(--dough-color-white); }\n";
 styleInject(css_248z$2);
@@ -422,3 +422,3 @@
 
-var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n  width: 100vw;\n  min-height: 100vh; }\n  .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n    width: 100%;\n    padding-top: 80px;\n    padding-bottom: 24px;\n    box-sizing: border-box; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n  height: 56px;\n  max-height: 56px;\n  min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n  overflow-x: hidden;\n  overflow-y: auto;\n  margin: 0 auto;\n  max-width: 1328px;\n  padding-left: 88px;\n  padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
+var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n  width: 100vw;\n  min-height: 100vh; }\n  .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n    width: 100%;\n    padding-top: 80px;\n    padding-bottom: 24px;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n  height: 56px;\n  max-height: 56px;\n  min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n  overflow-x: hidden;\n  overflow-y: auto;\n  margin: 0 auto;\n  max-width: 1328px;\n  padding-left: 88px;\n  padding-right: 88px; }\n\n@media (max-width: 576px) {\n  .speakap-app-frame .speakap-app-frame-center {\n    max-width: 100%;\n    padding-left: 0;\n    padding-right: 0; } }\n";
 styleInject(css_248z$3);
@@ -923,2 +923,3 @@
     width: "100%",
+    height: "184px",
     src: props.eventPicture
@@ -969,2 +970,72 @@ }, React__default.createElement(doughComponentLibrary.LayoutContainer, {
 
+/**
+ * @typedef {Object} NewsContentBoxProps
+ * @property {string} newsPicture
+ * @property {string} newsTitle
+ * @property {string} userPicture
+ * @property {string} userName
+ * @property {string} publishDateText
+ * @property {():void=>{}} [onUserClicked]
+ * @property {(Array<JSX.Element | Element>)} [menuButtons]
+ * @property {(Array<JSX.Element | Element>)} [menuButtons]
+ */
+
+/**
+ * NewsContentBox
+ * @type {import('react').FunctionComponent<NewsContentBoxProps>}
+ */
+
+var NewsContentBox = function NewsContentBox(props) {
+  return React__default.createElement(doughComponentLibrary.Container, {
+    padding: doughComponentLibrary.sizes.NONE
+  }, React__default.createElement(doughComponentLibrary.Image, {
+    width: "100%",
+    height: "184px",
+    src: props.newsPicture
+  }, React__default.createElement(doughComponentLibrary.LayoutContainer, {
+    fillParent: true,
+    layoutType: "vertical",
+    className: "speakap-event-image-container"
+  }, props.menuButtons && props.menuButtons.length > 0 && React__default.createElement(doughComponentLibrary.LayoutFlexBox, {
+    padding: doughComponentLibrary.sizes.XS,
+    autoFit: false,
+    spacing: doughComponentLibrary.spacings.STRETCH,
+    horizontalAlign: "right"
+  }, React__default.createElement(doughComponentLibrary.DropMenu, {
+    color: doughComponentLibrary.colors.TRANSPARENT,
+    className: "button-over-image",
+    size: doughComponentLibrary.sizes.SMALL,
+    alignFromRight: true
+  }, props.menuButtons)))), React__default.createElement(doughComponentLibrary.Container, {
+    paddingHorizontal: doughComponentLibrary.sizes.NORMAL,
+    paddingVertical: doughComponentLibrary.sizes.SMALL
+  }, React__default.createElement(doughComponentLibrary.H4, {
+    color: doughComponentLibrary.colorsText.DARK
+  }, props.newsTitle)), React__default.createElement(doughComponentLibrary.LayoutContainer, null, React__default.createElement(doughComponentLibrary.LayoutFlexBox, {
+    paddingHorizontal: doughComponentLibrary.sizes.NORMAL,
+    autoFit: false
+  }, React__default.createElement(doughComponentLibrary.Link, {
+    underline: false,
+    onClick: props.onUserClicked
+  }, React__default.createElement(doughComponentLibrary.Image, {
+    src: props.userPicture,
+    rounded: true,
+    size: doughComponentLibrary.sizes.XS
+  }))), React__default.createElement(doughComponentLibrary.LayoutFlexBox, {
+    autoFit: false,
+    spacing: doughComponentLibrary.spacings.STRETCH,
+    paddingHorizontal: doughComponentLibrary.sizes.NONE
+  }, React__default.createElement(doughComponentLibrary.H7, null, React__default.createElement(doughComponentLibrary.Link, {
+    color: doughComponentLibrary.colorsText.DARK,
+    underline: false,
+    onClick: props.onUserClicked
+  }, props.userName)), React__default.createElement(doughComponentLibrary.Subtitle, null, props.publishDateText))), React__default.createElement(doughComponentLibrary.Spacer, {
+    type: "vertical",
+    size: doughComponentLibrary.sizes.SMALL
+  }), React__default.createElement(doughComponentLibrary.Container, {
+    paddingVertical: doughComponentLibrary.sizes.NONE
+  }, props.children));
+};
+NewsContentBox.displayName = "NewsContentBox";
+
 var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n  margin-left: -24px;\n  margin-right: -24px;\n  width: calc(100% + 48px); }\n  .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    text-align: center; }\n    .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n      outline: none;\n      -webkit-tap-highlight-color: transparent; }\n";
@@ -1043,2 +1114,3 @@ styleInject(css_248z$9);
 exports.NetworksDropMenu = NetworksDropMenu;
+exports.NewsContentBox = NewsContentBox;
 exports.Page = Page;
@@ -1045,0 +1117,0 @@ exports.PageContentCenter = PageContentCenter;

package.json

 {
     "name": "@speakapbv/dough-extended-components-for-speakap",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "description": "DOUGH Extended for Speakap: Speakap Specific Components based on Dough",
@@ -5,0 +5,0 @@ "author": "Speakap",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122481

increased by5.46%

Lines of code

2263

increased by7.05%

No dependency changes