600 West

Drawer: Inline

Error rendering component

Could not render component '@select-planlist' - component not found.

 
<aside id="{{id}}" class="Drawer {{modifier}}">
    <div class="Drawer-close">
        <button class="IconButton js-drawer-close" aria-label="Close Form" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {{> @children}}
</aside>
 
{
  "id": null,
  "modifier": "Drawer--inline",
  "style": null,
  "children": [
    {
      "component": "signupform"
    }
  ]
}
  • Content: 
    import each from '../../../modules/util/each';
import ready from '../../../modules/util/ready';
import jsClasses from '../../../constants/js-classes';

const focusableElements = 'a, input, button, select';

const openDrawer = () => {
    const drawerContainers = document.querySelectorAll(jsClasses.DRAWER_CONTAINER);
    each(drawerContainers, drawerContainer => {
        drawerContainer.classList.remove('is-closed');
        const drawer = drawerContainer.querySelector('.Drawer');
        drawer.tabIndex = 0;
        drawer.focus();
        each(drawerContainer.querySelectorAll(focusableElements), item => (item.tabIndex = 0));
    });
};

const closeDrawer = () => {
    each(document.querySelectorAll(jsClasses.DRAWER_CONTAINER), drawerContainer => {
        drawerContainer.classList.add('is-closed');
        const drawer = drawerContainer.querySelector('.Drawer');
        drawer.setAttribute('aria-hidden', 'true');
        each(drawer.querySelectorAll(focusableElements), item => {
            item.tabIndex = -1;
            item.blur();
        });
    });
};

const focusElement = target => () => {
    const targetEl = document.querySelector(target);
    if (targetEl) targetEl.focus();
};

ready(() => {
    each(document.querySelectorAll(jsClasses.ELEMENT_FOCUS), button =>
        button.addEventListener('click', focusElement(button.dataset.focusTarget))
    );

    each(document.querySelectorAll(jsClasses.DRAWER_OPEN), button => button.addEventListener('click', openDrawer));

    each(document.querySelectorAll(jsClasses.DRAWER_CLOSE), button => button.addEventListener('click', closeDrawer));

    window.onkeydown = event => {
        const drawer = document.querySelector('.Drawer');

        if (drawer) {
            const isDismissible = window.innerWidth >= 960 || !drawer.classList.contains('Drawer--inline');

            if (event.keyCode == 27 && isDismissible) {
                closeDrawer();
            }
        }
    };
});
  • URL: /components/raw/drawer/Drawer.js
  • Filesystem Path: components/organisms/Drawer/Drawer.js
  • Size: 2 KB
  • Content: 
    $Drawer-width: 400px !default;
$Drawer-width-narrow: $Drawer-width - 100px !default;
.Drawer {
    @include ZIndex("Sidebar");
    @include Elevation("Sidebar");
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: $Drawer-width;
    height: 100vh;
    max-width: 100%;
    padding: Space(400);
    overflow: auto;
    background: theme-color(background);
    opacity: 0;
    transition: transform $transition-time-500 $transition-out-default, opacity $transition-time-200 $transition-out-default $transition-time-500;
    transform: translateX(0);
    &.Drawer--noPad {
        padding: 0;
    }
}
.Drawer-container.Drawer-container--narrow .Drawer {
    width: $Drawer-width-narrow;
}
.Drawer-close {
    @include font-size-subhead;
    position: absolute;
    top: .5rem;
    right: .5rem;
    line-height: 1rem;
    .IconButton:hover,
    .IconButton:focus {
        color: theme-color(text);
        transform: scale(1.2);
    }
}
.Drawer-container.is-closed {
    outline: none;
}
.Drawer-container.Drawer-container--overlay::after {
    @include ZIndex("Sidebar-overlay");
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(get-color(neutral, 1000),.4);
    opacity: 0;
    content: "";
    transition: opacity $transition-time-500 $transition-out-default;
    pointer-events: none;
}
.Drawer-container.Drawer-container--overlay:not(.is-closed)::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition-timing-function: $transition-in-default;
}
.Drawer-container:not(.is-closed) .Drawer {
    opacity: 1;
    transition-timing-function: $transition-in-default;
    transition-delay: 0s;
}
.Drawer-container.is-closed .Drawer {
    transform: translateX(100%);
}
.Drawer-container.Drawer-container--left {
    .Drawer {
        right: auto;
        left: 0;
        .Drawer-close {
            right: auto;
            left: 0;
        }
    }
    &.is-closed .Drawer {
        transform: translateX(-100%);
    }
}
@media screen and (min-width: 960px) {
    .Drawer-container.Drawer-container--push:not(.Drawer-container--left):not(.is-closed) {
        margin-right: $Drawer-width;
    }
    .Drawer-container.Drawer-container--push.Drawer-container--left:not(.is-closed) {
        margin-left: $Drawer-width;
    }
    .Drawer-container.Drawer-container--narrow.Drawer-container--push:not(.Drawer-container--left):not(.is-closed) {
        margin-right: $Drawer-width-narrow;
    }
    .Drawer-container.Drawer-container--narrow.Drawer-container--push.Drawer-container--left:not(.is-closed) {
        margin-left: $Drawer-width-narrow;
    }
}
@media screen and (max-width: 959px) {
    .Drawer.Drawer--inline .Drawer-close {
        display: none;
    }
    .Drawer-container .Drawer.Drawer--inline {
        @include Elevation("Sidebar", $lighting: "front");
        position: static;
        width: 100%;
        height: auto;
        margin-top: Space(600);
        transform: none;
    }
}
  • URL: /components/raw/drawer/Drawer.scss
  • Filesystem Path: components/organisms/Drawer/Drawer.scss
  • Size: 3 KB

There are no notes for this item.