Design system components clean-up (GoogleChrome#6853)

* Allow components to break out of prose sizing rules

* Tweak branding layout

Author: Andy-set-studio

src/scss/pages/_design-system.scss

@@ -14,6 +14,12 @@
   details {
     max-width: 50rem;
   }
+
+  .prose {
+    iframe {
+      max-width: unset;
+    }
+  }
 }
 
 .design-system__swatch {
@@ -32,3 +38,11 @@
     min-height: 800px;
   }
 }
+
+.design-system__components-section {
+  max-width: unset;
+
+  details {
+    margin-inline: auto;
+  }
+}

src/site/_includes/design-system.njk

@@ -23,12 +23,14 @@
     <div class="flex-auto box-flex flex-dir-column">
       <div class="sidebar flex-auto">
         <nav class="flow bg-mid-bg pad-block-size-1" aria-label="design system">
-          <div class="brand cluster pad-inline-base">
-            {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }}
-            <p class="brand__byline">Design System</p>
-          </div>
-          <div class="pad-inline-base">
-            {% include "partials/standard-theme-toggle.njk" %}
+          <div class="repel pad-inline-base flex-align-end">
+            <div class="brand">
+              {{ svg('../../images/lockup.svg', {label: 'web.dev'}) }}
+              <p class="brand__byline">Design System</p>
+            </div>
+            <div>
+              {% include "partials/standard-theme-toggle.njk" %}
+            </div>
           </div>
           <ul class="stack-nav flow-space-size-2" role="list">
             {% for link in sideLinks %}
@@ -55,7 +57,7 @@
           </ul>
         </nav>
         <div class="pad-size-1">
-          <article class="wrapper flow">
+          <article class="prose">
             <h1>{{ pageTitle if pageTitle else title }}</h1>
             {% if summary %}
               <p>{{ summary | md | safe }}</p>

src/site/_includes/macros/design-system-component.njk

@@ -3,12 +3,6 @@
 <div class="flow">
   <iframe class="design-system__preview-frame" src="{{ previewUrl }}?state=window" data-size="{{ size if size else 'standard' }}"></iframe>
   <div class="cluster flex-justify-end">
-    {% if handle %}
-      <div>
-        {# Pretty gnarly, but we can't use {% raw %} because we need that `handle` #}
-        <strong>Render:</strong> <code>{{ "{{ design.components.render('" + handle + "') | safe }}" }}</code>
-      </div>
-    {% endif %}
     <a href="{{ previewUrl }}">View full screen</a>
   </div>
   {% if markup or rendered %}

src/site/content/en/design-system/components.njk

@@ -24,7 +24,7 @@ pageScripts:
   </nav>
   {% endif %}
 
-  <div class="region"> 
+  <div class="design-system__components-section pad-block-size-2"> 
     {{ designSystemComponent(item.previewUrl, item.markup, item.rendered, item.handle) }}  
   </div>
 
@@ -49,7 +49,7 @@ pageScripts:
     <h2>Variants</h2>
     {% for variant in item.variants %}
     <h3 id="{{ variant.data.title | slug }}">{{ variant.data.title }}</h3>
-    <div class="flow-space-size-1">
+    <div class="design-system__components-section gap-top-size-1">
       {{ designSystemComponent(variant.previewUrl, variant.markup, variant.rendered, variant.handle) }} 
     </div>
     {% endfor %}