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

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