Feature.event

src/stable/components/Event/Event.js

@@ -0,0 +1,93 @@
+import styles from '!!raw-loader!./event.css';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    ${styles}
+  </style>
+  <div class="event-container">
+        <div class="date-info"> 
+          <div class="event-date"></div>
+          <div class="event-year"></div>
+        </div>
+      <div class="event-info">
+        <div id="event-title" class="event-title">
+            <slot name="event-title"></slot>
+<span class="event-chevron">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+            </svg>
+</span>
+            </div>
+        <div class="info-row">
+          <div class="info-item event-time">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill" viewBox="0 0 16 16">
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
+          </svg>
+          </div>
+          <div class="info-item event-location">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-map-fill" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M3.1 11.2a.5.5 0 0 1 .4-.2H6a.5.5 0 0 1 0 1H3.75L1.5 15h13l-2.25-3H10a.5.5 0 0 1 0-1h2.5a.5.5 0 0 1 .4.2l3 4a.5.5 0 0 1-.4.8H.5a.5.5 0 0 1-.4-.8z"/>
+              <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999z"/>
+            </svg>
+            <slot name="location-icon"></slot>
+            <slot name="event-location"></slot>
+          </div>
+          <div class="info-item event-tag">
+            <slot name="event-tag"></slot>
+          </div>
+        </div>
+      </div>
+  </div>
+
+`;
+
+class Event extends HTMLElement {
+  constructor() {
+    super();
+
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setupDatetime();
+  }
+
+  setupDatetime() {
+    // Get args.when (Date)
+    const dateInfo = this.getAttribute('datetime');
+    const numFromString = Number(dateInfo);
+    const dateISO = new Date(numFromString).toISOString();
+    // Month & Day
+    const dateFormat = new Date(dateISO).toLocaleDateString('en-DE', {
+      month: 'short',
+      day: 'numeric',
+    });
+    const dateSpan = document.createElement('span');
+    dateSpan.innerText = dateFormat + '\n';
+    const eventDate = this.shadowRoot.querySelector('.event-date');
+    eventDate.appendChild(dateSpan);
+
+    // Year
+    const year = new Date(dateISO).toLocaleDateString('en-DE', {
+      year: 'numeric',
+    });
+    const yearSpan = document.createElement('span');
+    yearSpan.innerText = year;
+    const eventYear = this.shadowRoot.querySelector('.event-year');
+    eventYear.appendChild(yearSpan);
+
+    // Get Time
+    const locTime = new Date(dateISO).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    const timeSpan = document.createElement('span');
+    timeSpan.innerText = locTime;
+    const eventTime = this.shadowRoot.querySelector('.event-time');
+    eventTime.appendChild(timeSpan);
+  }
+}
+
+export default Event;

src/stable/components/Event/cod-event.js

@@ -0,0 +1,2 @@
+import Event from './Event';
+customElements.define('cod-event', Event);

src/stable/components/Event/event.scss

@@ -0,0 +1,62 @@
+.event-container {
+  width: fit-content;
+  min-width: 340px;
+  display: flex;
+
+  .date-info {
+    background-color: #004445;
+    height: 75px;
+    justify-content: center;
+    text-align: center;
+    flex: 0;
+    color: white;
+    font-weight: lighter;
+    padding: 3px 20px;
+    line-height: normal;
+
+    .event-date {
+      color: white;
+      flex: 0;
+      font-weight: 900;
+      display: flex;
+    }
+  }
+
+  .event-info {
+    flex: 3;
+    padding: 5px 10px;
+
+    .event-title {
+      display: flex;
+
+      ::slotted(a) {
+        text-decoration: none !important;
+        border-bottom: 3px solid #279989 !important;
+        color: #000 !important;
+      }
+
+      svg {
+        top: 5px;
+        position: relative;
+      }
+    }
+
+    .event-title:hover svg {
+      transform: translate(5px, 0px);
+    }
+
+    .info-row {
+      display: flex;
+      margin-top: 10px;
+      flex-flow: row wrap;
+
+      .info-item {
+        flex-grow: 1;
+      }
+
+      .event-time {
+        font-weight: 900;
+      }
+    }
+  }
+}

src/stable/components/Tag/Tag.css

@@ -1,3 +1,8 @@
 .tag-container {
   display: inline;
+
+  ::slotted(a) {
+    text-decoration: none !important;
+    color: #000 !important;
+  }
 }

src/stable/docs/Event.mdx

@@ -0,0 +1,84 @@
+import {
+  Meta,
+  Canvas,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+  Story,
+  Source,
+} from '@storybook/blocks';
+import * as EventStories from '../stories/event.stories';
+
+import '../../../.storybook/docs'; // Import all documentation components
+
+<Meta of={EventStories} />
+
+# Event
+
+<div className="component-summary">
+  Event element will be used within Department pages to display Event
+  information
+</div>
+
+## Usage
+
+<Canvas of={EventStories.Default} />
+
+<Controls of={EventStories.Default} />
+
+##
+
+<Canvas of={EventStories.TagLink} />
+
+## Slots
+
+<doc-slots-table
+data={JSON.stringify([
+{"name": "title", "description": "Allows users to input the title of the Event."},
+{"name": "location", "description": "Allows users to select TRUE for virutal meetings and false to input the event location"},
+{"name": "tag", "description": "Uses the Tag component to specify the type of event"},
+])}>
+</doc-slots-table>
+
+## HTML Attributes / JS Properties
+
+<doc-js-properties-table
+data={JSON.stringify([
+{"name": "datetime", "description": " datetime attribute represent a machine-readable format of a <time> element."},
+])}>
+</doc-js-properties-table>
+
+## Events
+
+<doc-events-table 
+  data={JSON.stringify([])}>
+</doc-events-table>
+
+## Methods
+
+<doc-methods-table 
+  data={JSON.stringify([])}>
+</doc-methods-table>
+
+## Custom CSS Properties
+
+<doc-css-custom-properties-table 
+  data={JSON.stringify([])}>
+</doc-css-custom-properties-table>
+
+## CSS Parts
+
+<doc-css-parts-table 
+  data={JSON.stringify([])}>
+</doc-css-parts-table>
+
+## Dependencies
+
+<doc-dependencies-list data={JSON.stringify([])}></doc-dependencies-list>
+
+## Accessibility
+
+event components are designed to be accessible by default.