MoreItems

import SwiftUI
import EandTokens

// more-items: the "+N" circle that closes a logo row, sized to the logos beside it
// (default 24). default = midnight glass 60%; inverse = white glass 15%. "+" and the count
// are separate body/xs (10pt) cells in inverse ink, so RTL reads "N+".
struct MoreItems: View {
  let count: Int
  var size: CGFloat = EandIcon.xl
  var inverse = false
  var body: some View {
    HStack(spacing: 0) { Text("+"); Text("\(count)") }
      .font(.system(size: EandTypography.bodyXs.size))
      .foregroundColor(EandColor.textDefaultInverse)
      .frame(width: size, height: size)
      .background(inverse ? EandColor.surfaceGlassWhiteMd : EandColor.surfaceGlassMidnightLg)
      .clipShape(Circle())
  }
}

When to use

• Use at the end of a row of logos to say how many are not shown. LogoRow adds one for you with more={n}, sized to its logos; use MoreItems directly only when you compose a row yourself.
• Don't use for notification or unread counts; that is Badge.

Surfaces and size

• surface="default" is midnight glass, for light backgrounds. surface="inverse" is white glass, for dark backgrounds and imagery; on a light surface it is close to invisible.
• Every published logo-row uses inverse, so LogoRow defaults moreSurface to it. Whether logo rows on light surfaces should switch to default is an open design question.
• Set size to the diameter of the logos beside it (24–56px). The default is 24px (icon/xl).
• In RTL the circle reads "N+", as the published more-items-rtl does.

Props

Design

Figma source: more-items — etisalat Consumer App DSL V1.2 · more-items-rtl

• A clipped circle at border-radius/9.
• Fill: surface/glass/midnight/lg (default) or surface/glass/white/md (inverse).
• "+" and the count are two text cells in typography/body/xs (10px Regular), text/default/inverse, centred. Flex order reverses them under dir="rtl".