From 696f62cfabcaa09a3f6cb9480b7c8b18ab1d39fd Mon Sep 17 00:00:00 2001
From: Josh Thomas <jthoms1@gmail.com>
Date: Thu, 20 Dec 2018 09:29:03 -0600
Subject: [PATCH] feat(react): add missing simple components to react. (#16836)

---
 react/README.md               | 56 ++++++++++----------
 react/src/components/index.ts | 98 ++++++++++++++++++++++-------------
 2 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/react/README.md b/react/README.md
index e9e3b36109..fbb088d6f0 100644
--- a/react/README.md
+++ b/react/README.md
@@ -17,34 +17,34 @@ Below is a list of components and their current status.  Please know that these
 | ------------------ |:------------------:|:-------------:|
 | `ion-action-sheet` | :white_check_mark:  | :black_square_button: |
 | `ion-alert` | :white_check_mark: | :black_square_button: |
-| `ion-anchor` | :black_square_button: | :black_square_button: |
+| `ion-anchor` | :white_check_mark: | :black_square_button: |
 | `ion-animation` | :black_square_button: | :black_square_button: |
 | `ion-app` | :white_check_mark: | :black_square_button: |
 | `ion-avatar` | :white_check_mark: | :black_square_button: |
 | `ion-back-button` | :black_square_button: | :black_square_button: |
-| `ion-backdrop` | :black_square_button: | :black_square_button: |
-| `ion-badge` | :black_square_button: | :black_square_button: |
+| `ion-backdrop` | :white_check_mark: | :black_square_button: |
+| `ion-badge` | :white_check_mark: | :black_square_button: |
 | `ion-button` | :white_check_mark: | :black_square_button: |
 | `ion-buttons` | :white_check_mark: | :black_square_button: |
 | `ion-card` | :white_check_mark: | :black_square_button: |
 | `ion-card-content` | :white_check_mark: | :black_square_button: |
 | `ion-card-header` | :white_check_mark: | :black_square_button: |
-| `ion-card-subtitle` | :black_square_button: | :black_square_button: |
-| `ion-card-title` | :black_square_button: | :black_square_button: |
-| `ion-checkbox` | :black_square_button: | :black_square_button: |
-| `ion-chip` | :black_square_button: | :black_square_button: |
+| `ion-card-subtitle` | :white_check_mark: | :black_square_button: |
+| `ion-card-title` | :white_check_mark: | :black_square_button: |
+| `ion-checkbox` | :white_check_mark: | :black_square_button: |
+| `ion-chip` | :white_check_mark: | :black_square_button: |
 | `ion-col` | :white_check_mark: | :black_square_button: |
 | `ion-content` | :white_check_mark: | :black_square_button: |
-| `ion-datetime` | :black_square_button: | :black_square_button: |
+| `ion-datetime` | :white_check_mark: | :black_square_button: |
 | `ion-fab` | :white_check_mark: | :black_square_button: |
 | `ion-fab-button` | :white_check_mark: | :black_square_button: |
 | `ion-fab-list` | :white_check_mark: | :black_square_button: |
-| `ion-footer` | :black_square_button: | :black_square_button: |
+| `ion-footer` | :white_check_mark: | :black_square_button: |
 | `ion-grid` | :white_check_mark: | :black_square_button: |
 | `ion-header` | :white_check_mark: | :black_square_button: |
 | `ion-icon` | :white_check_mark: | :black_square_button: |
-| `ion-img` | :black_square_button: | :black_square_button: |
-| `ion-infinite-scroll` | :black_square_button: | :black_square_button: |
+| `ion-img` | :white_check_mark: | :black_square_button: |
+| `ion-infinite-scroll` | :white_check_mark: | :black_square_button: |
 | `ion-input` | :white_check_mark: | :black_square_button: |
 | `ion-item` | :white_check_mark: | :black_square_button: |
 | `ion-item-divider` | :white_check_mark: | :black_square_button: |
@@ -60,23 +60,23 @@ Below is a list of components and their current status.  Please know that these
 | `ion-menu-button` | :white_check_mark: | :black_square_button: |
 | `ion-menu-toggle` | :white_check_mark: | :black_square_button: |
 | `ion-modal` | :white_check_mark: | :black_square_button: |
-| `ion-nav` | :black_square_button: | :black_square_button: |
+| `ion-nav` | :white_check_mark: | :black_square_button: |
 | `ion-nav-pop` | :black_square_button: | :black_square_button: |
 | `ion-nav-push` | :black_square_button: | :black_square_button: |
 | `ion-nav-set-root` | :black_square_button: | :black_square_button: |
-| `ion-note` | :black_square_button: | :black_square_button: |
-| `ion-picker` | :black_square_button: | :black_square_button: |
-| `ion-picker-column` | :black_square_button: | :black_square_button: |
+| `ion-note` | :white_check_mark: | :black_square_button: |
+| `ion-picker` | :white_check_mark: | :black_square_button: |
+| `ion-picker-column` | :white_check_mark: | :black_square_button: |
 | `ion-popover` | :white_check_mark: | :black_square_button: |
-| `ion-progress-bar` | :black_square_button: | :black_square_button: |
-| `ion-radio` | :black_square_button: | :black_square_button: |
-| `ion-radio-group` | :black_square_button: | :black_square_button: |
-| `ion-range` | :black_square_button: | :black_square_button: |
+| `ion-progress-bar` | :white_check_mark: | :black_square_button: |
+| `ion-radio` | :white_check_mark: | :black_square_button: |
+| `ion-radio-group` | :white_check_mark: | :black_square_button: |
+| `ion-range` | :white_check_mark: | :black_square_button: |
 | `ion-refresher` | :white_check_mark: | :black_square_button: |
 | `ion-refresher-content` | :white_check_mark: | :black_square_button: |
-| `ion-reorder` | :black_square_button: | :black_square_button: |
-| `ion-reorder-group` | :black_square_button: | :black_square_button: |
-| `ion-ripple-effect` | :black_square_button: | :black_square_button: |
+| `ion-reorder` | :white_check_mark: | :black_square_button: |
+| `ion-reorder-group` | :white_check_mark: | :black_square_button: |
+| `ion-ripple-effect` | :white_check_mark: | :black_square_button: |
 | `ion-router-outlet` | :black_square_button: | :black_square_button: |
 | `ion-row` | :white_check_mark: | :black_square_button: |
 | `ion-searchbar` | :white_check_mark: | :black_square_button: |
@@ -84,21 +84,21 @@ Below is a list of components and their current status.  Please know that these
 | `ion-segment-button` | :white_check_mark: | :black_square_button: |
 | `ion-select` | :white_check_mark: | :black_square_button: |
 | `ion-select-option` | :white_check_mark: | :black_square_button: |
-| `ion-select-popover` | :black_square_button: | :black_square_button: |
-| `ion-skeleton-text` | :black_square_button: | :black_square_button: |
+| `ion-select-popover` | :white_check_mark: | :black_square_button: |
+| `ion-skeleton-text` | :white_check_mark: | :black_square_button: |
 | `ion-slide` | :white_check_mark: | :black_square_button: |
 | `ion-slides` | :white_check_mark: | :black_square_button: |
-| `ion-spinner` | :black_square_button: | :black_square_button: |
+| `ion-spinner` | :white_check_mark: | :black_square_button: |
 | `ion-split-pane` | :white_check_mark: | :black_square_button: |
 | `ion-tab` | :white_check_mark: | :black_square_button: |
 | `ion-tab-bar` | :white_check_mark: | :black_square_button: |
 | `ion-tab-button` | :white_check_mark: | :black_square_button: |
 | `ion-tabs` | :white_check_mark: | :black_square_button: |
-| `ion-text` | :black_square_button: | :black_square_button: |
+| `ion-text` | :white_check_mark: | :black_square_button: |
 | `ion-textarea` | :white_check_mark: | :black_square_button: |
-| `ion-thumbnail` | :black_square_button: | :black_square_button: |
+| `ion-thumbnail` | :white_check_mark: | :black_square_button: |
 | `ion-title` | :white_check_mark: | :black_square_button: |
 | `ion-toast` | :white_check_mark: | :black_square_button: |
 | `ion-toggle` | :white_check_mark: | :black_square_button: |
 | `ion-toolbar` | :white_check_mark: | :black_square_button: |
-| `ion-virtual-scroll` | :black_square_button: | :black_square_button: |
+| `ion-virtual-scroll` | :white_check_mark: | :black_square_button: |
diff --git a/react/src/components/index.ts b/react/src/components/index.ts
index 18d0dae57d..311f1f983a 100644
--- a/react/src/components/index.ts
+++ b/react/src/components/index.ts
@@ -9,52 +9,78 @@ export { default as IonModal } from './IonModal';
 export { default as IonPopover } from './IonPopover';
 export { default as IonToast } from './IonToast';
 
-export const IonIcon = createReactComponent<IoniconsComponents.IonIconAttributes, HTMLIonIconElement>('ion-icon');
+export const IonAnchor = createReactComponent<Components.IonAnchorAttributes, HTMLIonAnchorElement>('ion-anchor');
 export const IonApp = createReactComponent<Components.IonAppAttributes, HTMLIonAppElement>('ion-app');
-export const IonMenu = createReactComponent<Components.IonMenuAttributes, HTMLIonMenuElement>('ion-menu');
-export const IonHeader = createReactComponent<Components.IonHeaderAttributes, HTMLIonHeaderElement>('ion-header');
-export const IonTitle = createReactComponent<Components.IonTitleAttributes, HTMLIonTitleElement>('ion-title');
-export const IonNav = createReactComponent<Components.IonNavAttributes, HTMLIonNavElement>('ion-nav');
-export const IonToolbar = createReactComponent<Components.IonToolbarAttributes, HTMLIonToolbarElement>('ion-toolbar');
-export const IonButtons = createReactComponent<Components.IonButtonsAttributes, HTMLIonButtonsElement>('ion-buttons');
-export const IonSelect = createReactComponent<Components.IonSelectAttributes, HTMLIonSelectElement>('ion-select');
-export const IonSelectOption = createReactComponent<Components.IonSelectOptionAttributes, HTMLIonSelectOptionElement>('ion-select-option');
+export const IonAvatar = createReactComponent<Components.IonAvatarAttributes, HTMLIonAvatarElement>('ion-avatar');
+export const IonBackdrop = createReactComponent<Components.IonBackdropAttributes, HTMLIonBackdropElement>('ion-backdrop');
+export const IonBadge = createReactComponent<Components.IonBadgeAttributes, HTMLIonBadgeElement>('ion-badge');
 export const IonButton = createReactComponent<Components.IonButtonAttributes, HTMLIonButtonElement>('ion-button');
+export const IonButtons = createReactComponent<Components.IonButtonsAttributes, HTMLIonButtonsElement>('ion-buttons');
+export const IonCard = createReactComponent<Components.IonCardAttributes, HTMLIonCardElement>('ion-card');
+export const IonCardContent = createReactComponent<Components.IonCardContentAttributes, HTMLIonCardContentElement>('ion-card-content');
+export const IonCardHeader = createReactComponent<Components.IonCardHeaderAttributes, HTMLIonCardHeaderElement>('ion-card-header');
+export const IonCardSubtitle = createReactComponent<Components.IonCardSubtitleAttributes, HTMLIonCardSubtitleElement>('ion-card-subtitle');
+export const IonCardTitle = createReactComponent<Components.IonCardTitleAttributes, HTMLIonCardTitleElement>('ion-card-title');
+export const IonCheckbox = createReactComponent<Components.IonCheckboxAttributes, HTMLIonCheckboxElement>('ion-checkbox');
+export const IonCol = createReactComponent<Components.IonColAttributes, HTMLIonColElement>('ion-col');
 export const IonContent = createReactComponent<Components.IonContentAttributes, HTMLIonContentElement>('ion-content');
-export const IonList = createReactComponent<Components.IonListAttributes, HTMLIonListElement>('ion-list');
-export const IonListHeader = createReactComponent<Components.IonListHeaderAttributes, HTMLIonListHeaderElement>('ion-list-header');
-export const IonItem = createReactComponent<Components.IonItemAttributes, HTMLIonItemElement>('ion-item');
-export const IonLabel = createReactComponent<Components.IonLabelAttributes, HTMLIonLabelElement>('ion-label');
+export const IonChip = createReactComponent<Components.IonChipAttributes, HTMLIonChipElement>('ion-chip');
 export const IonDatetime = createReactComponent<Components.IonDatetimeAttributes, HTMLIonDatetimeElement>('ion-datetime');
-export const IonMenuButton = createReactComponent<Components.IonMenuButtonAttributes, HTMLIonMenuButtonElement>('ion-menu-button');
-export const IonItemGroup = createReactComponent<Components.IonItemGroupAttributes, HTMLIonItemGroupElement>('ion-item-group');
+export const IonFab= createReactComponent<Components.IonFabAttributes, HTMLIonFabElement>('ion-fab');
+export const IonFabButton= createReactComponent<Components.IonFabButtonAttributes, HTMLIonFabButtonElement>('ion-fab-button');
+export const IonFabList = createReactComponent<Components.IonFabListAttributes, HTMLIonFabListElement>('ion-fab-list');
+export const IonFooter = createReactComponent<Components.IonFooterAttributes, HTMLIonFooterElement>('ion-footer');
+export const IonGrid = createReactComponent<Components.IonGridAttributes, HTMLIonGridElement>('ion-grid');
+export const IonHeader = createReactComponent<Components.IonHeaderAttributes, HTMLIonHeaderElement>('ion-header');
+export const IonIcon = createReactComponent<IoniconsComponents.IonIconAttributes, HTMLIonIconElement>('ion-icon');
+export const IonImg = createReactComponent<Components.IonImgAttributes, HTMLIonImgElement>('ion-img');
+export const IonInfiniteScroll = createReactComponent<Components.IonInfiniteScrollAttributes, HTMLIonInfiniteScrollElement>('ion-infinite-scroll');
+export const IonInput = createReactComponent<Components.IonInputAttributes, HTMLIonInputElement>('ion-input');
+export const IonItem = createReactComponent<Components.IonItemAttributes, HTMLIonItemElement>('ion-item');
 export const IonItemDivider = createReactComponent<Components.IonItemDividerAttributes, HTMLIonItemDividerElement>('ion-item-divider');
-export const IonItemSliding = createReactComponent<Components.IonItemSlidingAttributes, HTMLIonItemSlidingElement>('ion-item-sliding');
+export const IonItemGroup = createReactComponent<Components.IonItemGroupAttributes, HTMLIonItemGroupElement>('ion-item-group');
 export const IonItemOption = createReactComponent<Components.IonItemOptionAttributes, HTMLIonItemOptionElement>('ion-item-option');
 export const IonItemOptions = createReactComponent<Components.IonItemOptionsAttributes, HTMLIonItemOptionsElement>('ion-item-options');
-export const IonInput = createReactComponent<Components.IonInputAttributes, HTMLIonInputElement>('ion-input');
-export const IonGrid = createReactComponent<Components.IonGridAttributes, HTMLIonGridElement>('ion-grid');
-export const IonRow = createReactComponent<Components.IonRowAttributes, HTMLIonRowElement>('ion-row');
-export const IonCol = createReactComponent<Components.IonColAttributes, HTMLIonColElement>('ion-col');
-export const IonSegment= createReactComponent<Components.IonSegmentAttributes, HTMLIonSegmentElement>('ion-segment');
-export const IonSegmentButton= createReactComponent<Components.IonSegmentButtonAttributes, HTMLIonSegmentButtonElement>('ion-segment-button');
-export const IonSearchbar= createReactComponent<Components.IonSearchbarAttributes, HTMLIonSearchbarElement>('ion-searchbar');
+export const IonItemSliding = createReactComponent<Components.IonItemSlidingAttributes, HTMLIonItemSlidingElement>('ion-item-sliding');
+export const IonLabel = createReactComponent<Components.IonLabelAttributes, HTMLIonLabelElement>('ion-label');
+export const IonList = createReactComponent<Components.IonListAttributes, HTMLIonListElement>('ion-list');
+export const IonListHeader = createReactComponent<Components.IonListHeaderAttributes, HTMLIonListHeaderElement>('ion-list-header');
+export const IonMenu = createReactComponent<Components.IonMenuAttributes, HTMLIonMenuElement>('ion-menu');
+export const IonMenuButton = createReactComponent<Components.IonMenuButtonAttributes, HTMLIonMenuButtonElement>('ion-menu-button');
+export const IonMenuToggle = createReactComponent<Components.IonMenuToggleAttributes, HTMLIonMenuToggleElement>('ion-menu-toggle');
+export const IonNote = createReactComponent<Components.IonNoteAttributes, HTMLIonNoteElement>('ion-note');
+export const IonPicker = createReactComponent<Components.IonPickerAttributes, HTMLIonPickerElement>('ion-picker');
+export const IonPickerColumn = createReactComponent<Components.IonPickerColumnAttributes, HTMLIonPickerColumnElement>('ion-picker-column');
+export const IonNav = createReactComponent<Components.IonNavAttributes, HTMLIonNavElement>('ion-nav');
+export const IonProgressBar = createReactComponent<Components.IonProgressBarAttributes, HTMLIonProgressBarElement>('ion-progress-bar');
+export const IonRadio = createReactComponent<Components.IonRadioAttributes, HTMLIonRadioElement>('ion-radio');
+export const IonRadioGroup = createReactComponent<Components.IonRadioGroupAttributes, HTMLIonRadioGroupElement>('ion-radio-group');
+export const IonRange = createReactComponent<Components.IonRangeAttributes, HTMLIonRangeElement>('ion-range');
 export const IonRefresher= createReactComponent<Components.IonRefresherAttributes, HTMLIonRefresherElement>('ion-refresher');
 export const IonRefresherContent= createReactComponent<Components.IonRefresherContentAttributes, HTMLIonRefresherContentElement>('ion-refresher-content');
-export const IonFab= createReactComponent<Components.IonFabAttributes, HTMLIonFabElement>('ion-fab');
-export const IonFabList = createReactComponent<Components.IonFabListAttributes, HTMLIonFabListElement>('ion-fab-list');
-export const IonFabButton= createReactComponent<Components.IonFabButtonAttributes, HTMLIonFabButtonElement>('ion-fab-button');
-export const IonAvatar = createReactComponent<Components.IonAvatarAttributes, HTMLIonAvatarElement>('ion-avatar');
-export const IonCard = createReactComponent<Components.IonCardAttributes, HTMLIonCardElement>('ion-card');
-export const IonCardHeader = createReactComponent<Components.IonCardHeaderAttributes, HTMLIonCardHeaderElement>('ion-card-header');
-export const IonCardContent = createReactComponent<Components.IonCardContentAttributes, HTMLIonCardContentElement>('ion-card-content');
-export const IonTextarea = createReactComponent<Components.IonTextareaAttributes, HTMLIonTextareaElement>('ion-textarea');
-export const IonTabs = createReactComponent<Components.IonTabsAttributes, HTMLIonTabsElement>('ion-tabs');
+export const IonReorder = createReactComponent<Components.IonReorderAttributes, HTMLIonReorderElement>('ion-reorder');
+export const IonReorderGroup = createReactComponent<Components.IonReorderGroupAttributes, HTMLIonReorderGroupElement>('ion-reorder-group');
+export const IonRippleEffect = createReactComponent<Components.IonRippleEffectAttributes, HTMLIonRippleEffectElement>('ion-ripple-effect');
+export const IonRow = createReactComponent<Components.IonRowAttributes, HTMLIonRowElement>('ion-row');
+export const IonSearchbar= createReactComponent<Components.IonSearchbarAttributes, HTMLIonSearchbarElement>('ion-searchbar');
+export const IonSegment= createReactComponent<Components.IonSegmentAttributes, HTMLIonSegmentElement>('ion-segment');
+export const IonSegmentButton= createReactComponent<Components.IonSegmentButtonAttributes, HTMLIonSegmentButtonElement>('ion-segment-button');
+export const IonSelect = createReactComponent<Components.IonSelectAttributes, HTMLIonSelectElement>('ion-select');
+export const IonSelectOption = createReactComponent<Components.IonSelectOptionAttributes, HTMLIonSelectOptionElement>('ion-select-option');
+export const IonSelectPopover = createReactComponent<Components.IonSelectPopoverAttributes, HTMLIonSelectPopoverElement>('ion-select-popover');
+export const IonSkeletonText = createReactComponent<Components.IonSkeletonTextAttributes, HTMLIonSkeletonTextElement>('ion-skeleton-text');
+export const IonSlide = createReactComponent<Components.IonSlideAttributes, HTMLIonSlideElement>('ion-slide');
+export const IonSlides = createReactComponent<Components.IonSlidesAttributes, HTMLIonSlidesElement>('ion-slides');
+export const IonSpinner = createReactComponent<Components.IonSpinnerAttributes, HTMLIonSpinnerElement>('ion-spinner');
+export const IonSplitPane = createReactComponent<Components.IonSplitPaneAttributes, HTMLIonSplitPaneElement>('ion-split-pane');
 export const IonTab = createReactComponent<Components.IonTabAttributes, HTMLIonTabElement>('ion-tab');
 export const IonTabBar = createReactComponent<Components.IonTabBarAttributes, HTMLIonTabBarElement>('ion-tab-bar');
 export const IonTabButton = createReactComponent<Components.IonTabButtonAttributes, HTMLIonTabButtonElement>('ion-tab-button');
-export const IonSlides = createReactComponent<Components.IonSlidesAttributes, HTMLIonSlidesElement>('ion-slides');
-export const IonSlide = createReactComponent<Components.IonSlideAttributes, HTMLIonSlideElement>('ion-slide');
-export const IonSplitPane = createReactComponent<Components.IonSplitPaneAttributes, HTMLIonSplitPaneElement>('ion-split-pane');
-export const IonMenuToggle = createReactComponent<Components.IonMenuToggleAttributes, HTMLIonMenuToggleElement>('ion-menu-toggle');
+export const IonTabs = createReactComponent<Components.IonTabsAttributes, HTMLIonTabsElement>('ion-tabs');
+export const IonText = createReactComponent<Components.IonTextAttributes, HTMLIonTextElement>('ion-text');
+export const IonTextarea = createReactComponent<Components.IonTextareaAttributes, HTMLIonTextareaElement>('ion-textarea');
+export const IonThumbnail = createReactComponent<Components.IonThumbnailAttributes, HTMLIonThumbnailElement>('ion-thumbnail');
+export const IonTitle = createReactComponent<Components.IonTitleAttributes, HTMLIonTitleElement>('ion-title');
 export const IonToggle = createReactComponent<Components.IonToggleAttributes, HTMLIonToggleElement>('ion-toggle');
+export const IonToolbar = createReactComponent<Components.IonToolbarAttributes, HTMLIonToolbarElement>('ion-toolbar');
+export const IonVirtualScroll = createReactComponent<Components.IonVirtualScrollAttributes, HTMLIonVirtualScrollElement>('ion-virtual-scroll');