@shopgate/engage 7.30.3 → 7.31.0-alpha.1

package/locations/components/StoreFinder/StoreFinderLocationHeader.style.js

@@ -1,74 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const container = css({
-  padding: variables.gap.big,
-  display: 'flex',
-  flexDirection: 'column',
-  color: 'var(--color-text-low-emphasis)',
-  ' > *': {
-    margin: 0
-  },
-  ' svg': {
-    color: 'var(--color-text-low-emphasis)'
-  },
-  ' li': {
-    paddingTop: 0
-  },
-  ' a': {
-    color: 'var(--color-primary)',
-    textDecoration: 'underline'
-  },
-  fontSize: '0.875rem',
-  lineHeight: '1.5rem',
-  ' > *:not(:last-child)': {
-    paddingBottom: variables.gap.xsmall,
-    paddingTop: 0
-  }
-}).toString();
-export const clickable = css({
-  ' > *': {
-    margin: 0,
-    paddingTop: 0
-  },
-  ' > *:not(:last-child)': {
-    paddingBottom: variables.gap.xsmall,
-    paddingTop: 0
-  }
-}).toString();
-export const storeName = css({
-  fontSize: '1rem',
-  fontWeight: 500,
-  color: 'var(--color-text-high-emphasis)'
-}).toString();
-export const myStoreWrapper = css({
-  display: 'flex',
-  alignItems: 'center'
-}).toString();
-export const myStore = css({
-  color: 'var(--color-primary)',
-  fontSize: '1rem',
-  fontWeight: 500
-}).toString();
-export const myStoreIcon = css({
-  ' svg': {
-    color: 'var(--color-primary)'
-  },
-  marginRight: '4px'
-}).toString();
-export const storeNameWrapper = css({
-  flexWrap: 'wrap',
-  display: 'flex',
-  gap: '2px 12px'
-});
-export const storeDistance = css({
-  lineHeight: '1.65rem',
-  paddingLeft: variables.gap.small
-}).toString();
-export const storeHoursToday = css({
-  ' > *': {
-    color: 'var(--color-text-low-emphasis)'
-  }
-}).toString();

package/locations/components/StoreFinder/StoreFinderLocations.style.js

@@ -1,26 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables
-} = themeConfig;
-const gapM = variables.gap.small + variables.gap.xsmall;
-export const container = css({
-  paddingTop: 2,
-  borderTop: 'none',
-  overflowY: 'unset',
-  WebkitOverflowScrolling: 'unset'
-});
-export const cardList = css({
-  paddingTop: 0
-}).toString();
-export const card = css({
-  background: colors.light,
-  border: `1px solid ${colors.shade7}`,
-  boxSizing: 'border-box',
-  boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
-  borderRadius: 3,
-  ':not(:last-child)': {
-    marginBottom: gapM
-  }
-}).toString();

package/locations/components/StoreFinder/StoreFinderSearch.style.js

@@ -1,5 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables } from '@shopgate/pwa-common/helpers/config';
-export const container = css({
-  paddingBottom: themeVariables.gap.small
-});

package/locations/components/StoreList/Store.style.js

