@digigov/ui 0.10.2 → 0.12.0

package/core/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -311,39 +311,427 @@ exports[`renders the notification banner 1`] = `
     }
   }
 >
-  <NotificationBanner>
-    <div
-      className="MuiCoreNotificationBanner-root"
+  <withDeprecationComponent
+    title="Notification Banner Example"
+  >
+    <Component
+      title="Notification Banner Example"
     >
-      <header
-        className="MuiCoreNotificationBanner-header"
+      <ForwardRef(NotificationBanner)
+        success={false}
       >
-        <ForwardRef(Title)
-          dense={true}
-          size="sm"
+        <div
+          aria-labelledby="govgr-notification-banner-title"
+          className="govgr-notification-banner"
+          data-module="govgr-notification-banner"
+          role="region"
         >
-          <h4
-            className="MuiDigigovTitle-root MuiDigigovTitle-sm MuiDigigovTitle-dense"
-          >
-            Important
-          </h4>
-        </ForwardRef(Title)>
-      </header>
-      <div
-        className="MuiCoreNotificationBanner-content"
+          <ForwardRef(NotificationBannerHeader)>
+            <div
+              className="govgr-notification-banner__header"
+            >
+              <h2
+                className="govgr-notification-banner__title"
+              >
+                Notification Banner Example
+              </h2>
+            </div>
+          </ForwardRef(NotificationBannerHeader)>
+          <ForwardRef(NotificationBannerContent)>
+            <div
+              className="govgr-notification-banner__content"
+            >
+              <ForwardRef(NotificationBannerHeading)>
+                <h3
+                  className="govgr-notification-banner__heading"
+                >
+                  this is a notification
+                </h3>
+              </ForwardRef(NotificationBannerHeading)>
+            </div>
+          </ForwardRef(NotificationBannerContent)>
+        </div>
+      </ForwardRef(NotificationBanner)>
+    </Component>
+  </withDeprecationComponent>
+</ThemeProvider>
+`;
+
+exports[`renders the notification banner with title and link 1`] = `
+<ThemeProvider
+  theme={
+    Object {
+      "breakpoints": Object {
+        "between": [Function],
+        "down": [Function],
+        "keys": Array [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl",
+        ],
+        "only": [Function],
+        "up": [Function],
+        "values": Object {
+          "lg": 1280,
+          "md": 960,
+          "sm": 600,
+          "xl": 1920,
+          "xs": 0,
+        },
+        "width": [Function],
+      },
+      "direction": "ltr",
+      "footer": Object {
+        "contrastText": "",
+        "link": "",
+        "main": "",
+      },
+      "header": Object {
+        "border": Object {
+          "background": "",
+          "height": "",
+          "width": "",
+        },
+        "height": "",
+        "logo": Object {
+          "component": "",
+          "height": "",
+        },
+      },
+      "mixins": Object {
+        "gutters": [Function],
+        "toolbar": Object {
+          "@media (min-width:0px) and (orientation: landscape)": Object {
+            "minHeight": 48,
+          },
+          "@media (min-width:600px)": Object {
+            "minHeight": 64,
+          },
+          "minHeight": 56,
+        },
+      },
+      "overrides": Object {},
+      "palette": Object {
+        "action": Object {
+          "activatedOpacity": 0.12,
+          "active": "rgba(0, 0, 0, 0.54)",
+          "disabled": "rgba(0, 0, 0, 0.26)",
+          "disabledBackground": "rgba(0, 0, 0, 0.12)",
+          "disabledOpacity": 0.38,
+          "focus": "rgba(0, 0, 0, 0.12)",
+          "focusOpacity": 0.12,
+          "hover": "rgba(0, 0, 0, 0.04)",
+          "hoverOpacity": 0.04,
+          "selected": "rgba(0, 0, 0, 0.08)",
+          "selectedOpacity": 0.08,
+        },
+        "augmentColor": [Function],
+        "background": Object {
+          "default": "#fafafa",
+          "paper": "#fff",
+        },
+        "common": Object {
+          "black": "#000",
+          "white": "#fff",
+        },
+        "contrastThreshold": 3,
+        "divider": "rgba(0, 0, 0, 0.12)",
+        "error": Object {
+          "contrastText": "#fff",
+          "dark": "#d32f2f",
+          "light": "#e57373",
+          "main": "#f44336",
+        },
+        "getContrastText": [Function],
+        "grey": Object {
+          "100": "#f5f5f5",
+          "200": "#eeeeee",
+          "300": "#e0e0e0",
+          "400": "#bdbdbd",
+          "50": "#fafafa",
+          "500": "#9e9e9e",
+          "600": "#757575",
+          "700": "#616161",
+          "800": "#424242",
+          "900": "#212121",
+          "A100": "#d5d5d5",
+          "A200": "#aaaaaa",
+          "A400": "#303030",
+          "A700": "#616161",
+        },
+        "info": Object {
+          "contrastText": "#fff",
+          "dark": "#1976d2",
+          "light": "#64b5f6",
+          "main": "#2196f3",
+        },
+        "primary": Object {
+          "contrastText": "#fff",
+          "dark": "#303f9f",
+          "light": "#7986cb",
+          "main": "#3f51b5",
+        },
+        "secondary": Object {
+          "contrastText": "#fff",
+          "dark": "#c51162",
+          "light": "#ff4081",
+          "main": "#f50057",
+        },
+        "success": Object {
+          "contrastText": "rgba(0, 0, 0, 0.87)",
+          "dark": "#388e3c",
+          "light": "#81c784",
+          "main": "#4caf50",
+        },
+        "text": Object {
+          "disabled": "rgba(0, 0, 0, 0.38)",
+          "hint": "rgba(0, 0, 0, 0.38)",
+          "primary": "rgba(0, 0, 0, 0.87)",
+          "secondary": "rgba(0, 0, 0, 0.54)",
+        },
+        "tonalOffset": 0.2,
+        "type": "light",
+        "warning": Object {
+          "contrastText": "rgba(0, 0, 0, 0.87)",
+          "dark": "#f57c00",
+          "light": "#ffb74d",
+          "main": "#ff9800",
+        },
+      },
+      "props": Object {},
+      "shadows": Array [
+        "none",
+        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+      ],
+      "shape": Object {
+        "borderRadius": 4,
+      },
+      "spacing": [Function],
+      "transitions": Object {
+        "create": [Function],
+        "duration": Object {
+          "complex": 375,
+          "enteringScreen": 225,
+          "leavingScreen": 195,
+          "short": 250,
+          "shorter": 200,
+          "shortest": 150,
+          "standard": 300,
+        },
+        "easing": Object {
+          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+        },
+        "getAutoHeightDuration": [Function],
+      },
+      "typography": Object {
+        "body1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00938em",
+          "lineHeight": 1.5,
+        },
+        "body2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.01071em",
+          "lineHeight": 1.43,
+        },
+        "button": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.02857em",
+          "lineHeight": 1.75,
+          "textTransform": "uppercase",
+        },
+        "caption": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.75rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.03333em",
+          "lineHeight": 1.66,
+        },
+        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+        "fontSize": 14,
+        "fontWeightBold": 700,
+        "fontWeightLight": 300,
+        "fontWeightMedium": 500,
+        "fontWeightRegular": 400,
+        "h1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "6rem",
+          "fontWeight": 300,
+          "letterSpacing": "-0.01562em",
+          "lineHeight": 1.167,
+        },
+        "h2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "3.75rem",
+          "fontWeight": 300,
+          "letterSpacing": "-0.00833em",
+          "lineHeight": 1.2,
+        },
+        "h3": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "3rem",
+          "fontWeight": 400,
+          "letterSpacing": "0em",
+          "lineHeight": 1.167,
+        },
+        "h4": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "2.125rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00735em",
+          "lineHeight": 1.235,
+        },
+        "h5": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1.5rem",
+          "fontWeight": 400,
+          "letterSpacing": "0em",
+          "lineHeight": 1.334,
+        },
+        "h6": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1.25rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.0075em",
+          "lineHeight": 1.6,
+        },
+        "htmlFontSize": 16,
+        "overline": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.75rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.08333em",
+          "lineHeight": 2.66,
+          "textTransform": "uppercase",
+        },
+        "pxToRem": [Function],
+        "round": [Function],
+        "subtitle1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00938em",
+          "lineHeight": 1.75,
+        },
+        "subtitle2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.00714em",
+          "lineHeight": 1.57,
+        },
+      },
+      "zIndex": Object {
+        "appBar": 1100,
+        "drawer": 1200,
+        "mobileStepper": 1000,
+        "modal": 1300,
+        "snackbar": 1400,
+        "speedDial": 1050,
+        "tooltip": 1500,
+      },
+      Symbol(mui.nested): false,
+    }
+  }
+>
+  <withDeprecationComponent
+    link={
+      Object {
+        "label": "This is a label",
+        "url": "/",
+      }
+    }
+    title="Notification Banner Example"
+  >
+    <Component
+      link={
+        Object {
+          "label": "This is a label",
+          "url": "/",
+        }
+      }
+      title="Notification Banner Example"
+    >
+      <ForwardRef(NotificationBanner)
+        success={false}
       >
-        <ForwardRef(Title)
-          dense={true}
-          size="md"
+        <div
+          aria-labelledby="govgr-notification-banner-title"
+          className="govgr-notification-banner"
+          data-module="govgr-notification-banner"
+          role="region"
         >
-          <h3
-            className="MuiDigigovTitle-root MuiDigigovTitle-md MuiDigigovTitle-dense"
-          >
-            this is a notification
-          </h3>
-        </ForwardRef(Title)>
-      </div>
-    </div>
-  </NotificationBanner>
+          <ForwardRef(NotificationBannerHeader)>
+            <div
+              className="govgr-notification-banner__header"
+            >
+              <h2
+                className="govgr-notification-banner__title"
+              >
+                Notification Banner Example
+              </h2>
+            </div>
+          </ForwardRef(NotificationBannerHeader)>
+          <ForwardRef(NotificationBannerContent)>
+            <div
+              className="govgr-notification-banner__content"
+            >
+              <ForwardRef(NotificationBannerHeading)>
+                <h3
+                  className="govgr-notification-banner__heading"
+                >
+                  this is a notification
+                </h3>
+              </ForwardRef(NotificationBannerHeading)>
+              <ForwardRef(NotificationBannerLink)
+                href="/"
+              >
+                <a
+                  className="govgr-notification-banner__link"
+                  href="/"
+                >
+                  This is a label
+                </a>
+              </ForwardRef(NotificationBannerLink)>
+            </div>
+          </ForwardRef(NotificationBannerContent)>
+        </div>
+      </ForwardRef(NotificationBanner)>
+    </Component>
+  </withDeprecationComponent>
 </ThemeProvider>
 `;

