@capillarytech/creatives-library 8.0.266 → 8.0.267

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

@@ -1,637 +0,0 @@
-/**
- * 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

@@ -1,79 +0,0 @@
-/**
- * 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;
-}