@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/components/SheetList/components/Item/style.js

@@ -1,76 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { IMAGE_SPACE } from "../../style";
-const {
-  colors,
-  variables
-} = themeConfig;
-const disabled = css({
-  color: colors.shade5,
-  cursor: 'not-allowed'
-}).toString();
-const selected = css({
-  background: `var(--color-background-accent, ${colors.shade7})`,
-  boxShadow: `-16px 0 0 0 var(--color-background-accent, ${colors.shade7}) !important`
-}).toString();
-const title = css({
-  width: '100%',
-  marginTop: variables.gap.xsmall,
-  paddingRight: variables.gap.big,
-  hyphens: 'auto',
-  overflowWrap: 'break-word',
-  wordBreak: 'break-word',
-  color: 'var(--color-text-high-emphasis)',
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    padding: variables.gap.big,
-    margin: 0,
-    fontSize: '1.25rem',
-    lineHeight: '1.5rem'
-  }
-}).toString();
-const description = css({
-  display: 'none',
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    display: 'block',
-    color: 'var(--color-text-medium-emphasis)',
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
-    fontWeight: 'initial',
-    paddingTop: variables.gap.small
-  }
-});
-const grid = css({
-  alignItems: 'center',
-  minHeight: 56,
-  padding: `${variables.gap.small}px 0`,
-  position: 'relative',
-  zIndex: 2,
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    padding: 0
-  }
-}).toString();
-const image = css({
-  alignSelf: 'flex-start',
-  flexShrink: 0,
-  margin: `0 ${variables.gap.big}px 0 ${-IMAGE_SPACE + variables.gap.big}px`,
-  width: 40
-}).toString();
-const glowHover = {
-  boxShadow: `-${variables.gap.bigger}px 0 0 ${colors.shade8}, ${variables.gap.bigger}px 0 0 ${colors.shade8}`
-};
-export default {
-  disabled,
-  selected,
-  title,
-  description,
-  grid,
-  image,
-  glowHover
-};

package/components/SheetList/style.js

@@ -1,36 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/engage';
-const {
-  variables,
-  colors
-} = themeConfig;
-export const IMAGE_SPACE = 72;
-const item = css({
-  margin: `0 ${variables.gap.big}px`,
-  cursor: 'pointer'
-}).toString();
-const itemNotLast = css({
-  '&:not(:last-child)': {
-    boxShadow: `0 1px 0 0 ${colors.darkGray}`,
-    marginBottom: 1
-  }
-}).toString();
-const itemSelected = css({
-  background: `var(--color-background-accent, ${colors.shade7})`,
-  boxShadow: `-${variables.gap.bigger}px 0 0 var(--color-background-accent, ${colors.shade7}), ${variables.gap.bigger}px 0 0 var(--color-background-accent, ${colors.shade7})`,
-  marginTop: -1
-}).toString();
-const itemWithImage = css({
-  marginLeft: IMAGE_SPACE
-}).toString();
-const innerContainer = css({
-  minHeight: 56,
-  position: 'relative'
-}).toString();
-export default {
-  item,
-  itemNotLast,
-  itemSelected,
-  itemWithImage,
-  innerContainer
-};

package/components/SideNavigation/SideNavigationCategories.style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const list = css({
-  borderBottom: `1px solid ${colors.shade7}`
-}).toString();
-export const loadingIndicator = css({
-  padding: 0,
-  margin: 'auto'
-}).toString();

package/components/SideNavigation/SideNavigationCategoriesItem.style.js

