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

package/FormElement/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-
-/**
- * The styles for the container element.
- */
-const formElement = css({
-  position: 'relative',
-  paddingBottom: themeConfig.variables.gap.big,
-  width: '100%'
-}).toString();
-export default {
-  formElement
-};

package/Glow/style.js

@@ -1,18 +0,0 @@
-import { css } from 'glamor';
-const container = css({
-  position: 'relative'
-}).toString();
-const glow = css({
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  width: '100%',
-  height: '100%',
-  background: 'transparent',
-  transition: 'background 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
-  zIndex: 0
-}).toString();
-export default {
-  container,
-  glow
-};

package/IndicatorCircle/style.js

@@ -1,65 +0,0 @@
-import { css } from 'glamor';
-const rotate = css.keyframes({
-  '100%': {
-    transform: 'rotate(360deg)'
-  }
-});
-
-/**
- * Styles for spinner.
- * @param {boolean} paused Animation should be paused.
- * @returns {string}
- */
-const spinner = paused => {
-  const styles = {
-    margin: 'auto',
-    transformOrigin: 'center center',
-    maxWidth: '100%',
-    maxHeight: '100%'
-  };
-  if (!paused) {
-    styles.animation = `${rotate} 1.6s linear infinite`;
-  }
-  return css(styles).toString();
-};
-const dash = css.keyframes({
-  '0%': {
-    strokeDasharray: '1, 200',
-    strokeDashoffset: '0'
-  },
-  '50%': {
-    strokeDasharray: '89, 200',
-    strokeDashoffset: '-35px'
-  },
-  '100%': {
-    strokeDasharray: '89, 200',
-    strokeDashoffset: '-124px'
-  }
-});
-
-/**
- * Styles for the rotating circle.
- * @param {string} color The color of the circle. Default color is "accent".
- * @param {string} strokeWidth The stroke width of the circle.
- * @param {boolean} paused Animation should be paused.
- * @return {string} CSS class name.
- */
-const circle = (color, strokeWidth, paused) => {
-  const styles = {
-    fill: 'none',
-    stroke: color,
-    strokeDasharray: '1, 200',
-    strokeDashoffset: 0,
-    strokeLinecap: 'round',
-    strokeMiterlimit: 10,
-    strokeWidth
-  };
-  if (!paused) {
-    styles.animation = `${dash} 1.2s ease-in-out infinite`;
-  }
-  return css(styles).toString();
-};
-export default {
-  spinner,
-  circle
-};

package/LoadingIndicator/style.js

@@ -1,20 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors
-} = themeConfig;
-export const container = css({
-  display: 'block',
-  padding: '1em',
-  textAlign: 'center',
-  fontSize: '1.5em',
-  color: `var(--color-secondary, ${colors.accent})`
-});
-export const imgContainer = css({
-  display: 'flex',
-  justifyContent: 'center',
-  ' img': {
-    maxWidth: '50vw',
-    maxHeight: '50vh'
-  }
-});

package/Manufacturer/style.js

@@ -1,5 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  color: `var(--color-primary, ${themeConfig.colors.primary})`
-}).toString();

