diff --git a/docs/contentful/Animations.md b/docs/contentful/Animations.md new file mode 100644 index 0000000000..cfa2faace0 --- /dev/null +++ b/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) diff --git a/docs/contentful/AppComponent.md b/docs/contentful/AppComponent.md new file mode 100644 index 0000000000..12c3980e17 --- /dev/null +++ b/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. diff --git a/docs/contentful/Image.md b/docs/contentful/Image.md new file mode 100644 index 0000000000..a58fd52a34 --- /dev/null +++ b/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 `` 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. \ No newline at end of file diff --git a/docs/contentful/Modal.md b/docs/contentful/Modal.md new file mode 100644 index 0000000000..9907ba25dc --- /dev/null +++ b/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: + +``` +[Link: Modal](https://topcoder.com) +``` + +For more examples, please see this contentful source: https://app.contentful.com/spaces/b5f1djy59z3a/entries/75fw42BmbyloyIseNH7gsY \ No newline at end of file diff --git a/docs/contentful/Quote.md b/docs/contentful/Quote.md new file mode 100644 index 0000000000..4541e2e542 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/contentful/Route.md b/docs/contentful/Route.md index f9dcf815f8..7847f04e0a 100644 --- a/docs/contentful/Route.md +++ b/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) \ No newline at end of file diff --git a/docs/contentful/Shape.md b/docs/contentful/Shape.md new file mode 100644 index 0000000000..3e1dcaac15 --- /dev/null +++ b/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. diff --git a/docs/contentful/Tabs.md b/docs/contentful/Tabs.md new file mode 100644 index 0000000000..6938b61d97 --- /dev/null +++ b/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) diff --git a/docs/contentful/TabsItem.md b/docs/contentful/TabsItem.md new file mode 100644 index 0000000000..ed57c3316e --- /dev/null +++ b/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. diff --git a/docs/contentful/Viewport.md b/docs/contentful/Viewport.md new file mode 100644 index 0000000000..652abec24e --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/contentful/animations.md b/docs/contentful/animations.md index bc5645786c..cfa2faace0 100644 --- a/docs/contentful/animations.md +++ b/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 diff --git a/docs/contentful/index.md b/docs/contentful/index.md index 8ffe8244ed..d85de5fa69 100644 --- a/docs/contentful/index.md +++ b/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) diff --git a/docs/contentful/pics/Animation/screenshot.png b/docs/contentful/pics/Animation/screenshot.png new file mode 100644 index 0000000000..2fa2bf1646 Binary files /dev/null and b/docs/contentful/pics/Animation/screenshot.png differ diff --git a/docs/contentful/pics/AppComponent/default-theme.png b/docs/contentful/pics/AppComponent/default-theme.png new file mode 100644 index 0000000000..304155e4d6 Binary files /dev/null and b/docs/contentful/pics/AppComponent/default-theme.png differ diff --git a/docs/contentful/pics/AppComponent/member-path.png b/docs/contentful/pics/AppComponent/member-path.png new file mode 100644 index 0000000000..e19e046411 Binary files /dev/null and b/docs/contentful/pics/AppComponent/member-path.png differ diff --git a/docs/contentful/pics/AppComponent/screenshot.png b/docs/contentful/pics/AppComponent/screenshot.png new file mode 100644 index 0000000000..9accac58d8 Binary files /dev/null and b/docs/contentful/pics/AppComponent/screenshot.png differ diff --git a/docs/contentful/pics/AppComponent/tco20-theme.png b/docs/contentful/pics/AppComponent/tco20-theme.png new file mode 100644 index 0000000000..7905f06b94 Binary files /dev/null and b/docs/contentful/pics/AppComponent/tco20-theme.png differ diff --git a/docs/contentful/pics/AppComponent/tco22-theme.png b/docs/contentful/pics/AppComponent/tco22-theme.png new file mode 100644 index 0000000000..59f3d9a4dc Binary files /dev/null and b/docs/contentful/pics/AppComponent/tco22-theme.png differ diff --git a/docs/contentful/pics/Image/screenshot.png b/docs/contentful/pics/Image/screenshot.png new file mode 100644 index 0000000000..5b586ef113 Binary files /dev/null and b/docs/contentful/pics/Image/screenshot.png differ diff --git a/docs/contentful/pics/Modal/screenshot.png b/docs/contentful/pics/Modal/screenshot.png new file mode 100644 index 0000000000..df6881ecae Binary files /dev/null and b/docs/contentful/pics/Modal/screenshot.png differ diff --git a/docs/contentful/pics/Quote/screenshot.png b/docs/contentful/pics/Quote/screenshot.png new file mode 100644 index 0000000000..9860b516ca Binary files /dev/null and b/docs/contentful/pics/Quote/screenshot.png differ diff --git a/docs/contentful/pics/Shape/screenshot.png b/docs/contentful/pics/Shape/screenshot.png new file mode 100644 index 0000000000..441c3f4c67 Binary files /dev/null and b/docs/contentful/pics/Shape/screenshot.png differ diff --git a/docs/contentful/pics/Tabs/default.png b/docs/contentful/pics/Tabs/default.png new file mode 100644 index 0000000000..945f9e6801 Binary files /dev/null and b/docs/contentful/pics/Tabs/default.png differ diff --git a/docs/contentful/pics/Tabs/pills.png b/docs/contentful/pics/Tabs/pills.png new file mode 100644 index 0000000000..49982154de Binary files /dev/null and b/docs/contentful/pics/Tabs/pills.png differ diff --git a/docs/contentful/pics/Tabs/screenshot.png b/docs/contentful/pics/Tabs/screenshot.png new file mode 100644 index 0000000000..c6d2f8af4f Binary files /dev/null and b/docs/contentful/pics/Tabs/screenshot.png differ diff --git a/docs/contentful/pics/Tabs/underline-box.png b/docs/contentful/pics/Tabs/underline-box.png new file mode 100644 index 0000000000..6c4859613e Binary files /dev/null and b/docs/contentful/pics/Tabs/underline-box.png differ diff --git a/docs/contentful/pics/Tabs/underline-dark.png b/docs/contentful/pics/Tabs/underline-dark.png new file mode 100644 index 0000000000..ce8c80a2ca Binary files /dev/null and b/docs/contentful/pics/Tabs/underline-dark.png differ diff --git a/docs/contentful/pics/Tabs/underline.png b/docs/contentful/pics/Tabs/underline.png new file mode 100644 index 0000000000..c38f489726 Binary files /dev/null and b/docs/contentful/pics/Tabs/underline.png differ diff --git a/docs/contentful/pics/Tabs/vertical.png b/docs/contentful/pics/Tabs/vertical.png new file mode 100644 index 0000000000..7c1a142397 Binary files /dev/null and b/docs/contentful/pics/Tabs/vertical.png differ diff --git a/docs/contentful/pics/Tabs/zurich.png b/docs/contentful/pics/Tabs/zurich.png new file mode 100644 index 0000000000..c6f20c171e Binary files /dev/null and b/docs/contentful/pics/Tabs/zurich.png differ diff --git a/docs/contentful/pics/TabsItem/screenshot.png b/docs/contentful/pics/TabsItem/screenshot.png new file mode 100644 index 0000000000..82cdb6f163 Binary files /dev/null and b/docs/contentful/pics/TabsItem/screenshot.png differ