Classes

NatAlert is a class that represents the alert component from the design system. An alert displays a short, important message in a way that attracts the user’s attention without interrupting the user’s task

Example of usage:

   natAlert.configure(titleText: "Title example")
   natAlert.configure(color: .systemRed)
   natAlert.configure(descriptionText: "Description of your alert")
   natAlert.configure(primaryButtonTitle: "Primary Button Title")
   natAlert.configure(secondaryButtonTitle: "Secondary Button Title")
   natAlert.configure(showIcon: false)
   natAlert.configure(getIcon(icon: .outlinedAlertNotification))

IconView is a class that helps the usage of icons with the Design System, as an UIView that displays an icon. The icons are not available with NatDS; it’s necessary to use the icon library NatDSIcons.

Example of usage:

   let iconView = IconView()

NatAvatar is a class that represents a component from the Design System. The avatar colors change according to the current brand configured in the Design System.

It has 3 styles:

• Icon
• Label
• Image

And 5 sizes:

• standard
• semi
• semiX
• medium
• largeXXX

The default size is standard and the default type is Icon. The component’s size is not changeable. It’s type can change according to the configuration methods called after its initialization.

Example of usage:

// using default configuration:
let avatar = NatAvatar()
// or:
let avatar = NatAvatar(size: .medium, style: .image)

This component is available in the following variants:

• ✅ Standard
• ✅ Dot
• ✅ Pulse

With the following attributes:

• Color:
  • ✅ Alert
  • ✅ Primary
  • ✅ Secondary
  • ✅ Success
• Limit:
  • ✅ max9
  • ✅ max99
  • ✅ unlimited

NatBadge is a class that represents a component from the Design System.

The badge colors change according to the current brand configured in the Design System. They also change according to the user’s properties of Light and Dark mode.

NatBadge has three variants: standard, dot and pulse. It can be configured with colors alert, primary, secondary and success.

Example of usage:

   let badge = NatBadge(style: .standard, color: .alert)
   badge.configure(limit: .unlimited)

SearchBar is a class that represents a component from the design system.

The SearchBar is used in the AppBar and Its colors changes according with the current Brand configured.

       Example of usage:
       - navigationItem.titleView = appSearchBar

It’s possíble to set some placeholder:

       Example of usage:
       - let appSearchBar = SearchBar()
       - appSearchBar.placeholder = "Type some text"

   DesignSystem().configure(with: AvailableTheme)

• ✅ Contained
• ✅ Outlined
• ✅ Text

With the following attribute status:

• ✅ Disabled
• ✅ Display (available in a different way)
• Size:
  • ✅ Semi (small)
  • ✅ SemiX (medium)
  • ✅ Medium (large)
• Icon:
  • ✅ Left
  • ✅ Right
• Interaction state:
  • ✅ Enabled
  • ✅ Focus
  • ✅ Press
  • ❌ Hover (not applicable)

NatButton is a class that represents button component from the design system. The button colors changes according with the current theme configured in the Design system.

This button has 3 styles:

• Contained
• Outlined
• Text

Example of usage:

   let containedButton = NatButton(style: .contained)
   let outlinedButton = NatButton(style: .outlined)
   let textButton = NatButton(style: .text)

This button has predefined height values with enum NatButton.Height:

   button.heightAnchor.constraint(equalToConstant: NatButton.Height.medium)

NatCard is a class that represents the Card component from the design system. It’s necessary to instantiate it and set its height and width constraints.

Example of usage:

card.configure(elevation: true)
card.configure(borderRadius: true)

NatChip is a class that represents the Chip component from the design system.

Example of usage:

let chip = NatChip(size: .semi, color: .neutral)
chip.configure(text: "NatChip example text")
chip.configure(icon: getIcon(.outlinedDefaultMockup), position: .left)
chip.configure(avatar: natAvatar, position: .right)
chip.configure(state: .normal)
chip.configure(actionHandler: { isSelect in
   //do something
})

NatChipFilter is a class that represents the ChipFilter component from the design system.

Example of usage:

