@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -1,469 +0,0 @@
-@import "helpers/button";
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
-
-:host {
-    width: 100%;
-
-    --dx-c-featured-content-header-background-color: var(
-        --dx-g-indigo-vibrant-90
-    );
-    --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
-    --dx-c-featured-content-header-padding-horizontal: var(
-        --dx-g-page-padding-horizontal
-    );
-    --dx-c-featured-content-main-content-max-width: 840px;
-    --dx-c-bottom-image-width: calc(
-        100vw - var(--dx-g-page-padding-horizontal-lg) * 2
-    );
-    --dx-c-bottom-image-height: calc(var(--dx-c-bottom-image-width) / 2);
-    --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
-    --dx-c-featured-content-header-image-container-transform: scale(0.7)
-        translateY(14px);
-}
-
-.container {
-    --image-radius: var(--dx-g-spacing-smd);
-
-    /* content padding of text and image within the graphic */
-    --vertical-padding: var(--dx-g-spacing-6xl);
-
-    /* actual spacing between bottom of graphic and rest of page content */
-    --bottom-spacing: var(--dx-g-spacing-4xl);
-    --item-spacing: var(--dx-g-spacing-xl);
-    --swoop-height: 30%;
-    --swoop-inset: calc(2.5 * var(--vertical-padding));
-    --swoop-z-index: 11;
-
-    position: relative;
-    padding: var(--vertical-padding)
-        var(--dx-c-featured-content-header-padding-horizontal);
-    background-color: var(--dx-c-featured-content-header-background-color);
-}
-
-/* LAYOUTS */
-
-.img-placement_inline {
-    display: grid;
-    grid-template-areas: "label label" "main image";
-    grid-template-columns: 50% auto;
-    grid-gap: 0 80px;
-}
-
-.img-placement_below {
-    --swoop-inset: calc(80px + 38vw);
-
-    margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
-}
-
-.container:not(.img-placement_below) {
-    overflow: hidden;
-}
-
-/* SWOOP SILHOUETTE */
-
-.swoop-silhouette {
-    position: absolute;
-    bottom: -2px;
-    left: -1px;
-    z-index: calc(var(--swoop-z-index) + 1);
-    height: var(--swoop-height);
-    overflow: hidden;
-    pointer-events: none;
-
-    /* Add 2px to cover subpixel rendering svg issue where a gap shows on the sides */
-    width: calc(100vw + 2px);
-}
-
-/* BOTTOM GRAPHIC */
-
-.bg-image-container {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1;
-}
-
-.bg-trees {
-    top: initial;
-    right: initial;
-    bottom: calc(var(--padding-bottom) * -1 - 10px);
-    left: 0;
-    width: 100%;
-    transform: var(--dx-c-featured-content-header-image-container-transform);
-}
-
-.trees-mobile {
-    display: none;
-}
-
-.bg-trees::before {
-    content: "";
-    background-color: var(--dx-c-tree-graphic-color);
-    height: 2px;
-    width: 10000px;
-    position: absolute;
-    left: 1px;
-    transform: translateX(-100%);
-    top: 1px;
-}
-
-.bg-moon {
-    top: initial;
-    right: initial;
-    bottom: calc(var(--padding-bottom) * -1 - 10px);
-    left: 0;
-    width: 100%;
-    transform: var(--dx-c-featured-content-header-image-container-transform);
-}
-
-.moon-mobile {
-    display: none;
-}
-
-.bg-moon::before {
-    content: "";
-    background-color: var(--dx-c-moon-graphic-color);
-    height: 2px;
-    width: 10000px;
-    position: absolute;
-    left: 1px;
-    transform: translateX(-100%);
-    top: 1px;
-}
-
-.bg-codey {
-    height: 100%;
-    width: 100%;
-    transform-origin: right;
-    transform: translate(110%, -110%);
-    top: unset;
-}
-
-.codey-mobile {
-    display: none;
-}
-
-.custom-bg-codey::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url(/assets/svg/cloud-1.svg), url(/assets/svg/cloud-2.svg),
-        url(/assets/svg/trees.svg);
-    background-position: top center, 102% 10%, 65% 90%;
-    background-repeat: no-repeat, no-repeat, no-repeat;
-}
-@media screen and (max-width: 1174px) {
-    .custom-bg-codey::after {
-        background-image: url(/assets/svg/cloud-2.svg);
-        background-position: calc(100% + 30px) -20%;
-    }
-}
-@media screen and (max-width: 1024px) {
-    .custom-bg-codey::after {
-        background-position: calc(100% + 30px) -40%;
-    }
-
-    .bg-codey {
-        width: 300px;
-        margin-top: -50px;
-    }
-
-    .bg-codey > svg {
-        width: 100%;
-    }
-}
-@media screen and (max-width: 960px) {
-    .bg-codey {
-        display: none;
-    }
-}
-@media screen and (max-width: 768px) {
-    .custom-bg-codey::after {
-        background-position: calc(100% + 80px) -100px;
-    }
-}
-
-.custom-bg-blog::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url(/assets/svg/fch-blog-cloud-1.png),
-        url(/assets/svg/fch-blog-cloud-2.png),
-        url(/assets/svg/fch-blog-planet.png);
-    background-position: calc(100% + -60px) -80px, 67% calc(100% + -100px),
-        54% 70px;
-    background-repeat: no-repeat, no-repeat, no-repeat;
-}
-@media screen and (max-width: 1024px) {
-    .custom-bg-blog::after {
-        background-image: url(/assets/svg/fch-blog-cloud-1.png);
-        background-position: calc(100% + 78px) -60px;
-    }
-
-    .custom-bg-blog::before {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-image: url(/assets/svg/fch-blog-cloud-2.png);
-        background-repeat: no-repeat;
-        background-position: bottom left;
-        transform: rotate(180deg);
-        left: -96%;
-        bottom: -90%;
-    }
-}
-@media screen and (max-width: 600px) {
-    .custom-bg-blog::after {
-        background-size: 225px;
-        background-position: calc(100% + 58px) -60px;
-    }
-}
-
-/* Z INDEX STUFF */
-
-.label,
-.main-content,
-.image-container {
-    position: relative;
-    z-index: var(--swoop-z-index);
-}
-
-/* IMAGE */
-
-.image-container {
-    display: block;
-    grid-area: image;
-    height: 0;
-    padding-top: 50%;
-    z-index: calc(var(--swoop-z-index) + 2);
-}
-
-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px solid rgba(24, 24, 24, 0.1);
-    border-radius: var(--image-radius);
-    object-fit: cover;
-}
-
-a.image-container > img {
-    transition: var(--dx-g-transition-filter-2x);
-}
-
-.img-placement_below .image-container {
-    margin-top: var(--item-spacing);
-    margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
-}
-
-/* MAIN CONTENT AREA */
-
-.main-content {
-    grid-area: main;
-    max-width: var(--dx-c-featured-content-main-content-max-width);
-}
-
-.main-content > * {
-    z-index: 10;
-}
-
-/* SLOT */
-
-.slot-container {
-    display: none;
-    margin-top: var(--dx-g-spacing-xl);
-}
-
-.has-slotted .slot-container {
-    display: block;
-}
-
-/* TEXT */
-
-.title-link {
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.label {
-    grid-area: label;
-    color: var(--dx-g-indigo-vibrant-40);
-    padding-bottom: var(--dx-g-spacing-lg);
-}
-
-.dx-text-heading-2 {
-    padding-bottom: var(--dx-g-spacing-sm);
-    display: block;
-}
-
-/* AUTHORS */
-
-.authors {
-    padding-top: var(--dx-g-spacing-sm);
-    padding-bottom: var(--item-spacing);
-}
-
-dx-image-and-label {
-    --dx-c-image-and-label-text-color: var(--dx-g-text-heading-color);
-
-    display: inline-block;
-    padding-right: var(--dx-g-spacing-lg);
-}
-
-/* DARK VARIANT */
-.variant_dark {
-    background: linear-gradient(
-        -180deg,
-        rgb(40, 23, 153) 0%,
-        rgb(46, 43, 182) 100%
-    );
-}
-
-.variant_dark dx-image-and-label {
-    --dx-c-image-and-label-text-color: white;
-}
-
-.variant_dark .label {
-    color: rgb(190, 199, 246);
-}
-
-.variant_dark .title,
-.variant_dark .body {
-    color: white;
-}
-
-/* SHARED LINK HOVERING */
-
-.container.link-hovered a.image-container > img {
-    filter: var(--dx-g-button-image-filter-hover);
-}
-
-.container.link-hovered .title-link {
-    color: var(--dx-g-blue-vibrant-40);
-}
-
-.container.link-hovered.variant_dark .title-link {
-    color: var(--dx-g-indigo-vibrant-90);
-}
-
-@media screen and (min-width: 1920px) {
-    .swoop-container,
-    .swoop-silhouette {
-        left: initial;
-        right: 0;
-        transform: initial;
-        width: 1920px;
-    }
-}
-
-@media screen and (max-width: 1401px) {
-    .img-placement_below .image-container {
-        padding-top: calc(
-            50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
-        );
-        margin-top: var(--item-spacing);
-        margin-right: calc(
-            var(--dx-c-featured-content-header-padding-horizontal) * -1
-        );
-    }
-
-    .img-placement_below img {
-        border-radius: var(--image-radius) 0 0 var(--image-radius);
-    }
-}
-
-@media screen and (min-width: 1400px) {
-    .img-placement_below {
-        --swoop-inset: 680px;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .container {
-        --swoop-height: 14vw;
-        --vertical-padding: 80px;
-        --bottom-spacing: var(--dx-g-spacing-2xl);
-        --item-spacing: var(--dx-g-spacing-md);
-    }
-
-    .container:not(.img-placement_below) {
-        --swoop-inset: 64px;
-    }
-
-    .img-placement_inline {
-        display: grid;
-        grid-template-areas: "label" "image" "main";
-        grid-template-columns: 100%;
-        grid-gap: 0;
-    }
-
-    .img-placement_inline .image-container {
-        margin-bottom: 20px;
-    }
-
-    .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
-    }
-
-    .dx-text-heading-4 {
-        font-size: var(--dx-g-text-xl);
-    }
-
-    .dx-text-heading-2 {
-        font-size: var(--dx-g-text-2xl);
-        line-height: var(--dx-g-spacing-2xl);
-    }
-
-    .dx-text-body-1 {
-        font-size: var(--dx-g-text-base);
-        letter-spacing: 0;
-        line-height: var(--dx-g-spacing-lg);
-    }
-
-    .authors {
-        padding-top: 0;
-    }
-
-    dx-image-and-label {
-        display: block;
-        padding-bottom: var(--dx-g-spacing-sm);
-    }
-
-    .trees {
-        display: none;
-    }
-
-    .trees-mobile {
-        display: block;
-    }
-
-    .moon {
-        display: none;
-    }
-
-    .moon-mobile {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.8);
-    }
-}
-
-@media screen and (max-width: 420px) {
-    .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
-    }
-}

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,96 +0,0 @@
-<template>
-    <div class={classname} part="container">
-        <div
-            if:true={label}
-            role={labelRole}
-            aria-level={labelAriaLevel}
-            class="label dx-text-heading-4"
-        >
-            {label}
-        </div>
-        <div class="main-content">
-            <div
-                role="heading"
-                aria-level={titleAriaLevel}
-                class="title dx-text-heading-2"
-            >
-                <a
-                    class="title-link"
-                    if:true={href}
-                    href={href}
-                    target={target}
-                    onmouseenter={setLinkHovered}
-                    onmouseleave={setLinkInactive}
-                >
-                    {title}
-                </a>
-                <template if:false={href}>{title}</template>
-            </div>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
-                </template>
-            </div>
-            <span class="body dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
-            </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
-        </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
-        </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <svg
-            class="swoop-silhouette"
-            width="1920px"
-            height="331px"
-            viewBox="0 0 1920 331"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="none"
-        >
-            <defs>
-                <path
-                    d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                    id="path-1"
-                ></path>
-            </defs>
-            <g
-                id="Documentation-landing-page"
-                stroke="none"
-                stroke-width="1"
-                fill="none"
-                fill-rule="evenodd"
-            >
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use
-                    id="Combined-Shape"
-                    fill="#FFFFFF"
-                    xlink:href="#path-1"
-                ></use>
-            </g>
-        </svg>
-    </div>
-</template>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.stories.ts

