@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/cart/components/CartItem/CartItemProductLayout.style.js

@@ -1,94 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables,
-  colors
-} = themeConfig;
-const leftColumnWidth = 72;
-const item = css({
-  padding: variables.gap.big,
-  /** Row is DOM reversed for a11y navigation */
-  flexDirection: 'row-reverse'
-}).toString();
-const leftColumn = css({
-  width: leftColumnWidth
-}).toString();
-const image = css({
-  background: colors.placeholder,
-  marginBottom: variables.gap.small * 1.25,
-  height: leftColumnWidth,
-  width: leftColumnWidth
-}).toString();
-const content = css({
-  display: 'flex',
-  flexDirection: 'column',
-  paddingLeft: variables.gap.big
-}).toString();
-const info = css({
-  fontSize: '0.875rem',
-  marginTop: variables.gap.big * 0.875,
-  marginBottom: variables.gap.small * 0.25,
-  flexGrow: 1,
-  alignItems: 'flex-end',
-  justifyContent: 'space-between'
-}).toString();
-const promotionLine = css({
-  marginTop: 0
-}).toString();
-const promotionLineItem = css({
-  width: '100%'
-}).toString();
-const priceInfo = css({
-  textAlign: 'right',
-  wordBreak: 'break-word'
-}).toString();
-const disclaimerSpacer = css({
-  width: 10
-}).toString();
-const price = css({
-  display: 'flex',
-  marginLeft: '1em',
-  alignItems: 'flex-end',
-  flexDirection: 'column'
-}).toString();
-const properties = css({
-  wordBreak: 'break-word',
-  alignSelf: 'flex-start',
-  fontSize: '0.875rem',
-  color: `var(--color-text-medium-emphasis, ${colors.shade6})`,
-  lineHeight: 1.3,
-  /**
-   * When the properties column has content, apply a max width to the price column
-   * to avoid issues with long availability texts.
-   */
-  [`:not(:empty) + .${price}`]: {
-    textAlign: 'right',
-    maxWidth: '40%'
-  }
-}).toString();
-const itemInactive = css({
-  ' *': {
-    color: 'var(--color-text-low-emphasis) !important'
-  },
-  [` .${image}`]: {
-    opacity: 0.7
-  }
-}).toString();
-const orderDetailsSubtotalLabel = css({
-  color: `var(--color-text-low-emphasis, ${colors.shade9})`
-}).toString();
-export default {
-  item,
-  itemInactive,
-  leftColumn,
-  image,
-  content,
-  info,
-  promotionLine,
-  promotionLineItem,
-  disclaimerSpacer,
-  priceInfo,
-  price,
-  properties,
-  orderDetailsSubtotalLabel
-};

package/cart/components/CartItem/CartItemProductLayoutWide.style.js

@@ -1,113 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const container = css({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  padding: variables.gap.big
-}).toString();
-export const imageColumn = css({
-  width: 120,
-  height: 120,
-  marginRight: variables.gap.small,
-  flexShrink: 0,
-  flexGrow: 0
-}).toString();
-export const column = css({
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  padding: `0 ${variables.gap.small}px`,
-  ':last-child': {
-    paddingRight: 0
-  }
-});
-export const detailsColumn = css(column, {
-  flexShrink: 1,
-  flexGrow: 3,
-  alignItems: 'flex-start'
-});
-export const priceColumnWide = css(column, {
-  flexGrow: 4,
-  alignItems: 'flex-end'
-});
-export const locationColumn = css(column, {
-  fontSize: '1.25rem',
-  lineHeight: '1.625rem',
-  fontWeight: 500,
-  flexGrow: 2
-}).toString();
-export const statusColumn = css(column, {
-  fontSize: '1.25rem',
-  lineHeight: '1.625rem'
-}).toString();
-export const productName = css({
-  fontSize: '1.25rem',
-  lineHeight: '1.5rem',
-  fontWeight: 500,
-  wordBreak: ['keep-all', 'break-word'],
-  hyphens: 'auto'
-}).toString();
-export const productProperties = css({
-  paddingTop: variables.gap.small,
-  color: 'var(--color-text-low-emphasis)',
-  fontSize: '1rem'
-}).toString();
-export const quantityPicker = css({
-  width: 140
-}).toString();
-export const quantityPickerDisabled = css({
-  padding: `0 ${variables.gap.small}px`,
-  textAlign: 'center',
-  fontSize: '1.25rem',
-  lineHeight: '1.625rem',
-  height: 28,
-  width: '100%',
-  fontWeight: 500,
-  color: 'var(--color-text-high-emphasis)',
-  whiteSpace: 'nowrap'
-}).toString();
-export const containerInactive = css({
-  color: 'var(--color-text-low-emphasis)',
-  [` .${quantityPickerDisabled}`]: {
-    color: 'var(--color-text-low-emphasis)'
-  },
-  [` .${imageColumn}`]: {
-    opacity: 0.7
-  }
-}).toString();
-export const price = css({
-  fontSize: '1.25rem !important',
-  lineHeight: '1.625rem  !important'
-}).toString();
-export const priceListEntry = css({
-  flexDirection: 'column-reverse !important'
-}).toString();
-export const priceListPromo = css({
-  paddingRight: 0,
-  alignSelf: 'flex-end'
-}).toString();
-export const priceInfo = css({
-  wordBreak: 'break-word',
-  fontSize: '0.75rem',
-  lineHeight: '0.875rem',
-  color: 'var(--color-text-low-emphasis)',
-  padding: `${variables.gap.xsmall}px 0`
-}).toString();
-export const contextMenu = css({
-  marginTop: `-${variables.gap.xsmall * 3}px`,
-  marginRight: `-${variables.gap.big}px`
-}).toString();
-export const messageContainer = css({
-  marginTop: 0
-}).toString();
-export const messageContainerRope = css({
-  marginTop: 0,
-  marginBottom: 0
-}).toString();

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.style.js