package/MessageBar/spec.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import MessageBar from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const MESSAGE1 = 'This is some information';
-const MESSAGE2 = 'This is an error that happened here.';
-const MESSAGE3 = 'This is just a warning. Nothing to freak out about.';
-const MESSAGE4 = 'Normal pre-translated message.';
-const MESSAGE5 = 'Normal pre-translated message two.';
-const MESSAGE6 = 'some.translation.string';
-const MESSAGE7 = 'Message with messageParams';
-describe('<MessageBar />', () => {
-  describe('General rendering', () => {
-    it('should be empty if no messages have been set', () => {
-      const wrapper = mount(/*#__PURE__*/_jsx(MessageBar, {
-        messages: []
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-    it('should render a message as info if type is missing', () => {
-      const wrapper = mount(/*#__PURE__*/_jsx(MessageBar, {
-        messages: [{
-          message: 'something'
-        }]
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-  describe('Multiple messages rendering', () => {
-    it('should render messages without frontend translation', () => {
-      const wrapper = mount(/*#__PURE__*/_jsx(MessageBar, {
-        messages: [{
-          type: 'info',
-          message: MESSAGE1
-        }, {
-          type: 'error',
-          message: MESSAGE2
-        }, {
-          type: 'warning',
-          message: MESSAGE3
-        }, {
-          message: MESSAGE4,
-          translated: null
-        }, {
-          message: MESSAGE5,
-          translated: true
-        }]
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-    it('should translate and render all given messages', () => {
-      const wrapper = mount(/*#__PURE__*/_jsx(MessageBar, {
-        messages: [{
-          message: MESSAGE6,
-          translated: false
-        }, {
-          message: MESSAGE7,
-          messageParams: {
-            myCustomParam1: '-> TEST-VALUE #1 <-',
-            myCustomParam2: '-> TEST-VALUE #2 <-'
-          },
-          translated: false
-        }]
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-    it('should render with custom classNames', () => {
-      const wrapper = mount(/*#__PURE__*/_jsx(MessageBar, {
-        messages: [{
-          message: MESSAGE1
-        }],
-        classNames: {
-          container: 'cls-container',
-          message: 'cls-message'
-        }
-      }));
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});

package/MessageBar/style.js

@@ -1,38 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors,
-  variables
-} = themeConfig;
-const container = css({
-  background: colors.background,
-  display: 'flex',
-  flexDirection: 'column',
-  flexShrink: 0
-}).toString();
-const messageBase = {
-  padding: `${variables.gap.small}px ${variables.gap.big}px`,
-  fontSize: '0.875rem',
-  fontWeight: 500,
-  ':not(:last-child)': {
-    marginBottom: variables.gap.small * 0.5
-  }
-};
-const info = css(messageBase, {
-  background: `var(--color-secondary, ${colors.accent})`,
-  color: `var(--color-secondary-contrast, ${colors.accentContrast})`
-}).toString();
-const error = css(messageBase, {
-  background: colors.error,
-  color: colors.light
-}).toString();
-const warning = css(messageBase, {
-  background: colors.warning,
-  color: colors.light
-}).toString();
-export default {
-  container,
-  info,
-  error,
-  warning
-};

package/NoResults/components/Icon/style.js

@@ -1,17 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-const magnifier = css({
-  fill: 'currentColor'
-}).toString();
-const background = css({
-  fill: themeColors.light
-}).toString();
-const circle = css({
-  fill: 'currentColor',
-  opacity: 0.065
-}).toString();
-export default {
-  magnifier,
-  background,
-  circle
-};

package/NoResults/style.js

@@ -1,31 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const wrapper = css({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  width: '100%',
-  justifyContent: 'center',
-  textAlign: 'center',
-  background: `var(--page-background-color, ${themeConfig.colors.shade8})`
-}).toString();
-const icon = css({
-  width: 216,
-  color: `var(--color-primary, ${themeConfig.colors.primary})`
-}).toString();
-const headline = css({
-  fontSize: '1.25rem',
-  fontWeight: 500,
-  marginTop: 30
-}).toString();
-const text = css({
-  marginTop: themeConfig.variables.gap.big,
-  padding: `0 ${themeConfig.variables.gap.big}px`
-}).toString();
-export default {
-  wrapper,
-  icon,
-  headline,
-  text
-};

package/Placeholder/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  colors: {
-    shade7
-  }
-} = themeConfig;
-export default css({
-  background: `var(--color-background-accent, ${shade7})`,
-  position: 'relative'
-});

package/PlaceholderLabel/style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const label = css({
-  background: themeConfig.colors.dark,
-  opacity: 0.1,
-  width: '100%',
-  height: 16,
-  marginBottom: 12
-}).toString();
-export default {
-  label
-};

package/Price/style.js

@@ -1,22 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const container = css({
-  display: 'flex',
-  position: 'relative',
-  whiteSpace: 'nowrap'
-}).toString();
-const disclaimer = css({
-  color: 'initial',
-  fontSize: 14,
-  position: 'absolute',
-  right: -10,
-  top: 0
-}).toString();
-const discounted = css({
-  color: `var(--color-primary, ${themeConfig.colors.primary})`
-}).toString();
-export default {
-  container,
-  disclaimer,
-  discounted
-};

package/PriceInfo/style.js

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

package/PriceStriked/style.js

@@ -1,36 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-const basic = css({
-  whiteSpace: 'nowrap',
-  '& span': {
-    position: 'relative',
-    ':before': {
-      // The strike-through effect is achieved by using the :before pseudo-class.
-      borderColor: 'currentColor',
-      content: '""',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: '50%'
-    }
-  },
-  color: themeColors.shade11
-}).toString();
-
-/**
- * Returns a class for the rotated strike-through line.
- * @param {number} angle The calculated angle for the strike-through line.
- * @returns {string} Classname
- */
-const getAngleStyle = angle => css({
-  '& span': {
-    ':before': {
-      borderTop: '1px solid',
-      transform: `rotate(-${angle}deg)`
-    }
-  }
-}).toString();
-export default {
-  basic,
-  getAngleStyle
-};

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