1  <script lang="ts">
  2      import type { AccessibilityFeatures } from '@jet-app/app-store/api/models';
  3  
  4      import SystemImage, {
  5          isSystemImageArtwork,
  6      } from '~/components/SystemImage.svelte';
  7  
  8      export let item: AccessibilityFeatures;
  9      export let isDetailView: boolean = false;
 10  </script>
 11  
 12  <article
 13      class:is-detail-view={isDetailView}
 14      role={isDetailView ? 'presentation' : 'article'}
 15  >
 16      {#if !isDetailView}
 17          {#if item.artwork && isSystemImageArtwork(item.artwork)}
 18              <span class="icon-container" aria-hidden="true">
 19                  <SystemImage artwork={item.artwork} />
 20              </span>
 21          {/if}
 22          <h2>{item.title}</h2>
 23      {/if}
 24  
 25      <ul class:grid={item.features.length > 1 && !isDetailView}>
 26          {#each item.features as feature}
 27              <li>
 28                  {#if isSystemImageArtwork(feature.artwork)}
 29                      <span class="feature-icon-container" aria-hidden="true">
 30                          <SystemImage artwork={feature.artwork} />
 31                      </span>
 32                  {/if}
 33                  <div class="feature-content">
 34                      <h3 class="feature-title">{feature.title}</h3>
 35                      {#if feature.description}
 36                          <span class="feature-description">
 37                              {feature.description}
 38                          </span>
 39                      {/if}
 40                  </div>
 41              </li>
 42          {/each}
 43      </ul>
 44  </article>
 45  
 46  <style lang="scss">
 47      @use 'amp/stylekit/core/border-radiuses' as *;
 48      @use '@amp/web-shared-styles/app/core/globalvars' as *;
 49  
 50      article {
 51          display: flex;
 52          flex-direction: column;
 53          height: 100%;
 54          padding: 30px;
 55          gap: 8px;
 56          text-align: center;
 57          font: var(--body-tall);
 58          border-radius: $global-border-radius-rounded-large;
 59          background-color: var(--systemQuinary);
 60  
 61          &.is-detail-view {
 62              padding: 0;
 63              text-align: start;
 64              background-color: transparent;
 65          }
 66      }
 67  
 68      .icon-container {
 69          width: 30px;
 70          margin: 0 auto;
 71      }
 72  
 73      .icon-container :global(svg) {
 74          width: 100%;
 75          fill: var(--keyColor);
 76      }
 77  
 78      h2 {
 79          font: var(--title-3-emphasized);
 80          margin-bottom: 8px;
 81      }
 82  
 83      ul {
 84          display: flex;
 85          flex-direction: column;
 86          gap: 25px;
 87      }
 88  
 89      ul.grid {
 90          display: grid;
 91          grid-template-columns: 1fr 1fr;
 92          gap: 10px;
 93      }
 94  
 95      li {
 96          display: flex;
 97          align-items: center;
 98          justify-content: center;
 99          text-align: start;
100          padding: 4px 0;
101          gap: 8px;
102  
103          .is-detail-view & {
104              gap: 10px;
105              justify-content: start;
106              align-items: flex-start;
107          }
108      }
109  
110      .grid li {
111          justify-content: start;
112      }
113  
114      .feature-icon-container {
115          display: inline-flex;
116  
117          @media (prefers-color-scheme: dark) {
118              filter: invert(1);
119          }
120  
121          .is-detail-view & {
122              display: flex;
123              align-items: center;
124  
125              @media (prefers-color-scheme: dark) {
126                  filter: none;
127              }
128          }
129      }
130  
131      .feature-icon-container :global(svg) {
132          width: 20px;
133  
134          .is-detail-view & {
135              width: 30px;
136              fill: var(--keyColor);
137          }
138      }
139  
140      .feature-content {
141          display: flex;
142          flex-direction: column;
143          gap: 6px;
144      }
145  
146      .feature-title {
147          font: var(--body-tall);
148  
149          .is-detail-view & {
150              color: var(--systemPrimary);
151              font: var(--title-2-emphasized);
152          }
153      }
154  
155      .feature-description {
156          color: var(--systemSecondary);
157          font: var(--body);
158      }
159  </style>