@@ -1,10 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const label = css({
-  color: `var(--color-secondary, ${colors.accent})`,
-  fontSize: '0.875rem',
-  marginTop: 'auto'
-}).toString();

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.style.js

@@ -1,16 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const button = css({
-  fontSize: '0.875rem !important',
-  letterSpacing: '0.05em',
-  padding: `${variables.gap.big}px 0 !important`,
-  ' *': {
-    padding: '0 !important'
-  }
-}).toString();
-export const ripple = css({
-  padding: 0
-}).toString();

package/cart/components/CartItem/CartItemProductOrderDetails.style.js

@@ -1,28 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const container = css({
-  paddingTop: variables.gap.small
-}).toString();
-export const quantityLabel = css({
-  textAlign: 'center',
-  whiteSpace: 'nowrap'
-}).toString();
-export const label = css({
-  ':after': {
-    content: ': '
-  }
-}).toString();
-export const labelValue = css({
-  fontWeight: 500,
-  display: 'inline',
-  color: 'var(--color-text-medium-emphasis)'
-}).toString();
-export const fulfillmentLabel = css({
-  fontSize: 'inherit',
-  ':before': {
-    content: ' '
-  }
-}).toString();

package/cart/components/CartItem/CartItemProductPriceCaption.style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const caption = css({
-  fontSize: '0.75rem',
-  lineHeight: '0.875rem',
-  color: 'var(--color-text-low-emphasis)',
-  paddingTop: variables.gap.xsmall
-});

package/cart/components/CartItem/CartItemProductTitle.style.js

@@ -1,28 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const title = css({
-  fontWeight: 500,
-  lineHeight: 1.125,
-  wordBreak: ['keep-all', 'break-word'],
-  hyphens: 'auto'
-}).toString();
-export const menuContainer = css({
-  marginTop: `-${variables.gap.big}px`,
-  marginRight: `-${variables.gap.big}px`
-}).toString();
-const menuToggleSize = variables.gap.big * 2;
-const menuToggleFontSize = variables.gap.big * 1.5;
-export const menuToggleContainer = css({
-  margin: variables.gap.small
-}).toString();
-export const menuToggleButton = css({
-  height: menuToggleSize,
-  width: menuToggleSize,
-  fontSize: menuToggleFontSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-end'
-}).toString();

package/cart/components/CartItem/CartItemQuantityPicker.style.js

@@ -1,18 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables
-} = themeConfig;
-export const inputStyle = css({
-  border: 'none',
-  background: colors.placeholder,
-  display: 'block',
-  fontSize: '0.75rem',
-  lineHeight: 1,
-  textAlign: 'center',
-  padding: `${variables.gap.small * 0.75}px ${variables.gap.small}px`,
-  outline: 0,
-  width: '100%',
-  borderRadius: 4
-});

package/cart/components/CartItem/CartItemSubstitution.style.js

