Hackathon - Heart Essential 8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@careevolution/mydatahelps-ui",
-  "version": "2.26.0",
+  "version": "2.26.1-HeartEssentialEight.1",
   "description": "MyDataHelps UI Library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/container/HeartEssentialEight/HeartEssentialEight.css

@@ -0,0 +1,107 @@
+
+/* TODO, make the below a new component for users who might want to, e.g, put only the score overview on a dashboard, and then drill into another view for the list */
+
+.mdhui-heart-e8-score-container {
+  padding: var(--mdhui-padding-md);
+}
+.mdhui-heart-e8-score-container .le8-header {
+  margin: 0 0 var(--mdhui-padding-md) 0;
+}
+.mdhui-heart-e8-score-container .score {
+  font-size: 65px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+}
+
+.mdhui-heart-e8-score-container .scoreSubText {
+  font-size: 20px;
+  font-weight: bold;
+  color: rgb(109, 110, 113);
+  display: flex;
+  justify-content: center;
+}
+
+/* TODO: where is this used? */
+
+.mdhui-heart-e8-feedback {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  margin-left: 20px;
+}
+
+/* TODO, make the below a new component for users who might want to, e.g, put only the score overview on a dashboard, and then drill into another view for the list */
+
+.mdhui-heart-e8-achievement-container {
+  padding: var(--mdhui-padding-xs) var(--mdhui-padding-md);
+}
+.mdhui-heart-e8-achievement-container .le8-header {
+  margin: var(--mdhui-padding-sm) 0 var(--mdhui-padding-xs) 0;
+}
+.achievementActionList {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.achievementActionList > div {
+  border-radius: var(--mdhui-card-border-radius);
+  border: 1px solid var(--mdhui-border-color-0);
+  margin-bottom: var(--mdhui-padding-xs);
+}
+
+.circle {
+  /* width: 30px;
+  height: 30px; */
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  -moz-border-radius: 50px;
+  -webkit-border-radius: 50px;
+  border-radius: 50px;
+  overflow: hidden;
+  padding: 4px;
+}
+.circle img {
+  width: 26px;
+  height: 26px;
+}
+.improve {
+  background-color: rgb(234, 140, 28);
+}
+
+.celebrate {
+  background-color: rgb(127, 180, 57);
+}
+
+.activity {
+  background-color: rgb(1, 131, 191);
+}
+
+.bloodPressure {
+  background-color: rgb(102, 88, 166);
+}
+
+.bloodSugar {
+  background-color: rgb(2, 128, 131);
+}
+
+.bmi {
+  background-color: rgb(234, 140, 28);
+}
+
+.cholesterol {
+  background-color: rgb(158, 31, 99);
+}
+
+.diet {
+  background-color: rgb(127, 180, 57);
+}
+
+.nicotine {
+  background-color: rgb(193, 14, 33);
+}
+
+.sleep {
+  background-color: rgb(111, 207, 190);
+}

src/components/container/HeartEssentialEight/HeartEssentialEight.previewdata.tsx

@@ -0,0 +1,10 @@
+export var previewHeartEssentialData: { [key: string]: string } = {
+  Activity: "75",
+  BloodPressure: "100",
+  BloodSugar: "50",
+  BMI: "100",
+  Cholesterol: "100",
+  Diet: "100",
+  Nicotine: "100",
+  Sleep: "80",
+};

src/components/container/HeartEssentialEight/HeartEssentialEight.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Layout from "../../presentational/Layout";
+import HeartEssentialEight, {
+  HeartEssentialEightProps,
+} from "./HeartEssentialEight";
+
+const meta: Meta<typeof HeartEssentialEight> = {
+  title: "Container/HeartEssentialEight",
+  component: HeartEssentialEight,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeartEssentialEight>;
+
+const render = (args: HeartEssentialEightProps) => {
+  return (
+    <Layout colorScheme="auto">
+        <HeartEssentialEight {...args} />
+    </Layout>
+  );
+};
+
+const defaultCustomFieldDictionary = {
+  Activity: "Activity",
+  BloodPressure: "BloodPressure",
+  BloodSugar: "BloodSugar",
+  BMI: "BMI",
+  Cholesterol: "Cholesterol",
+  Diet: "Diet",
+  Nicotine: "Nicotine",
+  Sleep: "Sleep",
+};
+
+export const Default: Story = {
+  args: {
+    previewState: "Default",
+    customFieldDictionary: defaultCustomFieldDictionary,
+  },
+  render: render,
+};
+
+export const NoData: Story = {
+  args: {
+    previewState: "NoData",
+    customFieldDictionary: defaultCustomFieldDictionary,
+  },
+  render: render,
+};
+
+export const Live: Story = {
+  args: {
+    customFieldDictionary: {
+      Activity: "LE8_PA_Score",
+      BloodPressure: "LE8_BP_Score",
+      BloodSugar: "LE8_BloodSugar_Score",
+      BMI: "LE8_BMI_Score",
+      Cholesterol: "LE8_Cholesterol_Score",
+      Diet: "LE8_Diet_Score",
+      Nicotine: "LE8_Nicotine_Score",
+      Sleep: "LE8_Sleep_Score",
+    },
+  },
+  render: render,
+};