Describe and move the example

Amsterdam · Sep 11, 2024 · f28e804 · f28e804
1 parent 7397dd3
commit f28e804
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -14,10 +14,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 ## Examples
 
-### Stick Out
-
-<Canvas of={SpotlightStories.StickOut} />
-
 ### Blue
 
 <Canvas of={SpotlightStories.Blue} />
@@ -50,6 +46,24 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Yellow} />
 
+### Stick out content
+
+Having an image stick out of a Spotlight adds playfulness to the design.
+It also prevents a large empty area in the Spotlight.
+
+This composition can be achieved with a Grid of two rows and two columns.
+The Spotlight occupies the two bottom cells, but it is empty – the text is separated into the bottom left cell.
+Additionally, the cell containing the Spotlight expands to cover the adjacent gaps and margins.
+The image is placed in the two cells to the right.
+The extent to which the image sticks out of the Spotlight depends on the aspect ratio of the image, the length of the text, and the width of the window.
+
+_Note: the Spotlight isn’t very wide on this page.
+And due to how Storybook works, the Grid in the example may incorrectly use 12 columns.
+Both circumstances prevent the image from sticking out if the example text is long.
+The [separate page](?path=/story/components-containers-spotlight--stick-out) for this example shows this composition better._
+
+<Canvas of={SpotlightStories.StickOutContent} />
+
 ### Improve semantics
 
 By default, a Spotlight renders a `<div>` element in HTML.

diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx
@@ -37,30 +37,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const StickOut: Story = {
-  render: ({ as, color }) => (
-    <Grid paddingBottom="medium">
-      <Grid.Cell coverGap rowSpan={{ narrow: 2, medium: 2, wide: 1 }} rowStart={2} span="all">
-        <Spotlight as={as} color={color} style={{ height: '100%' }} />
-      </Grid.Cell>
-      <Grid.Cell rowStart={{ narrow: 3, medium: 3, wide: 2 }} span={{ narrow: 4, medium: 8, wide: 6 }} start={1}>
-        <Paragraph inverseColor={!color || !['green', 'yellow'].includes(color)}>{exampleParagraph()}</Paragraph>
-      </Grid.Cell>
-      <Grid.Cell
-        rowSpan={2}
-        rowStart={1}
-        span={{ narrow: 4, medium: 8, wide: 6 }}
-        start={{ narrow: 1, medium: 1, wide: 7 }}
-        style={{ alignSelf: 'end' }}
-      >
-        <AspectRatio ratio="wide">
-          <Image alt="" src="https://picsum.photos/960/720" />
-        </AspectRatio>
-      </Grid.Cell>
-    </Grid>
-  ),
-}
-
 export const Blue: Story = {
   args: {
     color: 'blue',
@@ -109,6 +85,30 @@ export const Yellow: Story = {
   },
 }
 
+export const StickOutContent: Story = {
+  render: ({ as, color }) => (
+    <Grid paddingBottom="medium">
+      <Grid.Cell coverGap rowSpan={{ narrow: 2, medium: 2, wide: 1 }} rowStart={2} span="all">
+        <Spotlight as={as} color={color} style={{ height: '100%' }} />
+      </Grid.Cell>
+      <Grid.Cell rowStart={{ narrow: 3, medium: 3, wide: 2 }} span={{ narrow: 4, medium: 8, wide: 6 }} start={1}>
+        <Paragraph inverseColor={!color || !['green', 'yellow'].includes(color)}>{exampleParagraph()}</Paragraph>
+      </Grid.Cell>
+      <Grid.Cell
+        rowSpan={2}
+        rowStart={1}
+        span={{ narrow: 4, medium: 8, wide: 6 }}
+        start={{ narrow: 1, medium: 1, wide: 7 }}
+        style={{ alignSelf: 'end' }}
+      >
+        <AspectRatio ratio="square">
+          <Image alt="" src="https://picsum.photos/960/960" />
+        </AspectRatio>
+      </Grid.Cell>
+    </Grid>
+  ),
+}
+
 export const ImproveSemantics: Story = {
   args: {
     as: 'section',