@shopgate/pwa-ui-shared 7.30.3 → 7.31.0-alpha.1

package/ProgressBar/style.js

@@ -1,85 +0,0 @@
-import { css } from 'glamor';
-import Color from 'color';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { getCSSCustomProp } from '@shopgate/engage/styles';
-const {
-  colors
-} = themeConfig;
-const progressBarHeight = 4;
-
-/**
- * Dynamically creates the class for the ProgressBar wrapper
- * @returns {string}
- */
-const wrapper = () => css({
-  position: 'absolute',
-  bottom: 0,
-  background: Color(getCSSCustomProp('--color-secondary') || colors.accent).fade(0.6),
-  width: '100%',
-  height: progressBarHeight,
-  overflow: 'hidden',
-  transition: 'transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-  zIndex: '10'
-}).toString();
-const innerElement = css({
-  ':before': {
-    content: '""',
-    position: 'absolute',
-    background: `var(--color-secondary, ${colors.accent})`,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    willChange: 'left, right'
-  },
-  ':after': {
-    content: '""',
-    position: 'absolute',
-    background: `var(--color-secondary, ${colors.accent})`,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    willChange: 'left, right'
-  }
-}).toString();
-const indeterminateLong = css.keyframes({
-  '0%': {
-    left: '-35%',
-    right: '100%'
-  },
-  '60%': {
-    left: '100%',
-    right: '-90%'
-  },
-  '100%': {
-    left: '100%',
-    right: '-90%'
-  }
-});
-const indeterminateShort = css.keyframes({
-  '0%': {
-    left: '-200%',
-    right: '100%'
-  },
-  '60%': {
-    left: '107%',
-    right: '-8%'
-  },
-  '100%': {
-    left: '107%',
-    right: '-8%'
-  }
-});
-const animating = css({
-  ':before': {
-    animation: `${indeterminateLong} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
-  },
-  ':after': {
-    animation: `${indeterminateShort} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite`,
-    animationDelay: '1.15s'
-  }
-}).toString();
-export default {
-  wrapper,
-  innerElement,
-  animating
-};

package/RadioButton/style.js

@@ -1,21 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const baseIcon = {
-  width: 24,
-  height: 24
-};
-const checkedIcon = css({
-  ...baseIcon,
-  color: `var(--color-secondary, ${colors.accent})`
-}).toString();
-const uncheckedIcon = css({
-  ...baseIcon,
-  color: colors.shade6
-}).toString();
-export default {
-  checkedIcon,
-  uncheckedIcon
-};

package/RatingStars/style.js

@@ -1,53 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const container = css({
-  position: 'relative'
-}).toString();
-const icon = css({
-  display: 'inline-block',
-  verticalAlign: 'top',
-  outline: 0
-}).toString();
-const emptyStars = css({
-  color: themeConfig.colors.shade7
-}).toString();
-const filledStars = css({
-  position: 'absolute',
-  color: `var(--color-primary, ${colors.primary})`,
-  top: 0
-}).toString();
-
-/**
- * The rating stars styles that can be selected by passing the style key to the
- * @type {Object}
- */
-const iconStyles = {
-  small: {
-    iconSize: '1em',
-    iconStyle: css({
-      marginRight: '0.1em'
-    }).toString()
-  },
-  big: {
-    iconSize: '1.24em',
-    iconStyle: css({
-      marginRight: '0.12em'
-    }).toString()
-  },
-  large: {
-    iconSize: '2.3em',
-    iconStyle: css({
-      marginRight: '0.23em'
-    }).toString()
-  }
-};
-export default {
-  container,
-  icon,
-  iconStyles,
-  emptyStars,
-  filledStars
-};

package/Ripple/style.js

@@ -1,18 +0,0 @@
-import { css } from 'glamor';
-const ripple = css({
-  position: 'absolute',
-  borderRadius: '50%',
-  transformOrigin: '50% 50% 0'
-}).toString();
-const container = css({
-  position: 'absolute',
-  zIndex: 0,
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%'
-}).toString();
-export default {
-  ripple,
-  container
-};

package/ScannerOverlay/components/CameraOverlay/style.js

@@ -1,40 +0,0 @@
-import { css } from 'glamor';
-import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
-const edgeHeight = 45;
-const edgeWidth = 35;
-const edgeBorderWidth = 3;
-const edgeOffsetHorizontal = themeVariables.gap.xbig;
-const edgeOffsetVertical = themeVariables.gap.xxbig;
-export default css({
-  height: '90%',
-  width: '100%',
-  ':before,:after,>:before,>:after': {
-    display: 'block',
-    content: ' ',
-    width: edgeWidth,
-    height: edgeHeight,
-    position: 'absolute',
-    borderStyle: 'solid',
-    borderColor: themeColors.light
-  },
-  ':before': {
-    top: edgeOffsetVertical,
-    left: edgeOffsetHorizontal,
-    borderWidth: `${edgeBorderWidth}px 0 0 ${edgeBorderWidth}px`
-  },
-  ':after': {
-    top: edgeOffsetVertical,
-    right: edgeOffsetHorizontal,
-    borderWidth: `${edgeBorderWidth}px ${edgeBorderWidth}px 0 0`
-  },
-  '>:before': {
-    bottom: edgeOffsetVertical,
-    left: edgeOffsetHorizontal,
-    borderWidth: `0 0 ${edgeBorderWidth}px ${edgeBorderWidth}px`
-  },
-  '>:after': {
-    bottom: edgeOffsetVertical,
-    right: edgeOffsetHorizontal,
-    borderWidth: `0 ${edgeBorderWidth}px ${edgeBorderWidth}px 0`
-  }
-}).toString();

package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/style.js

@@ -1,28 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const button = css({
-  alignItems: 'center',
-  color: 'inherit',
-  display: 'flex',
-  flexShrink: 0,
-  fontSize: 24,
-  height: 44,
-  justifyContent: 'center',
-  outline: 0,
-  padding: 0,
-  position: 'relative',
-  width: 44,
-  zIndex: 1
-}).toString();
-const iconWrapper = css({
-  width: 72
-}).toString();
-const icon = css({
-  boxSizing: 'content-box',
-  color: `var(--color-secondary, ${themeConfig.colors.accent})`
-}).toString();
-export default {
-  button,
-  iconWrapper,
-  icon
-};

package/ScannerOverlay/components/ScannerBar/style.js

@@ -1,20 +0,0 @@
-import { css } from 'glamor';
-import { themeShadows, themeColors, themeVariables } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  bottom: 0,
-  backgroundColor: themeColors.overlay,
-  boxShadow: themeShadows.scannerBar,
-  fontSize: 14,
-  alignItems: 'center',
-  paddingBottom: 'var(--safe-area-inset-bottom)'
-}).toString();
-const column = css({
-  margin: `${themeVariables.gap.big}px`,
-  ':not(:first-child)': {
-    marginLeft: 0
-  }
-}).toString();
-export default {
-  container,
-  column
-};

package/Sheet/components/Header/components/SearchBar/style.js

@@ -1,47 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'nowrap',
-  marginBottom: 4,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingTop: 5,
-  paddingBottom: 10
-}).toString();
-const inputWrapper = css({
-  position: 'relative',
-  flexGrow: 1
-}).toString();
-const input = css({
-  borderRadius: 10,
-  width: '100%',
-  padding: '4px 10px 4px 30px',
-  lineHeight: '28px',
-  outline: 'none',
-  background: themeColors.shade7,
-  verticalAlign: 'middle',
-  WebkitAppearance: 'none'
-}).toString();
-const label = css({
-  alignItems: 'center',
-  color: themeColors.shade3,
-  display: 'flex',
-  height: '36px',
-  position: 'absolute',
-  pointerEvents: 'none',
-  width: '100%'
-}).toString();
-const icon = css({
-  padding: '0 6px',
-  color: themeColors.shade3,
-  fontSize: '1.235rem'
-}).toString();
-export default {
-  container,
-  inputWrapper,
-  input,
-  label,
-  icon
-};

package/Sheet/components/Header/style.js

@@ -1,50 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const wrapper = css({
-  position: 'relative',
-  zIndex: 2
-}).toString();
-const closePlaceholder = css({
-  height: themeConfig.variables.navigator.height,
-  padding: 0,
-  lineHeight: 1
-});
-const closeButton = css({
-  lineHeight: 1,
-  outline: 0,
-  padding: 0,
-  minWidth: themeConfig.variables.navigator.height,
-  height: themeConfig.variables.navigator.height,
-  position: 'relative',
-  zIndex: 2,
-  color: 'var(--color-text-high-emphasis)'
-}).toString();
-const closeIcon = css({
-  display: 'flex',
-  height: '100%',
-  width: '100%',
-  justifyContent: 'center',
-  alignItems: 'center'
-}).toString();
-const title = css({
-  fontSize: '1.25rem',
-  fontWeight: 500,
-  position: 'relative',
-  alignItems: 'center',
-  padding: `0 ${themeConfig.variables.gap.big}px`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  alignSelf: 'center'
-}).toString();
-const shadow = css({
-  boxShadow: themeConfig.shadows.material
-});
-export default {
-  wrapper,
-  closeButton,
-  closePlaceholder,
-  closeIcon,
-  title,
-  shadow
-};

package/Sheet/style.js

@@ -1,143 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const duration = 300;
-const easing = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
-const section = css({
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '80%',
-    position: 'fixed',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    margin: 'auto',
-    zIndex: 100
-  }
-}).toString();
-const container = css({
-  bottom: 0,
-  background: themeConfig.colors.light,
-  width: '100vw',
-  [responsiveMediaQuery('<xl', {
-    appOnly: true
-  })]: {
-    // Max width was introduced in PWA6 CCP-2496
-    maxWidth: 640
-  },
-  left: 0,
-  right: 0,
-  margin: '0 auto',
-  color: `var(--color-text-high-emphasis, ${themeConfig.colors.dark})`,
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    position: 'initial'
-  },
-  [responsiveMediaQuery('>md', {
-    webOnly: true
-  })]: {
-    width: '60%'
-  }
-}).toString();
-const containerFullScreen = css({
-  height: [`calc(100vh - ${themeConfig.variables.navigator.height}px - 51px)`, `calc(100vh - ${themeConfig.variables.navigator.height}px - 51px - var(--safe-area-inset-top))`]
-});
-const searchBarWrapper = css({
-  backgroundColor: 'white',
-  height: 52,
-  position: 'sticky',
-  width: '100%',
-  top: 0,
-  zIndex: 2
-});
-const progressBarContainer = css({
-  position: 'relative'
-}).toString();
-const shadow = css({
-  boxShadow: themeConfig.shadows.sheet
-}).toString();
-const content = css({
-  maxHeight: [`calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`],
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    maxHeight: [`calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`]
-  },
-  paddingBottom: ['var(--safe-area-inset-bottom)'],
-  overflowY: 'scroll',
-  WebkitOverflowScrolling: 'touch'
-}).toString();
-const slideInSheetDrawer = css.keyframes({
-  '0%': {
-    transform: 'translateY(100%)'
-  },
-  '100%': {
-    transform: 'translateY(0)'
-  }
-});
-const fadeInSheetDrawer = css.keyframes({
-  '0%': {
-    opacity: 0
-  },
-  '100%': {
-    opacity: 1
-  }
-});
-const slideOutSheetDrawer = css.keyframes({
-  '0%': {
-    transform: 'translateY(0)'
-  },
-  '100%': {
-    transform: 'translateY(100%)'
-  }
-});
-const fadeOutSheetDrawer = css.keyframes({
-  '0%': {
-    opacity: 1
-  },
-  '100%': {
-    opacity: 0
-  }
-});
-const drawerAnimation = {
-  in: css({
-    [responsiveMediaQuery('<=sm', {
-      appAlways: true
-    })]: {
-      animation: `${slideInSheetDrawer} ${duration}ms 1 both ${easing}`
-    },
-    [responsiveMediaQuery('>sm', {
-      webOnly: true
-    })]: {
-      animation: `${fadeInSheetDrawer} ${duration}ms 1 both ${easing}`
-    }
-  }).toString(),
-  out: css({
-    [responsiveMediaQuery('<=sm', {
-      appAlways: true
-    })]: {
-      animation: `${slideOutSheetDrawer} ${duration}ms 1 both ${easing}`
-    },
-    [responsiveMediaQuery('>sm', {
-      webOnly: true
-    })]: {
-      animation: `${fadeOutSheetDrawer} ${duration}ms 1 both ${easing}`
-    }
-  }).toString()
-};
-export default {
-  section,
-  container,
-  containerFullScreen,
-  searchBarWrapper,
-  progressBarContainer,
-  shadow,
-  content,
-  drawerAnimation
-};

package/TaxDisclaimer/style.js

@@ -1,9 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  background: themeConfig.colors.background,
-  display: 'block',
-  fontSize: 12,
-  padding: `20px ${themeConfig.variables.gap.big}px`,
-  textAlign: 'left'
-}).toString();

package/TextField/components/ErrorText/style.js

@@ -1,27 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-
-/**
- * The style object for a one line text element with an ellipsis on overflow.
- */
-const ellipsisLine = {
-  overflow: 'hidden',
-  width: '100%',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis'
-};
-
-/**
- * The styles for the error message.
- */
-const error = css({
-  position: 'absolute',
-  bottom: 2,
-  fontSize: 12,
-  lineHeight: '14px',
-  color: `var(--color-state-alert, ${themeConfig.colors.error})`,
-  ...ellipsisLine
-}).toString();
-export default {
-  error
-};

package/TextField/components/FormElement/style.js

@@ -1,34 +0,0 @@
-import { css } from 'glamor';
-
-/**
- * The styles for the input field.
- */
-const input = css({
-  position: 'relative',
-  padding: 0,
-  width: '100%',
-  marginTop: 24,
-  outline: 0,
-  fontSize: 16,
-  lineHeight: '19px'
-}).toString();
-
-/**
- * The styles for the multiLine.
- */
-const multiLine = css({
-  position: 'relative',
-  marginTop: 24,
-  marginBottom: 3,
-  padding: 0,
-  width: '100%',
-  outline: 0,
-  height: 19,
-  minHeight: 19,
-  lineHeight: '19px',
-  verticalAlign: 'top' // Important to avoid bottom whitespace.
-}).toString();
-export default {
-  input,
-  multiLine
-};

package/TextField/components/Hint/style.js

@@ -1,46 +0,0 @@
-import { css } from 'glamor';
-import classNames from 'classnames';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-
-/**
- * The style object for a one line text element with an ellipsis on overflow.
- */
-const ellipsisLine = {
-  overflow: 'hidden',
-  width: '100%',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis'
-};
-const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
-
-/**
- * The styles for the hint text.
- */
-const hint = css({
-  position: 'absolute',
-  pointerEvents: 'none',
-  bottom: 12,
-  color: themeConfig.colors.shade4,
-  willChange: 'transform',
-  transition: `opacity ${easing}`,
-  ...ellipsisLine
-}).toString();
-
-/**
- * The styles for the invisible hint text.
- */
-const hintInactive = css({
-  opacity: 0
-}).toString();
-
-/**
- * Gets the style classes for the underline element.
- * @param {boolean} visible Whether the hint is visible.
- * @return {string} The style classes.
- */
-const hintStyles = (visible = false) => classNames(hint, {
-  [hintInactive]: !visible
-});
-export default {
-  hintStyles
-};