added high level description to components.

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-08-29 11:50:29 -05:00
parent 3219788569
commit affdf8176f
22 changed files with 52 additions and 11 deletions

View File

@ -27,6 +27,7 @@ public protocol SelectorControlable: Control, Changeable {
var selectorColorConfiguration: ControlColorConfiguration { get set } var selectorColorConfiguration: ControlColorConfiguration { get set }
} }
/// Base Class used to build out a Selector control.
open class SelectorBase: Control, SelectorControlable { open class SelectorBase: Control, SelectorControlable {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Initializers // MARK: - Initializers

View File

@ -11,7 +11,7 @@ import Combine
import VDSColorTokens import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
/// Generic Control used to build out a SelectorControlable control. /// Base Class used to build out a SelectorControlable control.
open class SelectorItemBase<Selector: SelectorControlable>: Control, Errorable, Changeable, FormFieldable { open class SelectorItemBase<Selector: SelectorControlable>: Control, Errorable, Changeable, FormFieldable {
//-------------------------------------------------- //--------------------------------------------------

View File

@ -9,6 +9,9 @@ import Foundation
import UIKit import UIKit
import VDSColorTokens import VDSColorTokens
/// A button icon is an interactive element that visually communicates the action it triggers via an icon.
/// It usually represents a supplementary or utilitarian action. A button icon can stand alone, but often
/// exists in a group when there are several actions that can be performed.
@objc(VDSButtonIcon) @objc(VDSButtonIcon)
open class ButtonIcon: Control { open class ButtonIcon: Control {

View File

@ -10,6 +10,9 @@ import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/// An icon is a graphical element that conveys information at a glance. It helps orient
/// a customer, explain functionality and draw attention to interactive elements. Icons
/// should have a functional purpose and should never be used for decoration.
@objc(VDSIcon) @objc(VDSIcon)
open class Icon: View { open class Icon: View {

View File

@ -10,6 +10,8 @@ import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/// Label is a standard view used to draw text with applying Typography through ``TextStyle`` as well
/// as other attributes using any implemetation of ``LabelAttributeModel``.
@objc(VDSLabel) @objc(VDSLabel)
open class Label: UILabel, ViewProtocol, UserInfoable { open class Label: UILabel, ViewProtocol, UserInfoable {

View File

@ -9,6 +9,7 @@ import Foundation
import UIKit import UIKit
import VDSColorTokens import VDSColorTokens
/// A line visually separates content sections or elements in lists, tables and layouts to indicate content hierarchy.
@objc(VDSLine) @objc(VDSLine)
open class Line: View { open class Line: View {

View File

@ -10,8 +10,8 @@ import UIKit
import VDSColorTokens import VDSColorTokens
@objc(VDSLoader)
/// A loader is an indicator that uses animation to show customers that there is an indefinite amount of wait time while a task is ongoing, e.g. a page is loading, a form is being submitted. The component disappears when the task is complete. /// A loader is an indicator that uses animation to show customers that there is an indefinite amount of wait time while a task is ongoing, e.g. a page is loading, a form is being submitted. The component disappears when the task is complete.
@objc(VDSLoader)
open class Loader: View { open class Loader: View {
//-------------------------------------------------- //--------------------------------------------------

View File

@ -10,8 +10,11 @@ import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/// Notifications are prominent, attention-getting banners that provide information
/// in context. There are four types: information, success, warning and error; each
/// with different color and content. They may be screen-specific, flow-specific or
/// experience-wide.
@objc(VDSNotification) @objc(VDSNotification)
/// A VDS Component that will render a view with information
open class Notification: View { open class Notification: View {
//-------------------------------------------------- //--------------------------------------------------

View File

@ -8,6 +8,9 @@
import Foundation import Foundation
import UIKit import UIKit
/// Radio boxes are single-select components through which a customer indicates a choice.
/// They're stylized ``RadioButtons`` that must always be paired with one or more ``RadioBoxItem``
/// in a radio box group. Use radio boxes to display choices like device storage.
@objc(VDSRadioBoxGroup) @objc(VDSRadioBoxGroup)
open class RadioBoxGroup: SelectorGroupBase<RadioBoxItem>, SelectorGroupSingleSelect { open class RadioBoxGroup: SelectorGroupBase<RadioBoxItem>, SelectorGroupSingleSelect {

View File

@ -11,6 +11,8 @@ import Combine
import VDSColorTokens import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
/// Radio boxes are single-select components through which a customer indicates a choice
/// that are used within a ``RadioBoxGroup``.
@objc(VDSRadioBoxItem) @objc(VDSRadioBoxItem)
open class RadioBoxItem: Control, Changeable, FormFieldable { open class RadioBoxItem: Control, Changeable, FormFieldable {

View File

@ -11,6 +11,9 @@ import Combine
import VDSColorTokens import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
/// Radio buttons are single-select components through which a customer indicates a choice.
/// They must always be paired with one or more ``RadioButtonItem`` within a ``RadioButtonGroup``.
/// Use radio buttons to display choices like delivery method.
@objc(VDSRadioButton) @objc(VDSRadioButton)
open class RadioButton: SelectorBase { open class RadioButton: SelectorBase {

View File

@ -8,6 +8,9 @@
import Foundation import Foundation
import UIKit import UIKit
/// Radio buttons items are single-select components through which a customer indicates a choice.
/// They must always be paired with one or more other ``RadioButtonItem`` within a radio button group.
/// Use radio buttons to display choices like delivery method.
@objc(VDSRadioButtonGroup) @objc(VDSRadioButtonGroup)
open class RadioButtonGroup: SelectorGroupBase<RadioButtonItem>, SelectorGroupSingleSelect { open class RadioButtonGroup: SelectorGroupBase<RadioButtonItem>, SelectorGroupSingleSelect {

View File

@ -8,6 +8,9 @@
import Foundation import Foundation
import UIKit import UIKit
/// Radio buttons items are single-select components through which a customer indicates a choice.
/// They must always be paired with one or more other radio button items within a ``RadioButtonGroup``.
/// Use radio buttons to display choices like delivery method.
@objc(VDSRadioButtonItem) @objc(VDSRadioButtonItem)
open class RadioButtonItem: SelectorItemBase<RadioButton> { open class RadioButtonItem: SelectorItemBase<RadioButton> {

View File

@ -11,6 +11,7 @@ import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
import Combine import Combine
/// Base Class used to build out a Input controls.
@objc(VDSEntryField) @objc(VDSEntryField)
open class EntryFieldBase: Control, Changeable { open class EntryFieldBase: Control, Changeable {

View File

@ -11,6 +11,9 @@ import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
import Combine import Combine
/// An input field is an input wherein a customer enters information. They typically appear in forms.
/// Specialized input fields capture credit card numbers, inline actions, passwords, phone numbers,
/// dates and security codes in their correct formats.
@objc(VDSInputField) @objc(VDSInputField)
open class InputField: EntryFieldBase, UITextFieldDelegate { open class InputField: EntryFieldBase, UITextFieldDelegate {

View File

@ -12,6 +12,8 @@ import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
import Combine import Combine
/// A text area is an input wherein a customer enters long-form information.
/// Use a text area when you want customers to enter text thats longer than a single line.
@objc(VDSTextArea) @objc(VDSTextArea)
open class TextArea: EntryFieldBase { open class TextArea: EntryFieldBase {
//-------------------------------------------------- //--------------------------------------------------

View File

@ -11,6 +11,10 @@ import VDSColorTokens
import UIKit import UIKit
import Combine import Combine
/// Tilelet can be configured with a background image and limited text to
/// support quick scanning and engagement. A Tilelet is fully clickable and
/// while it can include an arrow CTA, it does not require one in order to
/// function.
@objc(VDSTilelet) @objc(VDSTilelet)
open class Tilelet: TileContainer { open class Tilelet: TileContainer {

View File

@ -10,6 +10,8 @@ import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/// Title Lockup ensures the readability of words on the screen
/// with approved built in text size configurations.
@objc(VDSTitleLockup) @objc(VDSTitleLockup)
open class TitleLockup: View { open class TitleLockup: View {

View File

@ -10,6 +10,8 @@ import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/// A toggle is a control that lets customers instantly turn on
/// or turn off a single option, setting or function.
@objc(VDSToggle) @objc(VDSToggle)
open class Toggle: Control, Changeable { open class Toggle: Control, Changeable {

View File

@ -9,14 +9,9 @@ import Foundation
import UIKit import UIKit
import VDSColorTokens import VDSColorTokens
import Combine import Combine
/**
A custom implementation of Apple's UISwitch. /// A toggle is a control that lets customers instantly turn on
/// or turn off a single option, setting or function.
By default this class begins in the off state.
Container: The background of the toggle control.
Knob: The circular indicator that slides on the container.
*/
@objc(VDSToggleView) @objc(VDSToggleView)
open class ToggleView: Control, Changeable { open class ToggleView: Control, Changeable {

View File

@ -11,6 +11,9 @@ import VDSColorTokens
import VDSFormControlsTokens import VDSFormControlsTokens
import Combine import Combine
/// A tooltip is an overlay that clarifies another component or content
/// element. It is triggered when a customer hovers, clicks or taps
/// the tooltip icon.
@objc(VDSTooltip) @objc(VDSTooltip)
open class Tooltip: Control, TooltipLaunchable { open class Tooltip: Control, TooltipLaunchable {

View File

@ -9,6 +9,8 @@ import Foundation
import UIKit import UIKit
import Combine import Combine
/// A trailing tooltip is view that contains a label that has a tooltip overlay
/// applied at the last character of the text.
@objc(VDSTrailingTooltipLabel) @objc(VDSTrailingTooltipLabel)
open class TrailingTooltipLabel: View, TooltipLaunchable { open class TrailingTooltipLabel: View, TooltipLaunchable {