ISTWCMS-5647: adding the rest of the card elements

src/patterns/04-components/card/card-elements/_additional-info.twig

+<div class="card__additional-info">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE,
+  } %}
+    {% block details_summary %}
+      Additional Information
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if additional_info.host %}
+        <span class="uw-label">Host:</span>
+        {% include '@components/links/links.twig' with {
+          'links': additional_info.host
+        } %}
+      {% endif %}
+
+      {% if additional_info.event_website %}
+        <span class="uw-label">Event website:</span>
+        {% include '@components/links/links.twig' with {
+          'links': additional_info.event_website
+        } %}
+      {% endif %}
+
+      {% if additional_info.cost %}
+        <span class="uw-label">Cost:</span>
+        {{ additional_info.cost }}
+      {% endif %}
+
+      {% if additional_info.tags %}
+        {% for key,tag in additional_info.tags %}
+          <span class="uw-label">{{ key }}:</span>
+          {% include "@components/tag-list/tag-list.twig" with {
+            items: tag
+          } %}
+        {% endfor %}
+      {% endif %}
+
+      {% if additional_info.info %}
+        {{ additional_info.info }}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_banner.twig

+<div class="card__banner--image">
+  {% if image.link %}
+  <a href="{{ image.link }}">
+    {% endif %}
+    <div class="card__banner--media">
+      {% if listing_image.img_element %}
+        {% include "@components/responsive-image/responsive-image.twig" with {
+          sources: image.sources,
+          img_element: listing_image.img_element,
+          alt: listing_image.alt
+        }%}
+      {% else %}
+        {% include "@components/responsive-image/responsive-image.twig" with {
+          sources: image.sources,
+          img_element: image.img_element,
+          alt: image.alt
+        }%}
+      {% endif %}
+    </div>
+    {% if image.big_text or image.small_text %}
+      <div class="card__banner--caption">
+        {% if image.big_text %}
+        <strong>
+        <span class="card__banner--title">
+          {{ image.big_text }}
+        </span>
+          {% endif %}
+        </strong>
+        {% if image.small_text %}
+          <span class="card__banner--sub-title">
+          {{ image.small_text }}
+        </span>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if image.link %}
+  </a>
+  {% endif %}
+</div>

src/patterns/04-components/card/card-elements/_contact-for.twig

+<div class="card__contact-for">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Contact for
+    {% endblock %}
+
+    {% block details_content %}
+      <div class="card__contact-for-content">
+        {{ contact_for.contact }}
+      </div>
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_employment_type.twig

+{% include '@components/label/label.twig' with {
+  'label': 'Employment type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+  items: employment_type
+} %}

src/patterns/04-components/card/card-elements/_groups.twig

+<div class="card__groups">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Groups
+    {% endblock %}
+
+    {% block details_content %}
+      <div class="card__groups-list">
+        {% for group in groups %}
+          {% if loop.index0 > 0 %}
+            , {{ group.title }}
+          {% else %}
+            {{ group.title }}
+          {% endif %}
+        {% endfor %}
+      </div>
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_image.twig

+<div class="card__image">
+  {% if image.type == 'listing_image' %}
+    {% include '@components/card/card-elements/_listing-image.twig' with {
+      'listing_image': image
+    } %}
+  {% endif %}
+
+  {% if image.type == 'portrait' %}
+    {% include "@components/responsive-image/responsive-image.twig" with {
+      sources: image.sources,
+      img_element: image.img_element,
+      alt: image.alt
+    }%}
+  {% endif %}
+</div>

src/patterns/04-components/card/card-elements/_job.id.twig

+{% include '@components/label/label.twig' with {
+  'label': 'Job id'
+} %}
+{{ job_id }}

src/patterns/04-components/card/card-elements/_listing-image.twig

+{% if url %}
+  <a href="{{ url }}">
+{% endif %}
+
+  {% include "@components/responsive-image/responsive-image.twig" with {
+    sources: listing_image.sources,
+    img_element: listing_image.img_element,
+    alt: listing_image.alt
+  }%}
+
+{% if url %}
+  </a>
+{% endif %}

src/patterns/04-components/card/card-elements/_location-info.twig

