Merge pull request #93 from niaid/staging

NDS 1.1.12 Release

README.md

@@ -1,15 +1,15 @@
 # NIAID Design System (NDS)
 
-VERSION 1.1.11
+VERSION 1.1.12
 
-The [NIAID Design System](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/) was developed within the Office of Communications and Government Relations (OCGR) at the National Institute of Allergy and Infectious Diseases (NIAID) by Booz Allen Hamilton. The design system is designed to aid users with the process of creating policy-compliant websites that conform to design standards and guidance set by NIAID, NIH, HHS, and USWDS.
+The [NIAID Design System](https://designsystem.niaid.nih.gov/) was developed within the Office of Communications and Government Relations (OCGR) at the National Institute of Allergy and Infectious Diseases (NIAID) by Booz Allen Hamilton. The design system is designed to aid users with the process of creating policy-compliant websites that conform to design standards and guidance set by NIAID, NIH, HHS, and USWDS.
 
-[Visit the NDS Documentation Site](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/)
+[Visit the NDS Documentation Site](https://designsystem.niaid.nih.gov/)
 
 Current Sites Running on NDS:
 * [Coronavirus Prevention Network (CoVPN)](https://coronaviruspreventionnetwork.org)
 * [ECM @ NIH](https://ecm.nih.gov/)
-* [NDS Documentation Site](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/)
+* [NDS Documentation Site](https://designsystem.niaid.nih.gov/)
 * NIAID Digital Policy Website
 
 ## Getting Started
@@ -31,9 +31,9 @@ You will need the following installed on your local machine:
 
 ### Ways to Use NDS
 There are three main ways to use NDS listed below. To get started please visit our documentation site:
-* [NDS Components](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/components)
-* [Static Site Builder](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/static-site-builder)
-* [NDS Drupal Theme](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/nds-drupal-theme)
+* [NDS Components](https://designsystem.niaid.nih.gov/components/)
+* [Static Site Builder](https://designsystem.niaid.nih.gov/getting-started/nds-static-site-builder/)
+* [NDS Drupal Theme](https://designsystem.niaid.nih.gov/getting-started/nds-drupal-theme/)
 
 ## Built With
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "niaid-design-system",
-    "version": "1.1.11",
+    "version": "1.1.12",
     "description": "NIAID Design System",
     "main": "public/index.html",
     "dependencies": {

src/_patterns/00-nds/01-atoms/text/text-date/_text-date-main.twig

@@ -0,0 +1,24 @@
+{#
+    ---
+    title: Date
+    ---
+
+    Type: Atoms -> Text
+    
+    Description:
+        Dates are static, non-functional indicators of a desired date. Typically dates are used to indicate the date of an upcoming event.
+
+    Parameters:
+
+    text_date_classes: Additional date classes.
+    text_date_day: The day to display, formatted DD.
+    text_date_month: The month to display, formatted as the first three letters of the month name (Ex. January = Jan).
+
+    Last Updated: April 24, 2023
+#}
+
+{% set text_date_classes = text_date_classes|default() %}
+{% set text_date_day = text_date_day|default() %}
+{% set text_date_month = text_date_month|default() %}
+
+<div class="text-nds text--date {{ text_date_classes }}"><span class="text--date__day">{{ text_date_day }}</span><span class="text--date__month">{{ text_date_month }}</span></div>

src/_patterns/00-nds/01-atoms/text/text-date/demo/text-date.twig

@@ -0,0 +1,6 @@
+{% include "@nds/01-atoms/text/text-date/_text-date-main.twig" with
+    {
+        "text_date_day": "18",
+        "text_date_month": "June"
+    }
+%}

src/_patterns/00-nds/01-atoms/text/text-date/text-date.scss

@@ -0,0 +1,33 @@
+.text--date {
+    @include shadow($shadow-hard-low);
+    background: $white;
+    border-radius: $border-radius-semi;
+    padding: 0;
+    text-align: center;
+    width: $s-4;
+}
+
+.text--date__day {
+    border-top-left-radius: $border-radius-semi;
+    border-top-right-radius: $border-radius-semi;
+    color: $type-body;
+    display: block;
+    font-size: 1.75rem;
+    font-weight: $font-weight-bold;
+    line-height: $line-height-heading;
+    padding: $s-0-50 0;
+}
+
+.text--date__month {
+    background: $color-theme-1-1-1;
+    border-bottom-left-radius: $border-radius-semi;
+    border-bottom-right-radius: $border-radius-semi;
+    color: $white;
+    display: block;
+    font-size: $s-0-75;
+    font-weight: $font-weight-bold;
+    line-height: $line-height-medium;
+    padding: $s-0-25 0;
+    text-transform: uppercase;
+    width: 100%;
+}