move limits on width outside of component

Greater-London-Authority · Oct 13, 2023 · 9395b1a · 9395b1a
1 parent 96fd206
commit 9395b1a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 deletions.
diff --git a/packages/ui/src/lib/placardButton/PlacardButton.stories.svelte b/packages/ui/src/lib/placardButton/PlacardButton.stories.svelte
@@ -8,32 +8,52 @@
 <Meta title="Ui/PlacardButton" component={PlacardButton} />
 
 <Story name="With Body Only">
-	<PlacardButton>
-		<span slot="body">
-			The full dataset that this explorer is based on is available for download from the London
-			Datastore, along with other documents like the Technical Report, which contains the
-			questionnaires from the survey.
-		</span>
-		<span slot="footer">The Survey of Londoners on London Datastore</span>
-	</PlacardButton>
+	<div class="max-w-xl">
+		<PlacardButton>
+			<span slot="body">
+				The full dataset that this explorer is based on is available for download from the London
+				Datastore, along with other documents like the Technical Report, which contains the
+				questionnaires from the survey.
+			</span>
+			<span slot="footer">The Survey of Londoners on London Datastore</span>
+		</PlacardButton>
+	</div>
 </Story>
 
 <Story name="With Title Only">
-	<PlacardButton>
-		<span slot="title"> Download the User Guide. </span>
-		<span slot="footer">PDF</span>
-		<span slot="icon"><DocumentDownloadIcon class="h-6 w-6" /></span>
-	</PlacardButton>
+	<div class="max-w-xl">
+		<PlacardButton>
+			<span slot="title"> Download the User Guide. </span>
+			<span slot="footer">PDF</span>
+			<span slot="icon"><DocumentDownloadIcon class="h-6 w-6" /></span>
+		</PlacardButton>
+	</div>
 </Story>
 
 <Story name="With Title and Body">
-	<PlacardButton>
-		<span slot="title"> Getting the Data. </span>
-		<span slot="body">
-			The full dataset that this explorer is based on is available for download from the London
-			Datastore, along with other documents like the Technical Report, which contains the
-			questionnaires from the survey.
-		</span>
-		<span slot="footer">The Survey of Londoners on London Datastore</span>
-	</PlacardButton>
+	<div class="max-w-xl">
+		<PlacardButton>
+			<span slot="title"> Getting the Data. </span>
+			<span slot="body">
+				The full dataset that this explorer is based on is available for download from the London
+				Datastore, along with other documents like the Technical Report, which contains the
+				questionnaires from the survey.
+			</span>
+			<span slot="footer">The Survey of Londoners on London Datastore</span>
+		</PlacardButton>
+	</div>
+</Story>
+
+<Story name="Extra-wide, with limited text width">
+	<div class="max-w-3xl">
+		<PlacardButton>
+			<span slot="title" class="max-w-xl inline-block"> Getting the Data. </span>
+			<span slot="body" class="max-w-xl inline-block">
+				The full dataset that this explorer is based on is available for download from the London
+				Datastore, along with other documents like the Technical Report, which contains the
+				questionnaires from the survey.
+			</span>
+			<span slot="footer">The Survey of Londoners on London Datastore</span>
+		</PlacardButton>
+	</div>
 </Story>
diff --git a/packages/ui/src/lib/placardButton/PlacardButton.svelte b/packages/ui/src/lib/placardButton/PlacardButton.svelte
@@ -9,17 +9,17 @@
 	{href}
 	target={newWindow ? '_blank' : '_self'}
 	rel={newWindow ? 'noopener noreferrer' : ''}
-	class="bg-core-grey-700 group hover:bg-core-grey-800 transition h-full flex flex-col text-white max-w-xl"
+	class="bg-core-grey-700 group hover:bg-core-grey-800 transition h-full flex flex-col text-white"
 >
-	<div class="p-4 max-w-lg h-full space-y-2">
+	<div class="p-4 h-full space-y-2">
 		{#if $$slots.title}
-			<div class="max-w-xl text-2xl font-bold">
+			<div class="text-2xl font-bold">
 				<slot name="title" />
 			</div>
 		{/if}
 
 		{#if $$slots.body}
-			<div class="max-w-xl h-full text-core-grey-100">
+			<div class="h-full text-core-grey-100">
 				<slot name="body" />
 			</div>
 		{/if}