package/core/NotificationBanner/index.d.ts

@@ -1,17 +1,18 @@
-/// <reference types="react" />
+import React from 'react';
 import { NotificationBannerProps as CoreNotificationBannerProps } from '@digigov/react-core/NotificationBanner';
 import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
 import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
 import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
+import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
 export interface NotificationBannerProps extends CoreNotificationBannerProps {
     variant?: 'important' | 'success';
     title?: string;
+    link?: {
+        url: string;
+        label: string;
+    };
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const NotificationBanner: ({ variant, title, children, ...props }: {
-    [x: string]: any;
-    variant?: string | undefined;
-    title: any;
-    children: any;
-}) => JSX.Element;
-export { NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, };
+export declare const NotificationBanner: React.FC<NotificationBannerProps>;
+export { NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, NotificationBannerLink, };
 export default NotificationBanner;

package/core/NotificationBanner/index.js

@@ -24,6 +24,12 @@ Object.defineProperty(exports, "NotificationBannerHeading", {
     return _NotificationBannerHeading["default"];
   }
 });
+Object.defineProperty(exports, "NotificationBannerLink", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationBannerLink["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -42,18 +48,23 @@ var _NotificationBannerHeading = _interopRequireDefault(require("@digigov/react-
 
 var _NotificationBannerContent = _interopRequireDefault(require("@digigov/react-core/NotificationBannerContent"));
 
-var _excluded = ["variant", "title", "children"];
+var _NotificationBannerLink = _interopRequireDefault(require("@digigov/react-core/NotificationBannerLink"));
+
+var _excluded = ["variant", "title", "link", "children"];
 var NotificationBanner = (0, _withDeprecation["default"])(function (_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'important' : _ref$variant,
       title = _ref.title,
+      link = _ref.link,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var success = variant === 'success';
   title = title ? title : success ? 'Success' : 'Important';
   return /*#__PURE__*/_react["default"].createElement(_NotificationBanner["default"], (0, _extends2["default"])({
     success: success
-  }, props), /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeader["default"], null, title), /*#__PURE__*/_react["default"].createElement(_NotificationBannerContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeading["default"], null, children)));
+  }, props), /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeader["default"], null, title), /*#__PURE__*/_react["default"].createElement(_NotificationBannerContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NotificationBannerHeading["default"], null, children), link && /*#__PURE__*/_react["default"].createElement(_NotificationBannerLink["default"], {
+    href: link.url
+  }, link.label)));
 }, {
   name: 'NotificationBanner',
   props: {

package/core/NotificationBanner/index.spec.js

@@ -20,4 +20,13 @@ var _ref = /*#__PURE__*/React.createElement(_NotificationBanner["default"], {
 
 it('renders the notification banner', function () {
   expect((0, _mountWithTheme["default"])(_ref)).toMatchSnapshot();
+});
+it('renders the notification banner with title and link', function () {
+  expect((0, _mountWithTheme["default"])( /*#__PURE__*/React.createElement(_NotificationBanner["default"], {
+    title: "Notification Banner Example",
+    link: {
+      url: '/',
+      label: 'This is a label'
+    }
+  }, "this is a notification"))).toMatchSnapshot();
 });

package/core/ServiceBadge/index.d.ts

@@ -3,6 +3,7 @@ import { PhaseBannerProps } from '@digigov/react-core/PhaseBanner';
 interface ServiceBadgeProps extends PhaseBannerProps {
     label?: string;
     ref?: React.Ref<HTMLDivElement>;
+    text?: string;
 }
 export declare const ServiceBadge: React.FC<ServiceBadgeProps>;
 export default ServiceBadge;

package/core/ServiceBadge/index.js

@@ -17,13 +17,16 @@ var _PhaseBanner = _interopRequireDefault(require("@digigov/react-core/PhaseBann
 
 var _PhaseBannerTag = _interopRequireDefault(require("@digigov/react-core/PhaseBannerTag"));
 
-var _excluded = ["label", "children"];
+var _PhaseBannerText = _interopRequireDefault(require("@digigov/react-core/PhaseBannerText"));
+
+var _excluded = ["label", "text", "children"];
 var ServiceBadge = (0, _withDeprecation["default"])(function (_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'BETA' : _ref$label,
+      text = _ref.text,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_PhaseBanner["default"], props, /*#__PURE__*/_react["default"].createElement(_PhaseBannerTag["default"], null, children || label));
+  return /*#__PURE__*/_react["default"].createElement(_PhaseBanner["default"], props, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_PhaseBannerTag["default"], null, label), text && /*#__PURE__*/_react["default"].createElement(_PhaseBannerText["default"], null, text)), ";");
 }, {
   name: 'ServiceBadge',
   rename: 'PhaseBanner'