Add Log Entry / Calendar Symptom Shark Components

src/components/container/DailyDataChart/DailyDataChart.stories.tsx

@@ -7,6 +7,7 @@ import { add } from "date-fns";
 
 export default { title: "Container/DailyDataChart", component: DailyDataChart, parameters: { layout: 'fullscreen' } };
 let render = (args: DailyDataChartProps) => <Layout colorScheme="auto"><Card><DailyDataChart {...args} /></Card></Layout>
+
 export const stepsLineChart = {
     args: {
         title: "Steps",

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './presentational';
 export * from './container';
+export * from './symptom-shark';
 export * from './view';
 export * from './step';

src/components/presentational/Action/Action.tsx

@@ -12,6 +12,7 @@ export interface ActionProps {
 	icon?: ReactElement
 	subtitle?: string;
 	indicatorIcon?: IconDefinition;
+	indicator?: ReactElement;
 	onClick: Function;
 	children?: React.ReactNode;
 	className?: string;
@@ -46,7 +47,10 @@ export default function (props: ActionProps) {
 						{props.indicatorValue} 
 					</span>
 				}
-				<FontAwesomeSvgIcon icon={indicatorIcon} />
+				{props.indicator}
+				{!props.indicator &&
+					<FontAwesomeSvgIcon icon={indicatorIcon} />
+				}
 			</div>
 		</UnstyledButton>
 	);

src/components/presentational/Calendar/Calendar.tsx

@@ -8,6 +8,7 @@ export interface CalendarProps {
 	year: number,
 	dayRenderer(year: number, month: number, day?: number): JSX.Element | null,
 	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	className?: string
 	innerRef?: React.Ref<HTMLDivElement>
 }
 
@@ -70,7 +71,7 @@ export default function (props: CalendarProps) {
 	generateWeeks();
 
 	return (
-		<div ref={props.innerRef} className="mdhui-calendar">
+		<div ref={props.innerRef} className={"mdhui-calendar" + (props.className ? ` ${props.className}` : "")}>
 			<table cellPadding="0" cellSpacing="0">
 				<thead>
 					<tr>

src/components/presentational/Card/Card.css

@@ -17,4 +17,21 @@
 
 .mdhui-card.allow-overflow {
     overflow: visible;
+}
+
+.mdhui-card-subtle {
+    box-shadow: none;
+    background: none !important;
+    border: solid 1px var(--mdhui-border-color-1);
+}
+
+.mdhui-card-highlight
+{
+    background: var(--mdhui-color-primary);
+    color: #FFF;
+    --mdhui-text-color-0: #FFF;
+    --mdhui-text-color-1: #FFF;
+    --mdhui-text-color-2: #FFF;
+    --mdhui-text-color-3: #FFF;
+    --mdhui-text-color-4: #FFF;
 }

src/components/presentational/Card/Card.stories.css

@@ -1,3 +1,4 @@
 .card-story-primary {
 	background-color: cornflowerblue;
-}
+}
+

src/components/presentational/Card/Card.stories.tsx

@@ -1,40 +1,47 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Action, { ActionProps } from "../Action/Action";
+import Action from "../Action/Action";
 import Layout from "../Layout"
 import Card, { CardProps } from "./Card"
-import CardTitle from "../CardTitle/CardTitle";
 import "./Card.stories.css";
 
 export default {
 	title: "Presentational/Card",
-	component: Action,
+	component: Card,
 	parameters: {
 		layout: 'fullscreen',
 	}
-} as ComponentMeta<typeof Action>;
+};
+
+let render = (args: CardProps) => <Layout><Card {...args} /></Layout>
+
+export const CardAction = {
+	args: {
+		children: <Action onClick={() => {}} title="Baseline Survey" subtitle="Tap here to start your baseline survey" />
+	},
+	render: render
+};
+
 
-const Template: ComponentStory<typeof Action> = (args: ActionProps) =>
-	<Layout colorScheme="auto">
-		<Card>
-			<Action {...args} />
-		</Card>
-	</Layout>;
+export const CardWithClass = {
+	args: {
+		className: "card-story-primary",
+		children: <Action onClick={() => {}} title="Baseline Survey" subtitle="Tap here to start your baseline survey" />
+	},
+	render: render
+};
 
-export const CardAction = Template.bind({});
-CardAction.args = {
-	title: "Baseline Survey",
-	subtitle: "Tap here to start your baseline survey"
+export const SubtleVariant = {
+	args: {
+		variant: "subtle",
+		children: <Action onClick={() => {}} title="Baseline Survey" subtitle="Tap here to start your baseline survey" />
+	},
+	render: render
 };
 
-const CardTemplate: ComponentStory<typeof Card> = (args: CardProps) =>
-	<Layout colorScheme="auto">
-		<Card {...args}>
-			<CardTitle title="Card Title" />
-			<div style={{ padding: "16px" }}>Card Content</div>
-		</Card>
-	</Layout>;
-export const CardWithClass = CardTemplate.bind({});
-CardWithClass.args = {
-	className: "card-story-primary"
+export const HighlightVariant = {
+	args: {
+		variant: "highlight",
+		children: <Action onClick={() => {}} title="Baseline Survey" subtitle="Tap here to start your baseline survey" />
+	},
+	render: render
 };

src/components/presentational/Card/Card.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import "./Card.css"
+import ShinyOverlay from '../ShinyOverlay/ShinyOverlay';
 
 export interface CardProps {
 	className?: string;
 	children?: React.ReactNode;
 	allowOverflow?: boolean;
 	innerRef?: React.Ref<HTMLDivElement>;
+	variant?: "default" | "subtle" | "highlight";
 }
 
 export default function (props: CardProps) {
@@ -20,10 +22,16 @@ export default function (props: CardProps) {
 	if (props.className) {
 		classes.push(props.className);
 	}
+	let variant = props.variant || "default";
+	classes.push(`mdhui-card-${variant}`);
+	if(variant == "highlight"){
+		classes.push("mdhui-color-scheme-dark");
+	}
 
 	return (
 		<div ref={props.innerRef} className={classes.join(" ")}>
 			{props.children}
+			{props.children && variant === "highlight" && <ShinyOverlay />}
 		</div>
 	);
 }

src/components/presentational/DateRangeCoordinator/DateRangeCoordinator.tsx

@@ -4,6 +4,7 @@ import DateRangeNavigator from "../DateRangeNavigator/DateRangeNavigator";
 import { WeekStartsOn, getMonthStart, getWeekStart } from "../../../helpers/get-interval-start";
 
 export interface DateRangeCoordinatorProps {
+    initialIntervalStart?: Date;
     intervalType: "Week" | "Month";
     weekStartsOn?: WeekStartsOn;
     variant?: "default" | "rounded";
@@ -19,7 +20,7 @@ export interface DateRangeContext {
 export const DateRangeContext = createContext<DateRangeContext | null>(null);
 
 export default function DateRangeNavigatorContext(props: DateRangeCoordinatorProps) {
-    let initialIntervalStart = getMonthStart();
+    let initialIntervalStart = props.initialIntervalStart || getMonthStart();
     if (props.intervalType === "Week") {
         initialIntervalStart = getWeekStart(props.weekStartsOn);
     }

src/components/presentational/DateRangeNavigator/DateRangeNavigator.css

@@ -1,5 +1,5 @@
 .mdhui-card .mdhui-date-range-navigator:first-child {
-    border-radius: 5px 5px 0px 0px;
+    border-radius: var(--mdhui-card-border-radius) var(--mdhui-card-border-radius) 0px 0px;
 }
 
 .mdhui-date-range-navigator {

src/components/presentational/DayTrackerSymbol/DayTrackerSymbol.css

@@ -1,53 +1,52 @@
-.mdhui-day-tracker-symbol
-{
+.mdhui-day-tracker-symbol {
     padding: 10px;
 }
 
-    .mdhui-day-tracker-symbol .day-circle
-    {
-        font-size: 12px;
-        height: 30px;
-        width: 30px;
-        display: inline-block;
-        border-radius: 17px;
-        line-height: 30px;
-        background: var(--mdhui-background-color-2);
-        position: relative;
-    }
+.mdhui-day-tracker-symbol .day-circle {
+    font-size: 12px;
+    height: 30px;
+    width: 30px;
+    display: inline-block;
+    border-radius: 17px;
+    line-height: 30px;
+    background: var(--mdhui-background-color-2);
+    position: relative;
+}
 
-        .mdhui-day-tracker-symbol .day-circle .secondary-color
-        {
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-        }
+.mdhui-day-tracker-symbol .day-circle .secondary-color {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
 
-            .mdhui-day-tracker-symbol .day-circle .secondary-color:first-child
-            {
-                left: 36.6%;
-                top: -33.33%;
-            }
+.mdhui-day-tracker-symbol .day-circle .secondary-color:first-child {
+    left: 36.6%;
+    top: -33.33%;
+}
 
-            .mdhui-day-tracker-symbol .day-circle .secondary-color:nth-child(2)
-            {
-                left: 0%;
-                top: -23.333%;
-            }
+.mdhui-day-tracker-symbol .day-circle .secondary-color:nth-child(2) {
+    left: 0%;
+    top: -23.333%;
+}
 
-            .mdhui-day-tracker-symbol .day-circle .secondary-color:nth-child(3)
-            {
-                left: 73%;
-                top: -23.333%;
-            }
+.mdhui-day-tracker-symbol .day-circle .secondary-color:nth-child(3) {
+    left: 73%;
+    top: -23.333%;
+}
+
+.mdhui-day-tracker-symbol .day-circle .more-items {
+    position: absolute;
+    left: 30px;
+    top: 0px;
+    font-size: 10px;
+    height: 8px;
+    width: 7px;
+    line-height: 6px;
+}
 
-        .mdhui-day-tracker-symbol .day-circle .more-items
-        {
-            position: absolute;
-            left: 30px;
-            top: 0px;
-            font-size: 10px;
-            height: 8px;
-            width: 7px;
-            line-height: 6px;
-        }
+.mdhui-day-tracker-symbol.mdhui-day-tracker-symbol-large {
+    transform: scale(2);
+    padding-top: 34px;
+    padding-bottom: 22px;
+}

src/components/presentational/DayTrackerSymbol/DayTrackerSymbol.tsx

@@ -5,7 +5,8 @@ export interface DayTrackerSymbolProps {
 	primaryColors: string[]
 	secondaryColors: string[]
 	className?: string
-	innerRef?: React.Ref<HTMLDivElement>;
+	size?: "small" | "large"
+	innerRef?: React.Ref<HTMLDivElement>
 }
 
 export default function (props: DayTrackerSymbolProps) {
@@ -25,8 +26,16 @@ export default function (props: DayTrackerSymbolProps) {
 
 	var style = { background: background };
 
+	let classes = ["mdhui-day-tracker-symbol"];
+	if (props.className) {
+		classes.push(props.className);
+	}
+	if (props.size == "large") {
+		classes.push("mdhui-day-tracker-symbol-large");
+	}
+
 	return (
-		<div ref={props.innerRef} className={"mdhui-day-tracker-symbol " + (props.className || "")}>
+		<div ref={props.innerRef} className={classes.join(" ")}>
 			<div className="day-circle" style={style}>
 				{props.secondaryColors.slice(0, 3).map((color, index) =>
 					<div key={index} className="secondary-color" style={{ background: color }}></div>

src/components/presentational/NotesInput/NotesInput.css

@@ -0,0 +1,20 @@
+.notes-input {
+    width: 100%;
+    text-align: left;
+    border: 0;
+    font-size: .88em;
+    border: none;
+    font-family: Helvetica, Arial, sans-serif;
+    padding-top: 16px;
+    resize: none;
+    background: var(--mdhui-background-color-2);
+    border-radius: var(--mdhui-card-border-radius);
+    padding: 16px;
+    box-sizing: border-box;
+    border: solid 1px var(--mdhui-color-primary);
+    overflow: hidden;
+    -webkit-appearance: none;
+    box-shadow: none !important;
+    color: var(--mdhui-text-color-1);
+    margin-bottom: 16px;
+}

src/components/presentational/NotesInput/NotesInput.stories.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Layout from "../Layout";
+import NotesInput, { NotesInputProps } from "./NotesInput";
+import Section from "../Section";
+
+export default {
+    title: "Presentational/NotesInput",
+    component: NotesInput,
+    parameters: {
+        layout: 'fullscreen',
+    }
+};
+
+export function Default() {
+    const [notes, setNotes] = useState("");
+
+    return <Layout colorScheme="auto">
+        <Section>
+            <NotesInput placeholder="Add notes" value={notes} onChange={(n) => setNotes(n)} />
+        </Section>
+    </Layout>
+}
+
+export function AutoTimestamp() {
+    const [notes, setNotes] = useState("");
+
+    return <Layout colorScheme="auto">
+        <Section>
+            <NotesInput placeholder="Add notes" autoTimestamp value={notes} onChange={(n) => setNotes(n)} />
+        </Section>
+    </Layout>
+}