Assessment tray component

components/design-system/src/card.stories.ts

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 import { b64images } from '@neighbourhoods/design-system-styles';
 
-import { BasicWidget } from "./assessment-widget.stories";
+import { BasicWidget } from "./widgets/assessment-container.stories";
 import NHButton from './button'
 import NHCard from './card'
 

components/design-system/src/index.ts

@@ -1,5 +1,5 @@
 import NHAlert from './alert'
-import NHAssessmentWidget from './assessment-widget'
+
 import NHButtonGroup from './button-group'
 import NHButton from './button'
 import NHCard from './card'
@@ -14,9 +14,9 @@ import NHTabButton from './tab-button'
 export * from './ancestors/base'
 
 export * from './profile'
+export * from './widgets'
 export {
   NHAlert,
-  NHAssessmentWidget,
   NHButtonGroup,
   NHButton,
   NHCard,

components/design-system/src/post/post-card.ts

@@ -32,14 +32,14 @@ export default class NHPostCard extends NHComponent {
           ${this.textContent !== "" ? html`<p>${this.textContent}</p>` : null}
           <slot name="image"></slot>
         </div>
-        <nh-assessment-widget slot="footer" .name=${kebabCase(this.title)} .iconAlt=${`Assess post: "${this.title}"`} .iconImg=${this.iconImg}></nh-assessment-widget>
+        <nh-assessment-container slot="footer" .name=${kebabCase(this.title)} .iconAlt=${`Assess post: "${this.title}"`} .iconImg=${this.iconImg}></nh-assessment-container>
       </nh-card>
     `;
   }
 
   static get elementDefinitions() {
     return {
-      "nh-assessment-widget": NHAssessmentWidget,
+      "nh-assessment-container": NHAssessmentWidget,
       "nh-card": NHCard,
     };
   }

components/design-system/src/assessment-widget.stories.ts → components/design-system/src/widgets/assessment-container.stories.ts

@@ -1,8 +1,8 @@
 import { b64images } from '@neighbourhoods/design-system-styles';
 import type { Meta, StoryObj } from '@storybook/web-components';
-import NHAssessmentWidget from './assessment-widget';
+import NHAssessmentContainer from './assessment-container';
 
-customElements.define('nh-assessment-widget', NHAssessmentWidget)
+customElements.define('nh-assessment-container', NHAssessmentContainer)
 
 interface AssessmentWidgetProps {
   name: string;
@@ -11,8 +11,8 @@ interface AssessmentWidgetProps {
 }
 
 const meta: Meta<AssessmentWidgetProps> = {
-  title: 'NHComponent/AssessmentWidget',
-  component: 'nh-assessment-widget',
+  title: 'NHComponent/Widgets/AssessmentContainer',
+  component: 'nh-assessment-container',
   argTypes: {
     name: { control: 'text' },
     iconImg: { control: 'text' },

components/design-system/src/assessment-widget.ts → components/design-system/src/widgets/assessment-container.ts

@@ -1,15 +1,14 @@
 import { css, CSSResult, html, PropertyValueMap } from "lit";
 import {property, query, queryAll } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { NHComponentShoelace } from "./ancestors/base";
+import { NHComponentShoelace } from "../ancestors/base";
 
-export default class NHAssessmentWidget extends NHComponentShoelace {
-  @property()
-  name!: string;
+export default class NHAssessmentContainer extends NHComponentShoelace {
   @property()
   iconImg!: string;
   @property()
   iconAlt!: string;
+  @property()
+  assessmentValue!: number;
   @queryAll(".assessment-icon-container")
   _containers!: HTMLElement[];
   @query(".assessment-background")
@@ -45,27 +44,15 @@ export default class NHAssessmentWidget extends NHComponentShoelace {
 
   render() {
     return html`
-      <div class="assessment-widget">
-        <div class="assessment-container">
-          <div
-            class="${classMap({
-              [`${this.name.toLowerCase()}-assessment`]: !!this.name,
-            })}assessment-icon-container"
-          >
-            <div class="assessment-background"></div>
-            <img
-              class="assessment-icon"
-              src=${`data:image/png;base64,${this.iconImg}`}
-              alt=${this.iconAlt}
-            />
-            <div class="assessment-community-counter">255</div>
-          </div>
-        </div>
-        <nav class="assessment-widget-menu">
-          <div class="menu-dot"></div>
-          <div class="menu-dot"></div>
-          <div class="menu-dot"></div>
-        </nav>
+      <div
+        class="assessment-icon-container"
+      >
+        <div class="assessment-background"></div>
+        ${this.iconImg.match(/^\s*data:([a-z]+\/[a-z0-9\-\+]+(;[a-z\-]+\=[a-z0-9\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i) 
+        ? html`<img class="assessment-icon" src=${`data:image/png;base64,${this.iconImg}`} alt=${this.iconAlt} />`
+        : html`<div class="unicode-emoji-container"><span>${this.iconImg}</span></div>`
+        }
+        <div class="assessment-community-counter">${this.assessmentValue}</div>
       </div>
     `;
   }
@@ -85,27 +72,6 @@ export default class NHAssessmentWidget extends NHComponentShoelace {
         --box-shadow-subtle-small: 0px 0px 2px rgba(0, 0, 0, 0.5);
       }
 
-      .assessment-widget-menu {
-        margin: auto 4px;
-        cursor: pointer;
-      }
-
-      .assessment-widget {
-        background-color: var(--nh-theme-bg-surface);
-        padding: 4px;
-        border: 1px solid var(--nh-theme-accent-default);
-        border-radius: var(--border-r-tiny);
-        display: flex;
-        width: min-content;
-        max-width: 100%;
-        overflow: hidden;
-      }
-
-      .assessment-container {
-        height: 40px;
-        display: flex;
-      }
-
       .assessment-community-counter {
         background-color: var(--nh-theme-accent-muted);
         color: var(--nh-theme-fg-default);
@@ -145,6 +111,18 @@ export default class NHAssessmentWidget extends NHComponentShoelace {
       .assessment-icon-container:hover > .assessment-community-counter {
         opacity: 1;
         margin-top: 42px;
+        top: 15px;
+        border-radius: 8px
+      }
+
+      .unicode-emoji-container {
+        display: grid;
+        place-content: center;
+        height: 100%;
+        width: 100%
+      }
+      .unicode-emoji-container span {
+        font-size: 1.5rem;
       }
 
       .assessment-background {
@@ -182,14 +160,6 @@ export default class NHAssessmentWidget extends NHComponentShoelace {
         position: absolute;
         filter: drop-shadow(var(--box-shadow-subtle-small));
       }
-
-      .menu-dot {
-        width: 5px;
-        height: 5px;
-        margin: 4px;
-        border-radius: var(--border-r-tiny);
-        background-color: var(--nh-theme-accent-default);
-      }
     `,
   ];
 }

components/design-system/src/widgets/create-assessment-widget.ts

@@ -0,0 +1,32 @@
+import { LitElement, TemplateResult } from "lit"
+import { property } from "lit/decorators.js";
+import { EntryHash } from "@holochain/client"
+import { Assessment, CreateAssessmentInput } from "@neighbourhoods/client";
+
+
+const SensemakerEvents = {
+  CREATE_ASSESSMENT: 'create-assessment',
+}
+
+export abstract class CreateAssessmentWidget extends LitElement {
+  @property()
+  resourceEh!: EntryHash
+
+  @property()
+  resourceDefEh!: EntryHash
+
+  @property()
+  dimensionEh!: EntryHash
+
+  @property()
+  latestAssessment: Assessment | undefined
+
+  dispatchCreateAssessment(assessmentInput: CreateAssessmentInput) {
+    this.dispatchEvent(new CustomEvent(SensemakerEvents.CREATE_ASSESSMENT, {
+      detail: assessmentInput,
+      bubbles: true,
+      composed: true,
+    }))
+  }
+  abstract render(): TemplateResult;
+}

components/design-system/src/widgets/display-assessment-widget.ts

@@ -0,0 +1,11 @@
+import { LitElement, TemplateResult } from "lit"
+import { property } from "lit/decorators.js";
+import { Assessment } from "@neighbourhoods/client";
+
+
+export abstract class DisplayAssessmentWidget extends LitElement {
+  @property()
+  assessment: Assessment | undefined
+
+  abstract render(): TemplateResult;
+}

components/design-system/src/widgets/index.ts

@@ -0,0 +1,7 @@
+import NHResourceAssessmentTray from './resource-assessment-tray';
+import NHAssessmentContainer from './assessment-container';
+
+export {
+  NHResourceAssessmentTray,
+  NHAssessmentContainer
+}