@@ -1,121 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  gap
-} = themeVariables;
-const baseCardPadding = `${gap.small}px ${gap.big}px`;
-const gapM = gap.small + gap.xsmall;
-export const stores = css({
-  background: `var(--color-background-accent, ${themeColors.background})`,
-  padding: `${gapM}px ${gapM}px ${gap.big}px`,
-  fontSize: '0.875rem',
-  boxShadow: 'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'
-}).toString();
-export const storeCard = css({
-  background: themeColors.light,
-  marginBottom: gapM,
-  ':last-of-type': {
-    marginBottom: 0
-  },
-  border: `1px solid ${themeColors.shade7}`,
-  boxSizing: 'border-box',
-  boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
-  borderRadius: '0px 0px 3px 3px'
-}).toString();
-export const storeCardPlaceholder = css({
-  margin: '10px 0',
-  height: 36
-}).toString();
-export const storeHeader = css({
-  cursor: 'pointer',
-  padding: `${baseCardPadding} ${gap.xsmall}px`
-}).toString();
-export const disabled = css({
-  cursor: 'not-allowed'
-}).toString();
-export const storeName = css({
-  fontSize: '1rem',
-  fontWeight: 500
-}).toString();
-export const storeDistance = css({
-  whiteSpace: 'nowrap',
-  color: `var(--color-text-medium-emphasis, ${themeColors.gray})`,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    fontSize: '0.875rem'
-  }
-}).toString();
-export const storeDetailsBody = css({
-  padding: baseCardPadding,
-  borderTop: `1px solid ${themeColors.shade7}`
-}).toString();
-export const storeDetailsAccordion = css({
-  justifyContent: 'space-between'
-}).toString();
-export const storeHoursToday = css({
-  color: `var(--color-text-medium-emphasis, ${themeColors.gray})`
-}).toString();
-export const address = css({
-  display: 'flex',
-  flexFlow: 'row nowrap',
-  color: `var(--color-text-medium-emphasis, ${themeColors.gray})`,
-  marginBottom: 4
-}).toString();
-export const addressIcon = css({
-  color: 'var(--color-text-medium-emphasis)',
-  fontSize: '1.4rem',
-  padding: `${gap.xsmall}px ${gap.big}px 0 0`
-}).toString();
-export const detailsIcon = css({
-  color: 'var(--color-text-medium-emphasis)',
-  fontSize: '1.4rem',
-  padding: `${gap.xsmall}px ${gap.big}px 0 0`
-}).toString();
-export const detailsIconLinked = css({
-  color: 'var(--color-primary)'
-}).toString();
-export const detailsLine = css({
-  marginTop: gapM
-}).toString();
-export const details = css({
-  paddingTop: gap.xsmall
-}).toString();
-export const openingHours = css({
-  display: 'table',
-  color: 'var(--color-text-medium-emphasis)'
-}).toString();
-export const openingHoursRow = css({
-  display: 'table-row'
-}).toString();
-export const openingHoursDay = css({
-  display: 'table-cell',
-  paddingRight: gap.big
-}).toString();
-export const detailsPrimary = css({
-  margin: 0,
-  color: `var(--color-primary, ${themeColors.primary})`,
-  lineHeight: '1.375rem'
-}).toString();
-export const detailsSecondary = css({
-  color: `var(--color-text-medium-emphasis, ${themeColors.shade11})`,
-  fontSize: '0.75rem'
-}).toString();
-export const selectLocationButtonWrapper = css({
-  padding: `0 ${gap.big}px ${gap.small}px ${gap.big}px`
-});
-export const stockInfoContainer = css({
-  marginTop: 8,
-  ':empty': {
-    display: 'none'
-  }
-});
-export const selectLocationButton = css({
-  width: '100%',
-  fontSize: '.875rem !important',
-  ':not(:disabled)': {
-    background: `var(--color-primary, ${themeColors.primary})!important`,
-    color: `var(--color-primary-contrast, ${themeColors.primaryContrast})!important`
-  }
-});

package/locations/components/StoreList/StoreListProduct.style.js

@@ -1,43 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
-export const productContainer = css({
-  padding: `${themeVariables.gap.bigger}px ${themeVariables.gap.bigger}px ${themeVariables.gap.small}px`,
-  boxShadow: `inset 0 1px 0 ${themeColors.shade7}`
-}).toString();
-export const productContainerInner = css({
-  display: 'flex',
-  flexFlow: 'row nowrap'
-}).toString();
-export const productImage = css({
-  flex: '0 0 auto',
-  width: '2.5rem',
-  height: '2.5rem',
-  background: themeColors.placeholder,
-  marginRight: themeVariables.gap.bigger
-}).toString();
-export const productContent = css({
-  flexGrow: 1,
-  display: 'block'
-}).toString();
-export const productName = css({
-  fontSize: '1.25rem',
-  fontWeight: 600,
-  marginBottom: themeVariables.gap.small
-}).toString();
-export const productInfo = css({
-  alignItems: 'flex-end',
-  color: 'var(--color-text-high-emphasis)'
-}).toString();
-export const productInfoLeft = css({
-  fontSize: '0.875rem',
-  color: themeColors.shade11
-}).toString();
-export const priceInfo = css({
-  color: `var(--color-primary, ${themeColors.primary})`,
-  flexGrow: 0,
-  textAlign: 'right',
-  wordBreak: 'break-word',
-  ' > ul ': {
-    flexDirection: 'column-reverse'
-  }
-}).toString();

package/locations/components/StoreList/StoreListSearch.style.js

