LogoRow

import SwiftUI
import EandTokens

// logo-row: circle-clipped logos sm 24 / md 32 / lg 40 with gaps 4 / 4 / 8, no wrap, and
// an optional +N MoreItems at the logo size. glass sets each logo in a 40 / 48 / 56 tile
// (padding 8) on white 20% + blur, with a 0.5pt ring on the logo.
struct LogoRow: View {
  let logos: [Image]
  var size: CGFloat = EandIcon.icon2xl      // md
  var more: Int? = nil
  var body: some View {
    HStack(spacing: EandSpacing.xs) {
      ForEach(Array(logos.enumerated()), id: \.offset) { _, logo in
        logo.resizable().scaledToFill()
          .frame(width: size, height: size)
          .clipShape(Circle())
      }
      if let more { MoreItems(count: more, size: size, inverse: true) }
    }
  }
}

When to use

• Use to show the partner brands or benefits that come with a plan, card or highlight: up to five logos, then more for the rest.
• Use glass when the row sits on imagery or on a brand-red or midnight surface.
• Don't use for the etisalat brand mark — that is Logo. Not for avatars, and not for a set of tappable services (use QuickAction or ServiceCard).

Choosing a size

md is the default because it is the size the row rendered before V1.2; Figma's default is sm. Pass logos as elements sized to fill their circle, or as image URLs. The brand artwork is not part of the package.

Props

The “+N” circle at the end of the row is MoreItems; LogoRow sizes it to match the logos. Every published logo row uses the inverse counter (white glass), which is built for dark surfaces; moreSurface switches it.

Design

Figma source: logo-row — etisalat Consumer App DSL V1.2

• Logos are clipped to circles (border-radius/9). The row never wraps.
• Glass tiles: surface/glass/white/lg with a backdrop blur from effects/glass/md/frost (20px) and spacing/sm padding. Each logo carries a 0.5px (border/xs) inside ring in border/surface-based/glass/default/sm.
• In RTL the row mirrors and the counter reads “4+”, as more-items-rtl does.