@shopgate/pwa-ui-shared 7.30.4-beta.1 → 7.31.0-alpha.2

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
-};

package/TextField/components/Label/style.js

@@ -1,80 +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 {
-  colors
-} = themeConfig;
-const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
-
-/**
- * The styles for the error label.
- */
-const labelError = css({
-  color: `var(--color-state-alert, ${colors.error})`
-}).toString();
-
-/**
- * The styles for the regular label.
- */
-const labelRegular = css({
-  color: colors.shade4
-}).toString();
-
-/**
- * The styles for the focused label.
- */
-const labelFocus = css({
-  color: colors.focus
-}).toString();
-
-/**
- * The styles for the floating label.
- */
-const labelFloating = css({
-  transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'
-}).toString();
-
-/**
- * The basic styles for the label.
- * @type {string}
- */
-const label = css({
-  position: 'absolute',
-  left: 0,
-  top: 24,
-  lineHeight: '19px',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  color: `var(--color-text-medium-emphasis, ${colors.shade6})`,
-  transformOrigin: 'left top 0px',
-  willChange: 'transform, color',
-  transition: `transform ${easing}, color ${easing}`,
-  ...ellipsisLine
-}).toString();
-
-/**
- * Gets the style classes for the label.
- * @param {boolean} focused Whether the input field is focused.
- * @param {boolean} floating Whether the label is floating.
- * @param {boolean} error Whether the input field shows an error message.
- * @return {string} The style classes.
- */
-const labelStyles = (focused = false, floating = false, error = false) => classNames(label, {
-  [labelFloating]: floating,
-  [labelRegular]: !focused,
-  [labelFocus]: !error && focused,
-  [labelError]: error && focused
-});
-export default {
-  labelStyles
-};

package/TextField/components/Underline/style.js

@@ -1,60 +0,0 @@
-import { css } from 'glamor';
-import color from 'color';
-import { getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
-
-/**
- * The styles for the underline wrapper element.
- */
-const underlineWrapper = css({
-  position: 'relative',
-  width: '100%',
-  borderBottom: `1px solid ${colors.shade12}`,
-  marginTop: 2,
-  marginBottom: 7
-}).toString();
-
-/**
- * The styles for the underline element.
- * @param {boolean} focused Whether the input field is focused.
- * @param {boolean} error Whether the input field shows an error message.
- * @return {string} The style class.
- */
-const underline = css({
-  position: 'relative',
-  width: '100%',
-  top: 1,
-  borderBottomWidth: 2,
-  borderBottomStyle: 'solid',
-  willChange: 'transform',
-  transition: `transform ${easing}`
-}).toString();
-
-/**
- * Returns the underline style.
- * @param {boolean} focused Is focused set or not.
- * @param {boolean} hasError Has error set or not.
- * @return {Object} style
- */
-const underlineStyle = (focused, hasError) => {
-  const primaryColor = getCSSCustomProp('--color-primary') || colors.primary;
-  let focusColor = '--color-primary';
-  if (color(primaryColor).luminosity() >= 0.8) {
-    focusColor = '--color-secondary';
-  }
-  return {
-    borderBottomColor: hasError ? `var(--color-state-alert, ${colors.error})` : `var(${focusColor}, ${colors.focus})`,
-    ...(!focused && !hasError && {
-      transform: 'scale3d(0,1,1)'
-    })
-  };
-};
-export default {
-  underline,
-  underlineWrapper,
-  underlineStyle
-};

package/TextField/style.js

@@ -1,35 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-
-// Selects a date input that is not focused.
-const bluredDateSelector = 'input[type="date"]:in-range:not(:focus)';
-
-/**
- * The styles for the container element.
- */
-const container = {
-  input: css({
-    position: 'relative',
-    paddingBottom: themeConfig.variables.gap.big,
-    width: '100%',
-    // Fixes layout issue with webkit. Height is 0 in some webkit browsers.
-    '& input[type="date"]': {
-      minHeight: '1.3rem',
-      appearance: 'none',
-      paddingLeft: 0,
-      marginLeft: 0
-    },
-    // Removes placeholder texts on chrome when input is not focused.
-    [`& ${bluredDateSelector}::-webkit-datetime-edit-year-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-month-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-day-field, ` + `${bluredDateSelector}::-webkit-datetime-edit-text`]: {
-      padding: 0,
-      color: 'transparent'
-    }
-  }).toString(),
-  multiLine: css({
-    position: 'relative',
-    width: '100%'
-  }).toString()
-};
-export default {
-  container
-};