Potential aside design

Author: tylersticka

src/prototypes/asides/article.twig

@@ -0,0 +1,34 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: '_proto-asides-r1 o-container--prose o-container--pad',
+  content_class: 'o-rhythm',
+  align: align,
+  summary: summary,
+  open: open
+} only %}
+  {% block content %}
+    <p>In the short run for those using a traditional web design process, we need to recognize that design doesn’t stop when something is handed off to developers. It continues until launch so designers can be involved in how the design is implemented in code.</p>
+
+    {% set aside_content -%}
+      <p>Or you could replace the traditional web design process with a process that incorporates in-browser mockups, but not every organization and designer can make that change. But if you’re interested in a process like that, stay tuned or… um… <a href="mailto:[email protected]">hire us</a>.</p>
+    {%- endset %}
+
+    <aside class="_c-aside {% if align %}_c-aside--align-{{align}}{% endif %}">
+      <div class="_c-aside__inner">
+        {% if summary %}
+          <details class="_c-aside__content"{% if open %} open{% endif %}>
+            <summary>{{summary}}</summary>
+            {{aside_content}}
+          </details>
+        {% else %}
+          <div class="_c-aside__content">
+            {{aside_content}}
+          </div>
+        {% endif %}
+      </div>
+    </aside>
+
+    <p>And in the same vein, there are development decisions happening before handoff. Developers should be involved throughout as well.</p>
+    <p>In the short run for those using a traditional web design process, we need to recognize that design doesn’t stop when something is handed off to developers. It continues until launch so designers can be involved in how the design is implemented in code.</p>
+    <p>In the short run for those using a traditional web design process, we need to recognize that design doesn’t stop when something is handed off to developers. It continues until launch so designers can be involved in how the design is implemented in code.</p>
+  {% endblock %}
+{% endembed %}

src/prototypes/asides/asides.stories.js

@@ -0,0 +1,24 @@
+import articleDemo from './article.twig';
+import './r1.scss';
+
+export default {
+  title: 'Prototypes/Asides',
+  parameters: {
+    docs: { page: null },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    align: {
+      options: ['start', 'end'],
+      control: { type: 'radio' },
+    },
+    summary: {
+      control: { type: 'text' },
+    },
+    open: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Revision1 = (args) => articleDemo(args);

src/prototypes/asides/r1.scss

@@ -0,0 +1,85 @@
+
+@use '../../compiled/tokens/scss/breakpoint';
+@use '../../compiled/tokens/scss/size';
+@use '../../mixins/border-radius';
+@use '../../mixins/spacing';
+@use '../../mixins/ms';
+
+._proto-asides-r1 {
+
+  ._c-aside {
+    position: relative;
+
+    @media (width < breakpoint.$xxl) {
+      @include spacing.fluid-margin-inline-negative;
+    }
+  }
+
+  ._c-aside__inner {
+    @media (width > breakpoint.$xxl) {
+      inline-size: calc((100vw - 100%) / 2);
+      inset-inline-start: 100%;
+      max-inline-size: 50%;
+      position: absolute;
+      @include spacing.fluid-padding-inline;
+    }
+  }
+
+  ._c-aside--align-start ._c-aside__inner {
+    @media (width > breakpoint.$xxl) {
+      inset-inline-start: auto;
+      inset-inline-end: 100%;
+    }
+  }
+
+  ._c-aside__content {
+    background-color: var(--theme-color-background-secondary);
+    font-size: max(16px, ms.step(-1)); // Smaller than text usually but not too small
+    padding: size.$rhythm-default;
+    position: relative;
+    @include border-radius.conditional;
+    @include spacing.vertical-rhythm(size.$rhythm-default);
+
+    @media (width < breakpoint.$xxl) {
+      @include spacing.fluid-padding-inline;
+    }
+
+    @media (width > breakpoint.$xxl) {
+      margin: size.$rhythm-default * -1;
+      margin-top: ms.step(0) * -1; // Better baseline alignment
+    }
+  }
+
+  ._c-aside:not(._c-aside--align-start) ._c-aside__content {
+    @media (width > breakpoint.$xxl) {
+      border-top-left-radius: 0;
+    }
+  }
+
+  ._c-aside--align-start ._c-aside__content {
+    @media (width > breakpoint.$xxl) {
+      border-top-right-radius: 0;
+    }
+  }
+
+  ._c-aside__content::before {
+    @media (width > breakpoint.$xxl) {
+      background-image: radial-gradient(circle at 0 100%, transparent ms.step(2), var(--theme-color-background-secondary) ms.step(2));
+      block-size: ms.step(2);
+      content: '';
+      inline-size: ms.step(2);
+      inset-block-start: 0;
+      inset-inline-end: 100%;
+      position: absolute;
+    }
+  }
+
+  ._c-aside--align-start ._c-aside__content::before {
+    @media (width > breakpoint.$xxl) {
+      inset-inline-end: auto;
+      inset-inline-start: 100%;
+      transform: scaleX(-1);
+    }
+  }
+
+}