Contentful app component docs

docs/contentful/Animations.md

@@ -0,0 +1,16 @@
+# Animations On Scroll
+Animation Contentful components on scroll is implemented currently for following components:
+- [Viewport](./Viewport.md)
+- [Image](./Image.md)
+- [ContentBlock](./ContentBlock.md)
+
+![screenshot](./pics/Animation/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn
+
+Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
+![](./pics/anim1.png)
+
+## Animation Model
+To define a default animation only `Name` and `Animate On Scroll` fields are required. There is help hint bellow each fields what is does and how to use it. For further detailed examples see: https://michalsnik.github.io/aos/. All available properties are supported from Contentful animatable components as well.
+![](./pics/anim2.png)

docs/contentful/AppComponent.md

@@ -0,0 +1,91 @@
+# App Component
+
+Generic App Component model.
+
+![screenshot](./pics/AppComponent/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/7szFFbYqzZLpWkZwqZlXSJ
+
+## Fields
+
+- **Name** | Name of the entry.
+- **Type** | Type of the App Component. Each type has different props. Please refer to [props](#props-json-object) field below.
+- **Theme** | Theme specific for `TCO-Leaderboard` type.
+- **Props** | Each type has its own props. Please refer to [props](#props-json-object) field below.
+
+## TCO-Leaderboard Themes
+
+### Default
+
+![default-theme](./pics/AppComponent/default-theme.png)
+
+### TCO20
+
+![tco20-theme](./pics/AppComponent/tco20-theme.png)
+
+### TCO22
+
+![tco22-theme](./pics/AppComponent/tco22-theme.png)
+
+## Props (JSON Object)
+
+### Type = `TCO-Leaderboard`
+
+Render top spots and list of competitors on specific TCO track.
+
+- **apiUrl** | **String.** Looks API URL | Default: "https://api.topcoder.com/v4/looks/1044/run/json".
+- **title** | **String.** Title of the leaderboard. | Default: "Leaderboard".
+- **podiumSpots** | **Number.** Number of displayed top spots. | Default: 3.
+- **isCopilot** | **Bool.** Display copilot specific fields. | Default: false
+- **hasChallengeHistory** | Bool. Display modal of competitor history. | Default: true
+- **tcoPointsApiUrl** | **String.** Looks API URL for competitior challenge history. | Default: null
+- **memberLimit** | **Number.** Limit the displayed number of rows. | Default: null
+- **isAlgo** | **Bool.** Display copilot specific fields. | Default: false
+
+### Type = `RecruitCRM-Jobs`
+
+A block that fetches and renders a job listing page driven by recruitCRM.
+
+### Type = `EmailSubscribeForm`
+
+Generic subscribe for MailChimp tags component.
+
+- **listId** | **String (Required).**
+- **interests** | **String (Required).**
+- **title** | **String.**
+- **btnText** | **String.**
+- **successTitle** | **String.**
+- **successText** | **String.**
+- **successLink** | **String.**
+- **successLinkText** | **String.**
+
+### Type = `GSheet`
+
+Render table that loads data from Google Sheet.
+
+- **id** | **String (Required).** Google sheet ID.
+- **index** | **Number.** The index of the sheet to render, starts by 0 and counting.
+- **config** | **Object of:**
+  - **pick** | **Array of Strings.** Pick sheet header value as table header.
+  - **containerStyle** | **CSS Object.** Inline styles object to override the container style.
+
+### Type = `JSON`
+
+JSON object needed by 3rd party API.
+
+### Type = `MemberPath`
+
+Render MemberPath component specifically for http://topcoder.com/start page.
+
+![member-path](./pics/AppComponent/member-path.png)
+
+- **data** | **Object of:**
+  - **title** | **String.** Big top title.
+  - **items** | **Array of Objects of:**
+    - **title** | **String.** Box title.
+    - **iconURL** | **String.** URL of the icon.
+    - **activeIconURL** | **String.** URL of icon when box is active.
+    - **contentText** | **String.** Displayed text at the bottom content.
+    - **btnText** | **String.** Text of the button at the bottom content.
+    - **btnURL** | **String.** Target link of the button at the bottom content.
+    - **btnNewTab** | **Bool.** Boolean to control the button to open new tab or not.

docs/contentful/Image.md

@@ -0,0 +1,20 @@
+# Image
+
+Generic Image model.
+
+![screenshot](./pics/Image/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn
+
+## Fields
+
+- **Name** | Name of the entry.
+- **Source** | The image source.
+- **Source Mobile** | The image source for mobile view. This image will be shown when viewport width is lower than and equals to 768px.
+- **Alt Text** | Alternate text for the image. Name field will be used if this is not provided.
+- **Clip SVG** | A SVG file that define "clip-path" to be applied on the image. Contentful can't display it thus do not get confused just publish it after upload.
+- **Extra Styles for Container** | Inline CSS styles to apply on container.
+- **Extra Styles For Image** | Inline CSS styles to apply on `<img>` tag itself.
+- **Animation On Scroll** | Animation type to apply on scroll. Please refer to [Animation](./Animation.md) for more details.
+- **Source Polyfill** | Used as polyfill in cases where source image is not supported by the browser.
+- **Source Mobile Polyfill** | Used as polyfill in cases where source image is not supported by the browser. This polyfill will be shown when viewport width is lower than and equals to 768px.

docs/contentful/Modal.md

@@ -0,0 +1,26 @@
+# Modal
+
+Generic Modal model.
+
+![screenshot](./pics/Modal/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/contentblock/75fw42BmbyloyIseNH7gsY
+
+## Fields
+
+- **Name** | Name of the entry.
+- **Content** | Content entry of the modal.
+- **Theme** | Modal theme.
+- **Hide Dismiss Icon** | Whether to hide the dismiss icon.
+- **Hide Close Button** | By default, modals will render close button inside it.
+- **Extra Styles For Container** | CSS inline styles to override the modal container's style.
+
+## How to use
+
+In order to use modal, we need to create [Content Block](./ContentBlock.md) entry, and put the modal entry's ID into the text field of the Content Block like so:
+
+```
+<Modal id="6U2MKViRUKnJsw6PbO6201">[Link: Modal](https://topcoder.com)</Modal>
+```
+
+For more examples, please see this contentful source: https://app.contentful.com/spaces/b5f1djy59z3a/entries/75fw42BmbyloyIseNH7gsY

docs/contentful/Quote.md

@@ -0,0 +1,19 @@
+# Quote
+
+Generic Quote model.
+
+![screenshot](./pics/Quote/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/7xOMXsGyLLzGUlu8uelMQl
+
+## Fields
+
+- **Name** | Name of the entry.
+- **Text** | Text to render as a quote.
+- **Author Avatar Image** | Avatar image to be shown.
+- **Author Name** | The name that will be displayed below the quote text.
+- **Author Affiliation** | Affiliation name that will be displayed right after author name.
+- **Quote Style** | Predefined quote style.
+- **Extra styles for container** | CSS inline styles to override the container's style.
+- **Extra styles for content wrapper** | CSS inline styles to override the content wrapper's style.
+- **Extra styles for content** | CSS inline styles to override the content's style.

docs/contentful/Route.md

@@ -1,5 +1,5 @@
 # Route
-A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./viewport.md) under the specified `URL`.
+A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./Viewport.md) under the specified `URL`.
 
 ## Fields
 ![](./pics/Route.png)

docs/contentful/Shape.md

@@ -0,0 +1,15 @@
+## Shape
+
+Generic Shape model. Primarily used for render shape separator between sections on the page.
+
+![screenshot](./pics/Shape/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1hoEvvNhVOZ3crj94JegC6
+
+## Fields
+
+- **Name** | Name of the entry.
+- **Shape SVG** | Shape SVG file to be applied to the page.
+- **Inline** | Embed the shape as inline SVG element. Defaults to "No" which means the shape is applied as background image to the element.
+- **Height** | Shapes need some height defined. Defaults to 100px if not set otherwise.
+- **Extra Styles for Container** | Extra CSS inline styles that will overwrite image container defaults.

docs/contentful/Tabs.md

@@ -0,0 +1,48 @@
+# Tabs
+
+Generic Tabs model. Each tab holds a list of [TabsItem](./TabsItem.md) entry type, that provide content for it.
+
+![screenshot](./pics/Tabs/screenshot.png)
+
+**Preview:** https://community-app.topcoder-dev.com/examples/contentful/tabs/5WgUyXj8xlPsFSPaMdC1ze
+
+## Fields
+
+- **Name** | Name of the entry.
+- **TabList** | List of TabsItem type entry. Please refer to [TabsItem docs](./TabsItem.md) for more details.
+- **Theme** | Tabs theme. Please refer to [theme](#theme) for more details.
+- **Selected** | Default TabsItem selected.
+- **URL Query Name** | Name in URL queries. Defaults to id if not set.
+- **Force Render Tab Panel** | When set to true, tabs will render content even not selected.
+
+## Theme
+
+Tabs theme.
+
+### Default
+
+![default](./pics/Tabs/default.png)
+
+### Zurich
+
+![zurich](./pics/Tabs/zurich.png)
+
+### Underline
+
+![underline](./pics/Tabs/underline.png)
+
+### Underline dark
+
+![underline-dark](./pics/Tabs/underline-dark.png)
+
+### Pills
+
+![pills](./pics/Tabs/pills.png)
+
+### Vertical
+
+![vertical](./pics/Tabs/vertical.png)
+
+### Underline box
+
+![underline-box](./pics/Tabs/underline-box.png)

docs/contentful/TabsItem.md

@@ -0,0 +1,11 @@
+# TabsItem
+
+Generic TabsItem model used specifically for [Tabs](./Tabs.md) type entry.
+
+![screenshot](./pics/TabsItem/screenshot.png)
+
+**Preview:** https://community-app.topcoder-dev.com/examples/contentful/tabs/5WgUyXj8xlPsFSPaMdC1ze
+
+- **Name** | Name of the entry.
+- **Tab** | Content of the tab button.
+- **Panel** | Content to render when tab is active.

docs/contentful/Viewport.md

@@ -0,0 +1,6 @@
+# Viewport
+
+A generic container for other objects, that renders its children into a container element. It supports nested viewports, different layout options for viewport content via themes. Viewport should be considered as the main content layout and grouping component.
+
+## Fields
+![](./pics/Viewport.png)

docs/contentful/animations.md

@@ -1,10 +1,14 @@
 # Animations On Scroll
-Animationg Contentful components on scroll is implemetented currently for following components:
-- Viewport
-- Image
-- ContentBlock
+Animation Contentful components on scroll is implemented currently for following components:
+- [Viewport](./Viewport.md)
+- [Image](./Image.md)
+- [ContentBlock](./ContentBlock.md)
 
-Definig a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
+![screenshot](./pics/Animation/screenshot.png)
+
+**Preview:** https://community-app.topcoder.com/examples/contentful/viewport/1HRSb4Bls4S2mQesG6mJOn
+
+Defining a scroll animation is easy via the Web UI. Search for the "Animation On Scroll" field and either select existing animation or create new one.
 ![](./pics/anim1.png)
 
 ## Animation Model

docs/contentful/index.md

@@ -18,15 +18,23 @@ Instructions are also provided below for developments that want to modify/create
     - [Basics](./content-writer-basics.md)
     - Content Types
         - [Accordion](./accordion.md)
+        - [Animation](./Animation.md)
+        - [App Component](./AppComponent.md)
         - [Banner](./banner.md)
         - [ContentBlock](./ContentBlock.md)
         - [Content Slider](./slider.md)
         - [Countdown](./Countdown.md)
         - [Dashboard Announcement](./DashboardAnnouncement.md)
         - [Dropdown](./Dropdown.md)
+        - [Image](./Image.md)
+        - [Modal](./Modal.md)
+        - [Shape](./Shape.md)
+        - [Tabs](./Tabs.md)
+            - [TabsItem](./TabsItem.md)
         - [Navigation Menu](./NavigationMenu.md)
+        - [Quote](./Quote.md)
         - [Route](./Route.md)
-        - [Viewport](./viewport.md)
+        - [Viewport](./Viewport.md)
         - [Member Card](./memberCard.md)
         - [Article](./Article.md)
     - [Preview Content](./preview-content.md)