first commit

core/themes/olivero/components/teaser/teaser.component.yml

@@ -0,0 +1,44 @@
+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+
+# The human readable name.
+name: Teaser
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: stable
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+  type: object
+  properties:
+    attributes:
+      type: Drupal\Core\Template\Attribute
+      title: Attributes
+      description: Wrapper attributes.
+
+# Slots always hold arbitrary markup. We know that beforehand, so no need for
+# a schema for slots.
+slots:
+  # The key is the name of the slot. In your template you will use
+  # {% block content %}.
+  content:
+    title: Content
+    required: true
+    description: The teaser content
+  image:
+    title: Image
+    required: false
+    description: Teaser image
+  meta:
+    title: Meta
+    required: false
+    description: Teaser meta
+  prefix:
+    title: Prefix
+    required: false
+    description: Contextual links slot
+  title:
+    title: Title content
+    required: false
+    description: Teaser title

core/themes/olivero/components/teaser/teaser.css

@@ -0,0 +1,100 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+.teaser {
+  position: relative; /* Anchor after pseudo-element. */
+  padding-block-end: var(--sp1-5);
+}
+.teaser::after {
+  position: absolute;
+  inset-block-end: 0;
+  width: var(--sp3);
+  height: 0;
+  content: "";
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 2px var(--color--gray-95);
+}
+@media (min-width: 62.5rem) {
+  .teaser {
+    padding-block-end: var(--sp3);
+  }
+}
+.teaser__content {
+  display: grid;
+  grid-auto-rows: max-content;
+  gap: var(--sp);
+}
+.teaser__content .field:not(:last-child) {
+  margin-block-end: 0;
+}
+@media (min-width: 62.5rem) {
+  .teaser__content {
+    gap: var(--sp2);
+  }
+}
+.teaser__image {
+  flex-shrink: 0;
+  margin: 0;
+}
+.teaser__image:empty {
+  display: none;
+}
+.teaser__image:empty + .teaser__title {
+  flex-basis: auto;
+}
+.teaser__image a {
+  display: block;
+}
+.teaser__image img {
+  width: var(--sp3-5);
+  height: var(--sp3-5);
+  object-fit: cover;
+  border-radius: 50%;
+}
+@media (min-width: 62.5rem) {
+  .teaser__image img {
+    width: var(--grid-col-width);
+    height: var(--grid-col-width);
+  }
+}
+@media (min-width: 62.5rem) {
+  .teaser__image {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin: 0;
+  }
+}
+.teaser__meta {
+  margin-block-end: var(--sp);
+}
+.teaser__title {
+  margin-block: 0;
+  flex-basis: calc(100% - var(--sp4-5));
+  color: var(--color-text-neutral-loud);
+  font-size: 1.5rem;
+  line-height: var(--line-height-base);
+}
+@media (min-width: 62.5rem) {
+  .teaser__title {
+    flex-basis: auto;
+    font-size: var(--sp2);
+    line-height: var(--sp3);
+  }
+}
+.teaser__top {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+  gap: var(--sp1);
+  margin-block-end: var(--sp1);
+}
+@media (min-width: 62.5rem) {
+  .teaser__top {
+    position: relative; /* Anchor the image */
+  }
+}

core/themes/olivero/components/teaser/teaser.pcss.css

@@ -0,0 +1,101 @@
+@import "../../css/base/media-queries.pcss.css";
+
+.teaser {
+  position: relative; /* Anchor after pseudo-element. */
+  padding-block-end: var(--sp1-5);
+
+  &::after {
+    position: absolute;
+    inset-block-end: 0;
+    width: var(--sp3);
+    height: 0;
+    content: "";
+    /* Intentionally not using CSS logical properties. */
+    border-top: solid 2px var(--color--gray-95);
+  }
+
+  @media (--lg) {
+    padding-block-end: var(--sp3);
+  }
+}
+
+.teaser__content {
+  display: grid;
+  grid-auto-rows: max-content;
+  gap: var(--sp);
+
+  .field:not(:last-child) {
+    margin-block-end: 0;
+  }
+
+  @media (--lg) {
+    gap: var(--sp2);
+  }
+}
+
+.teaser__image {
+  flex-shrink: 0;
+  margin: 0;
+
+  &:empty {
+    display: none;
+
+    & + .teaser__title {
+      flex-basis: auto;
+    }
+  }
+
+  & a {
+    display: block;
+  }
+
+  & img {
+    width: var(--sp3-5);
+    height: var(--sp3-5);
+    object-fit: cover;
+    border-radius: 50%;
+
+    @media (--lg) {
+      width: var(--grid-col-width);
+      height: var(--grid-col-width);
+    }
+  }
+
+  @media (--lg) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin: 0;
+  }
+}
+
+.teaser__meta {
+  margin-block-end: var(--sp);
+}
+
+.teaser__title {
+  margin-block: 0;
+  flex-basis: calc(100% - var(--sp4-5));
+  color: var(--color-text-neutral-loud);
+  font-size: 24px;
+  line-height: var(--line-height-base);
+
+  @media (--lg) {
+    flex-basis: auto;
+    font-size: var(--sp2);
+    line-height: var(--sp3);
+  }
+}
+
+.teaser__top {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+  gap: var(--sp1);
+  margin-block-end: var(--sp1);
+
+  @media (--lg) {
+    position: relative; /* Anchor the image */
+  }
+}

core/themes/olivero/components/teaser/teaser.twig

@@ -0,0 +1,15 @@
+<article{{ attributes.addClass('teaser') }}>
+  <header>
+    {% block prefix %}{% endblock %}
+    <div class="teaser__meta">
+      {% block meta %}{% endblock %}
+    </div>
+    <div class="teaser__top">
+      <div class="teaser__image">{% block image %}{% endblock %}</div>
+      {% block title %}{% endblock %}
+    </div>
+  </header>
+  <div class="teaser__content">
+    {% block content %}{% endblock %}
+  </div>
+</article>