initially expanded description & task 1

Author: ShMcK

Diff for: lib/components/Page/Tasks/index.js

@@ -33,7 +33,7 @@ var styles = {
 };
 var Tasks = function (_a) {
     var tasks = _a.tasks, page = _a.page, config = _a.config;
-    return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests, config: config})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task})), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints})))))); }), React.createElement(AddButton_1.default, null), React.createElement(TasksComplete_1.default, {page: page})));
+    return (React.createElement("div", null, tasks.map(function (task, index) { return (React.createElement(Card_1.Card, {style: styles.card, initiallyExpanded: index === 0}, React.createElement(Card_1.CardHeader, {actAsExpander: true, showExpandableButton: true}, React.createElement("span", {style: styles.title}, "Task ", index + 1), React.createElement(Tests_1.default, {style: styles.test, tests: task.tests, config: config})), React.createElement(Card_1.CardText, {expandable: true, style: styles.cardContent}, React.createElement(Tabs_1.Tabs, {tabItemContainerStyle: styles.tabBar}, React.createElement(Tabs_1.Tab, {label: 'Description'}, React.createElement(Task_1.default, {key: index.toString(), index: index, task: task})), React.createElement(Tabs_1.Tab, {label: 'Actions'}, React.createElement(TaskActions_1.default, {actions: task.actions})), React.createElement(Tabs_1.Tab, {label: 'Hints'}, React.createElement(Hints_1.default, {hints: task.hints})))))); }), React.createElement(AddButton_1.default, null), React.createElement(TasksComplete_1.default, {page: page})));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Tasks;

Diff for: lib/components/Page/index.js

@@ -29,7 +29,7 @@ var Page = (function (_super) {
         if (!page) {
             return null;
         }
-        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page, config: packageJson.config})));
+        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description, open: true}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page, config: packageJson.config})));
     };
     return Page;
 }(React.Component));

Diff for: lib/components/common/ContentCard.js

@@ -6,8 +6,9 @@ var styles = {
     margin: '5px'
 };
 var ContentCard = function (_a) {
-    var title = _a.title, content = _a.content;
-    return (React.createElement(Card_1.Card, {style: styles}, title ? React.createElement(Card_1.CardHeader, {title: title}) : null, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, content))));
+    var title = _a.title, content = _a.content, open = _a.open;
+    return (React.createElement(Card_1.Card, {style: styles, initiallyExpanded: open || false}, title
+        ? React.createElement(Card_1.CardHeader, {title: title, actAsExpander: true, showExpandableButton: true}) : null, React.createElement(Card_1.CardText, {expandable: true}, React.createElement(index_1.Markdown, null, content))));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ContentCard;

Diff for: src/components/Page/Tasks/index.tsx

@@ -41,7 +41,10 @@ const Tasks: React.StatelessComponent<{
 }> = ({tasks, page, config}) => (
   <div>
     {tasks.map((task: CR.Task, index: number) => (
-      <Card style={styles.card}>
+      <Card
+        style={styles.card}
+        initiallyExpanded={index === 0}
+      >
         <CardHeader
           actAsExpander={true}
           showExpandableButton={true}

Diff for: src/components/Page/index.tsx

@@ -30,6 +30,7 @@ export default class Page extends React.Component<{
         <ContentCard
           title={page.title}
           content={page.description}
+          open={true}
         />
         <Tasks
           tasks={page.tasks}

Diff for: src/components/common/ContentCard.tsx

@@ -7,11 +7,19 @@ const styles = {
 };
 
 const ContentCard: React.StatelessComponent<{
-  title: string, content: string
-}> = ({title, content}) => (
-  <Card style={styles}>
-    {title ? <CardHeader title={title} /> : null}
-    <CardText>
+  title: string, content: string, open?: boolean
+}> = ({title, content, open}) => (
+  <Card
+    style={styles}
+    initiallyExpanded={open || false}
+  >
+    {title
+      ? <CardHeader
+        title={title}
+        actAsExpander={true}
+        showExpandableButton={true}
+      /> : null}
+    <CardText expandable={true}>
       <Markdown>{content}</Markdown>
     </CardText>
   </Card>