Merge remote-tracking branch 'origin/main' into remove-available-date…

…-code-not-needed-anymore
wellcomecollection · May 21, 2024 · c1be23f · c1be23f
2 parents 4e25952 + 9f63ee3
commit c1be23f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 22 deletions.
diff --git a/common/views/slices/EditorialImage/index.tsx b/common/views/slices/EditorialImage/index.tsx
@@ -9,7 +9,6 @@ import {
 } from '@weco/content/components/Body/Body';
 import CaptionedImage from '@weco/content/components/CaptionedImage/CaptionedImage';
 import { transformEditorialImageSlice } from '@weco/content/services/prismic/transformers/body';
-import Layout, { gridSize12 } from '@weco/common/views/components/Layout';
 
 export type EditorialImageSliceProps = SliceComponentProps<
   SliceType,
@@ -23,27 +22,39 @@ const EditorialImageSlice: FunctionComponent<EditorialImageSliceProps> = ({
   const transformedSlice = transformEditorialImageSlice(slice);
 
   const options = { ...defaultContext, ...context };
-  // TODO: use one layout for all image weights if/when it's established
-  // that width isn't an adequate means to illustrate a difference
-  return (
-    <SpacingComponent $sliceType={transformedSlice.type}>
-      {transformedSlice.weight === 'default' && (
-        <LayoutWidth width={options.isVisualStory ? 8 : 10}>
-          <CaptionedImage {...transformedSlice.value} />
-        </LayoutWidth>
-      )}
+  const width = transformedSlice.value.image.width;
+  const height = transformedSlice.value.image.height;
+  const widthDividedByHeight = width / height;
+
+  const aspectRatio = () => {
+    switch (true) {
+      case widthDividedByHeight >= 0.9 && widthDividedByHeight <= 1.1:
+        return 'square';
+      case widthDividedByHeight > 1.1:
+        return 'landscape';
+      case widthDividedByHeight < 0.9:
+        return 'portrait';
+    }
+  };
 
-      {transformedSlice.weight === 'standalone' && (
-        <Layout gridSizes={gridSize12()}>
-          <CaptionedImage {...transformedSlice.value} />
-        </Layout>
-      )}
+  // Our images are constrained by viewport height so that they will always fit
+  // on the screen, but we want to make them feel proportionally similar
+  // regardless of their aspect ratio. To do this we can set the _maximum_
+  // number of columns that they're allowed to fill in width (but with no
+  // guarantees that they will get to that width because of the height
+  // constraint)
+  const maxColumns =
+    options.isVisualStory || aspectRatio() === 'portrait'
+      ? 8
+      : aspectRatio() === 'square'
+      ? 10
+      : 12; // landscape
 
-      {transformedSlice.weight === 'supporting' && (
-        <LayoutWidth width={options.minWidth}>
-          <CaptionedImage {...transformedSlice.value} />
-        </LayoutWidth>
-      )}
+  return (
+    <SpacingComponent $sliceType={transformedSlice.type}>
+      <LayoutWidth width={maxColumns}>
+        <CaptionedImage {...transformedSlice.value} />
+      </LayoutWidth>
     </SpacingComponent>
   );
 };

diff --git a/common/views/slices/Text/index.tsx b/common/views/slices/Text/index.tsx
@@ -21,7 +21,7 @@ const Text: FunctionComponent<TextProps> = ({ slice, context, index }) => {
   const options = { ...defaultContext, ...context };
   return (
     <SpacingComponent $sliceType={slice.slice_type}>
-      <LayoutWidth width={context.minWidth}>
+      <LayoutWidth width={options.minWidth}>
         <div
           className={classNames({
             'body-text spaced-text': true,

diff --git a/content/webapp/components/EventSchedule/EventScheduleItem.tsx b/content/webapp/components/EventSchedule/EventScheduleItem.tsx
@@ -197,7 +197,13 @@ const EventScheduleItem: FunctionComponent<Props> = ({
               !event.bookingEnquiryTeam &&
               !(event.schedule && event.schedule.length > 1) && (
                 <Space $v={{ size: 'm', properties: ['margin-top'] }}>
-                  <Message text="Just turn up" />
+                  <Message
+                    text={`${
+                      event.hasEarlyRegistration
+                        ? 'Arrive early to register'
+                        : 'Just turn up'
+                    }`}
+                  />
                 </Space>
               )}