let chipFilter = NatChipFilter(size: .semi, color: .neutral)
chipFilter.configure(text: "NatChipFilter example text")
chipFilter.configure(icon: getIcon(.outlinedDefaultMockup), position: .left)
chipFilter.configure(avatar: natAvatar, position: .right)
chipFilter.configure(state: .normal)
chipFilter.configure(actionHandler: { isSelect in
   //do something
})

• ✅ Standard

With the following attribute status:

• ✅ Label
• Disabled:
  • ✅ Subtract
  • ✅ Add
  • ✅ Both
• Size:
  • ✅ Semi
  • ✅ Medium
• Interaction state:
  • ✅ Enabled
  • ✅ Press

NatCounter is a class that represents the counter component from the design system.

It can be configured with the sizes:

• Semi (default)
• Medium

Example of usage:

       let counter = NatCounter()
       let counter = NatCounter(size: .medium)

• ✅ Standard
• ✅ Alert

With the following attributes:

• ✅ Divider
• ✅ Size/width
• ✅ Size/height
• ❌ Scroll
• ❌ Header’s icon buttons

NatDialogController is a class that represents a component from the design system. Its colors change according to the current brand theme.

To create and configure the dialog it’s necessary to use Dialog Builders, which are available as class properties.

Available styles for the dialog:

• Standard
• Alert

Configurable elements for the dialog:

• Title
• Body (Text or custom view)
• Primary button (must be configured before other buttons)
• Secondary button
• Divider

Example of usage:

         let dialog = NatDialogController
         .standardStyleBuilder
         .configure(title: "Title")
         .configure(body: "Body")
         .configure(divider: true)
         .configure(primaryTitle: "Title", primaryAction: { print("Some text") })
         .build()

    DesignSystem().configure(with: AvailableTheme)

Divider is a class that represents Divider component from the design system. It has a predetermined height and it’s necessary to configure its width using constraints.

The Divider componet has 3 styles:

• full-bleed
• middle
• inset

Example of usage:

     divider.configure(style: .full-bleed)
     divider.configure(style: .middle)
     divider.configure(style: .inset)

DesignSystem().configure(with: AvailableTheme)

Undocumented

Undocumented

• ✅ Standard

With the following attribute status:

• ✅ Disabled
• ✅ Read-only
• ✅ Helper text
• Size:
  • ✅ MediumX
  • ✅ Medium
• Style:
  • ✅ Outlined
• Interaction state:
  • ✅ Enabled
  • ✅ Active (focus)
  • ✅ Filled
• Feedback state:
  • ✅ Error
  • ✅ Success
• Action:
  • ✅ None
  • ✅ Icon button
  • ✅ Image
• Type:
  • ✅ Text
  • ✅ Password
  • ✅ Number
  • ❌ Multiline

TextField is a class that represents a component from the design system.

It can be configured with 2 different sizes:

• MediumX (default)
• Medium

Example of usage:

       let textField = TextField()
       textfield.configure(size: .medium)

The textField styles, keyboards, capitalization and autocorrection properties changes according to the chosen type.

This TextField has 4 types:

• Text (default type)
• Name
• Number
• Password

