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

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

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