feat(image-box): selected style

Alwatr · Feb 9, 2023 · c092e2d · c092e2d
1 parent 5469dbb
commit c092e2d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 25 deletions.
diff --git a/ui/ui-kit/src/card/image-box.ts b/ui/ui-kit/src/card/image-box.ts
@@ -46,13 +46,10 @@ export class AlwatrImageBox extends AlwatrSurface {
         line-height: var(--sys-typescale-body-small-line-height);
         user-select: none;
         -webkit-user-select: none;
-      }
-
-      :host([highlight]) {
         cursor: pointer;
       }
 
-      :host([highlight]:hover) {
+      :host([selected]) {
         --_surface-color-on: var(--sys-color-on-primary-hsl);
         --_surface-color-bg: var(--sys-color-primary-hsl);
       }
@@ -88,6 +85,7 @@ export class AlwatrImageBox extends AlwatrSurface {
         position: absolute;
         font-size: var(--sys-typescale-headline-small-font-size);
         padding: var(--sys-spacing-track);
+        filter: drop-shadow(var(--sys-surface-elevation-1));
       }
 
       :host([selected]) .checkmark-icon {
@@ -139,16 +137,10 @@ export class AlwatrImageBox extends AlwatrSurface {
 
     if (this.selected) {
       this.setAttribute('selected', '');
-      this.setAttribute('outlined', '');
-      this.removeAttribute('highlight');
-      this.removeAttribute('elevated');
       navigator.vibrate(30);
     }
     else {
       this.removeAttribute('selected');
-      this.setAttribute('highlight', '');
-      this.removeAttribute('outlined');
-      this.setAttribute('elevated', '2');
       navigator.vibrate(10);
     }
   }
@@ -160,7 +152,7 @@ export class AlwatrImageBox extends AlwatrSurface {
     const target = content.target !== 'download' ? content.target : undefined;
 
     const template = html`
-      <alwatr-icon class="checkmark-icon" name="checkmark-circle-sharp"></alwatr-icon>
+      <alwatr-icon class="checkmark-icon" .name=${'checkmark-circle-sharp'}></alwatr-icon>
       <img class="image" src=${content.image} />
       <div class="content-container">
         <h3 class="headline">${content.headline}</h3>

diff --git a/uniquely/soffit-pwa/src/content/product-page-en.ts b/uniquely/soffit-pwa/src/content/product-page-en.ts
@@ -18,55 +18,48 @@ export const productPageContent: ProductPageContent = {
       image: 'https://fastly.picsum.photos/id/613/512/512.jpg?hmac=yKvmC3Ve1L2xmNgH_NWheg4DNQXism0Z-YsnmB8AZ44',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product two',
       image: 'https://fastly.picsum.photos/id/620/512/512.jpg?hmac=ekpaYlTuleE5YkU1OnrIUyF4-yoKGm0kLAQfp0oY_sk',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product three',
       image: 'https://fastly.picsum.photos/id/618/512/512.jpg?hmac=lthx2JjBF4AqPZbgi0PuOU2v_eHo7ALt799GafmnYiA',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product four',
       image: 'https://fastly.picsum.photos/id/43/512/512.jpg?hmac=moVeP1k_ZavV4XjR4Ru_eVMqxEuLn73WQ2CTt0in6Kg',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product five',
       image: 'https://fastly.picsum.photos/id/223/512/512.jpg?hmac=N-KoUSx0MTedR6SUj6JmSKo_0bdqcSlbEGD4uFJYoBI',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product six',
       image: 'https://fastly.picsum.photos/id/234/512/512.jpg?hmac=pCHWOiGeJGGls9rJpS8unQo9pVMFT_d3yUWOd6ztM3A',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'Product seven',
       image: 'https://fastly.picsum.photos/id/249/512/512.jpg?hmac=XIOoZNY2gpWkJlc6jRalcCms4CKAr6fPVSveeFttxaY',
       description: 'The description text of a product from the Soffit brand',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
   ],

diff --git a/uniquely/soffit-pwa/src/content/product-page-fa.ts b/uniquely/soffit-pwa/src/content/product-page-fa.ts
@@ -18,55 +18,48 @@ export const productPageContent: ProductPageContent = {
       image: 'https://fastly.picsum.photos/id/613/512/512.jpg?hmac=yKvmC3Ve1L2xmNgH_NWheg4DNQXism0Z-YsnmB8AZ44',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره دو',
       image: 'https://fastly.picsum.photos/id/620/512/512.jpg?hmac=ekpaYlTuleE5YkU1OnrIUyF4-yoKGm0kLAQfp0oY_sk',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره سه',
       image: 'https://fastly.picsum.photos/id/618/512/512.jpg?hmac=lthx2JjBF4AqPZbgi0PuOU2v_eHo7ALt799GafmnYiA',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره چهار',
       image: 'https://fastly.picsum.photos/id/43/512/512.jpg?hmac=moVeP1k_ZavV4XjR4Ru_eVMqxEuLn73WQ2CTt0in6Kg',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره پنج',
       image: 'https://fastly.picsum.photos/id/223/512/512.jpg?hmac=N-KoUSx0MTedR6SUj6JmSKo_0bdqcSlbEGD4uFJYoBI',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره شش',
       image: 'https://fastly.picsum.photos/id/234/512/512.jpg?hmac=pCHWOiGeJGGls9rJpS8unQo9pVMFT_d3yUWOd6ztM3A',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
     {
       headline: 'محصول شماره هفت',
       image: 'https://fastly.picsum.photos/id/249/512/512.jpg?hmac=XIOoZNY2gpWkJlc6jRalcCms4CKAr6fPVSveeFttxaY',
       description: 'متن توضیحات یک محصول از برند سافیت',
       elevated: 2,
-      highlight: true,
       stated: true,
     },
   ],