@@ -1,84 +0,0 @@
-import { css } from 'glamor';
-import { themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
-export const container = css({
-  padding: '0 12px 8px 12px',
-  background: themeColors.light,
-  display: 'grid',
-  gridTemplateColumns: 'auto 1fr',
-  gridTemplateRows: 'auto',
-  gridTemplateAreas: `
-    "countries input"
-    "radius radius"
-  `
-});
-export const countriesCell = css({
-  gridArea: 'countries',
-  maxWidth: 160,
-  paddingRight: themeVariables.gap.small
-});
-export const inputCell = css({
-  gridArea: 'input'
-});
-export const radiusCell = css({
-  gridArea: 'radius',
-  ':not(:empty)': {
-    height: 38,
-    marginTop: themeVariables.gap.small
-  }
-});
-export const selectContainer = css({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'stretch',
-  height: '100%',
-  '&:after': {
-    zIndex: 2,
-    content: '""',
-    position: 'absolute',
-    display: 'block',
-    top: '50%',
-    right: themeVariables.gap.small * 1.5,
-    transform: 'translate3d(0, -25%, 0)',
-    width: 5,
-    height: 5,
-    border: '5px solid transparent',
-    borderTopColor: themeColors.shade6
-  }
-});
-export const select = css({
-  appearance: 'none',
-  border: `1px solid ${themeColors.shade7}`,
-  padding: `0 ${themeVariables.gap.bigger + themeVariables.gap.small * 1.5}px 0 ${themeVariables.gap.big * 0.75}px`,
-  color: themeColors.shade11,
-  fontSize: '1rem',
-  borderRadius: 4,
-  width: '100%',
-  outline: 0
-});
-export const inputContainer = css({
-  background: themeColors.light,
-  border: `1px solid ${themeColors.shade7}`,
-  borderRadius: 4,
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%'
-});
-export const input = css({
-  margin: '3px 0',
-  width: '100%',
-  lineHeight: '28px',
-  outline: 'none',
-  verticalAlign: 'middle',
-  WebkitAppearance: 'none'
-});
-export const inputIcon = css({
-  padding: 0,
-  margin: '0 8px',
-  color: themeColors.shade9,
-  fontSize: '1.23rem',
-  flexShrink: 0,
-  outline: 0
-});
-export const iconClass = css({
-  fontSize: '1.25rem !important'
-}).toString();

package/locations/components/StoreList/StoreListSearchRadius.style.js

@@ -1,3 +0,0 @@
-import { css } from 'glamor';
-export const select = css({});
-export const option = css({});

package/login/components/ForgotPassword/ForgotPassword.style.js

@@ -1,88 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { StylePresets } from '@shopgate/engage/components/Form';
-const {
-  variables,
-  colors
-} = themeConfig;
-export const container = css({
-  flexGrow: 1,
-  padding: `${variables.gap.small * 3}px ${variables.gap.big}px`,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    width: '50%'
-  }
-});
-export const headline = css({
-  fontSize: '2.1875rem',
-  lineHeight: 1,
-  fontWeight: 500,
-  paddingBottom: variables.gap.big,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    fontSize: '2rem',
-    fontWeight: 'normal'
-  }
-});
-export const subline = css({
-  fontSize: '1.125rem',
-  color: `var(--color-text-medium-emphasis, ${colors.shade6})`,
-  marginBottom: variables.gap.big,
-  marginTop: 4
-});
-export const form = css({
-  paddingTop: 24,
-  ...StylePresets.OUTLINED_FORM_FIELDS,
-  ' .simpleInput': {
-    paddingLeft: variables.gap.big
-  }
-}).toString();
-export const buttonContainer = css({
-  paddingTop: variables.gap.big * 2,
-  paddingBottom: variables.gap.big * 1.5
-}).toString();
-export const button = css({
-  width: '100%'
-}).toString();
-export const input = css({
-  ' .label': {
-    color: `var(--color-text-medium-emphasis, ${colors.shade6})`
-  },
-  ' .placeholder': {
-    color: `var(--color-text-medium-emphasis, ${colors.shade6})`
-  },
-  ' .simpleInput': {
-    color: 'var(--color-text-heigh-emphasis)'
-  }
-}).toString();
-export const resetInstructions = css({
-  paddingTop: variables.gap.big,
-  display: 'flex',
-  alignItems: 'center'
-});
-export const resetInstructionsEmail = css({
-  fontWeight: 'bold',
-  color: 'var(--color-secondary)'
-});
-export const goBackButtonContainer = css({
-  padding: `${variables.gap.big}px 0`
-}).toString();
-export const goBackButton = css({
-  fontSize: '0.875rem !important',
-  padding: '0 !important',
-  ' > div ': {
-    padding: 0,
-    display: 'flex'
-  }
-}).toString();
-export const goBackButtonIcon = css({
-  display: 'inline-block',
-  fontSize: '1.375rem !important',
-  alignSelf: 'center',
-  marginRight: variables.gap.xsmall,
-  marginLeft: -3,
-  marginTop: -2
-}).toString();

package/orders/components/OrderDetails/OrderDetailsAuthenticate.style.js

@@ -1,33 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { StylePresets } from '@shopgate/engage/components/Form';
-const {
-  variables
-} = themeConfig;
-export const container = css({
-  padding: `${variables.gap.big}px ${variables.gap.big}px 0`,
-  display: 'flex',
-  flex: '0 0 auto',
-  flexDirection: 'column',
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    width: '50%'
-  }
-});
-export const form = css({
-  ...StylePresets.OUTLINED_FORM_FIELDS
-});
-export const submitButton = css({
-  width: '100%'
-}).toString();
-export const loginLink = css({
-  color: 'var(--color-primary)',
-  ':hover': {
-    textDecoration: 'underline'
-  }
-}).toString();
-export const messageBarContainer = css({
-  margin: 0
-}).toString();

