## Adeptmind Requirements:

- Introduce new flags (see list below) based on Shopify admin product tags

- Update the flag redesign (see HTML/CSS below)

- Increase the size of the image to capitalize on the freed real estate

- Only show 1 flag on a tile, even if the product has multiple tags. (see order below)

- Move the grey line divider below the tile rather than in between image and brand/title when the products tiles are within a grid

## Flags Priority and Order

Should a product have multiple flags, prioritize flag appearance as follow (1 flag only shows on tiles)

1. Sale (this one exists if the product has a cross price)

2. Best Seller

3. Eco-Friendly

4. New

5. Staff Pick

6. In The News

7. Innovation

Products with the following tags in the Shopify admin, will display the above flags

- Best_Seller

- Eco_Friendly

- New

- Staff_Pick

- In_The_News

- Innovation

## Screenshots

Include the grey line moved to the bottom of the tile.

Sale (this one exists if the product has a cross price)

Best Seller

Eco-Friendly

New

Staff Pick

In The News

Innovation

## Product flag HTML

Before

<div>
  <!-- 
    "New Release" flag
  -->
  <span class="de-ProductFlag de-u-textMedium de-u-bgBlue de-u-textWhite">
    <span class="de-u-hiddenVisually">Special product, </span>New Release
  </span>

  <!-- 
    "Sale" flag
  -->
  <span class="de-ProductFlag de-u-textMedium de-u-bgRed de-u-textWhite">
    <span class="de-u-hiddenVisually">Special product, </span>Sale
  </span>

  <!-- 
    "Innovation" flag
  -->
  <span class="de-ProductFlag de-u-textMedium de-u-bgLime de-u-textBlack">
    <span class="de-u-hiddenVisually">Special product, </span>Innovation
  </span>
</div>

After

Overall changes

<div>/<span> changed to <ul>/<li>

Container changes

Added a `de-ProductTile-flagContainer` CSS class to the container to position the flags

Also added the following utility classes to the container:

- `de-u-listReset`

- `de-u-spaceNone`

- `de-u-textShrink1`

- `de-u-md-textGrow`

Flag changes

New `de-ProductFlag--*` modifiers

`de-u-textMedium changed` to `de-u-textSemibold`

Added `de-u-textShrink1`

Removed background and text color CSS utility classes

Simplified visually hidden text (for more inclusive UX)

<ul class="de-ProductTile-flagContainer de-u-listReset de-u-spaceNone de-u-textShrink1 de-u-md-textGrow">
  <!-- 
    "Primary" flag style (previously "New Release" flag style)
     - white background, blue text, blue border
  -->
  <li class="de-ProductFlag de-ProductFlag--primary de-u-textSemibold de-u-textShrink1">
    {{ text }}<span class="de-u-hiddenVisually"> product</span>
  </li>

  <!-- 
    "Secondary" flag style (previously "Sale" flag style)
     - white background, red text, red border
  -->
  <li class="de-ProductFlag de-ProductFlag--secondary de-u-textSemibold de-u-textShrink1">
    {{ text }}<span class="de-u-hiddenVisually"> product</span>
  </li>

  <!-- 
    "Tertiary" flag style (previously "Innovation" flag style)
     - lime background, black text, lime border
  -->
  <li class="de-ProductFlag de-ProductFlag--tertiary de-u-textSemibold de-u-textShrink1">
    {{ text }}<span class="de-u-hiddenVisually"> product</span>
  </li>
</ul>

Product flag CSS

In theory, you won't need to modify any CSS on your end if you reuse the HTML + CSS classes as shown above, but I've provided the "before" and "after" as references.

Before, the text, border, and background colors were passed on a case-by-case basis via utility CSS classes. This was a fine approach, but now that we have multiple flags that share the same style, I adopted a BEM approach introducing de-ProductFlag--primary, de-ProductFlag--secondary, and de-ProductFlag--tertiary modifiers.

I also removed the CSS positioning responsibility away from the Product Flag to allow de-ProductFlag CSS to only focus on its own visual styles. A benefit of this change is that we can now have multiple flags displayed at once next to each other instead of on top of each other (since they were all previously absolutely positioned). It is now the responsibility of the flag container to position the flags as needed.

Before