@@ -1,153 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-const BACKGROUND_IMAGE_OPTIONS = ["trees", "codey", "blog"];
-
-export default {
-    title: "dx/dx-featured-content-header ",
-    component: "dx-featured-content-header "
-};
-
-const createStylesLightVariant = () => html`
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-header-background-color: rgb(58, 73, 218);
-        }
-    </style>
-`;
-
-const createBaseStyles = () => html`
-    <style>
-        body {
-            padding: 0 !important;
-        }
-        dx-podcast-player {
-            display: block;
-            width: 300px;
-        }
-    </style>
-`;
-
-const authors = JSON.stringify(mockProps.authors);
-
-export const PodcastEpisode = () => html` ${createBaseStyles()}
-    <dx-featured-content-header
-        label="Developers Podcast"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-    >
-        <dx-podcast-player
-            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-        >
-        </dx-podcast-player>
-    </dx-featured-content-header>`;
-
-export const BlogPost = () => html` ${createBaseStyles()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        img-placement="below"
-    >
-        <dx-podcast-player
-            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-        >
-        </dx-podcast-player>
-    </dx-featured-content-header>`;
-
-export const LightVariation = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const LightVariationNoLink = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const MainContentWidth = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-main-content-max-width: 600px;
-        }
-    </style>
-    <dx-featured-content-header
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const BackgroundImage = ({
-    backgroundImage
-}: {
-    backgroundImage: string;
-}) => html` ${createBaseStyles()} ${createStylesLightVariant()}
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-main-content-max-width: 600px;
-        }
-    </style>
-    <dx-featured-content-header
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        dark="true"
-        background-img="${backgroundImage}"
-    >
-    </dx-featured-content-header>`;
-
-BackgroundImage.args = {
-    backgroundImage: "codey"
-};
-
-BackgroundImage.argTypes = {
-    backgroundImage: {
-        control: {
-            type: "select",
-            options: BACKGROUND_IMAGE_OPTIONS
-        }
-    }
-};
-
-export const CodeSamples = () => html` 
-
-<style>
-    dx-featured-content-header {
-        --dx-c-featured-content-main-content-max-width: 600px;
-    }
-</style>
-<dx-featured-content-header
-    class="documentation_header"
-    title="Code Samples"
-    body="all the description here"
-    dark="true"
-    background-img="moon"
-></dx-featured-content-header>`;