@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/sa/explorer/explorer.css

@@ -0,0 +1,303 @@
+@import 'tds/reset';
+
+:host {
+    font-size: var(--tds-font-size-md);
+}
+
+.filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.filter-title {
+    display: inline-block;
+    margin-right: var(--tds-spacing-8);
+}
+
+.filter-header h2 {
+    font-size: var(--tds-font-size-lg);
+}
+
+.filter-form {
+    margin-bottom: var(--tds-spacing-2);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.filter-form > * {
+    margin-right: var(--tds-spacing-4);
+    margin-left: var(--tds-spacing-4);
+}
+
+.filter-form tds-select {
+    flex: 1;
+}
+
+.filter-form .search-input {
+    flex-basis: 100%;
+}
+
+.search-input {
+    width: 60%;
+    box-sizing: border-box;
+}
+
+.search-input__wrapper {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.search-input__label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: block;
+    padding-right: var(--tds-spacing-2);
+    padding-top: var(--tds-spacing-2);
+    color: var(--tds-color-meteorite);
+    font-size: var(--tds-font-size-xs);
+    margin-bottom: var(--tds-spacing-2);
+}
+
+.search-input__input {
+    border-radius: var(--tds-radius-md);
+    border: 1px solid var(--tds-color-fog);
+    color: var(--tds-color-black);
+    flex: 1;
+    font-family: inherit;
+    font-size: var(--tds-font-size-md);
+    line-height: 1.875;
+    overflow: hidden;
+    padding: 0.4rem 0;
+    padding-left: var(--tds-spacing-8);
+    position: relative;
+    text-overflow: ellipsis;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    white-space: nowrap;
+}
+
+.search-input__icon {
+    color: var(--tds-color-granite);
+    left: 10px;
+    position: absolute;
+    top: 13px;
+    z-index: 1;
+}
+
+.table-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.table-summary .page-size-controls {
+    flex-basis: 25%;
+}
+
+.table-summary .page-size-controls, 
+.table-summary .export-buttons {
+    display: flex;
+    align-items: center;
+}
+
+
+
+.table-summary .export-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.table-summary .page-size-controls div,
+.table-summary .export-buttons div {
+    margin-right: 0.5rem;
+    color: var(--tds-color-meteorite);
+}
+.table-summary .export-buttons {
+    text-align: right;
+}
+.table-summary .export-buttons > * {
+    margin-right: 0.5rem;
+}
+.table-summary .filter-stats {
+    text-align: center;
+    color: var(--tds-color-meteorite);
+    margin-bottom: var(--tds-spacing-4);
+}
+
+table {
+    width: 100%;
+    margin: 0 auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: 1px solid #dddbda;
+    border-left: 1px solid #dddbda;
+    border-bottom: 1px solid #111111;
+    vertical-align: middle;
+    margin-bottom: var(--tds-spacing-8);
+}
+
+thead {
+    display: table-header-group;
+    border-color: inherit;
+}
+
+th {
+    background-color: #ebf5ff;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #111111;
+    padding: 1rem;
+    vertical-align: middle;
+    text-align: left;
+}
+
+tr {
+    display: table-row;
+    vertical-align: middle;
+}
+
+tr:nth-child(even) td {
+    background: #fafaf9;
+}
+
+tr td:first-child {
+    border-left: 3px solid transparent;
+}
+
+tr td:last-child {
+    border-right: 3px solid transparent;
+}
+
+tr:hover td {
+    box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
+    background: #fafaf9;
+}
+
+tr:hover td:first-child {
+    border-left: 3px solid var(--tds-color-brand);
+}
+
+tr:hover td:last-child {
+    border-right: 3px solid var(--tds-color-brand);
+}
+
+td {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #dddbda;
+}
+
+.status {
+    text-align: center;
+}
+
+td.empty-table {
+    height: 20rem;
+    text-align: center;
+    pointer-events: none;
+}
+
+td.empty-table tds-spinner {
+    display: inline-block;
+}
+
+button.link {
+    background: none;
+    border-width: 0;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.pagination-controls {
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.pagination-controls tds-button {
+    padding: 0 1rem;
+}
+
+.safe-harbor {
+    border-radius: 10px;
+    border: 1px solid gray;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.safe-harbor img {
+    margin-right: 10px;
+    float: left;
+}
+
+@media screen and (max-width: 48rem) {
+    .filter-header {
+        flex-direction: column-reverse;
+    }
+
+    .filter-header div {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .filter-header sa-social-share {
+        margin-bottom: var(--tds-spacing-6);
+    }
+
+    .table-summary {
+        flex-direction: column;
+    }
+
+    .table-wrapper {
+        overflow-x: scroll;
+    }
+
+    .pagination-controls-top,
+    .export-label {
+        display:none;
+    }
+}
+
+.row-title p {
+    font-weight: normal;
+}
+
+.row-pattern {
+    font-size: var(--tds-font-size-sm);
+    margin-bottom: 1rem;
+    color: #3e3e3c;
+    padding-left: 1rem;
+    width:50%;
+    align-items: left;
+    flex: 1;
+}
+
+.row-pattern p {
+    font-weight: normal;
+}
+
+.row-pattern a {
+    color: var(--tds-color-brand);
+    text-decoration: none;
+}
+
+.row-pattern a:hover {
+    text-decoration: underline;
+}
+
+.selected-pills {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.selected-pills > div {
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: white;;
+}

package/src/modules/sa/explorer/explorer.html

@@ -0,0 +1,403 @@
+<template>
+    <div class="filter-header">
+        <div>
+            <h2 class="filter-title">Search for Patterns & Anti-Patterns</h2>
+            <tds-button onclick={handleResetFiltersClick}
+                >Clear filters</tds-button
+            >
+        </div>
+        <div class="filter-header">
+            <tds-button class="filter-title" onclick={handleFeedbackClick}
+                >Submit feedback</tds-button
+            >
+            <sa-social-share
+                title="Pattern &amp; Anti-Pattern Explorer"
+                url={shareUrl}
+            ></sa-social-share>
+        </div>
+    </div>
+
+    <div class="filter-form">
+        <tds-select
+            id="Trusted"
+            label="Trusted"
+            value={_selectedTrusted}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={trustedArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </tds-select>
+
+        <tds-select
+            id="Easy"
+            label="Easy"
+            value={_selectedEasy}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={easyArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </tds-select>
+
+        <tds-select
+            id="Adaptable"
+            label="Adaptable"
+            value={_selectedAdaptable}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Dimension</option>
+            <template for:each={adaptableArr} for:item="behavior">
+                <optgroup label={behavior.Name} key={behavior.Name}>
+                    <template
+                        for:each={behavior.Dimensions}
+                        for:item="dimension"
+                    >
+                        <template if:false={dimension.isDisabled}>
+                            <option key={dimension.Name} value={dimension.Name}>
+                                {dimension.Name}
+                            </option>
+                        </template>
+                        <template if:true={dimension.isDisabled}>
+                            <option
+                                key={dimension.Name}
+                                value={dimension.Name}
+                                disabled
+                            >
+                                {dimension.Name}
+                            </option>
+                        </template>
+                    </template>
+                </optgroup>
+            </template>
+        </tds-select>
+        <tds-select
+            id="ProductArea"
+            label="Product Area"
+            value={_selectedProductArea}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Product Area</option>
+            <template for:each={productAreasArr} for:item="productArea">
+                <template if:false={productArea.isDisabled}>
+                    <option key={productArea.Name} value={productArea.Name}>
+                        {productArea.Name}
+                    </option>
+                </template>
+                <template if:true={productArea.isDisabled}>
+                    <option
+                        key={productArea.Name}
+                        value={productArea.Name}
+                        disabled
+                    >
+                        {productArea.Name}
+                    </option>
+                </template>
+            </template>
+        </tds-select>
+        <tds-select
+            id="Location"
+            label="Location"
+            value={_selectedLocation}
+            onchange={filterChange}
+        >
+            <option value="-1">Select a Location</option>
+            <template for:each={locationsArr} for:item="location">
+                <template if:false={location.isDisabled}>
+                    <option key={location.Name} value={location.Name}>
+                        {location.Name}
+                    </option>
+                </template>
+                <template if:true={location.isDisabled}>
+                    <option key={location.Name} value={location.Name} disabled>
+                        {location.Name}
+                    </option>
+                </template>
+            </template>
+        </tds-select>
+
+        <div class="search-input">
+            <label class="search-input__label" for="search">Search</label>
+            <div class="search-input__wrapper">
+                <tds-icon
+                    class="search-input__icon"
+                    size="small"
+                    symbol="search"
+                ></tds-icon>
+                <input
+                    id="search"
+                    name="search"
+                    class="search-input__input"
+                    placeholder="Search..."
+                    icon-symbol="search"
+                    aria-label="Search..."
+                    value={_keywordFilter}
+                    oninput={keywordFilterChange}
+                />
+            </div>
+        </div>
+
+        <div class="selected-pills">
+            <template for:each={selectedFilters} for:item="selection">
+                <div key={selection.Name} style="max-width: 200px">
+                    <tds-pill id={selection.Name} onremove={removeFilter}
+                        >{selection.Name}</tds-pill
+                    >
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <div class="table-summary">
+        <div class="page-size-controls">
+            <div>Items per page</div>
+            <tds-select value={pageSize} onchange={handlePageSizeChange}>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="200">200</option>
+            </tds-select>
+        </div>
+        <template if:false={isLoading}>
+            <div>
+                <div class="filter-stats">{filterStatsLabel}</div>
+                <div class="pagination-controls pagination-controls-top">
+                    <tds-button
+                        onclick={handlePreviousPageClick}
+                        disabled={isFirstPage}
+                        >&lt; Previous</tds-button
+                    >
+                    <tds-button
+                        onclick={handleNextPageClick}
+                        disabled={isLastPage}
+                        >Next &gt;</tds-button
+                    >
+                </div>
+            </div>
+            <div class="export-buttons">
+                <div class="export-label">Export current view:</div>
+                <tds-button onclick={handlePdfClick}>
+                    <tds-icon symbol="download"></tds-icon>
+                    &nbsp;&nbsp;PDF
+                </tds-button>
+                <tds-button onclick={handleCsvClick}>
+                    <tds-icon symbol="download"></tds-icon>
+                    &nbsp;&nbsp;CSV
+                </tds-button>
+            </div>
+        </template>
+    </div>
+
+    <tds-tabset active-tab-value="pattern">
+        <tds-tab label="Patterns" value="pattern" title="Patterns">
+            <div class="table-wrapper" id="pattern-table">
+                <table>
+                    <thead>
+                        <tr class="row-title">
+                            <th width="50%">
+                                What Good Looks Like
+                                <p>Pattern</p>
+                            </th>
+                            <th width="20%">
+                                Where to Look
+                                <p>Product Area | Location</p>
+                            </th>
+                            <th width="30%">
+                                Learn More
+                                <p>Dimension | Consideration</p>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Table data is loaded -->
+                        <template if:false={isLoading}>
+                            <template
+                                for:each={currentPagePatterns}
+                                for:item="pattern"
+                            >
+                                <tr key={pattern.Id} class="row-pattern">
+                                    <td>
+                                        <p>{pattern.Name}</p>
+                                        <p>{pattern.Description}</p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            {pattern.ProductArea} | In your
+                                            {pattern.Location}
+                                        </p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            <a
+                                                href={pattern.DimensionURL}
+                                                target="_blank"
+                                                >{pattern.Dimension}</a
+                                            >&nbsp;|&nbsp;
+                                            <a
+                                                href={pattern.ConsiderationURL}
+                                                target="_blank"
+                                                >{pattern.Consideration}</a
+                                            >
+                                        </p>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <template if:false={hasPatterns}>
+                                <tr>
+                                    <td colspan="3">
+                                        There are no matching patterns for the
+                                        selected dimensions...
+                                    </td>
+                                </tr>
+                            </template>
+                        </template>
+
+                        <!-- Table data is still loading -->
+                        <template if:true={isLoading}>
+                            <tr>
+                                <td colspan="3">
+                                    Select a dimension to get started...
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </tds-tab>
+        <tds-tab
+            label="Anti-Patterns"
+            value="anti-pattern"
+            title="Anti-Patterns"
+        >
+            <div class="table-wrapper" id="anti-pattern-table">
+                <table>
+                    <thead>
+                        <tr class="row-title">
+                            <th width="50%">
+                                What to Avoid
+                                <p>Anti-Pattern</p>
+                            </th>
+                            <th width="20%">
+                                Where to Look
+                                <p>Product Area | Location</p>
+                            </th>
+                            <th width="30%">
+                                Learn More
+                                <p>Dimension | Consideration</p>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Table data is loaded -->
+                        <template if:false={isLoading}>
+                            <template
+                                for:each={currentPageAntiPatterns}
+                                for:item="pattern"
+                            >
+                                <tr key={pattern.Id} class="row-pattern">
+                                    <td>
+                                        <p>{pattern.Name}</p>
+                                        <p>{pattern.Description}</p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            {pattern.ProductArea} | In your
+                                            {pattern.Location}
+                                        </p>
+                                    </td>
+                                    <td>
+                                        <p>
+                                            <a
+                                                href={pattern.DimensionURL}
+                                                target="_blank"
+                                                >{pattern.Dimension}</a
+                                            >&nbsp;|&nbsp;
+                                            <a
+                                                href={pattern.ConsiderationURL}
+                                                target="_blank"
+                                                >{pattern.Consideration}</a
+                                            >
+                                        </p>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <template if:false={hasAntiPatterns}>
+                                <tr>
+                                    <td colspan="3">
+                                        There are no matching anti-patterns for
+                                        the selected dimensions...
+                                    </td>
+                                </tr>
+                            </template>
+                        </template>
+
+                        <!-- Table data is still loading -->
+                        <template if:true={isLoading}>
+                            <tr>
+                                <td colspan="3">
+                                    Select a dimension to get started...
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </tds-tab>
+    </tds-tabset>
+
+    <template if:false={isLoading}>
+        <div class="pagination-controls">
+            <tds-button onclick={handlePreviousPageClick} disabled={isFirstPage}
+                >&lt; Previous</tds-button
+            >
+            <tds-button onclick={handleNextPageClick} disabled={isLastPage}
+                >Next &gt;</tds-button
+            >
+        </div>
+    </template>
+</template>