@@ -1,41 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const chevronButton = css({
-  flexShrink: 0,
-  outline: 0,
-  margin: `0 -${variables.gap.big}px 0 ${variables.gap.small}px`,
-  fontSize: '1.6em',
-  color: '#373D41',
-  position: 'relative'
-}).toString();
-export const chevron = css({
-  transformOrigin: 'center center',
-  transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'
-});
-export const chevronDown = css(chevron, {
-  transform: 'rotateZ(0deg)'
-});
-export const chevronUp = css(chevron, {
-  transform: 'rotateZ(180deg)'
-});
-export const progressBar = css({
-  position: 'absolute',
-  overflow: 'hidden',
-  width: '100%',
-  bottom: 0,
-  height: 3
-}).toString();
-export const open = css({
-  //  borderRight: '2px solid var(--color-primary)',
-}).toString();
-export const loadingIndicator = css({
-  position: 'absolute',
-  padding: 0,
-  top: '50%',
-  marginTop: '-50%',
-  paddingTop: 1,
-  right: 3
-}).toString();

package/components/SideNavigation/SideNavigationContent.style.js

@@ -1,8 +0,0 @@
-import { css } from 'glamor';
-export const container = css({
-  background: '#fff'
-  /*
-  position: 'sticky',
-  top: 'var(--app-bar-height)',
-  */
-}).toString();

package/components/SideNavigation/SideNavigationItem.style.js

@@ -1,41 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-
-/**
- * @param {number} level The indentation level
- * @returns {string}
- */
-export const getIndentation = (level = 0) => css({
-  paddingLeft: level * variables.gap.big
-}).toString();
-export const list = css({
-  position: 'relative'
-}).toString();
-export const item = css({
-  alignItems: 'center',
-  display: 'flex',
-  textAlign: 'left',
-  outline: 0,
-  padding: variables.gap.big,
-  position: 'relative',
-  width: '100%',
-  lineHeight: '1.45em'
-}).toString();
-export const itemActive = css({
-  background: 'var(--color-side-navigation-active-background)'
-}).toString();
-export const link = css({
-  flexGrow: 1,
-  textAlign: 'left',
-  outline: 0,
-  color: 'var(--color-text-high-emphasis)',
-  ':hover': {
-    color: 'var(--color-primary)'
-  }
-}).toString();
-export const linkActive = css({
-  color: 'var(--color-primary) !important'
-}).toString();

package/components/Switch/style.js

@@ -1,46 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  display: 'flex',
-  flex: 1,
-  textAlign: 'left',
-  justifyContent: 'space-between',
-  flexDirection: 'row-reverse',
-  gap: '32px'
-});
-const input = css({
-  display: 'flex',
-  flexShrink: 0,
-  appearance: 'none',
-  width: '40px',
-  height: '20px',
-  backgroundColor: '#ccc',
-  borderRadius: '10px',
-  position: 'relative',
-  cursor: 'pointer',
-  ':before': {
-    content: '""',
-    position: 'absolute',
-    top: '2px',
-    left: '2px',
-    width: '16px',
-    height: '16px',
-    backgroundColor: 'white',
-    borderRadius: '50%',
-    transition: 'transform 0.3s'
-  },
-  ':checked': {
-    backgroundColor: themeConfig.colors.accent
-  },
-  ':checked::before': {
-    transform: 'translateX(20px)'
-  },
-  ':disabled': {
-    backgroundColor: themeConfig.colors.shade7,
-    cursor: 'not-allowed'
-  }
-});
-export default {
-  container,
-  input
-};

package/components/Tabs/components/Tab.style.js

@@ -1,32 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-export const root = css({
-  '&&': {
-    maxWidth: 200,
-    minWidth: 72,
-    position: 'relative',
-    boxSizing: 'border-box',
-    minHeight: 48,
-    flexShrink: 0,
-    flexGrow: 1,
-    padding: '6px 6px',
-    overflow: 'hidden',
-    whiteSpace: 'normal',
-    textAlign: 'center'
-  },
-  [responsiveMediaQuery('<=xs', {
-    appAlways: true
-  })]: {
-    flexShrink: 1,
-    flexGrow: 1,
-    flexBasis: 0,
-    maxWidth: 'none'
-  }
-}).toString();
-export const wrapper = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '100%',
-  flexDirection: 'column'
-}).toString();

package/components/Tabs/components/TabIndicator.style.js

