/ src / config / components / shelf.ts
shelf.ts
  1  import { ShelfConfig } from '@amp/web-app-components/config/components/shelf';
  2  
  3  const defaultShelfConfig = ShelfConfig.get();
  4  const { GRID_MAX_CONTENT, GRID_VALUES, GRID_ROW_GAP } = defaultShelfConfig;
  5  
  6  ShelfConfig.set({
  7      ...defaultShelfConfig,
  8      GRID_MAX_CONTENT: {
  9          ...GRID_MAX_CONTENT,
 10          Brick: GRID_MAX_CONTENT.A,
 11          FooterLink: GRID_MAX_CONTENT.A,
 12          InAppPurchaseLockup: GRID_MAX_CONTENT.C,
 13          LargeBrick: GRID_MAX_CONTENT.A,
 14          LargeLockup: GRID_MAX_CONTENT.C,
 15          MediumLockup: GRID_MAX_CONTENT.A,
 16          PosterLockup: GRID_MAX_CONTENT.A,
 17          ScreenshotLarge: GRID_MAX_CONTENT.A,
 18          ScreenshotVision: GRID_MAX_CONTENT.A,
 19          ScreenshotPhone: GRID_MAX_CONTENT.G,
 20          ScreenshotPad: GRID_MAX_CONTENT.A,
 21          SearchLink: GRID_MAX_CONTENT.A,
 22          SearchResult: GRID_MAX_CONTENT.A,
 23          SmallLockup: GRID_MAX_CONTENT.A,
 24          SmallLockupWithOrdinal: {},
 25          SmallStoryCard: GRID_MAX_CONTENT.A,
 26          ProductBadge: GRID_MAX_CONTENT.D,
 27      },
 28      GRID_VALUES: {
 29          ...GRID_VALUES,
 30          Brick: {
 31              ...GRID_VALUES.A,
 32              medium: 3,
 33          },
 34          InAppPurchaseLockup: {
 35              xsmall: 3,
 36              small: 5,
 37              medium: 6,
 38              large: 8,
 39              xlarge: 8,
 40          },
 41          LargeBrick: {
 42              ...GRID_VALUES.C,
 43              small: 2,
 44              medium: 2,
 45              large: 3,
 46              xlarge: 3,
 47          },
 48          LargeLockup: {
 49              xsmall: 2,
 50              small: 3,
 51              medium: 4,
 52              large: 5,
 53              xlarge: 6,
 54          },
 55          MediumLockup: {
 56              xsmall: 2,
 57              small: 2,
 58              medium: 4,
 59              large: 5,
 60              xlarge: 5,
 61          },
 62          PosterLockup: {
 63              ...GRID_VALUES.A,
 64              xsmall: 1,
 65              large: 2,
 66          },
 67          ProductBadge: {
 68              ...GRID_VALUES.D,
 69              small: 5,
 70              medium: 6,
 71          },
 72          SearchLink: {
 73              xsmall: 1,
 74              small: 2,
 75              medium: 3,
 76              large: 3,
 77              xlarge: 3,
 78          },
 79          SearchResult: {
 80              xsmall: 1,
 81              small: 2,
 82              medium: 3,
 83              large: 3,
 84              xlarge: 3,
 85          },
 86          FooterLink: {
 87              xsmall: 1,
 88              small: 2,
 89              medium: 3,
 90              large: 3,
 91              xlarge: 3,
 92          },
 93          SmallLockup: {
 94              xsmall: 2,
 95              small: 2,
 96              medium: 3,
 97              large: 4,
 98              xlarge: 4,
 99          },
100          SmallLockupWithOrdinal: {
101              xsmall: 2,
102              small: 4,
103              medium: 5,
104              large: 6,
105              xlarge: 6,
106          },
107          SmallStoryCard: {
108              xsmall: 2,
109              small: 2,
110              medium: 2,
111              large: 2,
112              xlarge: 2,
113          },
114          ScreenshotLarge: {
115              xsmall: 1,
116              small: 2,
117              medium: 2,
118              large: 3,
119              xlarge: 3,
120          },
121          ScreenshotVision: {
122              xsmall: 1,
123              small: 1,
124              medium: 2,
125              large: 3,
126              xlarge: 3,
127          },
128          ScreenshotPhone: {
129              xsmall: 2,
130              small: 3,
131              medium: 4,
132              large: 5,
133              xlarge: 5,
134          },
135          ScreenshotPad: {
136              xsmall: 1,
137              small: 3,
138              medium: 4,
139              large: 4,
140              xlarge: 4,
141          },
142      },
143      GRID_ROW_GAP: {
144          ...GRID_ROW_GAP,
145          Brick: GRID_ROW_GAP.None,
146          FooterLink: GRID_ROW_GAP.None,
147          InAppPurchaseLockup: GRID_ROW_GAP.None,
148          LargeBrick: {
149              xsmall: 24,
150              small: 24,
151              medium: 24,
152              large: 24,
153              xlarge: 24,
154          },
155          LargeLockup: {
156              xsmall: 20,
157              small: 20,
158              medium: 20,
159              large: 20,
160              xlarge: 20,
161          },
162          MediumLockup: {
163              xsmall: 24,
164              small: 24,
165              medium: 24,
166              large: 24,
167              xlarge: 24,
168          },
169          PosterLockup: GRID_ROW_GAP.None,
170          ScreenshotLarge: GRID_ROW_GAP.None,
171          ScreenshotVision: GRID_ROW_GAP.None,
172          ScreenshotPhone: GRID_ROW_GAP.None,
173          ScreenshotPad: GRID_ROW_GAP.None,
174          SearchLink: {
175              xsmall: 10,
176              small: 20,
177              medium: 20,
178              large: 20,
179              xlarge: 20,
180          },
181          SearchResult: {
182              xsmall: 24,
183              small: 24,
184              medium: 24,
185              large: 24,
186              xlarge: 24,
187          },
188          SmallLockup: {
189              xsmall: 24,
190              small: 24,
191              medium: 24,
192              large: 24,
193              xlarge: 24,
194          },
195          SmallLockupWithOrdinal: {
196              xsmall: 24,
197              small: 24,
198              medium: 24,
199              large: 24,
200              xlarge: 24,
201          },
202          SmallStoryCard: GRID_ROW_GAP.None,
203          ProductBadge: GRID_ROW_GAP.None,
204      },
205      GRID_COL_GAP: {
206          ProductBadge: { small: '20', medium: '0', large: '0', xlarge: '0' },
207      },
208  });