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

package/Chip/style.js

@@ -1,78 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/engage';
-
-/**
- * Gets a basic style object for the chip layout.
- * @param {boolean} hasRemoveButton Whether this chip has a remove button.
- * @returns {Object} The style object.
- */
-const chipBase = (hasRemoveButton = true) => ({
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: 26,
-  outline: 0,
-  height: 26,
-  paddingRight: themeConfig.variables.gap.small,
-  paddingLeft: themeConfig.variables.gap.small * (hasRemoveButton ? 0.5 : 1),
-  marginRight: 5,
-  marginTop: 4,
-  marginBottom: 4,
-  minWidth: 0
-});
-
-/**
- * Gets a style class for the chip layout.
- * @param {boolean} hasRemoveButton Whether this chip has a remove button.
- * @param {boolean} inverted Whether the colors of the chip are inverted.
- * @returns {string} The style class name.
- */
-const chip = (hasRemoveButton = true, inverted = false) => css({
-  ...chipBase(hasRemoveButton),
-  ...(hasNewServices() ? {
-    backgroundColor: inverted ? 'var(--color-primary)' : 'var(--color-primary-contrast)',
-    color: inverted ? 'var(--color-primary-contrast)' : 'var(--color-primary)'
-  } : {
-    backgroundColor: inverted ? 'var(--color-secondary)' : 'var(--color-secondary-contrast)',
-    color: inverted ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)',
-    '--color-text-high-emphasis': inverted ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)'
-  })
-}).toString();
-const removeButton = css({
-  flexShrink: 0,
-  padding: 0,
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    padding: '0 5px',
-    fontSize: '1.125rem'
-  }
-}).toString();
-const name = css({
-  paddingLeft: themeConfig.variables.gap.small * 0.5,
-  paddingRight: themeConfig.variables.gap.small * 0.5,
-  paddingTop: 3,
-  paddingBottom: 3,
-  fontSize: 12,
-  fontWeight: 500,
-  textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  display: 'block',
-  lineHeight: '1',
-  color: 'inherit',
-  [responsiveMediaQuery('>xs', {
-    webOnly: true
-  })]: {
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
-    padding: '6px 8px 6px 0'
-  }
-}).toString();
-export default {
-  chip,
-  removeButton,
-  name
-};

package/ContextMenu/components/Item/style.js

@@ -1,34 +0,0 @@
-import { css } from 'glamor';
-import Color from 'color';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { getCSSCustomProp } from '@shopgate/engage/styles';
-
-/**
- * Get the item class.
- * @param {boolean} disabled Disabled.
- * @returns {string}
- */
-export const getItemClass = disabled => {
-  let background = themeConfig.colors.shade8;
-  const customPropColor = getCSSCustomProp('--color-primary');
-  if (customPropColor) {
-    background = Color(customPropColor).alpha(0.04);
-  }
-  return css({
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    marginBottom: 2,
-    padding: `${themeConfig.variables.gap.big * 0.875}px ${themeConfig.variables.gap.big * 1.375}px`,
-    lineHeight: 1,
-    zIndex: 1,
-    color: disabled ? 'var(--color-text-low-emphasis)' : 'inherits',
-    ...(!disabled ? {
-      cursor: 'pointer',
-      ':hover': {
-        background
-      }
-    } : {
-      cursor: 'default'
-    })
-  }).toString();
-};

package/ContextMenu/components/Position/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const outerGap = themeConfig.variables.gap.small;
-const container = css({
-  position: 'absolute',
-  margin: outerGap
-}).toString();
-export default {
-  container,
-  outerGap
-};

package/ContextMenu/style.js

@@ -1,45 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  position: 'relative'
-}).toString();
-const button = css({
-  display: 'block',
-  fontSize: '1.5rem',
-  outline: 0,
-  padding: 0,
-  color: 'inherit'
-}).toString();
-const disabled = css({
-  cursor: 'not-allowed'
-}).toString();
-const overlay = css({
-  position: 'fixed',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  zIndex: 10
-}).toString();
-const menu = css({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  padding: `${themeConfig.variables.gap.small}px 0`,
-  minWidth: 130,
-  background: themeConfig.colors.light,
-  borderRadius: 2,
-  boxShadow: themeConfig.shadows.contextMenu
-}).toString();
-const scrollable = css({
-  maxHeight: '30vh',
-  overflowY: 'auto'
-}).toString();
-export default {
-  container,
-  button,
-  menu,
-  overlay,
-  disabled,
-  scrollable
-};

