Merge pull request #22 from accessibility-in-action/feat/blockquote

feat: add blockquote element (resolves #19)

fractal.config.js

@@ -1,6 +1,6 @@
 const fractal = module.exports = require("@frctl/fractal").create();
 
-fractal.set("project.title", "Looseleaf Prototyping Library");
+fractal.set("project.title", "Looseleaf Framework");
 fractal.components.engine("@frctl/nunjucks");
 fractal.components.set("ext", ".njk");
 fractal.components.set("path", __dirname + "/src/components");

src/components/elements/03-blockquote/README.md

@@ -0,0 +1,5 @@
+# Blockquote
+
+Blockquotes can include a citation, which should be wrapped in a [`<cite>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite).
+The em dash that precedes a citation is added using generated content, so only
+the name or work cited needs to be include within the `<cite>` element.

src/components/elements/03-blockquote/blockquote.config.js

@@ -0,0 +1,9 @@
+const faker = require("faker");
+
+module.exports = {
+    status: "ready",
+    context: {
+        quote: faker.lorem.sentence(9),
+        citation: "Anonymous"
+    }
+};

src/components/elements/03-blockquote/blockquote.njk

@@ -0,0 +1,4 @@
+<blockquote>
+    {% render "@p", {content: quote} %}
+    {% if citation %}<cite>{{ citation }}</cite>{% endif %}
+</blockquote>

src/css/elements/_blockquote.css

@@ -0,0 +1,16 @@
+blockquote {
+    border-left: var(--ll-border-medium);
+    border-top-left-radius: 0.125em 100%;
+    font-size: var(--step-1);
+    padding-inline-start: var(--step-0);
+}
+
+cite {
+    font-size: var(--step-0);
+    font-style: normal;
+    padding-inline-start: 2ch;
+}
+
+cite::before {
+    content: "–";
+}

src/css/style.css

@@ -2,6 +2,7 @@
 @import "./base/base.css";
 @import "./base/utilities.css";
 @import "./base/typography.css";
+@import "./elements/blockquote.css";
 @import "./elements/thematic-break.css";
 @import "./elements/link.css";
 @import "./elements/button.css";