@@ -1,13 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const root = css({
-  position: 'absolute',
-  height: 2,
-  bottom: 0,
-  width: '100%',
-  transition: 'left .2s ease',
-  backgroundColor: `var(--color-primary, ${colors.primary})`
-}).toString();

package/components/Tabs/components/Tabs.style.js

@@ -1,19 +0,0 @@
-import { css } from 'glamor';
-export const root = css({
-  overflow: 'hidden',
-  minHeight: 48,
-  WebkitOverflowScrolling: 'touch',
-  // Add iOS momentum scrolling.
-  display: 'flex',
-  position: 'relative'
-}).toString();
-export const fixed = css({
-  overflowX: 'hidden',
-  width: '100%'
-}).toString();
-export const flexContainer = css({
-  display: 'flex'
-}).toString();
-export const centered = css({
-  justifyContent: 'center'
-}).toString();

package/components/TextLink/TextLink.style.js

@@ -1,10 +0,0 @@
-import { css } from 'glamor';
-export const link = css({
-  color: 'var(--color-link, inherit)',
-  ':visited': {
-    color: 'var(--color-link-visited, var(--color-link, inherit))'
-  },
-  ':hover': {
-    color: 'var(--color-link-active , var(--color-link, inherit))'
-  }
-}).toString();

package/components/Toggle/style.js

@@ -1,63 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const container = css({
-  position: 'relative',
-  marginBottom: -4
-}).toString();
-export const label = css({
-  display: 'block',
-  height: 20,
-  width: 44,
-  background: '#898989',
-  borderRadius: 100,
-  cursor: 'pointer',
-  bottom: -4,
-  transition: 'all .3s ease'
-}).toString();
-export const checkbox = css({
-  [`:checked ~ .${label}`]: {
-    background: `var(--color-primary, ${colors.primary})`,
-    opacity: 0.5
-  },
-  ':checked ~ div': {
-    left: 20,
-    background: `var(--color-primary, ${colors.primary})`
-  },
-  [`:disabled ~ .${label}`]: {
-    background: '#D5D5D5',
-    pointerEvents: 'none',
-    filter: 'none'
-  },
-  ':disabled ~ div': {
-    background: '#BCBDBC',
-    filter: 'none'
-  },
-  // a11y configuration: hide visually but keep interactive
-  position: 'absolute',
-  opacity: 0,
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0,
-  margin: 0,
-  zIndex: 2,
-  cursor: 'pointer'
-}).toString();
-export const thumb = css({
-  position: 'absolute',
-  left: -2,
-  top: -3,
-  display: 'block',
-  width: 26,
-  height: 26,
-  borderRadius: 100,
-  background: 'white',
-  boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12)',
-  content: ' ',
-  transition: 'all .3s ease',
-  pointerEvents: 'none',
-  zIndex: 100
-}).toString();

package/components/View/components/Content/style.js

@@ -1,41 +0,0 @@
-import { css } from 'glamor';
-import { useScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
-export const container = css({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100vw',
-  ...(useScrollContainer() ? {
-    bottom: 0,
-    top: 0,
-    overflowScrolling: 'touch',
-    position: 'absolute',
-    WebkitOverflowScrolling: 'touch',
-    ...(IS_PAGE_PREVIEW_ACTIVE && {
-      scrollbarWidth: 'thin',
-      backgroundColor: 'var(--page-background-color)'
-    })
-  } : {
-    height: '100%',
-    backgroundColor: 'var(--page-background-color)'
-  }),
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    width: 'var(--page-content-width)'
-  }
-});
-export const containerInner = css({
-  ...(isIOs && useScrollContainer() ? {
-    // Make the scroll container content a bit higher than the actual scroll container to
-    // get a rubber band effect in all situations
-    minHeight: 'calc(100% + var(--extra-ios-scroll-space, 0px))'
-  } : {}),
-  ':after': {
-    content: "''",
-    display: 'block',
-    pointerEvents: 'none',
-    paddingBottom: 'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'
-  }
-});

package/components/View/style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-import { useScrollContainer } from '@shopgate/engage/core';
-export default css(useScrollContainer() ? {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  zIndex: 1
-} : {
-  height: '100%'
-});

