Add wobbly edge to cardigan

wellcomecollection · Dec 2, 2024 · 727b93f · 727b93f
1 parent 7670167
commit 727b93f
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 16 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,79 @@ 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 meta: Meta<typeof WobblyBottom> = {
-  title: 'Components/WobblyBottom',
-  component: WobblyBottom,
+const Template = args => {
+  const { isRotated } = args;
+
+  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',
+  args: {
+    intensity: 70,
+    isRotated: true,
+    points: 6,
+    isValley: true,
+  },
+
+  name: 'WobblyEdge',
   render: Template,
 };