@zendeskgarden/react-notifications 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/styled/StyledWell.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBase } from './StyledBase.js';
+
+const COMPONENT_ID = 'notifications.well';
+const StyledWell = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledWell",
+  componentId: "sc-a5831c-0"
+})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColorV8('neutralHue', 100, props.theme), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledWell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledWell };

package/dist/esm/styled/content/StyledClose.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.close';
+const StyledClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledClose",
+  componentId: "sc-1mr9nx1-0"
+})(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.hue ? getColorV8(props.hue, 800, props.theme) : getColorV8('neutralHue', 800, props.theme), props => focusStyles({
+  theme: props.theme,
+  inset: true
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledClose };

package/dist/esm/styled/content/StyledParagraph.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.paragraph';
+const StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledParagraph",
+  componentId: "sc-12tmd6p-0"
+})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledParagraph };

package/dist/esm/styled/content/StyledTitle.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.title';
+const StyledTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTitle",
+  componentId: "sc-xx4jsv-0"
+})(["margin:0;color:", ";font-weight:", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTitle };

package/dist/esm/styled/global-alert/StyledGlobalAlert.js

@@ -0,0 +1,85 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global-alert';
+const colorStyles = props => {
+  let borderColor;
+  let backgroundColor;
+  let foregroundColor;
+  let anchorHoverColor;
+  let anchorActiveColor;
+  let focusColor;
+  switch (props.alertType) {
+    case 'success':
+      borderColor = getColorV8('successHue', 700, props.theme);
+      backgroundColor = getColorV8('successHue', 600, props.theme);
+      foregroundColor = getColorV8('successHue', 100, props.theme);
+      anchorHoverColor = props.theme.palette.white;
+      anchorActiveColor = props.theme.palette.white;
+      focusColor = 'successHue';
+      break;
+    case 'error':
+      borderColor = getColorV8('dangerHue', 700, props.theme);
+      backgroundColor = getColorV8('dangerHue', 600, props.theme);
+      foregroundColor = getColorV8('dangerHue', 100, props.theme);
+      anchorHoverColor = props.theme.palette.white;
+      anchorActiveColor = props.theme.palette.white;
+      focusColor = 'dangerHue';
+      break;
+    case 'warning':
+      borderColor = getColorV8('warningHue', 400, props.theme);
+      backgroundColor = getColorV8('warningHue', 300, props.theme);
+      foregroundColor = getColorV8('warningHue', 800, props.theme);
+      anchorHoverColor = getColorV8('warningHue', 900, props.theme);
+      anchorActiveColor = getColorV8('warningHue', 1000, props.theme);
+      focusColor = 'warningHue';
+      break;
+    case 'info':
+      borderColor = getColorV8('primaryHue', 300, props.theme);
+      backgroundColor = getColorV8('primaryHue', 200, props.theme);
+      foregroundColor = getColorV8('primaryHue', 700, props.theme);
+      anchorHoverColor = getColorV8('primaryHue', 800, props.theme);
+      anchorActiveColor = getColorV8('primaryHue', 900, props.theme);
+      focusColor = 'primaryHue';
+      break;
+  }
+  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
+  return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({
+    theme: props.theme,
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    },
+    styles: {
+      color: 'inherit'
+    }
+  }), anchorHoverColor, anchorActiveColor);
+};
+const sizeStyles = props => {
+  const {
+    fontSizes,
+    space
+  } = props.theme;
+  const minHeight = space.base * 13;
+  const padding = space.base * 4;
+  const lineHeight = getLineHeight(space.base * 5, fontSizes.md);
+  return css(["padding:", "px;min-height:", "px;line-height:", ";font-size:", ";"], padding, minHeight, lineHeight, fontSizes.md);
+};
+const StyledGlobalAlert = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGlobalAlert",
+  componentId: "sc-k6rimt-0"
+})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles, colorStyles, props => props.theme.borderRadii.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlert.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlert };

package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js

@@ -0,0 +1,75 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { Button } from '@zendeskgarden/react-buttons';
+import { colorStyles as colorStyles$1 } from './StyledGlobalAlertClose.js';
+
+const COMPONENT_ID = 'notifications.global-alert.button';
+function colorStyles(props) {
+  if (props.isBasic) {
+    return colorStyles$1(props);
+  }
+  let backgroundColor;
+  let hoverBackgroundColor;
+  let activeBackgroundColor;
+  let focusColor;
+  switch (props.alertType) {
+    case 'success':
+      backgroundColor = getColorV8('successHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('successHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('successHue', 1000, props.theme);
+      focusColor = 'successHue';
+      break;
+    case 'error':
+      backgroundColor = getColorV8('dangerHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme);
+      focusColor = 'dangerHue';
+      break;
+    case 'warning':
+      backgroundColor = getColorV8('warningHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('warningHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('warningHue', 1000, props.theme);
+      focusColor = 'warningHue';
+      break;
+    case 'info':
+      focusColor = 'primaryHue';
+      break;
+  }
+  return css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, focusStyles({
+    theme: props.theme,
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    }
+  }), activeBackgroundColor);
+}
+function sizeStyles(props) {
+  const marginVertical = `-${props.theme.space.base * 1.5}px`;
+  const marginStart = `${props.theme.space.base * 2}px`;
+  return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : 0, marginVertical, props.theme.rtl ? 0 : marginStart);
+}
+const StyledGlobalAlertButton = styled(Button).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  focusInset: false,
+  isDanger: false,
+  isLink: false,
+  isNeutral: false,
+  isPill: false,
+  isStretched: false,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledGlobalAlertButton",
+  componentId: "sc-1txe91a-0"
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertButton };

