Create POSShadowStyle with view modifier and preview.

Author: jaclync

WooCommerce/Classes/POS/Utils/POSShadowStyle.swift

@@ -0,0 +1,58 @@
+import Foundation
+import SwiftUI
+
+/// Defines shadow styles used across POS UI components.
+/// Design ref: 1qcjzXitBHU7xPnpCOWnNM-fi-22_7198
+enum POSShadowStyle {
+    case medium
+    case large
+}
+
+/// A ViewModifier that applies predefined shadow styles
+struct POSShadowStyleModifier: ViewModifier {
+    let style: POSShadowStyle
+    
+    func body(content: Content) -> some View {
+        switch style {
+        case .medium:
+            content
+                .shadow(color: Color.posShadow.opacity(0.02), radius: 16, x: 0, y: 16)
+                .shadow(color: Color.posShadow.opacity(0.03), radius: 8, x: 0, y: 4)
+                .shadow(color: Color.posShadow.opacity(0.04), radius: 5, x: 0, y: 4)
+                .shadow(color: Color.posShadow.opacity(0.05), radius: 3, x: 0, y: 2)
+        case .large:
+            content
+                .shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50)
+                .shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30)
+                .shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15)
+                .shadow(color: Color.posShadow.opacity(0.08), radius: 15, x: 0, y: 5)
+        }
+    }
+}
+
+extension View {
+    /// Applies a shadow style to the view.
+    /// - Parameter style: The shadow style to apply.
+    func posShadow(_ style: POSShadowStyle) -> some View {
+        modifier(POSShadowStyleModifier(style: style))
+    }
+}
+
+#Preview {
+    VStack(spacing: 40) {
+        Text("Medium Shadow")
+            .padding()
+            .frame(width: 200, height: 100)
+            .foregroundStyle(Color.posOnSecondaryContainer)
+            .background(Color.posOutlineVariant)
+            .posShadow(.medium)
+        
+        Text("Large Shadow")
+            .padding()
+            .frame(width: 200, height: 100)
+            .foregroundStyle(Color.posOnSecondaryContainer)
+            .background(Color.posOutlineVariant)
+            .posShadow(.large)
+    }
+    .padding(100)
+}

WooCommerce/WooCommerce.xcodeproj/project.pbxproj

@@ -81,6 +81,7 @@
 		0204F0CA29C047A400CFC78F /* SelfSizingHostingController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0204F0C929C047A400CFC78F /* SelfSizingHostingController.swift */; };
 		0205021E27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0205021D27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift */; };
 		02055B142D5DAB6400E51059 /* POSCornerRadiusStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */; };
+		020564982D5DC96600E51059 /* POSShadowStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020564972D5DC96600E51059 /* POSShadowStyle.swift */; };
 		0206483A23FA4160008441BB /* OrdersRootViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0206483923FA4160008441BB /* OrdersRootViewController.swift */; };
 		0206E296299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0206E295299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift */; };
 		020732042988AB7B000A53C2 /* DomainContactInfoForm.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020732032988AB7B000A53C2 /* DomainContactInfoForm.swift */; };
@@ -3285,6 +3286,7 @@
 		0204F0C929C047A400CFC78F /* SelfSizingHostingController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelfSizingHostingController.swift; sourceTree = "<group>"; };
 		0205021D27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InboxEligibilityUseCase.swift; sourceTree = "<group>"; };
 		02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSCornerRadiusStyle.swift; sourceTree = "<group>"; };
+		020564972D5DC96600E51059 /* POSShadowStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSShadowStyle.swift; sourceTree = "<group>"; };
 		0206483923FA4160008441BB /* OrdersRootViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrdersRootViewController.swift; sourceTree = "<group>"; };
 		0206E295299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "WooAnalyticsEvent+DomainSettings.swift"; sourceTree = "<group>"; };
 		020732032988AB7B000A53C2 /* DomainContactInfoForm.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DomainContactInfoForm.swift; sourceTree = "<group>"; };
@@ -7159,6 +7161,7 @@
 				01FB19572C6E901800A44FF0 /* DynamicHStack.swift */,
 				68625DE52D4134D50042B231 /* DynamicVStack.swift */,
 				02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */,
+				020564972D5DC96600E51059 /* POSShadowStyle.swift */,
 			);
 			path = Utils;
 			sourceTree = "<group>";
@@ -16994,6 +16997,7 @@
 				26C98F9829C1247000F96503 /* WPComSitePlan+FreeTrial.swift in Sources */,
 				3120491726DD807900A4EC4F /* LabelAndButtonTableViewCell.swift in Sources */,
 				024DF31423742B7A006658FE /* AztecUnderlineFormatBarCommand.swift in Sources */,
+				020564982D5DC96600E51059 /* POSShadowStyle.swift in Sources */,
 				CE32B10D20BEDE1C006FBCF4 /* TwoColumnSectionHeaderView.swift in Sources */,
 				AE7C957D27C3F187007E8E12 /* FeeOrDiscountLineDetailsViewModel.swift in Sources */,
 				4520A15C2721B2A9001FA573 /* FilterOrderListViewModel.swift in Sources */,