Example of usage:

   textField.configure(type: .text)
   textField.configure(type: .password(keyboardType: .numberPad)

The TextField has 3 states for feedback, that can be configured with a message:

• Error
• Success
• None (clear error/success states)

Example of usage:

   textField.configure(state: .error, with: "Error")
   // to clear the state:
   textField.configure(state: .none)

It also can be configured as a required field, ‘read-only’ field or disabled textField. Each interaction state has its pre-defined style:

   textField.configure(isEnabled: false)
   textField.configure(readOnly: true)
   textField.configure(required: true)

The TextField also has an action item on the right, which can be configured with an icon from NatDSIcons, a local image or a remote image:

   textField.configure(icon: getIcon(.outlinedDefaultMockup)) { action }
   textField.configure(image: UIImage(named: "imageName")) { action }
   textField.configure(remoteImageURL: URL(string: "urlForImage")) { action }

There are properties that changes the textfield styles as well.

Properties:

• title: Label text always displayed above textfield
• placeholder: Hint text to display when the text is empty
• helper: Hint text always displayed below textfield
• error: Text that alerts about an error

To manage the TextField, use UITextFieldDelegate protocol as usual.

   textField.delegate = yourDelegate

• ✅ Standard

With the following attribute status:

• Size:
  • ✅ Semi
  • ✅ SemiX
  • ✅ Medium
• Icon color:
  • ✅ HighEmphasis
  • ✅ Primary
  • ✅ Light
• Background style:
  • ✅ Inherit
  • ✅ Float
  • ✅ Overlay
• ✅ Disabled
• ✅ Onclick
• ✅ Icon
• Interaction state:
  • ✅ Enabled
  • ✅ Press

NatIconButton is a class that represent the icon button component from the design system. The button colors change according to the current theme configured.

The icon button has two styles, which change the icon color:

• standardDefault (icon has highEmphasis color)
• standardPrimary (icon has primary color)
• standardLight (icon has surface color)

The icon button can have three different sizes (with size semi as default):

• semi
• semiX
• medium > Note: the size can only be changed at init()

Example of usage:

   // An icon with default color and size
   let defaultIconButton = NatIconButton(style: .standardDefault)

   // An icon button with primary color and medium size
   let primaryIconButton = NatIconButton(style: .standardPrimary, size: .medium)

   DesignSystem().configure(with: AvailableTheme)

• ✅ Standard
• ✅ Highlight

With the following attribute status:

• Radius:
  • ✅ None
  • ✅ Medium
  • ✅ Circle
• Fade:
  • ✅ Top
  • ✅ Bottom
  • ✅ Left
  • ✅ Right
• ✅ Fallback

NatImage is a class that represents the image component from the design system.

It can be configured with the variants:

• Standard (default)
• Highlight

Example of usage:

       let image = NatImage()
       image.configureFade(.top)
       image.configure(setImage: YourUIImage())
       image.configureRadius(.medium)

NatListItemCell is a class that representes the component List Item from Natura Design System. It inherits from UITableViewCell, being used inside UITableViews.

It has the basic behavior for table cells according to the Design System: - a predefined selected color overlay - a ripple effect on touch - and a bottom divider

NatListItemCell should be used as a base for your custom cell:

    class CustomCell: NatListItemCell {
       // your code for custom cell

        override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
           super.init(style: style, reuseIdentifier: reuseIdentifier)
           // your code for initializing custom cell
           commonInit()
        }
    }

1. Create your custom cell with custom views
2. Override the function init(style:, reuseIdentifier:)
3. Call commonInit() inside the override

Otherwise, the cell will not have the expected behavior for a NatListItemCell.

   DesignSystem().configure(with: AvailableTheme)

• ✅ Base

With the following attribute status:

• Model:
  • ✅ A
  • ✅ B
• Color:
  • ✅ Neutral
  • ✅ Primary
  • ✅ Secondary
  • ✅ Highlight
  • ✅ Surface
• Size:
  • ✅ Medium to Veryhuge

NatLogo represents Design System’s logo component. The logo image changes according to the configured theme and it has different model, color and size options. The default model is A; the default size is veryHuge; and the default color is neutral.

Example of usage:

   let logo = NatLogo(size: .medium)
   logo.configure(color: .primary)
   logo.configure(model: .modelB)

   DesignSystem().configure(with: AvailableTheme)

NavigationDrawer is a class that represents a component from the design system.

The NavigationDrawerSubitem has 3 states:

• normal
• disabled
• selected

An Item has important properties to configure:

• label
• icon
• disabled
• tagText
• subitems

Use the methods of NavigationDrawerDelegate protocol to manage the following features:

• numberOfItems
• numberOfSubitems
• didSelectItem
• didSelectSubitem
• configureItem

• configureSubitem

DesignSystem().configure(with: AvailableTheme)

Undocumented

Undocumented

NatProgressIndicatorCircular is a class that represents progress indicator circular component from the Design System. The component colors changes according to the current theme configured in the Design System.

The size and background can be set at init(). The component is already animating when it appears on the screen.

The component has 2 actions:

• startAnimation(), which shows the animated progress indicator
• stopAnimation(), which hides the progress indicator

Example of usage:

       let progressIndicator = NatProgressIndicator(size: .semi, backgroundLayer: true)

• ✅ Counter
• ✅ Input
• ✅ Read-only

With the following attribute status:

• Hint ✅
• Size:
  • ✅ Small
  • ✅ Standard
  • ✅ Semi
  • ✅ SemiX
  • ✅ Medium
