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

package/AddToCartButton/style.js

@@ -0,0 +1,156 @@
+import { css } from 'glamor';
+import spring from 'css-spring';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/* eslint-disable max-len */
+// TODO This file was brought back since some extensions import it (@shopgate-project/tablet-adjustments, @shopgate/grouped-products).
+// It's not used anymore by the component. To reduce the effort of updating all shops to a new version
+// of the extension, we temporarily keep this file. It should be removed in the future and the extensions should handle their styling
+// on their own
+/* eslint-enable max-len */
+
+const options = {
+  stiffness: 381.47,
+  damping: 15
+};
+const buttonSize = 40;
+const iconSize = 20;
+
+/**
+ * Keyframe animations to create spring animation.
+ * spring(..) automatically calculates all steps for the keyframe animation.
+ */
+const springFromTopKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, 300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, options));
+const springFromBottomKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, options));
+const springToTopKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, 300%, 0)'
+}, options));
+const springToBottomKeyframes = css.keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, -300%, 0)'
+}, options));
+const springFromBottom = css({
+  animation: `${springFromBottomKeyframes} 600ms`
+}).toString();
+const springFromTop = css({
+  animation: `${springFromTopKeyframes} 600ms`
+}).toString();
+const springToTop = css({
+  animation: `${springToTopKeyframes} 600ms`
+}).toString();
+const springToBottom = css({
+  animation: `${springToBottomKeyframes} 600ms`
+}).toString();
+
+/**
+ * Circular button and container for the icons.
+ * Default styles.
+ * @param {number} bSize Size of the button.
+ * @param {number} iSize Size of the icon.
+ * @return {string} Class name
+ */
+const buttonWrapperDefault = (bSize, iSize) => ({
+  transition: 'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  borderRadius: '50%',
+  width: bSize,
+  height: bSize,
+  position: 'relative',
+  fontSize: iSize,
+  outline: 0,
+  paddingLeft: (bSize - iSize) / 2,
+  paddingRight: (bSize - iSize) / 2,
+  zIndex: 2,
+  // Prevents the icons to be visible outside of the circle
+  overflow: 'hidden',
+  flexShrink: 0
+});
+/**
+ * Circular button and container for the icons.
+ * @param {number} bSize Size of the button.
+ * @param {number} iSize Size of the icon.
+ * @return {string} Class name
+ */
+const buttonWrapper = (bSize, iSize) => css({
+  ...buttonWrapperDefault(bSize, iSize)
+}).toString();
+
+/**
+ * Circular button and container for the icons.
+ * Without shadow.
+ * @param {number} bSize Size of the button.
+ * @param {number} iSize Size of the icon.
+ * @return {string} Class name
+ */
+const buttonWrapperNoShadow = (bSize, iSize) => css({
+  ...buttonWrapperDefault(bSize, iSize)
+}).toString();
+
+/**
+ * Styling that is applied to the button when cart icon is shown.
+ */
+const buttonReady = css({
+  background: `var(--color-button-cta, ${themeConfig.colors.cta})`,
+  color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`
+}).toString();
+
+/**
+ * Styling that is applied to the button when checkmark is shown.
+ */
+const buttonSuccess = css({
+  background: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+  color: `var(--color-button-cta, ${themeConfig.colors.cta})`
+}).toString();
+
+/**
+ * Styling that is applied to the button when it is disabled.
+ */
+const buttonDisabled = css({
+  background: themeConfig.colors.shade5,
+  color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+  boxShadow: themeConfig.shadows.buttons.disabled
+}).toString();
+
+/**
+ * Basic icon style that is always applied to all icons.
+ */
+const icon = css({
+  transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  opacity: 1,
+  position: 'absolute'
+}).toString();
+
+/**
+ * Icon style that is applied only to the spinner icon.
+ */
+const spinnerIcon = css({
+  left: '50%',
+  top: '50%',
+  marginTop: -themeConfig.variables.loadingIndicator.size / 2,
+  marginLeft: -themeConfig.variables.loadingIndicator.size / 2
+}).toString();
+export default {
+  buttonWrapper,
+  buttonWrapperNoShadow,
+  buttonReady,
+  buttonSuccess,
+  buttonDisabled,
+  buttonSize,
+  icon,
+  iconSize,
+  spinnerIcon,
+  springFromBottom,
+  springFromTop,
+  springToBottom,
+  springToTop
+};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.31.0-alpha.1",
+  "version": "7.31.0-alpha.3",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.31.0-alpha.1",
-    "@shopgate/pwa-ui-material": "7.31.0-alpha.1"
+    "@shopgate/pwa-ui-ios": "7.31.0-alpha.3",
+    "@shopgate/pwa-ui-material": "7.31.0-alpha.3"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.31.0-alpha.1",
-    "@shopgate/pwa-common-commerce": "7.31.0-alpha.1",
+    "@shopgate/pwa-common": "7.31.0-alpha.3",
+    "@shopgate/pwa-common-commerce": "7.31.0-alpha.3",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },