Issue #430: Created Column and ThemedColumn components. (#535)

Author: alexisreytech

astro/src/components/Column.astro

@@ -0,0 +1,38 @@
+---
+import { undefined } from 'astro:schema';
+
+type ColumnSizes = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+
+export interface Props {
+  id?: string;
+  class?: string;
+  noDefault?: boolean;
+  sm?: ColumnSizes;
+  md?: ColumnSizes;
+  lg?: ColumnSizes;
+  xl?: ColumnSizes;
+  xxl?: ColumnSizes;
+}
+
+const {
+  id: elementID = "",
+  class: cssClass = "",
+  noDefault = false,
+  sm = undefined,
+  md = undefined,
+  lg = undefined,
+  xl = undefined,
+  xxl = undefined,
+} = Astro.props;
+---
+
+<div class:list={[
+  !noDefault && "col", 
+  sm && `col-sm-${sm}`,
+  md && `col-md-${md}`,
+  lg && `col-lg-${lg}`,
+  xl && `col-xl-${xl}`,
+  xxl && `col-xxl-${xxl}`,
+  elementID,
+  cssClass,
+]}><slot /></div>

astro/src/components/ThemedBox.astro

@@ -1,5 +1,5 @@
 ---
-interface Props {
+export interface Props {
   theme?: string;
   style?: string;
   text?: boolean;

astro/src/components/ThemedColumn.astro

@@ -0,0 +1,24 @@
+---
+import type { Props as ColumnProps } from "@components/Column.astro";
+import type { Props as ThemedBoxProps } from "@components/ThemedBox.astro";
+
+import Column from "@components/Column.astro";
+
+interface Props extends ColumnProps, ThemedBoxProps {}
+
+const {
+  theme = undefined,
+  style = undefined,
+  text = true,
+  border = 0,
+  padding = 4,
+  ...columnProps
+} = Astro.props;
+
+import { getBackgroundAndText, getBorder } from "../lib/themes.ts";
+
+const bgAndTextClasses = getBackgroundAndText(theme, style, text);
+const borderClasses = getBorder(border, theme, style === "subtle");
+---
+
+<Column {...columnProps} class:list={[bgAndTextClasses, borderClasses, `p-${padding}`]}><slot /></Column>

astro/src/content/atotw/present-and-describe.mdx

@@ -9,7 +9,7 @@ tags:
     - event-accessibility
 ---
 
-import ThemedBox from "../../components/ThemedBox.astro"
+import ThemedColumn from "../../components/ThemedColumn.astro";
 
 When learning to give presentations, one of the common pieces of advice is to "not read the slides". The rationale is that the audience can read the bullet points themselves; the speaker is not adding anything to the presentation by just dictating what is there.
 
@@ -19,12 +19,12 @@ In order to both engage your audience and provide accessible presentations, use
 
 For example, a slide for the ideas in this tip might say:
 
-<ThemedBox border={1} class="rounded mb-4 col col-md-9 col-lg-7 col-xl-5">
+<ThemedColumn border={1} md="9" lg="7" xl="5" class="rounded mb-4">
 **Goal:** Create accessible presentations
 1. List the key points on the slides
 2. Expand on each point while speaking
 3. Provide captions and a transcript of recording
-</ThemedBox>
+</ThemedColumn>
 
 When you are speaking, talk to each point and expand upon it. This keeps your audience engaged because you are not just reading the slides. Describe any charts or images that appear in your presentation. By doing this, you make it easy to provide captions and audio descriptions to enhance your accessibility. Both the visual and auditory information will be included in the soundtrack.
 

astro/src/layouts/TipLayout.astro

@@ -39,6 +39,7 @@ const { title = tip?.data.title || "Tip of the Week" } = Astro.props;
 const { tips = [] } = catalog;
 const related = await getRelatedTips(tip);
 
+import Column from "../components/Column.astro";
 import { Icon } from "astro-icon/components";
 import ImageHeading from "../components/ImageHeading.astro";
 import Layout from "../layouts/Layout.astro";
@@ -87,9 +88,9 @@ const metadata: PageMetadata = {
     <div
       class="d-flex flex-column flex-lg-row justify-content-lg-between gap-3"
     >
-      <div class="col col-lg-7">
+      <Column lg="7">
         {tip && <TipOfTheWeek {tip} />}
-      </div>
+      </Column>
       <nav
         class="d-flex flex-column flex-md-row d-lg-block gap-4 col-lg-4"
         aria-label="Tips"
@@ -112,7 +113,7 @@ const metadata: PageMetadata = {
             )
           }
         </ul>
-        <div class="col col-md-6 col-lg-12">
+        <Column md="6" lg="12">
           <TipRegistration defaultWidth border={2}>
             <p>
               Would you like to receive these tips automatically?
@@ -126,7 +127,7 @@ const metadata: PageMetadata = {
               Email the <strong>Tip of the Week</strong>.
             </p>
           </TipRegistration>
-        </div>
+        </Column>
       </nav>
     </div>
   </ThemedSection>

astro/src/pages/_fixable/index.astro

@@ -2,11 +2,12 @@
 import { getImage, Image } from "astro:assets";
 
 import Branding from "../../components/Branding.astro";
+import Column from "../../components/Column.astro";
 import ExternalLink from "../../components/ExternalLink.astro";
 import Layout from "../../layouts/Layout.astro";
 import Hero from "../../components/Hero.astro";
 import ShadowBoxSection from "../../components/ShadowBoxSection.astro";
-import ThemedBox from "../../components/ThemedBox.astro";
+import ThemedColumn from "../../components/ThemedColumn.astro";
 import ThemedSection from "../../components/ThemedSection.astro";
 
 import heroBg from "../../images/colored-hero/woman-using-laptop.png";
@@ -42,7 +43,7 @@ const crumbs = [];
     <div
       class="d-flex flex-column flex-xl-row justify-content-xl-evenly align-items-center"
     >
-      <div class="col col-xl-8 col-xxl-9">
+      <Column xl="8" xxl="9">
         <p>
           Headings in a document exist to indicate structure. Your users will
           use headings to scan through your content and find the relevant
@@ -54,16 +55,16 @@ const crumbs = [];
           always increment one level. Never use a heading or subheading because
           it's sized correctly.
         </p>
-      </div>
-      <div class="col col-lg-9 col-xl-3 col-xxl-2">
+      </Column>
+      <Column lg="9" xl="3" xxl="2">
         <h4
           class="display-5 text-center text-primary py-3 border-primary-subtle border-top border-bottom"
         >
           Headings are for <strong>organization</strong>, not <strong
             >size</strong
           >.
         </h4>
-      </div>
+      </Column>
     </div>
   </ThemedSection>
 
@@ -72,28 +73,31 @@ const crumbs = [];
     <div
       class="d-flex flex-column flex-lg-row gap-4 py-3 justify-content-lg-evenly"
     >
-      <div class="p-4 col col-lg-3">
+      <Column lg="3" class="p-4">
         <p class="text-center fs-3 bad-contrast">
           This text is <strong>low contrast</strong> on this background.
         </p>
-      </div>
-      <ThemedBox border={1} class="col col-lg-3 p-3 shadow rounded">
+      </Column>
+      <ThemedColumn
+        lg="3"
+        border={1}
+        class="p-3 shadow rounded">
         <p class="text-center fs-5">
           <Image class="green-on-red" src={greenOnRed} alt="" />
           and <span class="red-on-green py-1 px-2">Red</span> is the
           <strong>most common</strong> combination of color blindness.
         </p>
-      </ThemedBox>
-      <div
-        class="col col-lg-3 p-3 shadow rounded no-bg-color"
-        style={`background-image: url(${fixBgNoColor.src});`}
+      </ThemedColumn>
+      <Column
+        lg="3"
+        class="p-3 shadow rounded no-bg-color bg-example"
       >
         <p class="text-center text-light fs-4">
           Always specify a <code>background-color</code>, even when an image is
           used.
         </p>
       </div>
-    </div>
+    </Column>
   </ThemedSection>
 
   <ShadowBoxSection theme="info" style="secondary">
@@ -108,7 +112,7 @@ const crumbs = [];
         > and the correct <code>for</code> attribute or ARIA description.
       </p>
       <div class="d-flex flex-column flex-xl-row justify-content-xl-evenly p-4">
-        <div class="col col-xl-5 pb-4">
+        <Column xl="5" class="pb-4">
           <h3 class="display-5"
             ><strong>Associate</strong> the fields and text.</h3
           >
@@ -150,9 +154,9 @@ const crumbs = [];
             <input class="form-control" type="file" />
             <p class="form-text px-2">... also need descriptions and labels.</p>
           </div>
-        </div>
+        </Column>
 
-        <div class="col col-xl-5">
+        <Column xl="5">
           <h3 class="display-5"
             >Choose the right <strong>field type</strong>.</h3
           >
@@ -237,7 +241,7 @@ const crumbs = [];
               will read the password to anyone who can hear it.
             </p>
           </div>
-        </div>
+        </Column>
       </div>
     </div>
   </ShadowBoxSection>
@@ -250,14 +254,14 @@ const crumbs = [];
     <div
       class="d-flex flex-column flex-lg-row justify-content-lg-around align-items-center"
     >
-      <div class="col col-lg-4 col-xxl-3">
+      <Column lg="4" xxl="3">
         <p class="fs-5 text-center text-primary py-3">
           Make sure you properly describe your link content. None of these do
           this well.
         </p>
-      </div>
+      </Column>
 
-      <div class="col col-xl-5 col-xxl-4">
+      <Column xl="5" xxl="4">
         <ul style="--bs-gutter-x: 6rem;">
           <li>
             Read more at <a href="https://accessiblecommunity.org"
@@ -277,7 +281,7 @@ const crumbs = [];
             <ExternalLink href="https://accessiblecommunity.org" />
           </li>
         </ul>
-      </div>
+      </Column>
     </div>
   </ThemedSection>
 </Layout>
@@ -305,6 +309,10 @@ const crumbs = [];
     align-content: center;
   }
 
+  .bg-example {
+    background-image: url(${fixBgNoColor.src});
+  }
+
   @include color-mode(dark) {
     .bad-contrast {
       color: var(--bs-dark);