@zendeskgarden/react-chrome 9.0.0-next.16 → 9.0.0-next.17

package/dist/esm/styled/sheet/StyledSheet.js

@@ -4,36 +4,51 @@
 * 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet';
-const borderStyle = _ref => {
+const colorStyles = _ref => {
   let {
     theme,
-    placement,
     isOpen
   } = _ref;
-  const borderColor = isOpen ? getColorV8('neutralHue', 300, theme) : 'transparent';
-  const borderSides = ['-left', '-right'];
-  let borderSide = '';
-  if (theme.rtl) {
-    borderSides.reverse();
-  }
-  if (placement === 'end') {
-    borderSide = borderSides[0];
-  } else if (placement === 'start') {
-    borderSide = borderSides[1];
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = isOpen ? getColor({
+    theme,
+    variable: 'border.default'
+  }) : 'transparent';
+  return css(["border-color:", ";background-color:", ";"], borderColor, backgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isOpen,
+    placement,
+    size
+  } = _ref2;
+  const width = isOpen ? size : 0;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
+  const border = isOpen ? theme.borders.sm : 'none';
+  let borderProperty;
+  if (placement === 'start') {
+    borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
+  } else {
+    borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
   }
-  return `border${borderSide}: ${theme.borders.sm} ${borderColor};`;
+  return css(["box-sizing:border-box;width:", ";height:100%;", ":", ";line-height:", ";font-size:", ";"], width, borderProperty, border, lineHeight, fontSize);
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
-})(["display:flex;order:1;transition:", ";background-color:", ";width:", ";height:100%;overflow:hidden;font-size:", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', props => getColorV8('background', 600 , props.theme), props => props.isOpen ? props.size : '0px', props => props.theme.fontSizes.md, props => borderStyle(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheet.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/sheet/StyledSheetBody.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"

package/dist/esm/styled/sheet/StyledSheetClose.js

@@ -5,30 +5,27 @@
 * 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 { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'chrome.sheet_close';
-const BASE_MULTIPLIERS = {
-  top: 2.5,
-  side: 2,
-  size: 10
+const positionStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const top = `${theme.space.base * 2.5}px`;
+  const position = `${theme.space.base * 2}px`;
+  return css(["top:", ";", ":", ";"], top, theme.rtl ? 'left' : 'right', position);
 };
-const colorStyles = props => {
-  const backgroundColor = 'primaryHue';
-  const foregroundColor = 'neutralHue';
-  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColorV8(foregroundColor, 600, props.theme), getColorV8(backgroundColor, 600, props.theme, 0.08), getColorV8(foregroundColor, 700, props.theme), focusStyles({
-    theme: props.theme
-  }), getColorV8(backgroundColor, 600, props.theme, 0.2), getColorV8(foregroundColor, 800, props.theme));
-};
-const StyledSheetClose = styled.button.attrs({
+const StyledSheetClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;", ";", ";"], positionStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { BASE_MULTIPLIERS, StyledSheetClose };
+export { StyledSheetClose };

package/dist/esm/styled/sheet/StyledSheetDescription.js

@@ -5,16 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
-})(["line-height:", ";color:", ";", ";"], props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["line-height:", ";color:", ";", ";"], p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => getColor({
+  theme: p.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetDescription.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/sheet/StyledSheetFooter.js

@@ -4,17 +4,36 @@
 * 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_footer';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return css(["border-top-color:", ";"], borderColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
+  return css(["border-top:", ";padding:", ";"], border, padding);
+};
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
-})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";border-top:", ";padding:", "px;", ";"], props => props.isCompact ? 'center' : 'flex-end', props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * (props.isCompact ? 2.5 : 5), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetFooter.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/sheet/StyledSheetFooterItem.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"

package/dist/esm/styled/sheet/StyledSheetHeader.js

@@ -4,18 +4,40 @@
 * 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 { BASE_MULTIPLIERS } from './StyledSheetClose.js';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_header';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.subtle'
+  });
+  return css(["border-bottom-color:", ";"], borderColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCloseButtonPresent
+  } = _ref2;
+  const border = theme.borders.sm;
+  let padding = `${theme.space.base * 5}px`;
+  if (isCloseButtonPresent) {
+    const paddingSide = `${theme.space.base * 14}px`;
+    padding = theme.rtl ? `${padding} ${padding} ${padding} ${paddingSide}` : `${padding} ${paddingSide} ${padding} ${padding}`;
+  }
+  return css(["border-bottom:", ";padding:", ";"], border, padding);
+};
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
-})(["border-bottom:", ";padding:", "px;", "  ", ";"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`, props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetHeader.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/sheet/StyledSheetTitle.js

@@ -5,16 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
-})(["line-height:", ";color:", ";font-weight:", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["color:", ";font-weight:", ";", ";"], p => getColor({
+  theme: p.theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetTitle.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/sheet/StyledSheetWrapper.js

@@ -4,32 +4,35 @@
 * 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 styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.sheet_wrapper';
+const transformStyles = _ref => {
+  let {
+    theme,
+    isAnimated,
+    isOpen,
+    placement
+  } = _ref;
+  const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  let transform;
+  if (isOpen) {
+    transform = 'translateX(0)';
+  } else if (placement === 'start') {
+    transform = `translateX(${theme.rtl ? 100 : -100}%)`;
+  } else {
+    transform = `translateX(${theme.rtl ? -100 : 100}%)`;
+  }
+  return css(["transform:", ";transition:", ";"], transform, transition);
+};
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.17'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
-})(["display:flex;position:relative;flex-direction:column;transform:", ";transition:", ";min-width:", ";", ";"], props => {
-  const translateValues = [-100, 100];
-  let translation = 'translateX(0%)';
-  if (props.isOpen) {
-    return translation;
-  }
-  if (props.theme.rtl) {
-    translateValues.reverse();
-  }
-  if (props.placement === 'end') {
-    translation = `translateX(${translateValues[1]}%)`;
-  } else if (props.placement === 'start') {
-    translation = `translateX(${translateValues[0]}%)`;
-  }
-  return translation;
-}, props => props.isAnimated && 'transform 250ms ease-in-out', props => props.size, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSheetWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/utils.js

@@ -0,0 +1,20 @@
+/**
+* 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 { PALETTE } from '@zendeskgarden/react-theming';
+
+const getFooterHeight = theme => `${theme.space.base * 20}px`;
+const getHeaderHeight = theme => `${theme.space.base * 13}px`;
+const getHeaderItemSize = theme => `${theme.space.base * 7.5}px`;
+const getNavItemHeight = theme => getHeaderHeight(theme);
+const getNavWidth = theme => `${theme.space.base * 15}px`;
+const getNavWidthExpanded = () => `200px`;
+const getProductColor = function (product) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inherit';
+  return product ? PALETTE.product[product] || fallback : fallback;
+};
+
+export { getFooterHeight, getHeaderHeight, getHeaderItemSize, getNavItemHeight, getNavWidth, getNavWidthExpanded, getProductColor };