package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js

@@ -0,0 +1,74 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'notifications.global-alert.close';
+const colorStyles = props => {
+  let hoverBackgroundColor;
+  let hoverForegroundColor;
+  let activeBackgroundColor;
+  let activeForegroundColor;
+  let focusColor;
+  switch (props.alertType) {
+    case 'success':
+      hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08);
+      hoverForegroundColor = props.theme.palette.white;
+      activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2);
+      activeForegroundColor = props.theme.palette.white;
+      focusColor = 'successHue';
+      break;
+    case 'error':
+      hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08);
+      hoverForegroundColor = props.theme.palette.white;
+      activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2);
+      activeForegroundColor = props.theme.palette.white;
+      focusColor = 'dangerHue';
+      break;
+    case 'warning':
+      hoverBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.08);
+      hoverForegroundColor = getColorV8('warningHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.2);
+      activeForegroundColor = getColorV8('warningHue', 1000, props.theme);
+      focusColor = 'warningHue';
+      break;
+    case 'info':
+      hoverBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.08);
+      hoverForegroundColor = getColorV8('primaryHue', 800, props.theme);
+      activeBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.2);
+      activeForegroundColor = getColorV8('primaryHue', 900, props.theme);
+      focusColor = 'primaryHue';
+      break;
+  }
+  return css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme: props.theme,
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    }
+  }), activeBackgroundColor, activeForegroundColor);
+};
+const sizeStyles = props => {
+  const marginVertical = `-${props.theme.space.base * 1.5}px`;
+  const marginStart = `${props.theme.space.base * 2}px`;
+  const marginEnd = `-${props.theme.space.base * 2}px`;
+  return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart);
+};
+const StyledGlobalAlertClose = styled(IconButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  size: 'small'
+}).withConfig({
+  displayName: "StyledGlobalAlertClose",
+  componentId: "sc-1g5s93s-0"
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertClose, colorStyles };

package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global-alert.content';
+const StyledGlobalAlertContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGlobalAlertContent",
+  componentId: "sc-rept0u-0"
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertContent };

package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { Children } from 'react';
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global-alert.icon';
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const marginTop = math(`(${props.theme.space.base * 5} - ${size}) / 2`);
+  const marginHorizontal = `${props.theme.space.base * 2}px`;
+  return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
+};
+const StyledGlobalAlertIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return React__default.cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGlobalAlertIcon",
+  componentId: "sc-84ne9k-0"
+})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertIcon };

package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js

@@ -0,0 +1,38 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global-alert.title';
+const colorStyles = props => {
+  let color;
+  switch (props.alertType) {
+    case 'success':
+    case 'error':
+      color = props.theme.palette.white;
+      break;
+    case 'warning':
+      color = getColorV8('warningHue', 900, props.theme);
+      break;
+    case 'info':
+      color = getColorV8('primaryHue', 800, props.theme);
+      break;
+  }
+  return css(["color:", ";"], color);
+};
+const StyledGlobalAlertTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledGlobalAlertTitle",
+  componentId: "sc-10clqbo-0"
+})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertTitle };

package/dist/esm/types/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const TYPE = ['success', 'warning', 'error', 'info'];
+
+export { TYPE };

package/dist/esm/utils/icons.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import SvgAlertErrorStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+import SvgCheckCircleStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import SvgAlertWarningStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
+import SvgInfoStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
+
+const validationIcons = {
+  success: SvgCheckCircleStroke,
+  error: SvgAlertErrorStroke,
+  warning: SvgAlertWarningStroke,
+  info: SvgInfoStroke
+};
+const validationHues = {
+  success: 'successHue',
+  error: 'dangerHue',
+  warning: 'warningHue',
+  info: 'neutralHue'
+};
+
+export { validationHues, validationIcons };

package/dist/esm/utils/useNotificationsContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const NotificationsContext = createContext(undefined);
+const useNotificationsContext = () => {
+  return useContext(NotificationsContext);
+};
+
+export { NotificationsContext, useNotificationsContext };