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

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,61 @@
+/**
+* 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 { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
+
+const COMPONENT_ID = 'notifications.icon';
+const sizeStyles = _ref => {
+  let {
+    theme: {
+      rtl,
+      space
+    }
+  } = _ref;
+  return css(["right:", ";left:", ";margin-top:", "px;"], rtl && `${space.base * 4}px`, !rtl && `${space.base * 4}px`, space.base / 2);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    $type
+  } = _ref2;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.subtle';
+      break;
+    default:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  return css(["color:", ";"], color);
+};
+const StyledIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-msklws-0"
+})(["position:absolute;", " ", " ", ""], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/StyledNotification.js

@@ -0,0 +1,56 @@
+/**
+* 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 PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { TYPE } from '../types/index.js';
+import { StyledTitle } from './content/StyledTitle.js';
+import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
+
+const COMPONENT_ID = 'notifications.notification';
+const colorStyles = props => {
+  const {
+    $type,
+    theme
+  } = props;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : 'inherit';
+  return css(["", "{color:", ";}"], StyledTitle, color);
+};
+const StyledNotification = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledNotification",
+  componentId: "sc-uf6jh-0"
+})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNotification.propTypes = {
+  $type: PropTypes.oneOf(TYPE)
+};
+StyledNotification.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNotification };

package/dist/esm/styled/StyledWell.js

@@ -0,0 +1,47 @@
+/**
+* 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';
+import { StyledBase } from './StyledBase.js';
+
+const COMPONENT_ID = 'notifications.well';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFloating,
+    $isRecessed
+  } = _ref;
+  let backgroundVariable;
+  if ($isRecessed) {
+    backgroundVariable = 'background.recessed';
+  } else if ($isFloating) {
+    backgroundVariable = 'background.raised';
+  } else {
+    backgroundVariable = 'background.default';
+  }
+  const foreground = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const background = getColor({
+    variable: backgroundVariable,
+    theme
+  });
+  return css(["background-color:", ";color:", ";"], background, foreground);
+};
+const StyledWell = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledWell",
+  componentId: "sc-a5831c-0"
+})(["", " ", ";"], colorStyles, p => retrieveComponentStyles(COMPONENT_ID, p));
+StyledWell.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledWell };

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

@@ -0,0 +1,70 @@
+/**
+* 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';
+import { validationTypes } from '../../utils/icons.js';
+import { IconButton } from '@zendeskgarden/react-buttons';
+
+const COMPONENT_ID = 'notifications.close';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  let variable;
+  switch ($type) {
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    default:
+      variable = 'foreground.subtle';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  const hoverColor = getColor({
+    variable,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeColor = getColor({
+    variable,
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  return css(["color:", ";&:hover{background-color:transparent;color:", ";}&:active{background-color:transparent;color:", ";}"], color, hoverColor, activeColor);
+};
+const StyledClose = styled(IconButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledClose",
+  componentId: "sc-1mr9nx1-0"
+})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles, 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.20'
+}).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,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 { getColor, 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.20'
+}).withConfig({
+  displayName: "StyledTitle",
+  componentId: "sc-xx4jsv-0"
+})(["margin:0;color:", ";font-weight:", ";", ";"], p => getColor({
+  variable: 'foreground.default',
+  theme: p.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,160 @@
+/**
+* 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, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'notifications.global_alert';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
+  let borderColor;
+  let backgroundColor;
+  let foregroundColor;
+  let anchorHoverColor;
+  let anchorActiveColor;
+  let focusVariable;
+  switch ($alertType) {
+    case 'success':
+      {
+        borderColor = getColor({
+          variable: 'border.successEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.successEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.success',
+          offset: -600,
+          theme
+        });
+        anchorHoverColor = theme.palette.white;
+        anchorActiveColor = theme.palette.white;
+        focusVariable = 'foreground.successEmphasis';
+        break;
+      }
+    case 'error':
+      {
+        borderColor = getColor({
+          variable: 'border.dangerEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.dangerEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.danger',
+          offset: -600,
+          theme
+        });
+        anchorActiveColor = theme.palette.white;
+        anchorHoverColor = theme.palette.white;
+        focusVariable = 'foreground.dangerEmphasis';
+        break;
+      }
+    case 'warning':
+      {
+        borderColor = getColor({
+          variable: 'border.warningEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.warningEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.warning';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
+    case 'info':
+      {
+        borderColor = getColor({
+          variable: 'border.primaryEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.primaryEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.primary';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
+  }
+  const boxShadow = `0 ${theme.borderWidths.sm} ${theme.borderWidths.sm} ${borderColor}`;
+  return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({
+    theme,
+    color: {
+      variable: focusVariable
+    },
+    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.20'
+}).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,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.20'
+}).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.20'
+}).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.20'
+}).withConfig({
+  displayName: "StyledGlobalAlertContent",
+  componentId: "sc-rept0u-0"
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGlobalAlertContent };