Coming soon... 👩🏻💻
;
+ }
+ };
+
+ /** Tabs */
+
+ const getTabItems = tabs => {
+ return _.map(tabs, (tab, index) => {
+ return (
+ ;
+ }
+ };
+
+ return (
+
+ {buildHero()}
+ {buildTabs()}
+
+ );
+}
diff --git a/docuilib/src/components/pageComponents/Banner.tsx b/docuilib/src/components/pageComponents/Banner.tsx
new file mode 100644
index 0000000000..41011973e7
--- /dev/null
+++ b/docuilib/src/components/pageComponents/Banner.tsx
@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import React from 'react';
+import '../ComponentPage.module.scss';
+
+export const Banner = ({section, component}) => {
+ const getColor = type => {
+ switch (type) {
+ case 'tip':
+ return '#E3F7F2';
+ case 'info':
+ return '#E9F3FF';
+ default:
+ return '#E8ECF0';
+ }
+ };
+
+ const getIcon = type => {
+ switch (type) {
+ case 'tip':
+ return 'https://github.com/wix/react-native-ui-lib/blob/2155a91386f884db816c4d45d97e47bed6024d98/docuilib/src/assets/icons/insights.png?raw=true';
+ default:
+ return 'https://github.com/wix/react-native-ui-lib/blob/2155a91386f884db816c4d45d97e47bed6024d98/docuilib/src/assets/icons/infoOutline.png?raw=true';
+ }
+ };
+
+ const getTitle = type => {
+ switch (type) {
+ case 'tip':
+ return 'TIP';
+ case 'info':
+ return 'INFO';
+ default:
+ return 'NOTE';
+ }
+ };
+
+ const getExtendsLinks = () => {
+ const components = component.extends;
+ const links = component.extendsLink;
+
+ return _.map(components, (component, index: number) => {
+ const isLast = index === components.length - 1;
+ const comma = isLast ? '' : ', ';
+ return (
+
+ {component}
+ {comma}
+
+ );
+ });
+ };
+
+ const getExtends = () => {
+ if (component.extends) {
+ const links = getExtendsLinks();
+ const text = {links};
+ return This component extends the {text} props.
;
+ }
+ };
+
+ const getModifiers = () => {
+ if (component.modifiers) {
+ const text = {component.modifiers?.join(', ')};
+ return This component support {text} modifiers.
;
+ }
+ };
+
+ const getDescription = type => {
+ switch (type) {
+ case 'tip':
+ return getExtends();
+ case 'info':
+ return getModifiers();
+ default:
+ return;
+ }
+ };
+
+ const {title, description, color, icon, type} = section;
+ const _color = color || getColor(type);
+ const _icon = icon || getIcon(type);
+ const _title = title || getTitle(type);
+ const _description = description || getDescription(type);
+
+ return (
+
+
+
+
{_title}
+ {_description}
+
+