+{% set address = location_info.address %}
+{% set map = location_info.map %}
+{% set map_link = location_info.map_link %}
+
+<div class="card__location">
+  {% embed '@components/details/details.twig'  with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Location Information
+    {% endblock %}
+
+    {% block details_content %}
+      {% if address %}
+        <div class="card__address">
+          <span class="uw-label">Location Address:</span>
+          {% if address.organization %}
+            {{ address.organization }}<br />
+          {% endif %}
+          {% if address.address_line1 %}
+            {{ address.address_line1 }}<br />
+          {% endif %}
+          {% if address.address_line2 %}
+            {{ address.address_line2 }}<br />
+          {% endif %}
+          {% if address.locality or address.administrative_area or address.country_code or address.postal_code %}
+            {% if address.locality %}{{ address.locality }}{% if address.administrative_area %}, {% endif %}{% endif %}{% if address.administrative_area %}{{ address.administrative_area }}{% endif %}{% if address.country_code and (address.locality or address.administrative_area) %}, {% endif %}{% if address.country_code %}{{ address.country_code }}{% endif %}{% if address.postal_code and (address.locality or address.administrative_area or address.country_code) %}&nbsp; {% endif %}{% if address.postal_code %}{{ address.postal_code }}{% endif %}
+          {% endif %}
+        </div>
+      {% endif %}
+      {% if map %}
+        <div class="card__map">
+          <span class="uw-label">Location coordinates:</span>
+          {{ map }}
+        </div>
+      {% endif %}
+      {% if map_link %}
+        <div class="card__map-link">
+          <span class="uw-label"> Link to map:</span>
+          <a href="{{ map_link.uri }}">{{ map_link.uri }}</a>
+        </div>
+      {% endif %}
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_opportunity-dates.twig

+<div class="card__opportunity-dates">
+  {% embed '@components/details/details.twig'  with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Dates
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if dates.posted %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Date posted'
+        } %}
+        {% include '@components/card/card-elements/_date.twig' with {
+          'date_format': 'long',
+          'date': dates.posted
+        } %}
+      {% endif %}
+
+      {% if dates.deadline %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Application deadline'
+        } %}
+        {% include '@components/card/card-elements/_date.twig' with {
+          'date_format': 'long_with_time',
+          'date': dates.deadline
+        } %}
+      {% endif %}
+
+      {% if dates.start_date %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Start date'
+        } %}
+        {% include '@components/card/card-elements/_date.twig' with {
+          'date_format': 'long',
+          'date': dates.start_date
+        } %}
+      {% endif %}
+
+      {% if dates.end_date %}
+        {% include '@components/label/label.twig' with {
+          'label': 'End date'
+        } %}
+        {% include '@components/card/card-elements/_date.twig' with {
+          'date_format': 'long',
+          'date': dates.end_date
+        } %}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_opportunity-details.twig

+<div class="card__opportunity-details">
+  {% embed '@components/details/details.twig'  with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Details
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if opportunity_details.posted_by %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Posted by (department/office)'
+        } %}
+        {{ opportunity_details.posted_by }}
+      {% endif %}
+
+      {% if opportunity_details.number_of_positions %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Number of positions'
+        } %}
+        {{ opportunity_details.number_of_positions }}
+      {% endif %}
+
+      {% if opportunity_details.reports_to %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Reports to'
+        } %}
+        {{ opportunity_details.reports_to }}
+      {% endif %}
+
+    {% endblock %}
+
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_opportunity-type.twig

+{% include '@components/label/label.twig' with {
+  'label': 'Opportunity type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+  items: opportunity_type
+} %}

src/patterns/04-components/card/card-elements/_portrait.twig

+<div class="card__portrait">
+  <img src="{{ image.uri }}" alt="{{ image.alt }}" />
+</div>

src/patterns/04-components/card/card-elements/_project-details.twig

+{% if project_details | length > 0 %}
+  <div class="card__project-details">
+    {% embed '@components/details/details.twig' with {
+      'is_open': TRUE,
+    }%}
+      {% block details_summary %}
+        Project details
+      {% endblock %}
+
+      {% block details_content %}
+        <div class="card__project-details--status">
+          {% include '@components/label/label.twig' with {
+            'label': 'Status'
+          } %}
+          {% include "@components/tag-list/tag-list.twig" with {
+            items: project_details.status
+          } %}
+        </div>
+
+        {% if project_details.topics %}
+          <div class="card__project-details--topics">
+            {% include '@components/label/label.twig' with {
+              'label': 'Topics'
+            } %}
+            {% include "@components/tag-list/tag-list.twig" with {
+              items: project_details.topics
+            } %}
+          </div>
+        {% endif %}
+      {% endblock %}
+    {% endembed %}
+  </div>
+{% endif %}

src/patterns/04-components/card/card-elements/_project-members.twig

