Merge branch 'develop' into feature/DES-656-small-ul

Amsterdam · May 6, 2024 · 1b61119 · 1b61119
2 parents a695ddb + 5778cb7
commit 1b61119
Showing 1 changed file with 108 additions and 14 deletions.
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
@@ -22,25 +22,119 @@ The tables below show the resulting pixel widths at some reference widths.
 
 In Spacious Mode, the medium grid space grows from 16 to 56 pixels between window widths of 320 and 1600.
 
-|                 |  320   |  576   |  1088  |  1600  |
-| --------------: | :----: | :----: | :----: | :----: |
-| **Extra small** |   4    |   6    |   10   |   14   |
-|       **Small** |   8    |   12   |   20   |   28   |
-|      **Medium** | **16** | **24** | **40** | **56** |
-|       **Large** |   24   |   36   |   60   |   84   |
-| **Extra large** |   32   |   48   |   80   |  102   |
+|                 |  320   |  576   |  832   |  1088  |  1344  |  1600  |
+| --------------: | :----: | :----: | :----: | :----: | :----: | :----: |
+| **Extra small** |   4    |   6    |   8    |   10   |   12   |   14   |
+|       **Small** |   8    |   12   |   16   |   20   |   24   |   28   |
+|      **Medium** | **16** | **24** | **32** | **40** | **48** | **56** |
+|       **Large** |   24   |   36   |   48   |   60   |   72   |   84   |
+| **Extra large** |   32   |   48   |   64   |   80   |   96   |  102   |
 
 #### Compact
 
 In Compact Mode, the medium grid space grows from 16 to 40 pixels between window widths of 1088 and 2624.
 
-|                 |   1088 |   1600 |   2112 |   2624 |
-| --------------: | -----: | -----: | -----: | -----: |
-| **Extra small** |      4 |      6 |      8 |     10 |
-|       **Small** |      8 |     12 |     16 |     20 |
-|      **Medium** | **16** | **24** | **32** | **40** |
-|       **Large** |     24 |     36 |     48 |     60 |
-| **Extra large** |     32 |     48 |     64 |     80 |
+<table>
+  <thead>
+    <tr>
+      <th style={{ textAlign: "right" }}></th>
+      <th style={{ textAlign: "center" }}>320</th>
+      <th style={{ textAlign: "center" }}>576</th>
+      <th style={{ textAlign: "center" }}>832</th>
+      <th style={{ textAlign: "center" }}>1088</th>
+      <th style={{ textAlign: "center" }}>1344</th>
+      <th style={{ textAlign: "center" }}>1600</th>
+      <th style={{ textAlign: "center" }}>1856</th>
+      <th style={{ textAlign: "center" }}>2112</th>
+      <th style={{ textAlign: "center" }}>2368</th>
+      <th style={{ textAlign: "center" }}>2624</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Extra small</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        4
+      </td>
+      <td style={{ textAlign: "center" }}>5</td>
+      <td style={{ textAlign: "center" }}>6</td>
+      <td style={{ textAlign: "center" }}>7</td>
+      <td style={{ textAlign: "center" }}>8</td>
+      <td style={{ textAlign: "center" }}>9</td>
+      <td style={{ textAlign: "center" }}>10</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Small</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        8
+      </td>
+      <td style={{ textAlign: "center" }}>10</td>
+      <td style={{ textAlign: "center" }}>12</td>
+      <td style={{ textAlign: "center" }}>14</td>
+      <td style={{ textAlign: "center" }}>16</td>
+      <td style={{ textAlign: "center" }}>18</td>
+      <td style={{ textAlign: "center" }}>20</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Medium</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        <strong>16</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>20</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>24</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>28</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>32</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>36</strong>
+      </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>40</strong>
+      </td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Large</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        24
+      </td>
+      <td style={{ textAlign: "center" }}>30</td>
+      <td style={{ textAlign: "center" }}>36</td>
+      <td style={{ textAlign: "center" }}>42</td>
+      <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>54</td>
+      <td style={{ textAlign: "center" }}>60</td>
+    </tr>
+    <tr>
+      <td style={{ textAlign: "right" }}>
+        <strong>Extra large</strong>
+      </td>
+      <td colspan={4} style={{ textAlign: "center" }}>
+        32
+      </td>
+      <td style={{ textAlign: "center" }}>40</td>
+      <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>56</td>
+      <td style={{ textAlign: "center" }}>64</td>
+      <td style={{ textAlign: "center" }}>72</td>
+      <td style={{ textAlign: "center" }}>80</td>
+    </tr>
+  </tbody>
+</table>
 
 ## Stack Space