package/favorites/components/List/styles.js

@@ -1,35 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables
-} = themeConfig;
-const styles = {
-  root: css({
-    margin: '8px 8px 10px'
-  }).toString(),
-  rootNoFavoritesLists: css({
-    background: colors.light,
-    flexGrow: 1,
-    paddingBottom: variables.gap.small,
-    paddingLeft: '16px',
-    paddingRight: '16px'
-  }),
-  title: css({
-    flex: 1
-  }),
-  divider: css({
-    height: 1,
-    width: 'calc(100% + 32px)',
-    backgroundColor: 'rgb(234, 234, 234)',
-    marginLeft: -16,
-    marginRight: -16,
-    marginBottom: 16
-  }),
-  loadMoreButton: css({
-    width: 'calc(100% - 32px)',
-    margin: '16px 16px 0 16px',
-    borderRadius: 5
-  }).toString()
-};
-export default styles;

package/filter/components/FilterItem/style.js

@@ -1,9 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export default css({
-  background: colors.light,
-  marginTop: 4
-});

package/filter/components/FilterPageContent/components/ApplyButton/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-const wrapper = css({
-  display: 'flex'
-});
-const button = css({
-  padding: '0 !important'
-}).toString();
-export default {
-  wrapper,
-  button
-};

package/filter/components/FilterPageContent/components/ResetButton/style.js

@@ -1,6 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  marginTop: 4,
-  marginBottom: 40,
-  textAlign: 'right'
-}).toString();

package/filter/components/FilterPageContent/components/Selector/components/Selected/style.js

@@ -1,19 +0,0 @@
-import { css } from 'glamor';
-export const item = css({
-  whiteSpace: 'nowrap',
-  flexShrink: 0,
-  flexGrow: 0,
-  alignSelf: 'flex-end'
-});
-export const elipsed = css({
-  maxWidth: '95%',
-  overflow: 'hidden',
-  textAlign: 'right',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-export const comma = css({
-  ' + span': {
-    marginLeft: '0.65ch'
-  }
-});

package/filter/components/FilterPageContent/components/Selector/components/Toggle/style.js

@@ -1,30 +0,0 @@
-import { css } from 'glamor';
-export const toggle = css({
-  display: 'flex',
-  flexFlow: 'row no-wrap',
-  alignContent: 'stretch',
-  alignItems: 'flex-start'
-});
-export const label = css({
-  whiteSpace: 'no-wrap',
-  flexShrink: 0,
-  flexGrow: 1,
-  textAlign: 'left',
-  maxWidth: '50%',
-  minWidth: '35%',
-  paddingRight: '16px'
-});
-export const selected = css({
-  display: 'flex',
-  flexFlow: 'row wrap',
-  flexGrow: 1,
-  justifyContent: 'flex-end',
-  minWidth: '50%',
-  maxWidth: '65%'
-});
-export const closed = css({
-  fontWeight: 'normal'
-});
-export const open = css({
-  fontWeight: 'bold'
-});

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/style.js

@@ -1,23 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-export const inactive = css({
-  border: `1px solid ${themeColors.darkGray}`,
-  borderRadius: 2,
-  color: 'inherit',
-  height: 42,
-  marginLeft: 8,
-  marginBottom: 8,
-  maxWidth: '100%',
-  minWidth: 42,
-  outline: 0,
-  overflow: 'hidden',
-  padding: '0 8px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  transition: 'color 100ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-  willChange: 'color, border-color'
-});
-export const active = css(inactive, {
-  borderColor: `var(--color-secondary, ${themeColors.accent})`,
-  color: `var(--color-secondary, ${themeColors.accent})`
-});

package/filter/components/FilterPageContent/components/Selector/style.js

@@ -1,8 +0,0 @@
-import { css } from 'glamor';
-export const accordion = css({
-  overflow: 'hidden'
-}).toString();
-export const content = css({
-  marginLeft: -8,
-  marginBottom: -8
-});