+{% if project_members | length > 0 %}
+  <div class="card__project-members">
+    {% embed '@components/details/details.twig' with {
+      'is_open': TRUE,
+    }%}
+      {% block details_summary %}
+        Project members
+      {% endblock %}
+
+      {% block details_content %}
+        <div class="card__project-members--content">
+          {% for member in project_members %}
+            <div class="card__project-member">
+              {% if member.link %}
+              <a href="{{ member.link }}">
+                {% endif %}
+
+                {% if member.roles %}
+                  {% set roles = '' %}
+                  {% for role in member.roles %}
+                    {% if loop.index0 > 0 %}
+                      {% set roles = roles ~ ', ' %}
+                    {% endif %}
+                    {% set roles = roles ~ role.title %}
+                  {% endfor %}
+                  {{ member.name }} ({{ roles }})
+                {% else %}
+                  {{ member.name }}
+                {% endif %}
+                {% if member.link %}
+              </a>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endblock %}
+    {% endembed %}
+  </div>
+{% endif %}

src/patterns/04-components/card/card-elements/_rate-of-pay.twig

+{% include '@components/label/label.twig' with {
+  'label': 'Rate of pay'
+} %}
+{% if rate_of_pay and rate_of_pay_type %}
+  {{ rate_of_pay }} ({{ rate_of_pay_type[0].title }})
+{% elseif rate_of_pay_type %}
+  {{ rate_of_pay_type }}
+{% else %}
+  {{ rate_of_pay }}
+{% endif %}

src/patterns/04-components/card/card-elements/_service-details.twig

+<div class="card__service-details">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE
+  } %}
+    {% block details_summary %}
+      Service Details
+    {% endblock %}
+
+    {% block details_content %}
+      {% if service_details.popularity %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Popularity'
+        } %}
+        {{ service_details.popularity }}
+      {% endif %}
+
+      {% if service_details.use_service %}
+        {% include '@components/label/label.twig' with {
+          'label': 'What can use this service'
+        } %}
+        {% include "@components/tag-list/tag-list.twig" with {
+          items: service_details.use_service
+        } %}
+      {% endif %}
+
+      {% if service_details.whats_available %}
+        {% include '@components/label/label.twig' with {
+          'label': 'What\'s available'
+        } %}
+        {% for wa in service_details.whats_available %}
+          {{ wa }}<br />
+        {% endfor %}
+      {% endif %}
+
+      {% if service_details.request_service %}
+        {% include '@components/label/label.twig' with {
+          'label': 'How to request this service'
+        } %}
+        {{ service_details.request_service }}
+      {% endif %}
+
+      {% if service_details.minimum_notice %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Minimum notice to use this service'
+        } %}
+        {{ service_details.minimum_notice }}
+      {% endif %}
+
+      {% if service_details.average_length %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Average length of time to complete request'
+        } %}
+        {{ service_details.average_length }}
+      {% endif %}
+
+      {% if service_details.pricing_cost %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Pricing/Cost'
+        } %}
+        {{ service_details.pricing_cost }}
+      {% endif %}
+
+      {% if service_details.support %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Support for this service'
+        } %}
+        {{ service_details.support }}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_service-hours.twig

+<div class="card__service-details">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE
+  } %}
+    {% block details_summary %}
+      Service Hours
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if service_hours.hours %}
+        {{ service_hours.hours }}
+      {% endif %}
+
+      {% if service_hours.hours_notes %}
+        {% include '@components/label/label.twig' with {
+          'label': 'General notes about service hours'
+        } %}
+        {{ service_hours.hours_notes }}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_service-information.twig

+<div class="card__service-information">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE
+  } %}
+    {% block details_summary %}
+      Service Information
+    {% endblock %}
+
+    {% block details_content %}
+
+      {% if info.status %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Status'
+        } %}
+        {{ info.status }}
+      {% endif %}
+
+      {% if info.categories %}
+        {% include '@components/label/label.twig' with {
+          'label': 'Categories'
+        } %}
+        {% include "@components/tag-list/tag-list.twig" with {
+          items: info.categories
+        } %}
+      {% endif %}
+
+    {% endblock %}
+  {% endembed %}
+</div>

src/patterns/04-components/card/card-elements/_timeline.twig

+<div class="card__timeline">
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE,
+  }%}
+    {% block details_summary %}
+      Project time line
+    {% endblock %}
+
+    {% block details_content %}
+      <div class="card__timeline--content">
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'standard',
+          'date': timeline.start_date,
+        } %}
+        to
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'standard',
+          'date': timeline.end_date,
+        } %}
+      </div>
+    {% endblock %}
+  {% endembed %}
+</div>