feat(docs): overview-examples handling add

docs/src/app/@theme/styles/styles.scss

@@ -19,6 +19,7 @@
   @include nb-select-theme();
   @include nb-input-theme();
   @include nb-overlay-theme();
+  @include nb-radio-theme();
 
   @include nb-typography();
 

docs/src/app/blocks/blocks.module.ts

@@ -32,7 +32,9 @@ import {
   NgdComponentsOverviewBlockComponent,
   NgdTypesBlockComponent,
   NgdHocParamsBlockComponent,
+  NgdOverviewExampleBlock,
 } from './components/';
+import { NbRadioModule } from '@nebular/theme';
 
 const blocks = [
   NgdMdBLockComponent,
@@ -57,13 +59,15 @@ const blocks = [
   NgdComponentsOverviewBlockComponent,
   NgdTypesBlockComponent,
   NgdHocParamsBlockComponent,
+  NgdOverviewExampleBlock,
 ];
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
     NgdThemeModule,
+    NbRadioModule,
   ],
   declarations: [
     ...blocks,

docs/src/app/blocks/components/code-block/code-block.component.scss

@@ -13,6 +13,12 @@
     background: $code-block-bg;
     overflow-x: auto;
 
+    .language {
+      position: absolute;
+      right: 0.5rem;
+      top: 4rem;
+    }
+
     .lines {
       display: flex;
       flex-direction: column;

docs/src/app/blocks/components/index.ts

@@ -20,3 +20,4 @@ export * from './pager-block/pager-block.component';
 export * from './components-overview-block/components-overview-block.component';
 export * from './types-block/types-block.component';
 export * from './hoc-params-block/hoc-params-block.component';
+export * from './overview-example-block/overview-example-block.component';

docs/src/app/blocks/components/overview-block/overview-block.component.ts

@@ -19,6 +19,10 @@ import {
           <ng-container>
             <div [innerHTML]="description"
                  [ngStyle]="hasImage && {'margin-bottom': '16px'}"></div>
+            <ngd-overview-example
+              *ngFor="let example of source.overviewExamples"
+              [example]="example">
+            </ngd-overview-example>
             <img
               *ngFor="let image of images"
               src={{image}}
@@ -44,7 +48,7 @@ export class NgdOverviewBlockComponent {
   }
 
   private prepareDescription(source): any {
-    this.description = source.description.replace('undefined', '');
+    this.description = source.description;
     this.images = source.images.map((image: string) => `assets/images/overview/${image}`);
     return source;
   }

docs/src/app/blocks/components/overview-example-block/overview-example-block.component.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+
+@Component({
+  selector: 'ngd-overview-example',
+  template: `
+    <h5 style="margin-top: 2rem">{{title}}:</h5>
+    <ngd-code-block [code]="code"></ngd-code-block>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgdOverviewExampleBlock {
+
+  code: any;
+  title: string;
+
+  @Input('example')
+  set example(value) {
+    this.code = value.code.replace(/```/g, '');
+    this.title = value.description;
+  }
+}

package.json

@@ -64,7 +64,7 @@
     "conventional-changelog-cli": "^2.0.21",
     "coveralls": "^3.0.2",
     "del": "^4.1.1",
-    "doc-prsr": "^2.2.2",
+    "doc-prsr": "^2.2.3",
     "gulp": "^3.9.1",
     "gulp-replace": "^1.0.0",
     "gulp-typedoc": "^2.2.1",

src/framework/ui/button/button.component.tsx

@@ -70,7 +70,7 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone
  *
  * @property StyledComponentProps
  *
- * @example Simple usage example
+ * @overview-example Simple usage example
  *
  * ```
  * import React from 'react';
@@ -93,6 +93,32 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone
  * };
  * ```
  *
+ * @overview-example Eva-related props using example
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   Button,
+ *   ButtonProps,
+ * } from 'react-native-ui-kitten';
+ *
+ * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement<ButtonProps> => {
+ *
+ *   const onPress = () => {
+ *     // Handle Button press
+ *   };
+ *
+ *   return (
+ *     <Button
+ *       status='danger'
+ *       size='large'
+ *       onPress={onPress}>
+ *       BUTTON
+ *     </Button>
+ *   );
+ * };
+ * ```
+ *
  * @example Inline styling example
  *
  * ```
@@ -112,6 +138,37 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone
  *   );
  * };
  * ```
+ *
+ * @example Button with Icon usage example
+ *
+ * ```
+ * import React from 'react';
+ * import {
+ *   ImageStyle,
+ *   Image,
+ *   ImageProps,
+ * } from 'react-native';
+ * import {
+ *   Button,
+ *   ButtonProps,
+ * } from 'react-native-ui-kitten';
+ *
+ * const ButtonIcon = (style: ImageStyle): React.ReactElement<ImageProps> => {
+ *   return (
+ *     <Image style={style} source={{ uri: 'path/to/image' }}/>
+ *   );
+ * };
+ *
+ * export const ButtonShowcase = (props?: ButtonProps): React.ReactElement<ButtonProps> => {
+ *   return (
+ *     <Button
+ *       style={styles.button}
+ *       icon={ButtonIcon}>
+ *       BUTTON
+ *     </Button>
+ *   );
+ * };
+ * ```
  */
 
 export class ButtonComponent extends React.Component<ButtonProps> {

src/framework/ui/modal/modal.component.tsx

@@ -58,7 +58,7 @@ export type ModalProps = ViewProps & ComponentProps & ModalPresentingBased;
  * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
  * Default is `false`.
  *
- * @property {{backgroundColor: string, opacity: number }} backdropStyle - Determines the style of backdrop.
+ * @property {BackdropStyle} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
  * tapping on back-drop.