@sc-360-v2/storefront-cms-library 0.5.72 → 0.5.74

package/dist/product-actions.scss

@@ -1875,6 +1875,293 @@
             display: none;
           }
         }
+        &[data-btn-name="share"] {
+          --_sf-spinner-clr: #{var(
+              --_sf-hr-cr,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-cr)
+            )};
+          &[data-show-shadow="false"] {
+            --_show-shadow: none;
+          }
+          &[data-icon-position="left"] {
+            --_sf-fd-bn: row;
+          }
+          &[data-icon-position="right"] {
+            --_sf-fd-bn: row-reverse;
+          }
+          &[data-icon-position="center"] {
+            --_sf-fd-bn: row;
+          }
+
+          &:hover {
+            --_sf-hr-bd-cr: var(
+              --_ctm-mob-dn-se-hr-se-bd-cr,
+              var(--_ctm-tab-dn-se-hr-se-bd-cr, var(--_ctm-dn-se-hr-se-bd-cr))
+            );
+            --_sf-hr-br-cr: var(
+              --_ctm-mob-dn-se-hr-se-br-cr,
+              var(--_ctm-tab-dn-se-hr-se-br-cr, var(--_ctm-dn-se-hr-se-br-cr))
+            );
+            --_sf-hr-br-se: var(
+              --_ctm-mob-dn-se-hr-se-br-se,
+              var(--_ctm-tab-dn-se-hr-se-br-se, var(--_ctm-dn-se-hr-se-br-se))
+            );
+            --_sf-hr-br-wh: var(
+              --_ctm-mob-dn-se-hr-se-br-wh,
+              var(--_ctm-tab-dn-se-hr-se-br-wh, var(--_ctm-dn-se-hr-se-br-wh))
+            );
+            --_sf-hr-br-rs: var(
+              --_ctm-mob-dn-se-hr-se-br-rs,
+              var(--_ctm-tab-dn-se-hr-se-br-rs, var(--_ctm-dn-se-hr-se-br-rs))
+            );
+
+            --_sf-hr-at: var(
+              --_ctm-mob-dn-se-hr-se-at,
+              var(--_ctm-tab-dn-se-hr-se-at, var(--_ctm-dn-se-hr-se-at))
+            );
+            --_sf-hr-gp: var(
+              --_ctm-mob-dn-se-hr-se-gp,
+              var(--_ctm-tab-dn-se-hr-se-gp, var(--_ctm-dn-se-hr-se-gp))
+            );
+
+            // for shadow
+            --_sf-hr-sw-ae: var(
+              --_ctm-mob-dn-se-hr-se-sw-ae,
+              var(--_ctm-tab-dn-se-hr-se-sw-ae, var(--_ctm-dn-se-hr-se-sw-ae))
+            );
+            --_sf-hr-sw-br: var(
+              --_ctm-mob-dn-se-hr-se-sw-br,
+              var(--_ctm-tab-dn-se-hr-se-sw-br, var(--_ctm-dn-se-hr-se-sw-br))
+            );
+            --_sf-hr-sw-hr: var(
+              --_ctm-mob-dn-se-hr-se-sw-hr,
+              var(--_ctm-tab-dn-se-hr-se-sw-hr, var(--_ctm-dn-se-hr-se-sw-hr))
+            );
+            --_sf-hr-sw-cr: var(
+              --_ctm-mob-dn-se-hr-se-sw-cr,
+              var(--_ctm-tab-dn-se-hr-se-sw-cr, var(--_ctm-dn-se-hr-se-sw-cr))
+            );
+
+            // for font
+
+            --_sf-hr-cr: var(
+              --_ctm-mob-dn-se-hr-se-cr,
+              var(--_ctm-tab-dn-se-hr-se-cr, var(--_ctm-dn-se-hr-se-cr))
+            );
+            --_sf-hr-ft-fy: var(
+              --_ctm-mob-dn-se-hr-se-ft-fy,
+              var(--_ctm-tab-dn-se-hr-se-ft-fy, var(--_ctm-dn-se-hr-se-ft-fy))
+            );
+            --_sf-hr-tt-tm: var(
+              --_ctm-mob-dn-se-hr-se-tt-tm,
+              var(--_ctm-tab-dn-se-hr-se-tt-tm, var(--_ctm-dn-se-hr-se-tt-tm))
+            );
+            --_sf-hr-wd-wp: var(
+              --_ctm-mob-dn-se-hr-se-wd-wp,
+              var(--_ctm-tab-dn-se-hr-se-wd-wp, var(--_ctm-dn-se-hr-se-wd-wp))
+            );
+            --_sf-hr-wd-bk: var(
+              --_ctm-mob-dn-se-hr-se-wd-bk,
+              var(--_ctm-tab-dn-se-hr-se-wd-bk, var(--_ctm-dn-se-hr-se-wd-bk))
+            );
+            --_sf-hr-ft-se: var(
+              --_ctm-mob-dn-se-hr-se-ft-se,
+              var(--_ctm-tab-dn-se-hr-se-ft-se, var(--_ctm-dn-se-hr-se-ft-se))
+            );
+            --_sf-hr-ft-wt: var(
+              --_ctm-mob-dn-se-hr-se-ft-wt,
+              var(--_ctm-tab-dn-se-hr-se-ft-wt, var(--_ctm-dn-se-hr-se-ft-wt))
+            );
+            --_sf-hr-ft-se-ic: var(
+              --_ctm-mob-dn-se-hr-se-ft-se-ic,
+              var(
+                --_ctm-tab-dn-se-hr-se-ft-se-ic,
+                var(--_ctm-dn-se-hr-se-ft-se-ic)
+              )
+            );
+            --_sf-hr-tt-an: var(
+              --_ctm-mob-dn-se-hr-se-tt-an,
+              var(--_ctm-tab-dn-se-hr-se-tt-an, var(--_ctm-dn-se-hr-se-tt-an))
+            );
+            --_sf-hr-lr-sg: var(
+              --_ctm-mob-dn-se-hr-se-lr-sg,
+              var(--_ctm-tab-dn-se-hr-se-lr-sg, var(--_ctm-dn-se-hr-se-lr-sg))
+            );
+            --_sf-hr-le-ht: var(
+              --_ctm-mob-dn-se-hr-se-le-ht,
+              var(--_ctm-tab-dn-se-hr-se-le-ht, var(--_ctm-dn-se-hr-se-le-ht))
+            );
+
+            --_sf-hr-in-se: var(
+              --_ctm-mob-dn-se-hr-se-in-se,
+              var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se))
+            );
+            --_sf-hr-in-se: var(
+              --_ctm-mob-dn-se-hr-se-in-se,
+              var(--_ctm-tab-dn-se-hr-se-in-se, var(--_ctm-dn-se-hr-se-in-se))
+            );
+            --_sf-hr-in-c1: var(
+              --_ctm-mob-dn-se-hr-se-in-c1,
+              var(--_ctm-tab-dn-se-hr-se-in-c1, var(--_ctm-dn-se-hr-se-in-c1))
+            );
+            --_sf-hr-ue: var(
+              --_ctm-mob-dn-se-hr-se-ue,
+              var(--_ctm-tab-dn-se-hr-se-ue, var(--_ctm-dn-se-hr-se-ue))
+            );
+
+            // for pading and width
+            --_sf-hr-pg: var(
+              --_ctm-mob-dn-se-hr-pg,
+              var(--_ctm-tab-dn-se-hr-pg, var(--_ctm-dn-se-hr-pg))
+            );
+            --_sf-hr-wh: var(
+              --_ctm-mob-dn-se-hr-wh,
+              var(--_ctm-tab-dn-se-hr-wh, var(--_ctm-dn-se-hr-wh))
+            );
+            &[data-hover-show-shadow="false"] {
+              --_hover-show-shadow: none;
+            }
+            &[data-hover-show-icon="false"] {
+              --_hover-show-icon: none;
+            }
+          }
+          background-color: var(
+            --_sf-hr-bd-cr,
+            prepareMediaVariable(--_ctm-dn-se-dt-se-bd-cr)
+          );
+
+          padding: 5px 10px;
+          display: flex;
+          flex-direction: var(--_sf-fd-bn);
+          align-items: center;
+
+          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-se-dt-se-at));
+          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-se-dt-se-gp));
+
+          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-se-dt-se-pg));
+          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-se-dt-se-wh));
+
+          border-radius: var(
+            --_sf-hr-br-rs,
+            prepareMediaVariable(--_ctm-dn-se-dt-se-br-rs)
+          );
+
+          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-ae))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-br))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-sd))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-sw-cr));
+
+          &[data-show-border="true"] {
+            border-color: var(
+              --_sf-hr-br-cr,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-br-cr)
+            );
+
+            border-style: var(
+              --_sf-hr-br-se,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-br-se)
+            );
+
+            border-width: var(
+              --_sf-hr-br-wh,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-br-wh)
+            );
+          }
+
+          .txt {
+            display: flex;
+
+            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-dt-se-cr));
+
+            font-family: var(
+              --_sf-hr-ft-fy,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-ft-fy)
+            );
+            text-transform: var(
+              --_sf-hr-tt-tm,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-tt-tm)
+            );
+            word-wrap: var(
+              --_sf-hr-wd-wp,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-wd-wp)
+            );
+            word-break: var(
+              --_sf-hr-wd-bk,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-wd-bk)
+            );
+            &.flex__overflow {
+              white-space: normal;
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
+
+            font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se));
+
+            font-weight: var(
+              --_sf-hr-ft-wt,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-ft-wt)
+            );
+
+            font-style: var(
+              --_sf-hr-ft-se-ic,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-ft-se-ic)
+            );
+
+            text-align: var(
+              --_sf-hr-tt-an,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-tt-an)
+            );
+
+            letter-spacing: var(
+              --_sf-hr-lr-sg,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-lr-sg)
+            );
+
+            line-height: var(
+              --_sf-hr-le-ht,
+              prepareMediaVariable(--_ctm-dn-se-dt-se-le-ht)
+            );
+
+            text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+          }
+
+          .icon {
+            display: var(--_hover-show-icon, var(--_show-icon, flex));
+            svg {
+              width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
+              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-se-dt-se-in-se));
+
+              path {
+                stroke: var(
+                  --_sf-hr-in-c1,
+                  prepareMediaVariable(--_ctm-dn-se-dt-se-in-c1)
+                );
+                stroke-width: prepareMediaVariable(--_ctm-dn-se-dt-se-se-wh, 1);
+              }
+            }
+          }
+          [data-element-style="Text"] {
+            display: inline-block;
+            width: 100%;
+          }
+
+          .icon--hover {
+            // position: absolute;
+            // inset: 0;
+            // opacity: 0;
+            display: none;
+            transition: opacity 0.2s ease;
+          }
+
+          &:hover .icon--hover {
+            // opacity: 1;
+            display: flex;
+          }
+
+          &:hover .icon--default {
+            // opacity: 0;
+            display: none;
+          }
+        }
         &[data-btn-name="notifyMe"] {
           --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
           &[data-show-shadow="false"] {
@@ -2870,3 +3157,117 @@
     }
   }
 }
