@zendeskgarden/react-notifications 9.0.0-next.2 → 9.0.0-next.21

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

@@ -0,0 +1,118 @@
+/**
+* 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, getColor, 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) {
+  const {
+    $alertType,
+    isBasic,
+    theme
+  } = props;
+  if (isBasic) {
+    return colorStyles$1(props);
+  }
+  let bgVariable;
+  let offsetOptions;
+  let offsetHoverOptions;
+  let offsetActiveOptions;
+  let focusVariable;
+  switch ($alertType) {
+    case 'success':
+      bgVariable = 'background.successEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.successEmphasis';
+      break;
+    case 'error':
+      bgVariable = 'background.dangerEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.dangerEmphasis';
+      break;
+    case 'warning':
+      bgVariable = 'background.warningEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.warning';
+      break;
+    case 'info':
+      bgVariable = 'background.primaryEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.primary';
+      break;
+  }
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetOptions,
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetHoverOptions,
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetActiveOptions,
+    theme
+  });
+  return css(["background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, getColor({
+    hue: 'white',
+    theme
+  }), hoverBackgroundColor, focusStyles({
+    theme,
+    color: {
+      variable: focusVariable
+    }
+  }), 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.21'
+}).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,103 @@
+/**
+* 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, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'notifications.global_alert.close';
+const colorStyles = props => {
+  const {
+    $alertType,
+    theme
+  } = props;
+  let hoverBackgroundColor;
+  let hoverForegroundColor;
+  let activeBackgroundColor;
+  let activeForegroundColor;
+  let focusVariable;
+  switch ($alertType) {
+    case 'success':
+      hoverBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.successEmphasis';
+      break;
+    case 'error':
+      hoverBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.dangerEmphasis';
+      break;
+    case 'warning':
+      hoverBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[100],
+        theme
+      });
+      hoverForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 200,
+        theme
+      });
+      activeBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[200],
+        theme
+      });
+      activeForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 300,
+        theme
+      });
+      focusVariable = 'foreground.warning';
+      break;
+    default:
+      focusVariable = 'foreground.primary';
+  }
+  return css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme,
+    color: {
+      variable: focusVariable
+    }
+  }), 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.21'
+}).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.21'
+}).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,65 @@
+/**
+* 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 { math } from 'polished';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } 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 colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
+  let color;
+  switch ($alertType) {
+    case 'success':
+      color = getColor({
+        variable: 'foreground.success',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'error':
+      color = getColor({
+        variable: 'foreground.danger',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'warning':
+      color = getColor({
+        variable: 'foreground.warning',
+        theme
+      });
+      break;
+    case 'info':
+      color = getColor({
+        variable: 'foreground.primary',
+        theme
+      });
+      break;
+  }
+  return css(["color:", ";"], color);
+};
+const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledGlobalAlertIcon",
+  componentId: "sc-84ne9k-0"
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertIcon };

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

@@ -0,0 +1,49 @@
+/**
+* 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, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global_alert.title';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
+  let color;
+  switch ($alertType) {
+    case 'success':
+    case 'error':
+      color = theme.palette.white;
+      break;
+    case 'warning':
+      color = getColor({
+        variable: 'foreground.warningEmphasis',
+        theme
+      });
+      break;
+    case 'info':
+      color = getColor({
+        variable: 'foreground.primary',
+        offset: 200,
+        theme
+      });
+      break;
+  }
+  return css(["color:", ";"], color);
+};
+const StyledGlobalAlertTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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 validationTypes = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info'
+};
+
+export { validationIcons, validationTypes };

package/dist/esm/utils/useGlobalAlertContext.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 GlobalAlertContext = createContext({
+  type: 'info'
+});
+const useGlobalAlertContext = () => useContext(GlobalAlertContext);
+
+export { GlobalAlertContext, useGlobalAlertContext };

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 };