• Alignment:
  • ✅ Right
  • ✅ Left
• ✅ Disabled
• ✅ Rate
• Interaction state:
  • ✅ Enabled
  • ✅ Press

NatRating is a class that represent the rating component from the design system. The colors are default and doesn’t change according to the current theme configured.

The component has three different variants, represented by the enum Style:

• Input
• Counter
• Read-only

There are five different sizes for the rating stars:

• Small
• Standard
• Semi
• SemiX (default)
• Medium

Example of usage:

   let rating = NatRating(style: .input, size: .medium)
   rating.configure(text: "Placeholder")

   let rating = NatRating(style: .counter, alignment: .right)
   rating.configure(text: "Placeholder")

   let rating = NatRating(style: .readOnly)
   rating.configure(rate: 3)

   DesignSystem().configure(with: AvailableTheme)

NatSelect is a class that represents the select component from the design system.

Example of usage:

   let select = NatSelect(textField: textField)
   select.configure(data: ["Item 1", "Item 2"])
   select.configure(data: [0: ["Item 1", "Item 2"], 1: ["Item 3", "Item 4"]])

   select.configure(format: "First: %@, Second: %@")

NatCheckbox is a class that represents the Checkbox component from the design system.

Example of usage:

   checkbox.configure(isSelected: true)
   checkbox.configure(isEnabled: true)
   checkbox.configure(text: "Example with label")
   checkbox.configure(isIndeterminate: true)

NatRadioButton is a class that represents the RadioButton component from the design system.

Example of usage:

radioButton.configure(isSelected: true) radioButton.configure(isEnabled: true) radioButton.configure(text: “Example with label”) radioButton.configure(addToGroup: natRadioButtonGroup)

DesignSystem().configure(with: AvailableTheme)

NatRadioButtonGroup is a class to manage a group of RadioButton components from the design system.

Example of usage:

radioButtonGroup.configure(radioButtons: [radioButton1, radioButton2, …])

radioButtonGroup.configure(selectionHandler: { selectedRadioButton in // Code })

NatSelectionControl is a class that represents Design System’s selection control component. The component colors changes according to the current theme configured in the Design System.

The component has 2 styles:

• checkbox
• radio

Example of usage:

   NatSelectionControl(style: .radioButton)

And it can be configured with a label:

   NatSelectionControl(style: .checkbox, text: "The text for the label")

• ✅ Contained (default)
• ✅ Outlined

With the following attribute status:

• ✅ Disabled
• ✅ Interaction State Pressed
• Color:
  • ✅ Primary (default)
  • ✅ Neutral
• Notify:
  • ✅ None (default)
  • ✅ Standard
• Interaction state:
  • ✅ Enabled
  • ✅ Pressed

NatShortcut is a class that represents the component shortcut from the design system. Its colors change according to the configured theme.

The component has the following variants:

• Contained (default)
• Outlined

And the colors:

• Primary (default)
• Neutral

And the states:

• Enabled
• Disabled

Example of usage:

   let containedPrimary = NatShortcut(style: .containedPrimary)

Undocumented

Undocumented

NatSwitch is a class that represents the switch component from the design system. The switch colors changes according with the current theme configured in the Design System.

Example of usage:

   natSwitch.configure(state: .normal)
   natSwitch.configure(state: .focused)
   natSwitch.configure(state: .disabled)

   natSwitch.configure(isOn: true)
   natSwitch.configure(isOn: false)

   natSwitch.configure(isOnHandler:  { isOn in
       // Code
   })

Undocumented

• ✅ Standard

With the following attribute status:

• Position:
  • ✅ Center
  • ✅ Left
  • ✅ Right
• Color:
  • ✅ Primary
  • ✅ Secondary
  • ✅ Success
  • ✅ Alert
  • ✅ Warning
  • ✅ Link
• Size:
  • ✅ Small
  • ✅ Standard

NatTag is a class that represents the tag component from the design system. The tag colors change according to the current theme configured.

These all the available styles for a NatTag:

• defaultAlert
• leftAlert
• rightAlert

Example of usage:

   let tag = NatTag(style: .defaultAlert)

Undocumented

Undocumented