+
+// Share popup opened by the Share action. ModalV2 portals it to <body>, outside the
+// element, so these rules cannot be scoped to [data-element-type="productActions"].
+.modalV2-main.product-share-modal {
+  .modalV2-wrapper {
+    width: calc(100% - 32px);
+    max-width: 440px;
+  }
+
+  .product-share {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .product-share__link {
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    border: 1px solid #d0d5dd;
+    border-radius: 999px;
+    background: #f9fafb;
+
+    &:focus-within {
+      border-color: #667085;
+    }
+  }
+
+  .product-share__url {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 10px 16px;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: #101828;
+    font-size: 14px;
+    text-overflow: ellipsis;
+  }
+
+  .product-share__copy {
+    display: flex;
+    flex: 0 0 48px;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-left: 1px solid #d0d5dd;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover {
+      background: #f2f4f7;
+    }
+  }
+
+  .product-share__channels {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .product-share__channel {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border: 0;
+    border-radius: 999px;
+    background: #f2f4f7;
+    color: #101828;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background: #e4e7ec;
+    }
+  }
+
+  .product-share__copy,
+  .product-share__channel {
+    &:focus-visible {
+      outline: 2px solid #101828;
+      outline-offset: 2px;
+    }
+  }
+
+  .product-share__icon {
+    display: flex;
+    flex: 0 0 auto;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  @media (max-width: 400px) {
+    .product-share__channels {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}
+
+// Off-screen field the copy fallback selects from on http origins.
+.product-share__clipboard {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+}