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

package/dist/esm/styled/StyledAlert.js

@@ -0,0 +1,51 @@
+/**
+* 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 { StyledTitle } from './content/StyledTitle.js';
+import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
+
+const COMPONENT_ID = 'notifications.alert';
+const colorStyles = props => {
+  const {
+    $type,
+    theme
+  } = props;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.successEmphasis';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.dangerEmphasis';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warningEmphasis';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : undefined;
+  return css(["", "{color:", ";}"], StyledTitle, color);
+};
+const StyledAlert = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledAlert",
+  componentId: "sc-fyn8jp-0"
+})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAlert.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAlert };

package/dist/esm/styled/StyledBase.js

@@ -0,0 +1,92 @@
+/**
+* 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 { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../utils/icons.js';
+
+const COMPONENT_ID = 'notifications.base_container';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type,
+    $isFloating
+  } = _ref;
+  const {
+    space,
+    shadows
+  } = theme;
+  let bgVariable;
+  let borderVariable;
+  let fgVariable;
+  if (!$isFloating && $type && !!validationTypes[$type]) {
+    switch ($type) {
+      case validationTypes.success:
+        bgVariable = 'background.success';
+        borderVariable = 'border.success';
+        fgVariable = 'foreground.success';
+        break;
+      case validationTypes.error:
+        bgVariable = 'background.danger';
+        borderVariable = 'border.danger';
+        fgVariable = 'foreground.danger';
+        break;
+      case validationTypes.warning:
+        bgVariable = 'background.warning';
+        borderVariable = 'border.warning';
+        fgVariable = 'foreground.warning';
+        break;
+      case validationTypes.info:
+        bgVariable = 'background.subtle';
+        borderVariable = 'border.default';
+        fgVariable = 'foreground.subtle';
+        break;
+    }
+  } else {
+    bgVariable = 'background.raised';
+    borderVariable = 'border.default';
+    fgVariable = 'foreground.default';
+  }
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    theme
+  });
+  const borderColor = getColor({
+    variable: borderVariable,
+    theme
+  });
+  const foregroundColor = getColor({
+    variable: fgVariable,
+    theme
+  });
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const boxShadow = $isFloating ? shadows.lg(offsetY, blurRadius, getColor({
+    variable: 'shadow.large',
+    theme
+  })) : undefined;
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
+};
+const padding = props => {
+  const {
+    space
+  } = props.theme;
+  const paddingVertical = `${space.base * 5}px`;
+  const paddingHorizontal = `${space.base * 10}px`;
+  return `${paddingVertical} ${paddingHorizontal}`;
+};
+const StyledBase = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledBase",
+  componentId: "sc-14syaqw-0"
+})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBase.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBase };

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.21'
+}).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.21'
+}).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.21'
+}).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.21'
+}).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.21'
+}).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.21'
+}).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.21'
+}).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 };