package/DiscountBadge/style.js

@@ -1,36 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const badge = {
-  background: `var(--color-primary, ${colors.primary})`,
-  borderRadius: 2,
-  color: `var(--color-primary-contrast, ${colors.primaryContrast})`,
-  padding: 5,
-  width: '100%',
-  fontWeight: 700,
-  textAlign: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  lineHeight: 1,
-  whiteSpace: 'nowrap',
-  ...themeConfig.variables.discountBadgeBase
-};
-
-/**
- * The discount badge styles that can be selected by passing the style key.
- * @type {Object}
- */
-export default {
-  small: css({
-    ...badge
-  }).toString(),
-  big: css({
-    ...badge,
-    paddingTop: 5,
-    paddingLeft: 5,
-    paddingRight: 5
-  }).toString()
-};

package/FavoritesButton/style.js

@@ -1,26 +0,0 @@
-import { css } from 'glamor';
-import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-const buttonProto = {
-  display: 'block',
-  position: 'relative',
-  background: themeColors.light,
-  borderRadius: '50%',
-  padding: 0,
-  fontSize: 20,
-  lineHeight: 1,
-  color: `var(--color-secondary, ${themeColors.accent})`,
-  outline: 0
-};
-const buttonFlat = css(buttonProto).toString();
-const button = css({
-  ...buttonProto,
-  boxShadow: themeShadows.buttons.elevated
-}).toString();
-const ripple = css({
-  padding: 6
-}).toString();
-export default {
-  buttonFlat,
-  button,
-  ripple
-};

package/Form/Checkbox/style.js

@@ -1,25 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const root = css({
-  marginLeft: -2,
-  // Removes margin caused by svg.
-  cursor: 'pointer',
-  '& svg': {
-    float: 'left'
-  }
-}).toString();
-const label = css({
-  lineHeight: 1.6
-}).toString();
-const labelWrapper = css({
-  marginLeft: themeConfig.variables.gap.xbig
-}).toString();
-const checked = css({
-  color: `var(--color-primary, ${themeConfig.colors.primary})`
-}).toString();
-export default {
-  root,
-  label,
-  labelWrapper,
-  checked
-};

package/Form/InfoField/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-const info = css({
-  paddingTop: 24
-}).toString();
-const element = css({
-  marginTop: 16
-}).toString();
-export default {
-  info,
-  element
-};

package/Form/Password/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const visOff = css({
-  color: colors.shade4
-}).toString();
-export default {
-  visOff
-};

package/Form/RadioGroup/components/Item/style.js

@@ -1,32 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  display: 'flex',
-  marginLeft: -1 // Removes margin of svg.
-}).toString();
-const icon = css({
-  width: 24,
-  height: 24,
-  flexShrink: 0
-}).toString();
-const disabled = css({
-  opacity: 0.25,
-  pointerEvents: 'none'
-}).toString();
-const label = css({
-  flex: 1,
-  fontSize: '1rem',
-  lineHeight: 1.5,
-  marginLeft: themeConfig.variables.gap.small,
-  marginBottom: themeConfig.variables.gap.small
-}).toString();
-const active = css({
-  color: `var(--color-primary, ${themeConfig.colors.primary})`
-}).toString();
-export default {
-  icon,
-  disabled,
-  container,
-  label,
-  active
-};

package/Form/RadioGroup/style.js

@@ -1,20 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-
-/**
- * @param {string} direction flex direction
- * @returns {*}
- */
-const container = direction => css({
-  display: 'flex',
-  flexDirection: direction
-}).toString();
-const label = css({
-  fontSize: '0.8rem',
-  paddingBottom: themeConfig.variables.gap.small,
-  color: themeConfig.colors.shade12
-}).toString();
-export default {
-  container,
-  label
-};

package/Form/Select/style.js

@@ -1,27 +0,0 @@
-import { css } from 'glamor';
-const select = css({
-  appearance: 'none',
-  position: 'relative',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  padding: '0 20px 0 0',
-  width: '100%',
-  margin: '24px 0 0 0',
-  outline: 0,
-  fontSize: 16,
-  lineHeight: '19px',
-  zIndex: 10
-}).toString();
-const chevron = css({
-  position: 'absolute',
-  top: '50%',
-  right: 0,
-  transform: 'translateY(-50%) rotateZ(-90deg)',
-  fontSize: '1.3em !important',
-  marginTop: -3
-}).toString();
-export default {
-  select,
-  chevron
-};