package/orders/components/OrderDetails/OrderDetailsContent.style.js

@@ -1,18 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  variables
-} = themeConfig;
-export const headline = css({
-  display: 'none',
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    display: 'block',
-    fontSize: '2rem',
-    fontWeight: 'normal',
-    paddingBottom: variables.gap.big,
-    padding: `${variables.gap.big}px ${variables.gap.big}px 0`
-  }
-});

package/orders/components/OrderDetails/OrderDetailsOrder.style.js

@@ -1,62 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const root = css({
-  padding: `${variables.gap.big}px 0`
-});
-export const contactsWrapper = css({
-  paddingBottom: variables.gap.big,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    display: 'flex'
-  }
-}).toString();
-export const contact = css({
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    width: '50%',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingLeft: variables.gap.small,
-    paddingRight: variables.gap.small,
-    ':first-child': {
-      paddingLeft: variables.gap.big
-    },
-    ':last-child': {
-      paddingRight: variables.gap.big
-    }
-  }
-}).toString();
-export const cartWrapper = css({
-  paddingTop: variables.gap.big,
-  paddingBottom: variables.gap.big
-});
-export const summaryWrapper = css({
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    display: 'flex',
-    alignItems: 'flex-end',
-    flexDirection: 'column'
-  }
-});
-export const summary = css({
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    width: '50%'
-  }
-}).toString();
-export const supplemental = css({
-  padding: variables.gap.big,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    width: '50%'
-  }
-}).toString();

package/orders/components/OrderDetails/OrderDetailsOrderHeader.style.js

@@ -1,42 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const wrapper = css({
-  padding: `${variables.gap.big}px ${variables.gap.big}px 0`
-});
-export const instructions = css({});
-export const body = css({
-  border: 0,
-  fontSize: '0.875rem',
-  lineHeight: '1.25rem',
-  marginBottom: 0
-});
-export const orderNum = css({
-  padding: 0,
-  fontSize: '1.25rem',
-  fontWeight: 500,
-  lineHeight: '1.5rem',
-  margin: `0 0 ${variables.gap.big}px`,
-  border: 0
-});
-export const subline = css({
-  display: 'flex',
-  alignItems: 'baseline',
-  justifyContent: 'space-between',
-  flexWrap: 'wrap'
-});
-export const cancel = css({
-  flexShrink: 0,
-  marginRight: 8
-}).toString();
-export const time = css({
-  marginTop: 8,
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center'
-}).toString();
-export const timeIcon = css({
-  marginRight: 8
-}).toString();

package/orders/components/OrderDetails/OrderDetailsOrderPickupLocation.style.js

@@ -1,7 +0,0 @@
-import { css } from 'glamor';
-export const locationName = css({
-  margin: 0,
-  color: 'var(--color-text-high-emphasis)',
-  fontSize: '1rem',
-  fontWeight: 500
-});

package/orders/components/OrderHistory/OrderHistory.style.js

@@ -1,7 +0,0 @@
-import { css } from 'glamor';
-export const root = css({
-  margin: 8
-});
-export const noResult = css({
-  margin: 16
-});

package/orders/components/OrderHistory/OrderHistoryList.style.js

@@ -1,36 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig, themeColors, themeName } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-const isIOS = themeName.includes('ios');
-export const orderNumber = css({
-  fontWeight: 500
-});
-export const list = css({
-  background: `var(--color-background-accent, ${themeColors.background})`,
-  marginBottom: `-${variables.gap.small * 1.5}px`
-});
-export const cardContent = css({
-  padding: variables.gap.big,
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between'
-}).toString();
-export const column = css({
-  display: 'flex',
-  flexDirection: 'column'
-});
-export const rightAlign = css({
-  textAlign: 'right'
-});
-export const card = css({
-  marginBottom: variables.gap.small * 1.5,
-  ':last-of-type': {
-    marginBottom: 0
-  },
-  background: themeColors.light,
-  boxSizing: 'border-box',
-  boxShadow: themeConfig.shadows.productCard,
-  borderRadius: isIOS ? 10 : 2
-}).toString();

package/orders/components/OrderHistory/OrderHistoryTable.style.js

@@ -1,25 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-export const tableHeader = css({
-  '& > th': {
-    padding: variables.gap.big,
-    fontWeight: 500,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
-  }
-}).toString();
-export const tableRow = css({
-  borderTopWidth: 1,
-  borderTopStyle: 'solid',
-  borderTopColor: 'rgba(0, 0, 0, 0.12)',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: 'rgba(0,0,0,.04)'
-  },
-  '& > td': {
-    padding: variables.gap.big
-  }
-}).toString();