Verified Commit ff392533 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3365497 by finnsky, Gauravvvv, sarahjean, smustgrave, snig, e0ipso,... 

Issue #3365497 by finnsky, Gauravvvv, sarahjean, smustgrave, snig, e0ipso, pdureau: Create new SDC component for Umami Banner
parent 8e3e867b

core/profiles/demo_umami/themes/umami/components/banner/banner.component.yml

0 → 100644
+35 −0
Original line number Diff line number Diff line 
# This is so your IDE knows about the syntax for fixes and autocomplete.

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json



# The human readable name.

name: Banner



# Status can be: "experimental", "stable", "deprecated", "obsolete".

status: experimental



props:

  # Props are always an object with keys. Each key is a variable in your

  # component template.

  type: object



  properties:

    attributes:

      type: Drupal\Core\Template\Attribute

      title: Attributes

      description: Banner 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:

    # A human-readable name.

    title: Content

    # A description.

    description: This is the banner content

  image:

    # A human-readable name.

    title: Image

    # A description.

    description: This is the banner image

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css→core/profiles/demo_umami/themes/umami/components/banner/banner.css

+9 −33
Original line number Diff line number Diff line
@@ -3,12 +3,12 @@ 
 * This file is used to style the banner block.

 */



.banner-block__content {

.banner__content {

  margin: 1rem 4%;

  font-size: 1.188em;

}



.banner-block .field--name-field-title {

.banner__title {

  margin: 0 0 0.5em 0;

  font-family: "Scope One", Georgia, serif;

  font-size: 1.777em;
@@ -16,38 +16,14 @@ 
  line-height: 1.2em;

}



.banner-block .field--name-field-content-link a {

  display: inline-block;

  padding: 0.7em 1.3em;

  cursor: pointer;

  transition: background-color 0.5s ease;

  text-align: center;

  text-decoration: none;

  color: #fff;

  border: 2px solid #d93760;

  border-radius: 3px;

  background-color: #d93760;

  font-family: "Scope One", Georgia, serif;

  font-size: 1.2rem;

  font-weight: 400;

}



.banner-block .field--name-field-content-link a:focus,

.banner-block .field--name-field-content-link a:hover {

  color: #000;

  border-color: #d93760;

  outline-color: #fff;

  outline-offset: 2px;

  background-color: #fcece7;

}

/* Medium */

@media screen and (min-width: 48rem) { /* 768px */

  .banner-block {

  .banner {

    position: relative; /* Anchor absolutely positioned background image. */

    background-color: #464646;

  }



  .banner-block__inner {

  .banner__inner {

    display: flex;

    align-items: center;

    min-height: 54vw;
@@ -55,7 +31,7 @@ 
    padding: 0 4%;

  }



  .banner-block__content {

  .banner__content {

    position: relative; /* Establish stacking context to appear above absolutely positioned background image. */

    max-width: 50%;

    margin: 0;
@@ -65,7 +41,7 @@ 
    background: rgba(0, 0, 0, 0.42);

  }



  .banner-block__image img {

  .banner__image img {

    position: absolute;

    top: 0;

    left: 0;
@@ -76,16 +52,16 @@ 
}

/* Large */

@media screen and (min-width: 60rem) { /* 960px */

  .banner-block__content {

  .banner__content {

    max-width: 41%;

  }

  .banner-block__inner {

  .banner__inner {

    min-height: 43vw;

  }

}

/* Extra large + side margins */

@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */

  .banner-block__inner {

  .banner__inner {

    padding: 0;

  }

}

core/profiles/demo_umami/themes/umami/components/banner/banner.twig

0 → 100644
+12 −0
Original line number Diff line number Diff line 
<div{{ attributes.addClass('banner') }}>

  <div class="container">

    <div class="banner__inner">

      <div class="banner__image">

        {% block image %}{% endblock %}

      </div>

      <div class="banner__content">

        {% block content %}{% endblock %}

      </div>

    </div>

  </div>

</div>

core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css

+13 −0
Original line number Diff line number Diff line
@@ -30,6 +30,19 @@ 
  background-color: #e6eee0;

}



.button--primary {

  border-color: #d93760;

  background-color: #d93760;

}



.button--primary:hover,

.button--primary:active,

.button--primary:focus {

  outline-color: #fff;

  outline-offset: 2px;

  background-color: #fcece7;

}



.button[disabled]:hover,

.button[disabled]:active,

.button[disabled]:focus,

core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig

+17 −28
Original line number Diff line number Diff line 
{% extends "block.html.twig" %}

{#

/**

 * @file
@@ -26,31 +27,19 @@ 
 * @see template_preprocess_block()

 */

#}

{%

  set classes = [

    'banner-block',

    'block',

    'block-' ~ configuration.provider|clean_class,

    'block-' ~ plugin_id|clean_class,

  ]

%}



<div{{ attributes.addClass(classes) }}>

  <div class="container">

    <div class="banner-block__inner">

      {{ title_prefix }}

      {% if label %}

        <h2{{ title_attributes }}>{{ label }}</h2>

      {% endif %}

      {{ title_suffix }}

{% block content %}

        <div class="banner-block__image">

  {% embed 'umami:banner' with {

    attributes: create_attribute(),

  } %}

    {% block image %}

      {{ content.field_media_image }}

        </div>

        <div class="banner-block__content">

          {{ content|without('field_media_image') }}

        </div>

    {% endblock %}

    </div>

  </div>

</div>
 
    {% block content %}

      {% include "umami:title" with {

        attributes: create_attribute({'class': ['banner__title']}),

        label: content.field_title,

      } only %}

      {{ content|without(['field_media_image', 'field_title']) }}

    {% endblock %}

  {% endembed %}

{% endblock %}