.de-ProductFlag {
  line-height: 1.2;
  min-width: 102px;
  padding: .38125em .75375em;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

After

/**
 * Base Product flag styles
 * White bg, black text/border
 */

.de-ProductFlag {
  background-color: #fff;
  border-width: 2px;
  border-style: solid;
  border-color: #2a2b2c;
  border-radius: .5em;
  display: inline-block;
  line-height: 1.2;
  margin: 0 0 0 .25em;
  padding: 0.2em 0.6em; 
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}

/**
 * 1. Per design direction, allow flags to take up more space at wider viewports
 */

@media (min-width: $breakpoint-md) { 
  .de-ProductFlag {
    padding: 0.38125em 0.75375em; /* 1 */
  }
}

/**
 * Primary Product Flag modifier
 * White bg, blue text/border modifier
 */

.de-ProductFlag--primary {
  color: #0082c3;
  border-color: #0082c3;
}

/**
 * Secondary Product Flag modifier 
 * White bg, red text/border modifier
 */

.de-ProductFlag--secondary {
  color: #e53322;
  border-color: #e53322;
}

/**
 * Tertiary Product Flag modifier
 * Lime bg/border, black text
 */

.de-ProductFlag--tertiary {
  color: #2a2b2c;
  background-color: #cbfb00;
  border-color: #cbfb00;
}

Product flag container CSS

The following is a new CSS rule to position the flags container properly within a Product Tile. The CSS class is applied to the container (the `<ul>`) of the flags as shown above. As before, this CSS is for reference only; you shouldn't need to add or modify any CSS if you reuse the HTML + CSS classes as shown in the "Product flag HTML" section above.

New addition

.de-ProductTile-flagContainer {
  left: 0.15em;
  position: absolute;
  top: 0.4em;
  z-index: 1;
}

Increase the size of the hero image

Since the flags now overlay the hero image, we can allow the image to expand to the edges both vertically and horizontally.

All padding was removed around the container that wraps the image and flags. The @media query was also removed as it applied padding at wider viewports.

Before

.de-ProductTile-showcase {
  background-color: #fff;
  padding: 2.566rem .5625rem 0;
  text-align: center;
  position: relative;
}

@media (min-width: 40em) {
  .de-ProductTile-showcase {
    padding: 2.566rem 1.602rem 0;
  }
}

After

.de-ProductTile-showcase {
  background-color: #fff;
  text-align: center;
  position: relative;
}

Move grey divider line below product tile when rendered within a grid (HTML changes)

When a product tile is rendered within a grid, the horizontal divider line should be at the bottom. When a product tile renders in a carousel, the horizontal divider line should be in the middle (same as before).

A new product tile CSS modifier class, de-ProductTile--gridAlternate , was introduced to handle both use cases. By adding this CSS class, the product tile will render with the grey divider line at the bottom.

Left: Before

Right: After

Product Tile Container HTML

Before

<article class="de-ProductTile de-u-lineHeight3 de-u-bgWhite js-de-ProductTile">
  ...
</article>

After

<article class="de-ProductTile de-u-lineHeight3 de-u-bgWhite js-de-ProductTile de-ProductTile--gridAlternate">
  ...
</article>

Brand Logo HTML

A new CSS class, de-ProductTile-brandLogo, was introduced onto the SVG logo. The de-u-SpaceTop04 utility CSS class was removed.

Before

<svg class="de-u-spaceTop04 de-subBrandLogo">
  ...
</svg>

After

<svg class="de-ProductTile-brandLogo de-subBrandLogo">
  ...
</svg>

Swatch Objects HTML

The de-u-padEnds* padding utility class was modified from de-u-padEnds06 to de-u-md-padEnds06.

Before

<div class="de-SwatchObjects de-SwatchObjects--productTile de-u-padEnds06">
  ...
</div>

After

<div class="de-SwatchObjects de-SwatchObjects--productTile de-u-md-padEnds06">
  ...
</div>

Spacing below "Free Pickup" text was removed

Before

<p class="de-u-textShrink1 de-u-textMedium">Free pickup</p>

After

<p class="de-u-textShrink1 de-u-textMedium de-u-spaceBottomNone">Free pickup</p>

Move grey divider line below product tile when rendered within a grid (CSS changes)

Product Tile & modifier

Before

.de-ProductTile {
  padding: 0 .5em;
  width: 100%;
}

@media (min-width: 40em) {
  .de-ProductTile {
    padding: 0.5625rem;
  }
}

After

.de-ProductTile {
  margin: 0 0.5em;
  padding: 0.5em 0;
  width: 100%;
}

@media (min-width: $breakpoint-md) {
  .de-ProductTile {
    margin: 0 0.5625rem;
    padding: 0.5625rem 0;
  }
}

/**
 * Grid alternate modifier
 * These styles were modified for a when a product tile is 
 * within a grid context.
 */

.de-ProductTile--gridAlternate {
  border-bottom: 1px solid #d5d9db;

  .de-ProductTile-header {
    border-top: none;
  }

  .de-ProductTile-brandLogo {
    margin-top: 0;
  }
}

@media (min-width: 40em) {
  .de-ProductTile--gridAlternate {
    margin-bottom: 1em;
  }
}

Brand Logo SVG

A CSS class was added so as not to target the SVG element directly. Margin was also added.

Before

.de-ProductTile svg {
  height: 16px;
  width: auto;
}

@media (min-width: 40em) { 
  .de-ProductTile svg {
    height: 18px;
    width: auto;
  }
}

After

.de-ProductTile-brandLogo {
  margin-top: 0.624rem;
  height: 16px;
  width: auto;
}

@media (min-width: 40em) { 
  .de-ProductTile-brandLogo {
    height: 18px;
    width: auto;
  }
}

Product Tile footer

The following was removed.

/**
 * 1. container height set to 70px to accommodate for 3 lines of text and not change
 *    height of parent container
 */
.de-ProductTile-footer {
  height: 70px; /* 1 */
}