diff --git a/packages/common/src/content/compose.ts b/packages/common/src/content/compose.ts index 0a7d3c2ac51..2ec9b26f283 100644 --- a/packages/common/src/content/compose.ts +++ b/packages/common/src/content/compose.ts @@ -219,6 +219,9 @@ const getMetadataUpdatedDateInfo = (item: IItem, metadata?: any) => { }; // public API +// AGO has a util for determining display name and item type icons +// that we can use for reference +// https://devtopia.esri.com/WebGIS/arcgis-app-components/blob/master/src/components/arcgis-item-type/utils.ts /** * Compute the content type calcite-icon based on the content type * @param content type diff --git a/packages/common/src/core/schemas/shared/CatalogSchema.ts b/packages/common/src/core/schemas/shared/CatalogSchema.ts index 3f117138ffa..7cb00bdf34e 100644 --- a/packages/common/src/core/schemas/shared/CatalogSchema.ts +++ b/packages/common/src/core/schemas/shared/CatalogSchema.ts @@ -1,5 +1,6 @@ import { EntityType, targetEntities } from "../../../search/types/IHubCatalog"; import { IConfigurationSchema } from "../types"; +import { CARD_TITLE_TAGS, CORNERS, DROP_SHADOWS } from "./enums"; /** JSON schema for an IPredicate */ export const PredicateSchema: IConfigurationSchema = { @@ -82,7 +83,38 @@ export const GalleryDisplayConfigSchema: IConfigurationSchema = { type: "object", properties: { hidden: { type: "boolean", default: false }, - // TODO: fill in properties + layout: { + type: "string", + enum: ["list", "grid", "table", "map", "compact"], + default: "list", + }, + cardTitleTag: { + type: "string", + enum: Object.keys(CARD_TITLE_TAGS), + default: CARD_TITLE_TAGS.h3, + }, + showThumbnail: { + type: "string", + enum: ["show", "hide", "grid"], + default: "show", + }, + corners: { + type: "string", + enum: Object.keys(CORNERS), + default: CORNERS.square, + }, + shadow: { + type: "string", + enum: Object.keys(DROP_SHADOWS), + default: DROP_SHADOWS.none, + }, + showLinkButton: { type: "boolean", default: false }, + linkButtonStyle: { + type: "string", + enum: ["outline", "outline-filled"], + default: "outline-filled", + }, + linkButtonText: { type: "string", default: "Explore" }, }, }; diff --git a/packages/common/src/core/schemas/shared/enums.ts b/packages/common/src/core/schemas/shared/enums.ts index d6e10261a3f..f57381c9ab0 100644 --- a/packages/common/src/core/schemas/shared/enums.ts +++ b/packages/common/src/core/schemas/shared/enums.ts @@ -28,3 +28,15 @@ export enum DROP_SHADOWS { medium = "medium", heavy = "heavy", } + +/** + * Tags to wrap the title on each card + */ +export enum CARD_TITLE_TAGS { + h1 = "h1", + h2 = "h2", + h3 = "h3", + h4 = "h4", + h5 = "h5", + h6 = "h6", +} diff --git a/packages/common/src/search/Catalog.ts b/packages/common/src/search/Catalog.ts index 69000d25303..d5fa22d3816 100644 --- a/packages/common/src/search/Catalog.ts +++ b/packages/common/src/search/Catalog.ts @@ -22,6 +22,7 @@ import { IQuery, IFilter, IHubCollection, + IGalleryDisplayConfig, } from "./types"; import { upgradeCatalogSchema } from "./upgradeCatalogSchema"; @@ -128,6 +129,13 @@ export class Catalog implements IHubCatalog { return Object.keys(this.scopes) as unknown as EntityType[]; } + /** + * Return the display configuration for the gallery + */ + get displayConfig(): IGalleryDisplayConfig { + return this._catalog.displayConfig; + } + /** * Get the scope's query for a particular entity type * @param type diff --git a/packages/common/src/search/types/IHubCatalog.ts b/packages/common/src/search/types/IHubCatalog.ts index 195e84bcf13..a165205f829 100644 --- a/packages/common/src/search/types/IHubCatalog.ts +++ b/packages/common/src/search/types/IHubCatalog.ts @@ -1,3 +1,8 @@ +import { + CARD_TITLE_TAGS, + CORNERS, + DROP_SHADOWS, +} from "../../core/schemas/shared/enums"; import { WellKnownCollection } from "../wellKnownCatalog"; export type CatalogType = "content" | "exclusion"; @@ -35,6 +40,11 @@ export interface IHubCatalog { scopes: string; collections: string; }; + + /** + * Optional display configuration to control a catalog's appearance in the UI + */ + displayConfig?: IGalleryDisplayConfig; } export interface ICatalogScope extends Partial> {} @@ -185,4 +195,12 @@ export interface IGalleryDisplayConfig { * If this is true on a collection's display config, that collection will not be shown in the gallery. */ hidden?: boolean; + layout?: "list" | "grid" | "map" | "table" | "calendar" | "compact"; + cardTitleTag?: CARD_TITLE_TAGS; + showThumbnail?: "show" | "hide" | "grid"; + corners?: CORNERS; + shadow?: DROP_SHADOWS; + showLinkButton?: boolean; + linkButtonStyle?: "solid" | "outline" | "outline-fill" | "transparent"; + linkButtonText?: string; } diff --git a/packages/common/test/search/Catalog.test.ts b/packages/common/test/search/Catalog.test.ts index 647cbcafd29..85e78ed8153 100644 --- a/packages/common/test/search/Catalog.test.ts +++ b/packages/common/test/search/Catalog.test.ts @@ -4,11 +4,11 @@ import { ArcGISContextManager } from "../../src/ArcGISContextManager"; import { ICatalogScope, IFilter, + IGalleryDisplayConfig, IHubCatalog, IHubCollection, IHubSearchResponse, IHubSearchResult, - IPredicate, IQuery, } from "../../src/search"; import { Catalog } from "../../src"; @@ -16,6 +16,7 @@ import * as FetchEntityCatalogModule from "../../src/search/fetchEntityCatalog"; import * as HubSearchModule from "../../src/search/hubSearch"; import * as CatalogContainsModule from "../../src/core/catalogContains"; import { MOCK_AUTH } from "../mocks/mock-auth"; +import { CORNERS, DROP_SHADOWS } from "../../src/core/schemas/shared/enums"; const catalogJson: IHubCatalog = { title: "Demo Catalog", @@ -95,6 +96,16 @@ const catalogJson: IHubCatalog = { }, }, ], + displayConfig: { + hidden: false, + showThumbnail: "show", + showLinkButton: true, + linkButtonStyle: "outline", + linkButtonText: "Explore", + corners: CORNERS.square, + shadow: DROP_SHADOWS.none, + layout: "list", + }, }; const noScopeCatalog: IHubCatalog = { @@ -157,6 +168,9 @@ describe("Catalog Class:", () => { instance.title = "Changed Title"; expect(instance.title).toBe("Changed Title"); expect(instance.availableScopes).toEqual(["item", "group", "user"]); + expect(instance.displayConfig).toEqual( + catalogJson.displayConfig as IGalleryDisplayConfig + ); }); it("allows null scopes", () => { const instance = Catalog.fromJson(cloneObject(noScopeCatalog), context);