init commit

2 files changed, 219 insertions, 0 deletions

diff --git a/shared/components/config/components/artwork.ts b/shared/components/config/components/artwork.ts
new file mode 100644
index 0000000..daca473
--- /dev/null
+++ b/shared/components/config/components/artwork.ts
@@ -0,0 +1,103 @@
+// default params used by artwork component.
+import type { Profile } from '@amp/web-app-components/src/components/Artwork/types';
+import type { Breakpoints } from '@amp/web-app-components/src/types';
+import { ASPECT_RATIOS } from '@amp/web-app-components/src/components/Artwork/constants';
+
+export type ArtworkProfileMap<ProfileName extends string = string> = Map<
+    ProfileName,
+    Profile
+>;
+export interface ArtworkConfigOptions {
+    BREAKPOINTS?: Breakpoints;
+    PROFILES?: ArtworkProfileMap;
+}
+
+interface ArtworkConfig {
+    get: () => ArtworkConfigOptions;
+    set: (obj: ArtworkConfigOptions) => void;
+}
+
+function artworkConfig(): ArtworkConfig {
+    const {
+        HD,
+        ONE,
+        HERO,
+        THREE_QUARTERS,
+        SUPER_HERO_WIDE,
+        UBER,
+        ONE_THIRD,
+        HD_ASPECT_RATIO,
+        EDITORIAL_DEFAULT,
+    } = ASPECT_RATIOS;
+    let config: ArtworkConfigOptions = {
+        BREAKPOINTS: {
+            xsmall: {
+                max: 739,
+            },
+            small: {
+                min: 740,
+                max: 999,
+            },
+            medium: {
+                min: 1000,
+                max: 1319,
+            },
+            large: {
+                min: 1320,
+                max: 1679,
+            },
+            xlarge: {
+                min: 1680,
+            },
+        },
+        PROFILES: new Map([
+            ['brick', [[340, 340, 290, 290], HD, 'sr']],
+            ['brick-sporting-event', [[340, 340, 290, 290], HD, 'sh']],
+            ['product', [[500, 500, 300, 270], ONE, 'bb']],
+            ['episode', [[330, 330, 305, 295], HD, 'sr']],
+            [
+                'editorial-card',
+                [[530, 530, 480, 300, 300], EDITORIAL_DEFAULT, 'fa'],
+            ],
+            ['editorial-card-cover-artwork', [[60], ONE, 'cc']],
+            ['editorial-card-video-art', [[88], HD_ASPECT_RATIO, 'mv']],
+            ['hero', [[530, 530, 600, 450], HERO, 'sr']],
+            ['superHeroLockup', [[330, 330, 305, 295], THREE_QUARTERS, 'bb']],
+            ['superHeroTall', [[600, 600, 450], THREE_QUARTERS, 'sr']],
+            [
+                'superHeroWide',
+                [[1200, 1200, 900, 600, 450], SUPER_HERO_WIDE, 'sr'],
+            ],
+            ['uber', [[1200], UBER, 'bb']],
+            ['episode-lockup', [[316, 316, 296, 296], ONE, 'cc']],
+            ['upsell-artwork', [[94], ONE, 'cc']],
+            ['upsell-wordmark', [[140], 140 / 14, 'bb']],
+            ['ellipse-lockup', [[243, 243, 220, 190, 160], ONE, 'cc']],
+            ['standard', [[243, 243, 220, 190, 160], ONE, 'bb']],
+            ['powerswoosh', [[300], ONE, 'cc']],
+            ['powerswooshTall', [[600, 450], THREE_QUARTERS, 'sr']],
+            ['category-brick', [[1040, 1040, 1040, 680], ONE_THIRD, 'sr']],
+            ['info-fullscreen', [[600, 600, 450], ONE, 'bb']],
+            ['track-list', [[40], ONE, 'bb']],
+        ]),
+    };
+
+    const setConfig = (obj: ArtworkConfigOptions) => {
+        config = {
+            PROFILES: new Map([...config.PROFILES, ...obj.PROFILES]),
+            BREAKPOINTS: {
+                ...config.BREAKPOINTS,
+                ...(obj?.BREAKPOINTS ?? {}),
+            },
+        };
+    };
+
+    const getConfig = (): ArtworkConfigOptions => config;
+
+    return {
+        get: getConfig,
+        set: setConfig,
+    };
+}
+
+export const ArtworkConfig = artworkConfig();
diff --git a/shared/components/config/components/shelf.ts b/shared/components/config/components/shelf.ts
new file mode 100644
index 0000000..1146e3d
--- /dev/null
+++ b/shared/components/config/components/shelf.ts
@@ -0,0 +1,116 @@
+/* eslint-disable object-curly-newline */
+import type { Size } from '@amp/web-app-components/src/types';
+import type { GridType } from '@amp/web-app-components/src/components/Shelf/types';
+
+/**
+ * Used to customize the shared shelf
+ *
+ * @param GRID_MAX_CONTENT - Sets the max content size of the column for each viewport
+ * @param GRID_ROW_GAP -  Sets the row gap for a shelf in each viewport
+ * @param GRID_COL_GAP - Sets the column gap for a shelf in each viewport
+ * @param GRID_VALUES - Sets the number of items to show in a column of the grid for each viewport
+ *
+ * @example
+ * const ShelvesConfig = {
+ *   GRID_MAX_CONTENT: {
+ *     FooShelf: { xsmall: '298px' },
+ *   },
+ *   GRID_COL_GAP: {
+ *     FooShelf:  { xsmall: '10px', small:'20px', medium:'20px', large:'20px', xlarge: '30px' }
+ *   },
+ *   GRID_ROW_GAP: {
+ *     FooShelf:  { xsmall: '10px', small:'20px', medium:'20px', large:'20px', xlarge: '30px' }
+ *   },
+ *   GRID_VALUES: {
+ *     FooShelf:  { xsmall: 1, small: 3, medium: 5, large: 6, xlarge: 10 }
+ *   }
+ * }
+ */
+export interface ShelfConfigOptions {
+    /**
+     * Sets the max size of the column for each viewport
+     * (NOTE: these values will override GRID_VALUES)
+     */
+    GRID_MAX_CONTENT: {
+        [key in GridType]: { [value in Size]?: string };
+    };
+    /**
+     * Sets the row gap for a shelf in each viewport
+     * - Default for all shelves is { xsmall: '24px', small: '24px', medium: '24px', large: '24px', xlarge: '24px' }
+     */
+    GRID_ROW_GAP: {
+        [key in GridType]?: { [value in Size]?: number | null };
+    };
+    /**
+     * Sets the column gap for a shelf in each viewport
+     * - Default for all shelves is { xsmall: '10px', small: '20px', medium: '20px', large: '20px', xlarge: '20px' }
+     */
+    GRID_COL_GAP: {
+        [key in GridType]?: { [value in Size]?: string | null };
+    };
+    /**
+     * Sets the number of columns in the grid for each viewport
+     * (NOTE: this value will be overridden by values in GRID_MAX_CONTENT)
+     */
+    GRID_VALUES: {
+        [key in GridType]: { [value in Size]: number | null };
+    };
+}
+
+// Grid values correspond with dynamic-grids.scss
+function ShelfConfigInit() {
+    let config: ShelfConfigOptions = {
+        GRID_MAX_CONTENT: {
+            A: { xsmall: '298px' },
+            B: { xsmall: '298px' },
+            C: { xsmall: '200px' },
+            D: { xsmall: '144px' },
+            E: { xsmall: '144px' },
+            F: { xsmall: '270px' },
+            G: { xsmall: '144px' },
+            H: { xsmall: '94px' },
+            I: { xsmall: '144px' },
+            EllipseA: {},
+            Spotlight: {},
+            Single: {},
+            '1-1-2-3': {},
+            '2-2-3-4': { xsmall: '270px' },
+            '1-2-2-2': {},
+        },
+        GRID_COL_GAP: {},
+        GRID_ROW_GAP: {
+            None: { xsmall: 0, small: 0, medium: 0, large: 0, xlarge: 0 },
+            '1-2-2-2': { xsmall: 0, small: 0, medium: 0, large: 0, xlarge: 0 },
+        },
+        GRID_VALUES: {
+            A: { xsmall: null, small: 2, medium: 2, large: 3, xlarge: 3 },
+            B: { xsmall: null, small: 2, medium: 3, large: 4, xlarge: 4 },
+            C: { xsmall: null, small: 3, medium: 4, large: 5, xlarge: 5 },
+            D: { xsmall: null, small: 4, medium: 5, large: 8, xlarge: 8 },
+            E: { xsmall: null, small: 5, medium: 9, large: 10, xlarge: 10 },
+            F: { xsmall: null, small: 2, medium: 3, large: 3, xlarge: 3 },
+            G: { xsmall: null, small: 4, medium: 5, large: 6, xlarge: 6 },
+            H: { xsmall: null, small: 6, medium: 8, large: 10, xlarge: 10 },
+            I: { xsmall: null, small: 5, medium: 6, large: 8, xlarge: 8 },
+            Single: { xsmall: 1, small: 1, medium: 1, large: 1, xlarge: 1 },
+            EllipseA: { xsmall: 2, small: 4, medium: 6, large: 6, xlarge: 6 },
+            Spotlight: { xsmall: 1, small: 1, medium: 1, large: 1, xlarge: 1 },
+            '1-1-2-3': { xsmall: 1, small: 1, medium: 2, large: 3, xlarge: 3 },
+            '2-2-3-4': { xsmall: 2, small: 2, medium: 3, large: 4, xlarge: 4 },
+            '1-2-2-2': { xsmall: 1, small: 2, medium: 2, large: 2, xlarge: 2 },
+        },
+    };
+
+    const get = () => config;
+
+    const set = (obj: ShelfConfigOptions) => {
+        config = { ...config, ...obj };
+    };
+
+    return {
+        set,
+        get,
+    };
+}
+
+export const ShelfConfig = ShelfConfigInit();