@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/constants.js

@@ -0,0 +1,637 @@
+/**
+ * Preview Constants
+ * 
+ * Centralized constants for preview dropdown options and device configurations.
+ * This file ensures DRY (Don't Repeat Yourself) principles by providing
+ * a single source of truth for all preview-related options.
+ */
+
+// Device frame SVG assets
+import topSvg from './assets/Top.svg';
+import iosSvg from './assets/iOS.svg';
+import lightSvg from './assets/Light.svg';
+
+// Browser icon assets
+import chromeIcon from './assets/chrome-icon.png';
+import safariIcon from './assets/safari-icon.svg';
+import operaIcon from './assets/opera-icon.svg';
+import firefoxIcon from './assets/firefox-icon.svg';
+import edgeIcon from './assets/edge-icon.png';
+
+/**
+ * Operating System Options
+ * Available OS/Device types for preview selection
+ */
+export const OS_OPTIONS = [
+  { value: 'macOS', label: 'macOS' },
+  { value: 'iOS', label: 'iOS' },
+  { value: 'iPadOS', label: 'iPadOS' },
+  { value: 'Windows', label: 'Windows' },
+  { value: 'Android (Mobile)', label: 'Android (Mobile)' },
+  { value: 'Android (Tablet)', label: 'Android (Tablet)' },
+];
+
+/**
+ * Browser Options
+ * Available browsers for preview selection
+ */
+export const BROWSER_OPTIONS = [
+  { value: 'Chrome', label: 'Chrome' },
+  { value: 'Firefox', label: 'Firefox' },
+  { value: 'Edge', label: 'Edge' },
+  { value: 'Safari', label: 'Safari' },
+  { value: 'Opera', label: 'Opera' },
+];
+
+/**
+ * Notification State Options
+ * Available states for notification preview (Collapsed/Expanded)
+ */
+export const STATE_OPTIONS = [
+  { value: 'Collapsed', label: 'Collapsed' },
+  { value: 'Expanded', label: 'Expanded' },
+];
+
+/**
+ * Notification State Values
+ * Individual state constants for use in components
+ */
+export const NOTIFICATION_STATE_COLLAPSED = 'Collapsed';
+export const NOTIFICATION_STATE_EXPANDED = 'Expanded';
+
+/**
+ * Default Selection Values
+ */
+export const DEFAULT_OS = 'macOS';
+export const DEFAULT_BROWSER = 'Chrome';
+export const DEFAULT_STATE = 'Collapsed';
+
+/**
+ * Layout Mode Constants
+ * Available layout modes for PreviewControls component
+ */
+export const LAYOUT_MODE = {
+  INLINE: 'inline',
+  NEW_ROW: 'newRow',
+  COMPACT: 'compact',
+};
+
+/**
+ * Select Width Constants
+ * Width values for dropdown selects based on layout mode
+ */
+export const SELECT_WIDTH = {
+  COMPACT: '176px',
+  FULL: '100%',
+};
+
+
+/**
+ * Device Frame Dimensions (in pixels)
+ * 
+ * These are the natural dimensions of the device frame SVG assets.
+ * Used for calculating notification positions relative to device frames.
+ * 
+ * Note: These dimensions are based on the actual rendered SVG sizes.
+ * If SVG assets are updated, these values should be updated accordingly.
+ */
+export const DEVICE_FRAME_DIMENSIONS = {
+  // Top.svg - Used for macOS and Windows
+  'macOS': { width: 952, height: 647 },
+  'Windows': { width: 952, height: 647 },
+  // iOS.svg - Used for iOS and Android (Mobile)
+  'iOS': { width: 380, height: 778 },
+  'Android (Mobile)': { width: 380, height: 778 },
+  // Light.svg - Used for iPadOS and Android (Tablet)
+  'iPadOS': { width: 640, height: 888 },
+  'Android (Tablet)': { width: 640, height: 888 },
+};
+
+/**
+ * Operating System Name Constants
+ * Individual OS name values for use in components
+ */
+export const OS_MACOS = 'macOS';
+export const OS_IOS = 'iOS';
+export const OS_IPADOS = 'iPadOS';
+export const OS_WINDOWS = 'Windows';
+export const OS_ANDROID_MOBILE = 'Android (Mobile)';
+export const OS_ANDROID_TABLET = 'Android (Tablet)';
+
+/**
+ * Browser Name Constants
+ * Individual browser name values for use in components
+ */
+export const BROWSER_CHROME = 'Chrome';
+export const BROWSER_FIREFOX = 'Firefox';
+export const BROWSER_EDGE = 'Edge';
+export const BROWSER_SAFARI = 'Safari';
+export const BROWSER_OPERA = 'Opera';
+
+/**
+ * Browser Name Constants (lowercase)
+ * Lowercase browser names used in class names and comparisons
+ */
+export const BROWSER_CHROME_LOWER = 'chrome';
+export const BROWSER_FIREFOX_LOWER = 'firefox';
+export const BROWSER_EDGE_LOWER = 'edge';
+export const BROWSER_SAFARI_LOWER = 'safari';
+export const BROWSER_OPERA_LOWER = 'opera';
+
+/**
+ * Browsers that Support Brand Icon
+ * List of browsers that support brand icon display
+ */
+export const BRAND_ICON_SUPPORTED_BROWSERS = [
+  BROWSER_CHROME_LOWER,
+  BROWSER_EDGE_LOWER,
+  BROWSER_OPERA_LOWER,
+  BROWSER_FIREFOX_LOWER,
+];
+
+/**
+ * Browser Display Name Mapping
+ * Maps browser names to their full display names for UI
+ */
+export const BROWSER_DISPLAY_NAMES = {
+  [BROWSER_CHROME]: 'Google Chrome',
+  [BROWSER_FIREFOX]: 'Mozilla Firefox',
+  [BROWSER_EDGE]: 'Microsoft Edge',
+  [BROWSER_OPERA]: 'Opera',
+};
+
+/**
+ * Browser Display Name Mapping for Android
+ * Maps browser names to their simple display names for Android UI
+ */
+export const BROWSER_DISPLAY_NAMES_ANDROID = {
+  [BROWSER_CHROME]: 'Chrome',
+  [BROWSER_FIREFOX]: 'Firefox',
+  [BROWSER_EDGE]: 'Edge',
+  [BROWSER_OPERA]: 'Opera',
+};
+
+/**
+ * Device-to-Asset Mapping
+ * Maps OS/Device types to their corresponding device frame SVG assets
+ */
+export const DEVICE_ASSET_MAP = {
+  'macOS': topSvg,
+  'Windows': topSvg,
+  'iOS': iosSvg,
+  'Android (Mobile)': iosSvg,
+  'iPadOS': lightSvg,
+  'Android (Tablet)': lightSvg,
+};
+
+/**
+ * macOS Chrome Variant Definition
+ * Preview variant configuration for macOS Chrome browser
+ */
+export const MACOS_CHROME_VARIANT = {
+  frameAsset: topSvg,
+  icon: chromeIcon,
+  notificationClassName: 'macos-chrome',
+  states: {
+    Collapsed: {
+      supportsExpanded: false,
+      showMedia: false,
+      showCtas: false,
+      position: { custom: { x: 580, y: 57 } },
+    },
+    Expanded: {
+      supportsExpanded: true,
+      showMedia: true,
+      showCtas: true,
+      position: { custom: { x: 580, y: 57 } },
+    },
+  },
+};
+
+/**
+ * Preview variants describe which OS+Browser+State combinations are supported,
+ * along with assets, style classes, and positioning data.
+ */
+export const PREVIEW_VARIANTS = {
+  macOS: {
+    Chrome: MACOS_CHROME_VARIANT,
+    Safari: {
+      frameAsset: topSvg,
+      icon: safariIcon,
+      notificationClassName: 'macos-safari',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, y: 57 } },
+        },
+      },
+    },
+    Opera: {
+      frameAsset: topSvg,
+      icon: operaIcon,
+      notificationClassName: 'macos-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, y: 57 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: true,
+          position: { custom: { x: 580, y: 57 } },
+        },
+      },
+    },
+    Firefox: {
+      frameAsset: topSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'macos-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, y: 57 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: true,
+          position: { custom: { x: 580, y: 57 } },
+        },
+      },
+    },
+    Edge: {
+      frameAsset: topSvg,
+      icon: edgeIcon,
+      notificationClassName: 'macos-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, y: 57 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: true,
+          position: { custom: { x: 580, y: 57 } },
+        },
+      },
+    },
+  },
+  Windows: {
+    Chrome: {
+      frameAsset: topSvg,
+      icon: chromeIcon,
+      notificationClassName: 'windows-chrome',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, bottom: 55 } },
+        },
+        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
+      },
+    },
+    Firefox: {
+      frameAsset: topSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'windows-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, bottom: 55 } },
+        },
+        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
+      },
+    },
+    Edge: {
+      frameAsset: topSvg,
+      icon: edgeIcon,
+      notificationClassName: 'windows-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, bottom: 55 } },
+        },
+        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
+      },
+    },
+    Opera: {
+      frameAsset: topSvg,
+      icon: operaIcon,
+      notificationClassName: 'windows-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 580, bottom: 55 } },
+        },
+        // Expanded state removed - Windows only shows expanded UI when Collapsed is selected
+      },
+    },
+  },
+  'Android (Mobile)': {
+    Chrome: {
+      frameAsset: iosSvg,
+      icon: chromeIcon,
+      notificationClassName: 'android-mobile-chrome',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Firefox: {
+      frameAsset: iosSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'android-mobile-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Edge: {
+      frameAsset: iosSvg,
+      icon: edgeIcon,
+      notificationClassName: 'android-mobile-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Opera: {
+      frameAsset: iosSvg,
+      icon: operaIcon,
+      notificationClassName: 'android-mobile-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+  },
+  'Android (Tablet)': {
+    Chrome: {
+      frameAsset: lightSvg,
+      icon: chromeIcon,
+      notificationClassName: 'android-tablet-chrome',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Firefox: {
+      frameAsset: lightSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'android-tablet-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Edge: {
+      frameAsset: lightSvg,
+      icon: edgeIcon,
+      notificationClassName: 'android-tablet-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Opera: {
+      frameAsset: lightSvg,
+      icon: operaIcon,
+      notificationClassName: 'android-tablet-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+        Expanded: {
+          supportsExpanded: true,
+          showMedia: true,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+  },
+  iOS: {
+    Chrome: {
+      frameAsset: iosSvg,
+      icon: chromeIcon,
+      notificationClassName: 'ios-chrome',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Safari: {
+      frameAsset: iosSvg,
+      icon: safariIcon,
+      notificationClassName: 'ios-safari',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Firefox: {
+      frameAsset: iosSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'ios-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Edge: {
+      frameAsset: iosSvg,
+      icon: edgeIcon,
+      notificationClassName: 'ios-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+    Opera: {
+      frameAsset: iosSvg,
+      icon: operaIcon,
+      notificationClassName: 'ios-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 28, y: 210 } },
+        },
+      },
+    },
+  },
+  iPadOS: {
+    Chrome: {
+      frameAsset: lightSvg,
+      icon: chromeIcon,
+      notificationClassName: 'ipados-chrome',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Safari: {
+      frameAsset: lightSvg,
+      icon: safariIcon,
+      notificationClassName: 'ipados-safari',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Firefox: {
+      frameAsset: lightSvg,
+      icon: firefoxIcon,
+      notificationClassName: 'ipados-firefox',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Edge: {
+      frameAsset: lightSvg,
+      icon: edgeIcon,
+      notificationClassName: 'ipados-edge',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+    Opera: {
+      frameAsset: lightSvg,
+      icon: operaIcon,
+      notificationClassName: 'ipados-opera',
+      states: {
+        Collapsed: {
+          supportsExpanded: false,
+          showMedia: false,
+          showCtas: false,
+          position: { custom: { x: 78, y: 265 } },
+        },
+      },
+    },
+  },
+};

package/v2Containers/WebPush/Create/preview/notification-container.scss

@@ -0,0 +1,79 @@
+/**
+ * Notification Container Styles
+ * 
+ * Standalone, reusable notification container component.
+ * Supports multiple platform + browser + state combinations.
+ * 
+ * Usage:
+ *   <div className="notification-container macos-chrome expanded">
+ *     <!-- notification content -->
+ *   </div>
+ * 
+ * Modifiers:
+ *   - Platform: macos, ios, ipados, windows, android-mobile, android-tablet
+ *   - Browser: chrome, firefox, edge, safari, opera
+ *   - State: expanded, collapsed
+ * 
+ * Browser/device combinations are handled via import statements from the styles/
+ * directory. Custom styles for these combinations do not need to be defined here.
+ */
+
+// Import base styles (common notification container structure)
+@import './styles/_base';
+
+// Import implemented platform + browser combinations
+@import './styles/_macos-chrome';
+@import './styles/_windows-chrome';
+@import './styles/_android-mobile-chrome';
+@import './styles/_android-mobile-firefox';
+@import './styles/_android-mobile-edge';
+@import './styles/_android-mobile-opera';
+@import './styles/_android-tablet-chrome';
+@import './styles/_android-tablet-firefox';
+@import './styles/_android-tablet-edge';
+@import './styles/_android-tablet-opera';
+@import './styles/_ios';
+@import './styles/_ipados';
+
+// ============================================================================
+// Placeholder styles for other platform + browser combinations
+// These can be implemented as needed
+// ============================================================================
+
+// macOS + Firefox
+.notification-container.macos-firefox {
+  @extend .notification-container.macos-chrome;
+}
+
+// macOS + Safari
+.notification-container.macos-safari {
+  @extend .notification-container.macos-chrome;
+}
+
+// macOS + Edge
+.notification-container.macos-edge {
+  @extend .notification-container.macos-chrome;
+}
+
+// macOS + Opera
+.notification-container.macos-opera {
+  @extend .notification-container.macos-chrome;
+}
+
+// iOS and iPadOS styles are imported from _ios.scss and _ipados.scss
+// All browsers on iOS/iPadOS use the same simple notification style
+
+// Windows + Firefox - Reuse Windows Chrome styles
+.notification-container.windows-firefox {
+  @extend .notification-container.windows-chrome;
+}
+
+// Windows + Edge - Reuse Windows Chrome styles
+.notification-container.windows-edge {
+  @extend .notification-container.windows-chrome;
+}
+
+// Windows + Opera - Reuse Windows Chrome styles
+.notification-container.windows-opera {
+  @extend .notification-container.windows-chrome;
+}