@@ -1,9 +0,0 @@
-import { css } from 'glamor';
-import { themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
-const {
-  gap
-} = themeVariables;
-export const root = css({
-  padding: gap.big,
-  borderTop: `1px solid ${themeColors.shade7}`
-}).toString();

package/cart/components/CartItems/CartItemCard.style.js

@@ -1,52 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
-const {
-  gap
-} = themeVariables;
-export const withBorder = css({
-  borderBottom: `1px solid ${themeColors.shade7}`
-});
-export const accordionToggle = css({
-  padding: `${gap.big * 1.25}px ${gap.big}px`
-}).toString();
-export const accordionContent = css({
-  paddingLeft: gap.xbig * 1.25
-});
-export const address = css({
-  display: 'flex',
-  flexFlow: 'row nowrap'
-});
-export const addressIcon = css({
-  fontSize: '1.25rem',
-  marginRight: gap.big * 1.25,
-  flexShrink: 0,
-  color: 'var(--color-text-heigh-emphasis)'
-});
-export const titles = css({
-  marginTop: -3,
-  marginBottom: -2,
-  paddingRight: themeVariables.gap.big * 2
-});
-export const name = css({
-  fontSize: '0.85rem',
-  fontWeight: 500,
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    fontSize: '1.25rem',
-    lineHeight: '1.5rem'
-  }
-});
-export const method = css({
-  fontSize: '0.75rem',
-  color: themeColors.shade11
-});
-export const locationAddress = css({
-  fontSize: '0.85rem',
-  color: 'var(--color-text-low-emphasis)'
-});
-export const locationHours = css({
-  paddingTop: gap.big,
-  fontSize: '0.85rem'
-});

package/cart/components/CartItems/CartItemCardReservationLabelChangeStore.style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-export const button = css({
-  fontSize: '0.875rem !important',
-  letterSpacing: '0.05em',
-  padding: '0px !important',
-  ' *': {
-    padding: '0px !important'
-  }
-}).toString();
-export const ripple = css({
-  padding: 0
-}).toString();

package/cart/components/CartItems/CartItemGroup.style.js

@@ -1,39 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables } from '@shopgate/pwa-common/helpers/config';
-const {
-  gap
-} = themeVariables;
-export const accordionToggle = css({
-  paddingTop: gap.xsmall,
-  paddingBottom: gap.xsmall
-}).toString();
-export const simpleLabel = css({
-  padding: `${gap.xsmall}px ${gap.xbig}px ${gap.xsmall}px ${gap.big}px`
-});
-export const address = css({
-  display: 'flex',
-  flexFlow: 'row nowrap',
-  fontSize: '0.875rem'
-});
-export const addressIcon = css({
-  fontSize: '1.25rem',
-  padding: `${gap.small}px ${gap.small}px 0 0`,
-  paddingTop: gap.small,
-  flexShrink: 0
-});
-export const shippingIcon = css({
-  fontSize: '1.25rem',
-  padding: `${gap.small}px ${gap.big}px ${gap.small}px 0`,
-  transform: 'rotateY(180deg)'
-});
-export const title = css({
-  fontWeight: 600
-});
-export const shippingTitle = css({
-  fontWeight: 600,
-  padding: gap.small
-});
-export const addressDetails = css({
-  fontSize: '0.875rem',
-  paddingLeft: gap.xbig
-});

package/cart/components/CartItems/CartItems.style.js

@@ -1,21 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
-const {
-  gap
-} = themeVariables;
-export const items = css({
-  background: `var(--color-background-accent, ${themeColors.background})`,
-  padding: `${gap.small * 1.5}px ${gap.small * 1.5}px ${gap.big}px`,
-  marginBottom: `-${gap.small * 1.5}px`
-});
-export const card = css({
-  background: themeColors.light,
-  marginBottom: gap.small * 1.5,
-  ':last-of-type': {
-    marginBottom: 0
-  },
-  border: `1px solid ${themeColors.shade7}`,
-  boxSizing: 'border-box',
-  boxShadow: '0px 4px 2px rgba(0, 0, 0, 0.05)',
-  borderRadius: 5
-}).toString();

package/cart/components/CartItems/CartItemsHeaderWide.style.js

@@ -1,60 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const header = css({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  fontWeight: 500,
-  fontSize: '1rem',
-  lineHeight: '1.5rem',
-  padding: `0 ${variables.gap.big}px ${variables.gap.small}px ${variables.gap.big}px`
-}).toString();
-export const column = css({
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  flexShrink: 0,
-  flexGrow: 1,
-  flexBasis: 0,
-  padding: `0 ${variables.gap.small}px`,
-  textAlign: 'center',
-  ':last-child': {
-    paddingRight: variables.gap.small
-  }
-});
-export const priceColumnWide = css({
-  flexGrow: 4,
-  alignItems: 'flex-end'
-}).toString();
-export const imageColumn = css({
-  flexGrow: 0,
-  width: 120,
-  margin: `0 ${variables.gap.small}px 0 ${variables.gap.big}px`,
-  paddingLeft: 0
-}).toString();
-export const detailsColumn = css(column, {
-  flexShrink: 1,
-  flexGrow: 3,
-  alignItems: 'flex-start',
-  padding: `0 ${variables.gap.small}px`
-}).toString();
-export const locationColumn = css(column, {
-  flexGrow: 2
-}).toString();
-export const quantityPickerColumn = css(column, {
-  ' > *': {
-    width: 140,
-    textAlign: 'center'
-  }
-}).toString();
-export const quantityPickerColumnNotEditable = css(column, {
-  ' > *': {
-    textAlign: 'center'
-  }
-});
-export const contextMenuColumn = css({
-  width: variables.gap.xbig + variables.gap.small
-}).toString();

package/cart/components/CartSummaryWide/CartSummaryWide.style.js

@@ -1,37 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables,
-  colors
-} = themeConfig;
-export const container = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignSelf: 'flex-end',
-  padding: variables.gap.big,
-  width: 420
-});
-export const headline = css({
-  fontSize: '1.25rem',
-  fontWeight: 500,
-  lineHeight: '1.5rem'
-});
-export const summary = css({
-  background: 'var(--color-background-accent)',
-  padding: variables.gap.big
-});
-export const total = css({
-  fontSize: '1rem',
-  padding: `${variables.gap.small}px 0`,
-  color: 'var(--color-text-high-emphasis)'
-}).toString();
-export const grandTotal = css({
-  fontSize: '1.25rem !important',
-  fontWeight: 500,
-  borderTop: `1px solid ${colors.shade4}`,
-  padding: `${variables.gap.small}px 0`,
-  color: 'var(--color-text-high-emphasis)',
-  '&:last-child': {
-    paddingBottom: 0
-  }
-}).toString();

package/cart/components/CartSummaryWide/CartSummaryWideCheckoutButton.style.js

@@ -1,21 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables
-} = themeConfig;
-export const container = css({
-  display: 'flex',
-  flexDirection: 'column'
-}).toString();
-export const button = css({
-  width: '100%',
-  background: `var(--color-button-cta, ${colors.cta})`,
-  color: `var(--color-button-cta-contrast, ${colors.ctaContrast})!important`,
-  borderRadius: 4,
-  margin: `${variables.gap.big}px 0`
-}).toString();
-export const disabledButton = css({
-  background: colors.shade7,
-  color: `${colors.shade4}!important`
-}).toString();

package/cart/components/PaymentBar/PaymentBarCheckoutButton.style.js

@@ -1,15 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const button = css({
-  width: '100%',
-  background: `var(--color-button-cta, ${colors.cta})`,
-  color: `var(--color-button-cta-contrast, ${colors.ctaContrast})!important`
-}).toString();
-export const disabledButton = css({
-  width: '100%',
-  background: colors.shade7,
-  color: `${colors.shade4}!important`
-}).toString();

package/cart/components/PaymentBar/PaymentBarContent.style.js

@@ -1,40 +0,0 @@
-import { css } from 'glamor';
-import { isIOSTheme } from '@shopgate/engage/core';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables,
-  shadows
-} = themeConfig;
-export const wrapper = css({
-  background: colors.light,
-  boxShadow: shadows.cart.paymentBar,
-  position: 'relative',
-  zIndex: 2,
-  paddingBottom: 'var(--safe-area-inset-bottom)'
-});
-export const container = css({
-  padding: isIOSTheme() ? variables.gap.small : variables.gap.big,
-  paddingBottom: 0,
-  lineHeight: 1.45,
-  flexWrap: 'wrap',
-  flexDirection: 'column',
-  minWidth: 'auto'
-}).toString();
-export const checkoutButton = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  flexDirection: 'column'
-});
-export const checkoutButtonContainer = css({
-  background: colors.light,
-  alignItems: 'center',
-  padding: isIOSTheme() ? variables.gap.small : variables.gap.big,
-  position: 'relative',
-  zIndex: 2
-});
-export const spacer = css({
-  width: isIOSTheme() ? 27 : 32,
-  order: 1,
-  flexShrink: 0
-}).toString();

package/cart/components/Substitution/style.js

@@ -1,32 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  gap
-} = themeVariables;
-export const root = css({
-  padding: gap.big,
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'baseline',
-  flex: 1
-}).toString();
-export const checkbox = css({
-  marginLeft: 8
-}).toString();
-export const text = css({
-  flexGrow: 0
-}).toString();
-export const rightSpace = css({
-  flex: 1,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'baseline',
-  flexGrow: 0,
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    flex: 0
-  }
-}).toString();