Skip to content

Commit

Permalink
Add ProjectStatusIcon component with color icons (#484)
Browse files Browse the repository at this point in the history
* Add color to Project status icons

* Update index.hbs

* Remove Badge dropdown list

* Revert "Remove Badge dropdown list"

This reverts commit 75804b5.

* Fix merge errors

* Revert change

* Update status-icon.gts

* Apply icon in other places
  • Loading branch information
jeffdaley authored Dec 21, 2023
1 parent b6d0702 commit a4ec9f1
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 14 deletions.
5 changes: 1 addition & 4 deletions web/app/components/document/sidebar.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -254,10 +254,7 @@
<div
class="flex w-[18px] shrink-0 justify-center py-[2px]"
>
<FlightIcon
@name={{get-project-status-icon project.status}}
/>

<Project::StatusIcon @status={{project.status}} />
</div>
<div class="overflow-hidden">
<TruncatedText
Expand Down
13 changes: 5 additions & 8 deletions web/app/components/project/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,8 @@
class="hds-button hds-button--size-medium hds-button--color-secondary rounded-r-full rounded-l-full border-color-border-strong"
@hasChevron={{true}}
>
<FlightIcon
@name={{get-project-status-icon dd.selected}}
class="-mr-1"
/>
<span class="status ml-2">
<Project::StatusIcon @status={{dd.selected}} />
<span class="ml-1 mr-0.5">
{{this.statusLabel}}
</span>
</dd.ToggleAction>
Expand All @@ -46,9 +43,9 @@
class=""
>
<:default>
<div class="flex items-center gap-2 pl-1">
<FlightIcon @name={{get-project-status-icon dd.value}} />
<span class="status">
<div class="flex items-center gap-2 pl-1.5">
<Project::StatusIcon @status={{dd.value}} />
<span>
{{dd.attrs.label}}
</span>
</div>
Expand Down
93 changes: 93 additions & 0 deletions web/app/components/project/status-icon.gts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import Component from "@glimmer/component";
import { ProjectStatus } from "hermes/types/project-status";

interface ProjectStatusIconComponentSignature {
Element: SVGElement;
Args: {
status: `${ProjectStatus}`;
};
Blocks: {
default: [];
};
}

export default class ProjectStatusIconComponent extends Component<ProjectStatusIconComponentSignature> {
protected get isActive(): boolean {
return this.args.status === ProjectStatus.Active;
}

protected get isCompleted(): boolean {
return this.args.status === ProjectStatus.Completed;
}

protected get isArchived(): boolean {
return this.args.status === ProjectStatus.Archived;
}

<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-test-project-status-icon
data-test-status={{this.args.status}}
...attributes
>
{{#if this.isActive}}
<path
d="M9.3747 0.078024C9.67891 0.228777 9.8439 0.565087 9.77695 0.897934L8.88834 5.31559L14.3726 6.22441C14.6414 6.26896 14.865 6.45581 14.9565 6.71247C15.048 6.96914 14.9931 7.25524 14.813 7.4598L7.52137 15.7455C7.29708 16.0004 6.92954 16.0728 6.62533 15.922C6.32112 15.7713 6.15612 15.435 6.22307 15.1021L7.11168 10.6845L1.6274 9.77566C1.35858 9.73111 1.13506 9.54426 1.04356 9.2876C0.952061 9.03093 1.00697 8.74483 1.18699 8.54027L8.47865 0.254555C8.70295 -0.000319332 9.07049 -0.0727287 9.3747 0.078024Z"
fill="var(--token-color-palette-amber-100)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.3747 0.078024C9.67891 0.228777 9.8439 0.565087 9.77695 0.897934L8.88834 5.31559L14.3726 6.22441C14.6414 6.26896 14.865 6.45581 14.9565 6.71247C15.048 6.96914 14.9931 7.25524 14.813 7.4598L7.52137 15.7455C7.29708 16.0004 6.92954 16.0728 6.62533 15.922C6.32112 15.7713 6.15612 15.435 6.22307 15.1021L7.11168 10.6845L1.6274 9.77566C1.35858 9.73111 1.13506 9.54426 1.04356 9.2876C0.952061 9.03093 1.00697 8.74483 1.18699 8.54027L8.47865 0.254555C8.70295 -0.000319332 9.07049 -0.0727287 9.3747 0.078024ZM3.2058 8.51676L8.12263 9.33155C8.32326 9.3648 8.50179 9.4781 8.6173 9.64549C8.73281 9.81287 8.77539 10.02 8.73529 10.2194L8.24606 12.6515L12.7942 7.4833L7.8774 6.66852C7.67676 6.63527 7.49823 6.52197 7.38273 6.35458C7.26722 6.1872 7.22464 5.98008 7.26474 5.78071L7.75396 3.34856L3.2058 8.51676Z"
{{! approx amber-200/70 }}
fill="#C1834D"
/>
{{else if this.isCompleted}}
<path
d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0Z"
fill="var(--token-color-palette-green-50)"
/>
<path
d="M11.7803 5.21967C12.0732 5.51256 12.0732 5.98744 11.7803 6.28033L7.28033 10.7803C6.98744 11.0732 6.51256 11.0732 6.21967 10.7803L4.21967 8.78033C3.92678 8.48744 3.92678 8.01256 4.21967 7.71967C4.51256 7.42678 4.98744 7.42678 5.28033 7.71967L6.75 9.18934L10.7197 5.21967C11.0126 4.92678 11.4874 4.92678 11.7803 5.21967Z"
{{! approx green-400/70 }}
fill="#608D5F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5Z"
{{! approx green-400/70 }}
fill="#608D5F"
/>
{{else if this.isArchived}}
<path
d="M0 2.75C0 1.7835 0.783502 1 1.75 1H14.25C15.2165 1 16 1.7835 16 2.75V4.25C16 4.9481 15.5912 5.55073 15 5.83159V12.75C15 13.9926 13.9926 15 12.75 15H3.25C2.00736 15 1 13.9926 1 12.75V5.83159C0.408763 5.55073 0 4.9481 0 4.25V2.75Z"
fill="var(--token-color-palette-neutral-100)"
/>
<path
d="M6.75 8C6.33579 8 6 8.33579 6 8.75C6 9.16421 6.33579 9.5 6.75 9.5H9.25C9.66421 9.5 10 9.16421 10 8.75C10 8.33579 9.66421 8 9.25 8H6.75Z"
{{! approx neutral-500/70 }}
fill="#8B8F97"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 2.75C0 1.7835 0.783502 1 1.75 1H14.25C15.2165 1 16 1.7835 16 2.75V4.25C16 4.9481 15.5912 5.55073 15 5.83159V12.75C15 13.9926 13.9926 15 12.75 15H3.25C2.00736 15 1 13.9926 1 12.75V5.83159C0.408763 5.55073 0 4.9481 0 4.25V2.75ZM13.5 12.75V6H2.5V12.75C2.5 13.1642 2.83579 13.5 3.25 13.5H12.75C13.1642 13.5 13.5 13.1642 13.5 12.75ZM14.5 4.25C14.5 4.38807 14.3881 4.5 14.25 4.5H1.75C1.61193 4.5 1.5 4.38807 1.5 4.25V2.75C1.5 2.61193 1.61193 2.5 1.75 2.5H14.25C14.3881 2.5 14.5 2.61193 14.5 2.75V4.25Z"
{{! approx neutral-500/70 }}
fill="#8B8F97"
/>
{{/if}}
</svg>
</template>
}

declare module "@glint/environment-ember-loose/registry" {
export default interface Registry {
"Project::StatusIcon": typeof ProjectStatusIconComponent;
}
}
2 changes: 1 addition & 1 deletion web/app/components/projects/add-to-or-create.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<:item as |dd|>
<dd.Action data-test-project-option class="block py-[6.5px]">
<div class="flex w-full items-center gap-3.5">
<FlightIcon @name={{get-project-status-icon dd.attrs.status}} />
<Project::StatusIcon @status={{dd.attrs.status}} />
<div class="flex w-full items-center overflow-hidden">
<div class="flex w-full justify-between">
<div
Expand Down
6 changes: 5 additions & 1 deletion web/app/components/projects/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
@query={{hash status=status.value}}
class="hds-button hds-button--color-secondary"
>
<FlightIcon @name={{get-project-status-icon status.value}} class="mr-1" />
{{#if (eq status.value @status)}}
<FlightIcon @name={{get-project-status-icon status.value}} />
{{else}}
<Project::StatusIcon @status={{status.value}} />
{{/if}}
{{status.label}}
</LinkTo>
{{/each}}
Expand Down
33 changes: 33 additions & 0 deletions web/tests/integration/components/project/status-icon-test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { TestContext, render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import { setupRenderingTest } from "ember-qunit";
import { ProjectStatus } from "hermes/types/project-status";
import { module, test } from "qunit";

const ICON = "[data-test-project-status-icon]";

interface Context extends TestContext {
status: `${ProjectStatus}`;
}

module("Integration | Component | project/status-icon", function (hooks) {
setupRenderingTest(hooks);

test("it renders the correct icon based on status", async function (assert) {
this.set("status", ProjectStatus.Active);

await render<Context>(hbs`
<Project::StatusIcon @status={{this.status}} />
`);

assert.dom(ICON).hasAttribute("data-test-status", ProjectStatus.Active);

this.set("status", ProjectStatus.Completed);

assert.dom(ICON).hasAttribute("data-test-status", ProjectStatus.Completed);

this.set("status", ProjectStatus.Archived);

assert.dom(ICON).hasAttribute("data-test-status", ProjectStatus.Archived);
});
});

0 comments on commit a4ec9f1

Please sign in to comment.