new things.

web/themes/custom/dchadwick/components/accordion/accordion.component.yml

@@ -0,0 +1,12 @@
+name: Accordion
+props:
+  type: object
+  properties: {  }
+slots:
+  # Content.
+  accordion_headline:
+    title: Accordion Title
+    description: "The accordion title."
+  accordion_content:
+      title: Accordion Content
+      description: "The accordion content."

web/themes/custom/dchadwick/components/accordion/accordion.twig

@@ -0,0 +1,14 @@
+{% set classes = [
+  'accordion',
+] %}
+
+<div class="accordion">
+  <div class="accordion-item">
+    <h2 class="accordion-header">
+      {% block accordion_title %}{% endblock %}
+    </h2>
+  </div>
+  <div class="accordion-body">
+    {% block accordion_content %}{% endblock %}
+  </div>
+</div>

web/themes/custom/dchadwick/components/button/button.component.yml

@@ -0,0 +1,17 @@
+name: Button
+props:
+  type: object
+  required:
+    - type
+  properties:
+    type:
+      type: string
+      title: Type
+      description: "The type of button to render"
+      # The enum directive restricts the possible values in the element to our list.
+      enum: ['primary', 'secondary', 'danger']
+slots:
+  # Content to display in the chip.
+  button_text:
+      title: Button Text
+      description: The text for the button

web/themes/custom/dchadwick/components/button/button.js

@@ -0,0 +1,7 @@
+((Drupal) => {
+  Drupal.behaviors.button = {
+    attach(context) {
+      console.log("hello");
+    },
+  };
+})(Drupal);

web/themes/custom/dchadwick/components/button/button.twig

@@ -0,0 +1,10 @@
+{%
+  set classes = [
+  'btn',
+  'btn-' ~ type|clean_class,
+]
+%}
+
+<button class="{{ classes|join(" ") }}">
+  {% block button_text %}{% endblock %}
+</button>

web/themes/custom/dchadwick/src/sass/style.scss

@@ -32,6 +32,10 @@ $container-plus-padding: 1216px;
 @import "partials/footer";
 @import "partials/recent-fights";
 
+html {
+  font-size: 100%;
+}
+
 body {
   background: $base_light;
   color: $muted;

web/themes/custom/dchadwick/templates/system/page.html.twig

@@ -15,6 +15,20 @@
    </main>
 </section>
 <footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
+  {{ include('dchadwick:button', {text: 'Click me', type: 'danger'}, with_context = false) }}
+
+  {% embed 'dchadwick:accordion' %}
+
+    {% block accordion_title %}
+      Click Me!
+    {% endblock %}
+
+    {% block accordion_content %}
+      Here is some content that goes in the place where the body is.
+    {% endblock %}
+
+  {% endembed %}
+
    <div class="footer--bottom">
        {{ page.footer_bottom }}
    </div>