feat: add alert to tab buttons (#95)

* feat; add alert to tab buttons * tests: fix tab button test
ForkbombEu · Jun 12, 2024 · 81af665 · 81af665
1 parent bd88a1f
commit 81af665
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 45 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -92,6 +92,7 @@ export namespace Components {
     }
     interface DTabButton {
         "active": boolean;
+        "hasAlert": boolean;
         "tab": 'home' | 'profile' | 'activity' | 'wallet';
     }
     interface DText {
@@ -361,6 +362,7 @@ declare namespace LocalJSX {
     }
     interface DTabButton {
         "active"?: boolean;
+        "hasAlert"?: boolean;
         "tab"?: 'home' | 'profile' | 'activity' | 'wallet';
     }
     interface DText {

diff --git a/src/components/info-led/readme.md b/src/components/info-led/readme.md
@@ -12,6 +12,19 @@
 | `type`   | `type`    |             | `"error" \| "success" \| "warning"` | `'success'` |
 
 
+## Dependencies
+
+### Used by
+
+ - [d-tab-button](../tab-button)
+
+### Graph
+```mermaid
+graph TD;
+  d-tab-button --> d-info-led
+  style d-info-led fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/tab-button/d-tab-button.tsx b/src/components/tab-button/d-tab-button.tsx
@@ -8,6 +8,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
 export class DTabButton {
   @Prop() tab: 'home' | 'profile' | 'activity' | 'wallet';
   @Prop() active: boolean = false;
+  @Prop() hasAlert: boolean = false;
 
   render() {
     const homeSvg = (
@@ -118,40 +119,37 @@ export class DTabButton {
     );
 
     const activitySvg = (
-      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M16.3335 19.8337V21.0003C16.3335 22.289 15.2888 23.3337 14.0002 23.3337C12.7115 23.3337 11.6668 22.289 11.6668 21.0003V19.8337M14.0002 4.66699C17.2218 4.66699 19.8335 7.27866 19.8335 10.5003V16.3337H20.4168C21.3833 16.3337 22.1668 17.1172 22.1668 18.0837C22.1668 19.0502 21.3833 19.8337 20.4168 19.8337H7.5835C6.617 19.8337 5.8335 19.0502 5.8335 18.0837C5.8335 17.1172 6.617 16.3337 7.5835 16.3337H8.16683V10.5003C8.16683 7.27866 10.7785 4.66699 14.0002 4.66699Z"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M19.2502 11.0003C21.1371 11.0003 22.6668 9.47063 22.6668 7.58366C22.6668 5.69669 21.1371 4.16699 19.2502 4.16699C17.3632 4.16699 15.8335 5.69669 15.8335 7.58366C15.8335 9.47063 17.3632 11.0003 19.2502 11.0003Z"
-          fill="#FF9601"
-          stroke="currentColor"
-        />
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="Icon / outline / notification">
+          <path
+            id="union-1"
+            d="M14 17V18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18V17M12 4C14.7614 4 17 6.23858 17 9V14H17.5C18.3284 14 19 14.6716 19 15.5C19 16.3284 18.3284 17 17.5 17H6.5C5.67157 17 5 16.3284 5 15.5C5 14.6716 5.67157 14 6.5 14H7V9C7 6.23858 9.23858 4 12 4Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
       </svg>
     );
 
     const activitySvgFilled = (
-      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M8.16683 10.5003V16.3337H7.5835C6.617 16.3337 5.8335 17.1172 5.8335 18.0837C5.8335 19.0502 6.617 19.8337 7.5835 19.8337H20.4168C21.3833 19.8337 22.1668 19.0502 22.1668 18.0837C22.1668 17.1172 21.3833 16.3337 20.4168 16.3337H19.8335V10.5003C19.8335 7.27866 17.2218 4.66699 14.0002 4.66699C10.7785 4.66699 8.16683 7.27866 8.16683 10.5003Z"
-          fill="currentColor"
-        />
-        <path
-          d="M16.3335 19.8337V21.0003C16.3335 22.289 15.2888 23.3337 14.0002 23.3337C12.7115 23.3337 11.6668 22.289 11.6668 21.0003V19.8337M14.0002 4.66699C17.2218 4.66699 19.8335 7.27866 19.8335 10.5003V16.3337H20.4168C21.3833 16.3337 22.1668 17.1172 22.1668 18.0837C22.1668 19.0502 21.3833 19.8337 20.4168 19.8337H7.5835C6.617 19.8337 5.8335 19.0502 5.8335 18.0837C5.8335 17.1172 6.617 16.3337 7.5835 16.3337H8.16683V10.5003C8.16683 7.27866 10.7785 4.66699 14.0002 4.66699Z"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M19.2502 11.0003C21.1371 11.0003 22.6668 9.47063 22.6668 7.58366C22.6668 5.69669 21.1371 4.16699 19.2502 4.16699C17.3632 4.16699 15.8335 5.69669 15.8335 7.58366C15.8335 9.47063 17.3632 11.0003 19.2502 11.0003Z"
-          fill="#FF9601"
-          stroke="currentColor"
-        />
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="Icon / fill / notification">
+          <g id="union-1">
+            <path
+              d="M7 9V14H6.5C5.67157 14 5 14.6716 5 15.5C5 16.3284 5.67157 17 6.5 17H17.5C18.3284 17 19 16.3284 19 15.5C19 14.6716 18.3284 14 17.5 14H17V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9Z"
+              fill="currentColor"
+            />
+            <path
+              d="M14 17V18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18V17M12 4C14.7614 4 17 6.23858 17 9V14H17.5C18.3284 14 19 14.6716 19 15.5C19 16.3284 18.3284 17 17.5 17H6.5C5.67157 17 5 16.3284 5 15.5C5 14.6716 5.67157 14 6.5 14H7V9C7 6.23858 9.23858 4 12 4Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </g>
+        </g>
       </svg>
     );
 
@@ -178,12 +176,16 @@ export class DTabButton {
             'text-on': this.active,
           }}
         >
-          {svg()}
+          <div class="relative w-fit">
+            {this.hasAlert && (
+              <div class="absolute right-1 top-1">
+                <d-info-led type="warning" class={{ 'border rounded-full': true }}></d-info-led>
+              </div>
+            )}
+            {svg()}
+          </div>
           <ion-label>
-            <d-text
-              size="s"
-              class={{ 'text-center text-xs font-medium leading-[normal] capitalize': true, 'text-on-alt': !this.active, 'text-on': this.active }}
-            >
+            <d-text size="s" class={{ 'text-center text-xs font-medium leading-[normal] capitalize': true, 'text-on-alt': !this.active, 'text-on': this.active }}>
               <slot></slot>
             </d-text>
           </ion-label>

diff --git a/src/components/tab-button/readme.md b/src/components/tab-button/readme.md
@@ -7,24 +7,27 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                            | Default     |
-| -------- | --------- | ----------- | ----------------------------------------------- | ----------- |
-| `active` | `active`  |             | `boolean`                                       | `false`     |
-| `tab`    | `tab`     |             | `"activity" \| "home" \| "profile" \| "wallet"` | `undefined` |
+| Property   | Attribute   | Description | Type                                            | Default     |
+| ---------- | ----------- | ----------- | ----------------------------------------------- | ----------- |
+| `active`   | `active`    |             | `boolean`                                       | `false`     |
+| `hasAlert` | `has-alert` |             | `boolean`                                       | `false`     |
+| `tab`      | `tab`       |             | `"activity" \| "home" \| "profile" \| "wallet"` | `undefined` |
 
 
 ## Dependencies
 
 ### Depends on
 
 - ion-tab-button
+- [d-info-led](../info-led)
 - ion-label
 - [d-text](../text)
 
 ### Graph
 ```mermaid
 graph TD;
   d-tab-button --> ion-tab-button
+  d-tab-button --> d-info-led
   d-tab-button --> ion-label
   d-tab-button --> d-text
   ion-tab-button --> ion-ripple-effect

diff --git a/src/components/tab-button/tab-button.stories.ts b/src/components/tab-button/tab-button.stories.ts
@@ -6,7 +6,9 @@ const meta = {
   render: args =>
     `<d-tab-button 
     tab="${args.tab}"
-    active="${args.active}">
+    active="${args.active}"
+    ${args.hasAlert ? 'has-alert' : ''}
+    >
     ${args.tab}
     </d-tab-button>`,
 } satisfies Meta<DTabButton>;
@@ -34,6 +36,20 @@ export const HomeActive: Story = {
   },
 };
 
+export const HomeWithAlert: Story = {
+  args: {
+    ...Home.args,
+    hasAlert: true,
+  },
+};
+
+export const HomeActiveWithAlert: Story = {
+  args: {
+    ...HomeWithAlert.args,
+    active: true,
+  },
+};
+
 export const Wallet: Story = {
   args: {
     tab: 'wallet',
@@ -48,6 +64,20 @@ export const WalletActive: Story = {
   },
 };
 
+export const WalletWithAlert: Story = {
+  args: {
+    ...Wallet.args,
+    hasAlert: true,
+  },
+};
+
+export const WalletActiveWithAlert: Story = {
+  args: {
+    ...WalletWithAlert.args,
+    active: true,
+  },
+};
+
 export const Profile: Story = {
   args: {
     tab: 'profile',
@@ -62,6 +92,20 @@ export const ProfileActive: Story = {
   },
 };
 
+export const ProfileWithAlert: Story = {
+  args: {
+    ...Profile.args,
+    hasAlert: true,
+  },
+};
+
+export const ProfileActiveWithAlert: Story = {
+  args: {
+    ...ProfileWithAlert.args,
+    active: true,
+  },
+};
+
 export const Activity: Story = {
   args: {
     tab: 'activity',
@@ -74,4 +118,18 @@ export const ActivityActive: Story = {
     ...Activity.args,
     active: true,
   },
+};
+
+export const ActivityWithAlert: Story = {
+  args: {
+    ...Activity.args,
+    hasAlert: true,
+  },
+};
+
+export const ActivityActiveWithAlert: Story = {
+  args: {
+    ...ActivityWithAlert.args,
+    active: true,
+  },
 };
diff --git a/src/components/tab-button/test/d-tab-button.spec.tsx b/src/components/tab-button/test/d-tab-button.spec.tsx
@@ -11,11 +11,13 @@ describe('d-tab-button', () => {
       <d-tab-button tab="home">
        <mock:shadow-root>
          <ion-tab-button class="text-on-alt" href="/home" tab="home">
-           <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
-             <g id="Icon / outline / home">
-               <path d="M14 4.25C14.35 4.25 14.6875 4.35916 14.9618 4.55665L23.1284 10.4366C23.3249 10.5781 23.4816 10.7595 23.5885 10.9647L24.2537 10.6182L23.5885 10.9647C23.6952 11.1697 23.75 11.3939 23.75 11.62V22.26C23.75 22.6451 23.5909 23.0209 23.2972 23.3029C23.0024 23.5859 22.5962 23.75 22.1667 23.75H17.6167C17.4656 23.75 17.3265 23.6921 17.2286 23.5981C17.1318 23.5051 17.0833 23.3857 17.0833 23.268V17.78C17.0833 16.9769 16.7507 16.2132 16.1693 15.655C15.5889 15.0979 14.8081 14.79 14 14.79C13.1919 14.79 12.4111 15.0979 11.8307 15.655C11.2493 16.2132 10.9167 16.9769 10.9167 17.78V23.268C10.9167 23.3857 10.8682 23.5051 10.7714 23.5981C10.6735 23.6921 10.5344 23.75 10.3833 23.75H5.83333C5.40375 23.75 4.99762 23.5859 4.70282 23.3029C4.40906 23.0209 4.25 22.6451 4.25 22.26V11.62C4.25 11.3939 4.30475 11.1697 4.41152 10.9647C4.51838 10.7595 4.67507 10.5781 4.87156 10.4367L4.43333 9.828L4.87156 10.4367L13.0382 4.55665C13.3125 4.35916 13.65 4.25 14 4.25Z" id="Vector" stroke="currentColor" stroke-width="1.5"></path>
-             </g>
-           </svg>
+           <div class="relative w-fit">
+              <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
+                <g id="Icon / outline / home">
+                  <path d="M14 4.25C14.35 4.25 14.6875 4.35916 14.9618 4.55665L23.1284 10.4366C23.3249 10.5781 23.4816 10.7595 23.5885 10.9647L24.2537 10.6182L23.5885 10.9647C23.6952 11.1697 23.75 11.3939 23.75 11.62V22.26C23.75 22.6451 23.5909 23.0209 23.2972 23.3029C23.0024 23.5859 22.5962 23.75 22.1667 23.75H17.6167C17.4656 23.75 17.3265 23.6921 17.2286 23.5981C17.1318 23.5051 17.0833 23.3857 17.0833 23.268V17.78C17.0833 16.9769 16.7507 16.2132 16.1693 15.655C15.5889 15.0979 14.8081 14.79 14 14.79C13.1919 14.79 12.4111 15.0979 11.8307 15.655C11.2493 16.2132 10.9167 16.9769 10.9167 17.78V23.268C10.9167 23.3857 10.8682 23.5051 10.7714 23.5981C10.6735 23.6921 10.5344 23.75 10.3833 23.75H5.83333C5.40375 23.75 4.99762 23.5859 4.70282 23.3029C4.40906 23.0209 4.25 22.6451 4.25 22.26V11.62C4.25 11.3939 4.30475 11.1697 4.41152 10.9647C4.51838 10.7595 4.67507 10.5781 4.87156 10.4367L4.43333 9.828L4.87156 10.4367L13.0382 4.55665C13.3125 4.35916 13.65 4.25 14 4.25Z" id="Vector" stroke="currentColor" stroke-width="1.5"></path>
+                </g>
+              </svg>
+            </div>
            <ion-label>
              <d-text class="capitalize font-medium leading-[normal] text-center text-on-alt text-xs" size="s">
                <slot></slot>