Merge pull request #11434 from wellcomecollection/add-wobblyedge

Add `WobblyEdge` to Cardigan, slight tweaks on Recommended stories
wellcomecollection · Dec 3, 2024 · 744e568 · 744e568
2 parents 7670167 + ec0f066
commit 744e568
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 49 deletions.
diff --git a/cardigan/stories/components/WobblyEdge/WobblyBottom.stories.tsx b/cardigan/stories/components/WobblyEdge/WobblyBottom.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ReadMeInfo } from '@weco/cardigan/config/decorators';
+import { image as contentImage } from '@weco/cardigan/stories/data/images';
+import PrismicImage from '@weco/common/views/components/PrismicImage/PrismicImage';
+import { WobblyBottom } from '@weco/common/views/components/WobblyEdge';
+import Readme from '@weco/common/views/components/WobblyEdge/README.mdx';
+
+const Template = args => (
+  <>
+    <div style={{ maxWidth: '500px' }}>
+      <WobblyBottom {...args} />
+    </div>
+    <ReadMeInfo Readme={Readme} />
+  </>
+);
+
+const meta: Meta<typeof WobblyBottom> = {
+  title: 'Components/WobblyEdge/WobblyBottom',
+  component: WobblyBottom,
+  args: {
+    backgroundColor: 'warmNeutral.300',
+    children: <PrismicImage image={contentImage()} quality="low" />,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WobblyBottom>;
+
+export const Basic: Story = {
+  name: 'WobblyBottom',
+  render: Template,
+};
diff --git a/cardigan/stories/components/WobblyEdge/WobblyEdge.stories.tsx b/cardigan/stories/components/WobblyEdge/WobblyEdge.stories.tsx
@@ -3,32 +3,72 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ReadMeInfo } from '@weco/cardigan/config/decorators';
 import { image as contentImage } from '@weco/cardigan/stories/data/images';
 import PrismicImage from '@weco/common/views/components/PrismicImage/PrismicImage';
-import { WobblyBottom } from '@weco/common/views/components/WobblyEdge';
+import { WobblyEdge } from '@weco/common/views/components/WobblyEdge';
 import Readme from '@weco/common/views/components/WobblyEdge/README.mdx';
 
-const Template = args => (
-  <>
-    <div style={{ maxWidth: '500px' }}>
-      <WobblyBottom {...args} />
-    </div>
-    <ReadMeInfo Readme={Readme} />
-  </>
-);
+const Template = args => {
+  const { isRotated } = args;
 
-const meta: Meta<typeof WobblyBottom> = {
-  title: 'Components/WobblyBottom',
-  component: WobblyBottom,
+  return (
+    <>
+      <div
+        style={{
+          maxWidth: '500px',
+          padding: '20px 0',
+          position: 'relative',
+        }}
+      >
+        {isRotated && (
+          <div
+            style={{
+              position: 'absolute',
+              top: '20px',
+              width: '100%',
+            }}
+          >
+            <WobblyEdge {...args} />
+          </div>
+        )}
+        <PrismicImage image={contentImage()} quality="low" />
+        {!isRotated && <WobblyEdge {...args} />}
+      </div>
+      <ReadMeInfo Readme={Readme} />
+    </>
+  );
+};
+
+const meta: Meta<typeof WobblyEdge> = {
+  title: 'Components/WobblyEdge/WobblyEdge',
+  component: WobblyEdge,
   args: {
     backgroundColor: 'warmNeutral.300',
-    children: <PrismicImage image={contentImage()} quality="low" />,
+    isValley: false,
+    isRotated: false,
+    intensity: 50,
+    points: 5,
+    isStatic: false,
+  },
+  argTypes: {
+    backgroundColor: {
+      options: ['warmNeutral.300', 'white'],
+      control: { type: 'radio' },
+    },
+    intensity: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
   },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof WobblyBottom>;
+type Story = StoryObj<typeof WobblyEdge>;
 
 export const Basic: Story = {
-  name: 'WobblyBottom',
+  name: 'WobblyEdge',
   render: Template,
 };
diff --git a/common/views/components/RecommendedStories/index.tsx b/common/views/components/RecommendedStories/index.tsx
@@ -4,29 +4,33 @@ import styled from 'styled-components';
 import { font } from '@weco/common/utils/classnames';
 import { Container } from '@weco/common/views/components/styled/Container';
 import Space from '@weco/common/views/components/styled/Space';
-import { WobblyBottom } from '@weco/common/views/components/WobblyEdge';
+import { WobblyEdge } from '@weco/common/views/components/WobblyEdge';
 
 const RecommendedSection = styled(Space).attrs({
   $v: { size: 'l', properties: ['margin-bottom', 'margin-top'] },
 })`
   background-color: ${props => props.theme.color('white')};
 `;
 
+const RecommendedWrapper = styled.div`
+  h2 {
+    padding: 16px 24px;
+    margin: 0;
+  }
+
+  ${props => props.theme.media('xlarge', 'min-width')`
+    max-width: 2200px;
+    margin: 0 auto;
+    justify-content: center;
+  `}
+`;
+
 const StoryPromoContainer = styled(Container)`
-  padding: 0 24px ${props => props.theme.containerPadding.small}px;
+  padding: 0 24px 32px;
   max-width: none;
   width: auto;
   overflow: auto;
   margin: 0 auto;
-  margin-bottom: ${props => props.theme.containerPadding.medium}px;
-
-  ${props =>
-    props.theme.media(
-      'medium',
-      'max-width'
-    )(`
-    margin-bottom: ${props.theme.containerPadding.small}px;
-  `)}
 
   &::-webkit-scrollbar {
     height: 18px;
@@ -40,6 +44,10 @@ const StoryPromoContainer = styled(Container)`
     border-color: ${props => props.theme.color('white')};
   }
 
+  ${props => props.theme.media('medium', 'max-width')`
+    padding-bottom: 24px;
+  `}
+
   -webkit-overflow-scrolling: touch;
 `;
 
@@ -53,6 +61,11 @@ const StoriesContainer = styled.ul`
   margin-left: 0;
   display: flex;
   flex-wrap: nowrap;
+
+  ${props => props.theme.media('xlarge', 'min-width')`
+    max-width: 2200px;
+    margin: 0 auto;
+  `}
 `;
 
 const StoryLink = styled.a`
@@ -75,12 +88,16 @@ const StoryWrapper = styled.li`
     padding-bottom: 0;
   }
 
+  ${props => props.theme.media('xlarge', 'min-width')`
+    min-width: 345px;
+  `}
+
   ${props => props.theme.media('large', 'max-width')`
     min-width: 40vw;
-    max-width: 300px;
   `}
 
   ${props => props.theme.media('medium', 'max-width')`
+      max-width: 300px;
       min-width: 80vw;
   `}
 `;
@@ -179,28 +196,33 @@ const RecommendedStories = () => {
 
   return (
     <RecommendedSection>
-      <h2 className={font('wb', 3)} style={{ padding: '16px 24px', margin: 0 }}>
-        Popular stories
-      </h2>
-
-      <StoryPromoContainer>
-        <StoriesContainer>
-          {stories.map(story => {
-            return (
-              <StoryWrapper key={story.title}>
-                <StoryLink href={story.path}>
-                  <Story>
-                    <img src={story.imageUrl} alt={story.title} />
-                    <h4 className={font('wb', 6)}>{story.title}</h4>
-                  </Story>
-                </StoryLink>
-              </StoryWrapper>
-            );
-          })}
-        </StoriesContainer>
-      </StoryPromoContainer>
-
-      <WobblyBottom backgroundColor="warmNeutral.300" />
+      <WobblyEdge
+        backgroundColor="warmNeutral.300"
+        isRotated
+        isValley
+        intensity={60}
+      />
+
+      <RecommendedWrapper>
+        <h2 className={font('wb', 3)}>Popular stories</h2>
+
+        <StoryPromoContainer>
+          <StoriesContainer>
+            {stories.map(story => {
+              return (
+                <StoryWrapper key={story.title}>
+                  <StoryLink href={story.path}>
+                    <Story>
+                      <img src={story.imageUrl} alt={story.title} />
+                      <h4 className={font('wb', 6)}>{story.title}</h4>
+                    </Story>
+                  </StoryLink>
+                </StoryWrapper>
+              );
+            })}
+          </StoriesContainer>
+        </StoryPromoContainer>
+      </RecommendedWrapper>
     </RecommendedSection>
   );
 };