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

package/Button/style.js

@@ -1,155 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const buttonPadding = `0 ${themeConfig.variables.gap.big}px 0`;
-
-/**
- * Creates the button style.
- * @param {string} text The text color.
- * @param {string|null} background The fill color.
- * @return {Object} The button style.
- */
-const button = (text, background) => ({
-  position: 'relative',
-  display: 'inline-block',
-  outline: 0,
-  color: text,
-  backgroundColor: background,
-  minWidth: 64,
-  overflow: 'hidden',
-  ':disabled': {
-    cursor: 'not-allowed'
-  },
-  ...themeConfig.variables.buttonBase
-});
-
-/**
- * The basic content wrapper styles.
- */
-const contentWrapper = css({
-  padding: buttonPadding
-}).toString();
-
-/**
- * Creates the button styles object.
- * @param {string} textColor The text color.
- * @param {string|null} fillColor The fill color.
- * @return {Object} The styles object.
- */
-const createButtonStyles = (textColor, fillColor) => {
-  const buttonStyle = {
-    ...button(textColor, fillColor)
-  };
-  const contentStyle = {
-    padding: buttonPadding,
-    color: buttonStyle.color
-  };
-  return {
-    button: css(buttonStyle).toString(),
-    content: css(contentStyle).toString()
-  };
-};
-
-/**
- * Creates a plain button style object without any styling.
- * @return {Object}
- */
-const plain = () => ({
-  button: css({
-    padding: 0,
-    outline: 0,
-    border: 0,
-    textAlign: 'left'
-  }).toString(),
-  content: ''
-});
-
-/**
- * Creates a simple button style object.
- * @param {boolean} disabled Whether this button is disabled.
- * @return {Object}
- */
-const simple = disabled => {
-  if (disabled) {
-    // simple disabled button style.
-    return createButtonStyles(themeConfig.colors.shade4, themeConfig.colors.shade7);
-  }
-
-  // simple enabled button style.
-  return createButtonStyles(themeConfig.colors.dark, themeConfig.colors.shade7);
-};
-
-/**
- * The regular flat button style.
- * @param {boolean} disabled Whether this button is disabled.
- * @return {Object} An object of style definitions.
- */
-const regular = disabled => {
-  if (disabled) {
-    // Flat disabled button style.
-    return createButtonStyles(colors.shade4, null);
-  }
-
-  // Flat enabled button style.
-  return createButtonStyles(colors.dark, null);
-};
-
-/**
- * The primary button style.
- * @param {boolean} disabled Whether this button is disabled.
- * @param {boolean} flat Whether this button should be rendered flat.
- * @return {Object} An object of style definitions.
- */
-const primary = (disabled, flat) => {
-  if (!flat) {
-    if (disabled) {
-      // Regular disabled button style.
-      return createButtonStyles(colors.shade4, colors.shade7);
-    }
-
-    // Regular enabled button style.
-    return createButtonStyles(`var(--color-secondary-contrast, ${colors.accentContrast})`, `var(--color-secondary, ${colors.accent})`);
-  }
-  if (disabled) {
-    // Flat disabled button style.
-    return createButtonStyles(colors.shade4, null);
-  }
-
-  // Flat enabled button style.
-  return createButtonStyles(`var(--color-secondary, ${colors.accent})`, null);
-};
-
-/**
- * The secondary button style.
- * @param {boolean} disabled Whether this button is disabled.
- * @param {boolean} flat Whether this button should be rendered flat.
- * @return {Object} An object of style definitions.
- */
-const secondary = (disabled, flat) => {
-  if (!flat) {
-    if (disabled) {
-      // Regular disabled button style.
-      return createButtonStyles(colors.shade4, colors.shade7);
-    }
-
-    // Regular enabled button style.
-    return createButtonStyles(`var(--color-primary-contrast, ${colors.primaryContrast})`, `var(--color-primary, ${colors.primary})`);
-  }
-  if (disabled) {
-    // Flat disabled button style.
-    return createButtonStyles(colors.shade4, null);
-  }
-
-  // Flat enabled button style.
-  return createButtonStyles(`var(--color-primary, ${colors.primary})`, null);
-};
-export default {
-  plain,
-  regular,
-  simple,
-  primary,
-  secondary,
-  contentWrapper
-};

package/Card/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig, themeName } from '@shopgate/pwa-common/helpers/config';
-const isIOS = themeName.includes('ios');
-export default css({
-  boxShadow: themeConfig.shadows.productCard,
-  margin: '5px 5px 10px',
-  borderRadius: isIOS ? 10 : 2,
-  background: themeConfig.colors.light,
-  overflow: 'hidden',
-  position: 'relative'
-}).toString();

package/CardList/components/Item/style.js

@@ -1,7 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  background: themeConfig.colors.light,
-  marginBottom: themeConfig.variables.gap.small / 2,
-  position: 'relative'
-}).toString();

package/CartTotalLine/components/Amount/style.js

@@ -1,8 +0,0 @@
-import { css } from 'glamor';
-const amount = css({
-  textAlign: 'right',
-  order: 4
-}).toString();
-export default {
-  amount
-};

package/CartTotalLine/components/Hint/style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-const hint = css({
-  paddingLeft: variables.gap.small,
-  order: 5
-}).toString();
-export default {
-  hint
-};

package/CartTotalLine/components/Label/style.js

@@ -1,17 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  variables
-} = themeConfig;
-const label = css({
-  flexGrow: 1,
-  paddingRight: variables.gap.small,
-  order: 3
-}).toString();
-const labelWithSuffix = css({
-  paddingRight: variables.gap.small
-});
-export default {
-  label,
-  labelWithSuffix
-};

package/CartTotalLine/style.js

@@ -1,31 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-const disabled = css({
-  color: `${colors.shade4} !important`
-}).toString();
-const base = css({
-  color: colors.shade9
-}).toString();
-const subTotal = css({
-  color: `${colors.dark}`
-}).toString();
-const grandTotal = css({
-  color: `${colors.dark}`,
-  fontSize: '1rem !important'
-}).toString();
-const line = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  fontSize: '0.875rem',
-  alignItems: 'baseline'
-}).toString();
-export default {
-  subTotal,
-  grandTotal,
-  base,
-  line,
-  disabled
-};

package/Checkbox/style.js

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

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