package/Form/SelectContextChoices/style.js

@@ -1,23 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const chevron = css({
-  position: 'absolute',
-  top: '50%',
-  right: 0,
-  transform: 'translateY(-50%) rotateZ(-90deg)',
-  fontSize: '1.3em !important',
-  marginTop: -3
-}).toString();
-const toggle = css({
-  fontSize: '1rem',
-  paddingRight: '2rem'
-});
-const itemSelected = css({
-  backgroundColor: themeConfig.colors.shade8,
-  fontWeight: 500
-}).toString();
-export default {
-  chevron,
-  toggle,
-  itemSelected
-};

package/Form/TextField/style.js

@@ -1,70 +0,0 @@
-import { css } from 'glamor';
-
-// 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 = css({
-  // 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();
-
-/**
- * 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();
-const element = css({
-  marginTop: 16,
-  display: 'flex',
-  alignItems: 'flex-end'
-}).toString();
-
-/**
- * Additional left spacing when a left element is present
- */
-const leftOffset = css({
-  marginLeft: 2
-}).toString();
-export default {
-  container,
-  input,
-  multiLine,
-  element,
-  leftOffset
-};

package/FormElement/components/ErrorText/style.js

@@ -1,13 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  bottom: 2,
-  color: `var(--color-state-alert, ${themeConfig.colors.error})`,
-  fontSize: 12,
-  lineHeight: '14px',
-  overflow: 'hidden',
-  position: 'absolute',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  width: '100%'
-}).toString();

package/FormElement/components/Label/style.js

@@ -1,89 +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 error label.
- */
-const labelError = css({
-  color: `var(--color-state-alert, ${themeConfig.colors.error})`
-}).toString();
-
-/**
- * Regular label is hidden, because placeholder is visible
- */
-const labelRegular = css({
-  opacity: 0
-}).toString();
-
-/**
- * The styles for the focused label.
- */
-const labelFocus = css({
-  color: themeConfig.colors.focus
-}).toString();
-
-/**
- * The styles for the floating label.
- */
-const labelFloating = css({
-  transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)',
-  opacity: 1
-}).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: themeConfig.colors.shade12,
-  transformOrigin: 'left top 0px',
-  willChange: 'transform, color',
-  overflow: 'visible',
-  transition: `transform ${easing}, color ${easing}`,
-  ...ellipsisLine
-}).toString();
-const labelStatic = css({
-  opacity: 1,
-  lineHeight: '19px',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  color: themeConfig.colors.shade12
-}).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.
- * @param {boolean} isStatic Whether the label is static.
- * @return {string} The style classes.
- */
-const labelStyles = (focused = false, floating = false, error = false, isStatic = false) => classNames({
-  [label]: !isStatic,
-  [labelStatic]: isStatic,
-  [labelFloating]: floating,
-  [labelRegular]: !focused,
-  [labelFocus]: !error && focused,
-  [labelError]: error && focused
-});
-export default {
-  labelStyles
-};

package/FormElement/components/Placeholder/style.js

@@ -1,56 +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 placeholder text.
- */
-const placeholder = css({
-  position: 'absolute',
-  pointerEvents: 'none',
-  top: 24,
-  color: `var(--color-text-medium-emphasis, ${themeConfig.colors.shade6})`,
-  willChange: 'transform',
-  transition: `opacity ${easing}`,
-  ...ellipsisLine
-}).toString();
-
-/**
- * The styles for the invisible hint text.
- */
-const placeholderInactive = css({
-  opacity: 0
-}).toString();
-
-/**
- * Additional left spacing when a left element is present
- */
-const leftOffset = css({
-  left: 'var(--form-element-left-offset, 26px)',
-  width: 'calc(100% - var(--form-element-left-offset, 26px))'
-}).toString();
-
-/**
- * Gets the style classes for the underline element.
- * @param {boolean} visible Whether the hint is visible.
- * @param {boolean} hasLeftElement - Whether a left element is present.
- * @return {string} The style classes.
- */
-const placeholderStyles = (visible = false, hasLeftElement = false) => classNames(placeholder, {
-  [placeholderInactive]: !visible,
-  [leftOffset]: hasLeftElement
-});
-export default {
-  placeholderStyles
-};

package/FormElement/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
-};