Merge branch 'develop' into feature/DES-961-dialog-action-group

Amsterdam · Sep 30, 2024 · 08383a1 · 08383a1
2 parents 03e5eb6 + 9b97e47
commit 08383a1
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 58 deletions.
diff --git a/packages/css/src/components/screen/screen.scss b/packages/css/src/components/screen/screen.scss
@@ -10,6 +10,7 @@
 .ams-screen {
   background-color: var(--ams-screen-background-color);
   margin-inline: auto;
+  position: relative;
 
   @include reset;
 }

diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx
@@ -36,6 +36,9 @@ export const parameters = {
   controls: {
     sort: 'alpha',
   },
+  grid: {
+    disable: true,
+  },
   options: {
     storySort: {
       order: [

diff --git a/storybook/src/components/Grid/Grid.docs.mdx b/storybook/src/components/Grid/Grid.docs.mdx
@@ -14,68 +14,58 @@ import README from "../../../../packages/css/src/components/grid/README.md?raw";
 
 ## Examples
 
-The pink areas represent the columns of the grid.
-The gaps between the columns are transparent.
+The grey strokes in the examples on this page indicate the columns of the grid.
+The gaps between the columns are white – note that they can be wider than the columns.
+Pink boxes represent cells on the grid.
 
-The grid has 12 columns on wide screens, so all 12 cells in the example above are in a row.
-On narrow screens, you will see three rows of four columns; on medium-wide screens, one row of eight and one of four.
-
-### Vertical margin
-
-Unlike the horizontal margins between columns, the vertical ones above and below are adjustable.
-The`paddingVertical`, `paddingTop`, and `paddingBottom` props add white space above and below the grid.
-This is useful in a coloured area like [Footer](/docs/components-containers-footer--docs) or [Spotlight](/docs/components-containers-spotlight--docs) or between two consecutive grids.
+### Vertical padding
 
+Add white space above and below the grid through the `padding…` props.
+This is useful on a coloured background, like [Footer](/docs/components-containers-footer--docs) or [Spotlight](/docs/components-containers-spotlight--docs), or between two consecutive grids.
 Specify a value of `medium` for vertical white space as wide as the horizontal.
-Use `small` for half of that width and `large` for double.
-
-These white spaces also shrink and grow with the window width.
+Use `small` for half that width and `large` for double.
+This padding is responsive as well.
 
-<Canvas of={GridStories.VerticalSpace} />
+<Canvas of={GridStories.VerticalPadding} />
 
-### Vertical white space
+### Vertical gap
 
-A grid automatically creates multiple rows if the next cell no longer fits on the current row.
-
-By default, there is as much white space between two rows as between two columns.
-In some cases, more or less white space might be better.
+A grid automatically creates a new row if the next cell doesn’t fit the current one.
+White space between rows is as wide as that between columns.
+Use the `verticalGap` prop to make it larger, smaller, or even remove it.
 
 <Canvas of={GridStories.VerticalGap} />
 
-### Cells spanning columns
+### Span columns
 
 A cell defaults to spanning 1 column in the grid.
 Use the `span` prop to make a cell span more columns.
 
-<Canvas of={GridStories.SpanMultipleColumns} />
+<Canvas of={GridStories.SpanColumns} />
 
-### Different widths
+### Span responsively
 
 You can make the number of columns a cell spans depend on the window width.
 Use the `span` prop with 3 values for narrow, medium, and wide windows.
+E.g. `span={{ narrow: 4, medium: 6, wide: 8 }}` makes the cell span all 4 columns on narrow windows, 6 of the 8 on medium windows, and 8 of the 12 on wide windows.
 
-With `span={{ narrow: 4, medium: 6, wide: 8 }}`, this cell is 4 out of 4 columns wide on narrow windows, 6 out of 8 on medium windows, and 8 out of 12 on wide windows.
-
-<Canvas of={GridStories.ConfigureGridVariants} />
+<Canvas of={GridStories.SpanResponsively} />
 
-### Full width
+### Span all columns
 
-To make the cell full width – whether the grid has 4, 8, or 12 columns – use `span="all"`.
+To stretch the cell to all columns of the grid – whether that are 4, 8, or 12 – use `span="all"`.
 
 <Canvas of={GridStories.SpanAllColumns} />
 
 ### Start position
 
 Each cell automatically starts in the next available position in the grid.
-You usually don’t need to specify a value of 1 explicitly.
-You can adjust the starting position of a cell with the `start` prop.
-This way, you can align cells in multiple rows or place a cell in the centre of a wide grid.
+Adjust the starting position of a cell with the `start` prop.
+This way, you can align cells in multiple rows or center a cell horizontally.
 It can also skip a column for more white space between cells.
 
 The starting position of a cell may also depend on the window width.
-Use the `start` prop with 3 values, just like with `span`.
-
-An example with `start={2}`:
+Use the `start` prop with 3 values, e.g. `start={{ narrow: 2, medium: 4, wide: 6 }}`.
 
 <Canvas of={GridStories.StartPosition} />
 

diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx
@@ -12,7 +12,8 @@ const meta = {
   title: 'Components/Layout/Grid',
   component: Grid,
   args: {
-    className: 'ams-docs-grid',
+    gapVertical: undefined /* Keeps this prop at the top of the Controls table. */,
+    paddingVertical: 'medium',
   },
   argTypes: {
     className: {
@@ -47,6 +48,9 @@ const meta = {
       options: [undefined, 'small', 'medium', 'large'],
     },
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof Grid>
 
 export default meta
@@ -70,10 +74,19 @@ const cellMeta = {
 type Story = StoryObj<typeof meta>
 type CellStory = StoryObj<typeof cellMeta>
 
+const BackgroundGrid = () => (
+  <Grid className="ams-docs-grid">
+    {Array.from(Array(12).keys()).map((i) => (
+      <Grid.Cell className="ams-docs-grid__cell" key={i} />
+    ))}
+  </Grid>
+)
+
 const StoryTemplate: Story = {
   decorators: [
     (Story) => (
       <Screen>
+        <BackgroundGrid />
         <Story />
       </Screen>
     ),
@@ -84,7 +97,8 @@ const CellStoryTemplate: CellStory = {
   decorators: [
     (Story) => (
       <Screen>
-        <Grid>
+        <BackgroundGrid />
+        <Grid paddingVertical="medium">
           <Story />
         </Grid>
       </Screen>
@@ -93,40 +107,37 @@ const CellStoryTemplate: CellStory = {
   render: ({ children, ...args }) => <Grid.Cell {...args}>{children}</Grid.Cell>,
 }
 
-const TwelveGridCells = Array.from(Array(12).keys()).map((i) => <Grid.Cell className="ams-docs-item" key={i} />)
-
 export const Default: Story = {
   ...StoryTemplate,
-  args: {
-    children: TwelveGridCells,
-  },
 }
 
-export const VerticalSpace: Story = {
+export const VerticalPadding: Story = {
   ...StoryTemplate,
   args: {
-    children: TwelveGridCells,
-    paddingVertical: 'medium',
+    children: <Grid.Cell className="ams-docs-item" span="all" />,
   },
 }
 
 export const VerticalGap: Story = {
   ...StoryTemplate,
   args: {
-    children: Array.from(Array(6).keys()).map((i) => <Grid.Cell className="ams-docs-item" span={4} key={i} />),
+    children: [
+      <Grid.Cell className="ams-docs-item" span="all" key={1} />,
+      <Grid.Cell className="ams-docs-item" span="all" key={2} />,
+    ],
     gapVertical: 'small',
   },
 }
 
-export const SpanMultipleColumns: CellStory = {
+export const SpanColumns: CellStory = {
   ...CellStoryTemplate,
   args: {
     children: <div className="ams-docs-item" />,
     span: 4,
   },
 }
 
-export const ConfigureGridVariants: CellStory = {
+export const SpanResponsively: CellStory = {
   ...CellStoryTemplate,
   args: {
     children: <div className="ams-docs-item" />,
@@ -147,7 +158,7 @@ export const StartPosition: CellStory = {
   args: {
     children: <div className="ams-docs-item" />,
     span: 3,
-    start: 2,
+    start: { narrow: 2, medium: 4, wide: 6 },
   },
 }
 

diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css
@@ -72,6 +72,12 @@
   position: absolute;
 }
 
+.ams-docs-column,
+.ams-docs-grid,
+.ams-docs-row {
+  border-inline: thin solid var(--ams-docs-grey);
+}
+
 .ams-docs-column,
 .ams-docs-row {
   background: repeating-linear-gradient(
@@ -81,7 +87,6 @@
     white 0.5rem,
     white 1rem
   );
-  border: thin solid var(--ams-docs-grey);
 }
 
 .ams-docs-column {
@@ -94,7 +99,32 @@
 }
 
 .ams-docs-grid {
-  /* Todo columns background */
+  block-size: 100vh;
+  inset-block: 0;
+  inset-inline: 0;
+  position: absolute;
+
+  /* stylelint-disable selector-max-id */
+  #storybook-docs & {
+    block-size: 100%;
+  }
+  /* stylelint-enable selector-max-id */
+}
+
+.ams-docs-grid__cell {
+  background-color: var(--ams-docs-grey);
+}
+
+@media screen and (width < 36rem) {
+  .ams-docs-grid__cell:nth-child(n + 5) {
+    display: none;
+  }
+}
+
+@media screen and (width < 68rem) {
+  .ams-docs-grid__cell:nth-child(n + 9) {
+    display: none;
+  }
 }
 
 .ams-docs-item {
@@ -105,19 +135,19 @@
   line-height: var(--ams-paragraph-small-line-height);
   padding-block: 1.5rem;
   text-align: center;
-}
 
-.ams-docs-item--highlight {
-  background-color: var(--ams-docs-lightblue);
-}
+  .ams-docs-row > & {
+    flex-basis: 8rem;
+    padding-inline: 1.5rem;
+  }
 
-.ams-docs-row > .ams-docs-item {
-  flex-basis: 8rem;
-  padding-inline: 1.5rem;
+  .ams-docs-column > & {
+    min-inline-size: 3rem;
+  }
 }
 
-.ams-docs-column > .ams-docs-item {
-  min-inline-size: 3rem;
+.ams-docs-item--highlight {
+  background-color: var(--ams-docs-lightblue);
 }
 
 [class*="ams-docs-token-example--"] {