@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/sa/explorer/types.d.ts

@@ -0,0 +1,60 @@
+export type Pattern = {
+    Name?: string;
+    Description: string; 
+    Example?: string;
+    Weight?: number | null;
+    LastUpdated?: string;
+    Location: string;
+    Capability: string;
+    Behavior: string;
+    Consideration: string;
+    ConsiderationURL: string;
+    Dimension: string;
+    DimensionURL: string;
+    Mirror?: Pattern;
+    Tools?: Tool[];
+    Resources?: Resource[];
+    ProductArea: string;
+}
+
+export type Location = {
+    Name: string;
+    isDisabled: boolean;
+}
+
+export type Behavior = {
+    Capability: string;
+    Name: string;
+    Weight: number;
+    Dimensions: Dimension[];
+}
+
+export type Dimension = {
+    Behavior: string;
+    Name: string;
+    Weight: number;
+    isDisabled: boolean;
+}
+
+export type Tool = {
+    Name: string;
+    Description: string;
+    URL: string;
+}
+
+export type Resource = {
+    Name: string;
+    Description: string;
+    URL: string;
+}
+
+export type Filter = {
+    Type: string;
+    Name: string;
+}
+
+export type VersionInfo = {
+    Number: string;
+    Name: string;
+    URL: string;
+}

package/src/modules/sa/gallery/gallery.css

@@ -0,0 +1,358 @@
+@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-8);
+    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;
+}
+  
+  .tds-select {
+    width: 60%;
+    box-sizing: border-box;
+  }
+  
+  .search-input {
+    width: 40%;
+    box-sizing: border-box;
+  }
+
+.search-input__wrapper {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+}
+
+.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;
+    margin-bottom: var(--tds-spacing-4);
+}
+.table-summary > div {
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.table-summary .page-size-controls,
+.table-summary .collapse-buttons {
+    flex-basis: 25%;
+}
+.table-summary .page-size-controls {
+    display: flex;
+    align-items: center;
+}
+.table-summary .page-size-controls div {
+    margin-right: 0.5rem;
+    color: var(--tds-color-meteorite);
+}
+.table-summary .collapse-buttons {
+    text-align: right;
+}
+.table-summary .collapse-buttons button:first-child {
+    margin-right: 0.5rem;
+}
+.table-summary .collapse-buttons button:last-child {
+    margin-left: 0.5rem;
+}
+.table-summary .filter-stats {
+    text-align: center;
+    color: var(--tds-color-meteorite);
+}
+
+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;
+}
+
+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;
+}
+
+.feature a {
+    color: var(--tds-color-brand);
+    text-decoration: none;
+}
+
+.feature a:hover {
+    text-decoration: underline;
+}
+
+.feature p {
+    margin-bottom: var(--tds-spacing-2);
+}
+
+.feature .inline {
+    display: flex;
+}
+
+.feature .inline h4 {
+    padding-right: var(--tds-spacing-4);
+}
+
+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-8);
+}
+
+.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;
+    }
+    .docs-grid-container {
+        position: relative;
+    }
+    
+    .docs-action-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+    }
+    
+    .docs-action-bar > .records-container {
+        margin-right: auto;
+    }
+    
+    .docs-action-bar .filters-container {
+        display: flex;
+    }
+    
+    .docs-action-bar .filters-container > *:not(:first-child),
+    .docs-search-input {
+        margin-left: var(--dx-g-spacing-sm);
+    }
+    
+    .docs-search-input {
+        --dx-c-input-width: 285px;
+    }
+    
+    .docs-card {
+        --dx-c-body-max-lines: 4;
+        --dx-c-heading-max-lines: 2;
+    }
+    
+    .pagination-container {
+        max-width: fit-content;
+        max-width: -moz-fit-content;
+        margin: var(--dx-g-spacing-lg) auto;
+    }
+    
+    @media screen and (max-width: 1024px) {
+        .docs-card {
+            --dx-c-body-max-lines: 3;
+        }
+    }
+    
+    @media screen and (max-width: 768px) {
+        .docs-action-bar {
+            flex-direction: column-reverse;
+            width: 100%;
+            padding: 0;
+        }
+    
+        .docs-search-input {
+            --dx-c-input-width: 100%;
+    
+            width: 100%;
+            margin-bottom: var(--dx-g-spacing-md);
+        }
+    
+        .docs-action-bar .records-container {
+            transform: translateY(-100%);
+        }
+    }
+    
+    @media screen and (max-width: 600px) {
+        .pagination-container {
+            width: 100%;
+            overflow: hidden;
+        }
+    
+        .pagination-container > * {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+    
+    @media screen and (max-width: 460px) {
+        .docs-action-bar .records-container {
+            transform: initial;
+            padding: var(--dx-g-spacing-md) 0;
+        }
+    }    
+}

package/src/modules/sa/gallery/gallery.html

@@ -0,0 +1,65 @@
+<template>
+    <div class="filter-header">
+        <div>
+            <h2 class="filter-title">Search for {_searchTitle}</h2>
+            <tds-button class="clear-filter" onclick={handleResetFiltersClick}
+                >Clear filters</tds-button
+            >
+        </div>
+        <sa-social-share title={socialTitle} url={shareUrl}></sa-social-share>
+    </div>
+    <div class="filter-form">
+        <tds-select
+            label={_filterLabel}
+            value={_selectFilter}
+            onchange={filterChange}
+        >
+            <option value="">- All {_filterLabel}s -</option>
+            <template for:each={filterOptions} for:item="item">
+                <option key={item.label} value={item.value}>
+                    {item.label}
+                </option>
+            </template>
+        </tds-select>
+
+        <template if:true={_showMetaFilter}>
+            <tds-select
+                label={_metaFilterLabel}
+                value={_selectMetaFilter}
+                onchange={metaFilterChange}
+            >
+                <option value="">- All {_metaFilterLabel}s -</option>
+                <template for:each={metaFilterOptions} for:item="item">
+                    <option key={item.label} value={item.value}>
+                        {item.label}
+                    </option>
+                </template>
+            </tds-select>
+        </template>
+
+        <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"
+                    class="search-input__input"
+                    placeholder="Search..."
+                    icon-symbol="search"
+                    aria-label="Search..."
+                    value={_keywordFilter}
+                    oninput={keywordFilterChange}
+                    disabled={isLoading}
+                />
+            </div>
+        </div>
+    </div>
+    <div role="region" aria-label="Gallery results" aria-live="polite">
+        <tm-card-grid-a img-aspect="60%" img-type="full" items={filteredCards}>
+        </tm-card-grid-a>
+    </div>
+</template>