Merge branch 'main' into chouinar/file-attachment-transform

documentation/wiki/product/brand-guidelines/colors.md

@@ -16,44 +16,43 @@ layout:
 
 ## Overview
 
-Color plays a significant role in our brand. The following values represent our core palette. These are used most often in the system and should be relied on when the color palette must be limited. Each of our colors is named for ideas that represent trust and accessibility. The Grants color system is based on the design token system in USWDS. Each color family has ten grades, which fall between 5 and 90.
+Color plays a significant role in our brand. The following values represent our core palette. These are used most often in the system and should be relied on when the color palette must be limited. Each of our colors is named for ideas that represent trust and accessibility. 
 
-<figure><img src="../../.gitbook/assets/Grants Color Families.png" alt=""><figcaption></figcaption></figure>
+Patina Green, Forest Green, and Sky Blue should be used most frequently as the primary brand colors, with the remaining values being used as support.
 
-The colors below are organized here by size. The larger the percentage, the more prominence it has in our system. Patina should be used most frequently as the primary brand color, with the remaining values being used as support.
+<figure><img src="../../.gitbook/assets/Simpler Grants Color Overview.jpg" alt=""><figcaption></figcaption></figure>
 
-<figure><img src="../../.gitbook/assets/Grants Color Overview.jpg" alt=""><figcaption></figcaption></figure>
+## Color Families
 
-## Color & Accessibility
-
-Pairing colors together can be complex. Always consider the application, information, and audience when selecting values. Higher contrast combinations make information clearer, while lower contrast combinations can be helpful for graphic elements.
+The Grants color system is based on the design token system in USWDS. Each color family has 7-8 grades.
 
-Color contrast is crucial to legibility and accessibility in type. Always be sure there is enough contrast between the type and background. In most situations, type should be used in Gray or White, with color used to create emphasis.
+<figure><img src="../../.gitbook/assets/Simpler Grants Color Families.png" alt=""><figcaption></figcaption></figure>
 
-Examples shown may not be inclusive of web standards. See the accessibility section for more information.
+## Color & Accessibility
 
-<div><figure><img src="../../.gitbook/assets/Frame 551.png" alt=""><figcaption></figcaption></figure> <figure><img src="../../.gitbook/assets/Frame 552.png" alt=""><figcaption></figcaption></figure></div>
+Pairing colors together can be complex. Always consider the application, information, and audience when selecting values. Higher contrast combinations make information clearer, while lower contrast combinations can be helpful for graphic elements.
 
-<div><figure><img src="../../.gitbook/assets/Frame 553.png" alt=""><figcaption></figcaption></figure> <figure><img src="../../.gitbook/assets/Frame 554.png" alt=""><figcaption></figcaption></figure></div>
+Color contrast is crucial to legibility and accessibility in type. Always be sure there is enough contrast between the type and background. In most situations, type should be used in Gray or White, with color being used to create emphasis.
 
-<div><figure><img src="../../.gitbook/assets/Frame 555.png" alt=""><figcaption></figcaption></figure> <figure><img src="../../.gitbook/assets/Frame 556.png" alt=""><figcaption></figcaption></figure></div>
+<figure><img src="../../.gitbook/assets/Simpler Grants Color Accessibility.png" alt=""><figcaption></figcaption></figure>
 
-<div><figure><img src="../../.gitbook/assets/Frame 557.png" alt=""><figcaption></figcaption></figure> <figure><img src="../../.gitbook/assets/Frame 558.png" alt=""><figcaption></figcaption></figure></div>
+## Additional don’ts
 
-<div align="center"><figure><img src="../../.gitbook/assets/Frame 559.png" alt=""><figcaption></figcaption></figure> <figure><img src="../../.gitbook/assets/Frame 560.png" alt=""><figcaption></figcaption></figure></div>
+Do not diminish the value of color in the brand. Avoid the following uses.
 
-[View contrast grid](https://contrast-grid.eightshapes.com/?version=1.1.0\&background-colors=\&foreground-colors=1C1D1F%0D%0A125238%0D%0A6DBD9A%0D%0A82CAF6%0D%0AB1A6CD%0D%0AFFC800%0D%0A\&es-color-form__tile-size=regular\&es-color-form__show-contrast=aaa\&es-color-form__show-contrast=aa)
+\
+Do not use unapproved colors.
 
-## Additional don’ts
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants color dont use unapproved colors.png" alt=""><figcaption></figcaption></figure></div>
 
-Do not diminish the value of color in the brand. Avoid the following uses.
+Do not use gradients.
 
-<div align="left"><figure><img src="../../.gitbook/assets/Colors (1).png" alt=""><figcaption><p>Do not use unapproved colors</p></figcaption></figure></div>
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants color dont use gradients.png" alt=""><figcaption></figcaption></figure></div>
 
-<div align="left"><figure><img src="../../.gitbook/assets/Gradients.png" alt=""><figcaption><p>Do not use gradients</p></figcaption></figure></div>
+Do not use low-contrast combinations.
 
-<div align="left"><figure><img src="../../.gitbook/assets/Contrast.png" alt=""><figcaption><p>Do not use low-contrast combinations</p></figcaption></figure></div>
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants color dont use low contrast combinations.png" alt=""><figcaption></figcaption></figure></div>
 
-<div align="left"><figure><img src="../../.gitbook/assets/Combinations.png" alt=""><figcaption><p>Do not use only accent color combinations</p></figcaption></figure></div>
+Do not use only accent color combinations.
 
-\
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants do not use only accent color combinations.png" alt=""><figcaption></figcaption></figure></div>

documentation/wiki/product/brand-guidelines/typography.md

@@ -18,74 +18,98 @@ layout:
 
 Typography is one of the most, if not the most, important communication tools for our brand. It carries our brand voice; with it, we establish our tone, personality, and message. 
 
-<figure><img src="../../.gitbook/assets/Typography.png" alt=""><figcaption></figcaption></figure>
-
 ## Primary Typeface
 
 ### Public Sans
 
 Public Sans is a strong, neutral, open-source typeface for interfaces, text, and headings developed by USWDS. It is seen across US government websites and communications, giving Grants an additional source of credibility.
 
-[Download Public Sans](https://fonts.google.com/specimen/Public+Sans). It is already included in USWDS but should be added to HHS staff computers to maintain brand alignment.
-
-<figure><img src="../../.gitbook/assets/Public Sans Sample.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/Simpler Grants Public Sans Sample.png" alt=""><figcaption></figcaption></figure>
 
-Public Sans Regular and Regular Italic:
+[Download Public Sans](https://fonts.google.com/specimen/Public+Sans). It is already included in USWDS but should be added to HHS staff computers to maintain brand alignment in Simpler Grants material.
 
-<figure><img src="../../.gitbook/assets/Public Sans Regular Sample.png" alt=""><figcaption></figcaption></figure>
 
-Public Sans ExtraBold and Extrabold Italic:
 
-<figure><img src="../../.gitbook/assets/Public Sans ExtraBold Sample.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/Simpler Grants Public Sans Weights Sample.png" alt=""><figcaption><p>Public Sans weights</p></figcaption></figure>
 
 ## Secondary Typeface
 
 ### Newsreader
 
-Newsreader is an open-source font from Production Type designed for on-screen, longer-form reading. NewsReader’s shapes are open and familiar, fostering engaged reading, with features like optical sizes and large display cuts that maximize the type’s ability to be expressive.&#x20;
+Newsreader is an open-source font from Production Type designed for on-screen, longer-form reading. NewsReader’s shapes are open and familiar, fostering engaged reading, with features like optical sizes and large display cuts that maximize the type’s ability to be expressive. In general, use NewsReader for content such as blog posts and informational page content that is longer than 2-3 paragraphs.
+
+<figure><img src="../../.gitbook/assets/Simpler Grants NewsReader Sample.png" alt=""><figcaption></figcaption></figure>
 
 [Download NewsReader](https://fonts.google.com/specimen/Newsreader). It should be added to HHS staff computers to maintain brand alignment.
 
-<figure><img src="../../.gitbook/assets/NewsReader Sample.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/Simpler Grants NewsReader Weights Sample.png" alt=""><figcaption><p>NewsReader weights</p></figcaption></figure>
 
-NewsReader Regular and Regular Italic:
+## Hierarchy
 
-<figure><img src="../../.gitbook/assets/NewsReader Regular.png" alt=""><figcaption></figcaption></figure>
+Different type sizes should always have a relationship to one another. There is no exact rule, but select a base type size in a composition and make all other sizes proportionate to this foundation. Our brand defaults to a 1.35 type scale.
 
-NewsReader SemiBold and Semibold Italic:
+<figure><img src="../../.gitbook/assets/Simpler Grants Type Scale Sample.png" alt=""><figcaption></figcaption></figure>
 
-<figure><img src="../../.gitbook/assets/NewsReader SemiBold.png" alt=""><figcaption></figcaption></figure>
+## Alternates
 
-## Hierarchy
+Use these alternates when there are program limitations for typeface use, such as fallback fonts on the web or PowerPoint decks.
 
-Different type sizes should always have a relationship to one another. There is no exact rule, but select a base type size in a composition and make all other sizes proportionate to this foundation—our brand defaults to a 1.35 type scale.
+### Arial
 
-<div align="left"><figure><img src="../../.gitbook/assets/Type Scale Sample.png" alt=""><figcaption></figcaption></figure></div>
+* Public Sans → Arial
 
-## Alternates
+<figure><img src="../../.gitbook/assets/Simpler Grants Arial Sample.png" alt=""><figcaption></figcaption></figure>
 
-Use these alternates when there are program limitations for typeface use, such as fallback fonts on the web or PowerPoint decks:
+Arial is installed on your computer.
 
-* Public Sans → Arial
-* NewsReader → Georgia
+<figure><img src="../../.gitbook/assets/Simpler Grants Arial Weights Sample.png" alt=""><figcaption><p>Arial weights</p></figcaption></figure>
 
-## Examples
+### Georgia
+
+* NewsReader → Georgia
 
-Typography is used to deliver information and express our brand characters. Below are some examples of the typography in use.
+<figure><img src="../../.gitbook/assets/Simpler Grants Georgia Sample.png" alt=""><figcaption></figcaption></figure>
 
-* _Coming Soon_
+<figure><img src="../../.gitbook/assets/Simpler Grants Georgia Weights Sample.png" alt=""><figcaption><p>Georgia weights</p></figcaption></figure>
 
 ## Don’ts
 
-* Do not outline the type
-* Do not set the type too small
-* Do not apply effects
-* Do not set type in all caps
-* Do not use low-contrast combinations
-* Do not set in all lowercase
-* Do not use past typefaces
-* Do not use unapproved typefaces
-* Do not use low-contrast combinations
-* Do not justify text
-* Do not center-align
-* Do not right align
+Don't apply effects to type.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont apply effects to type.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't center align type.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont center align type.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't justify text.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont justify text.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't outline the type.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont outline type.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't right align type.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont right alight type.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't set type in all caps.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont set type in all caps.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't set type in all lowercase.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont set type in all lower case.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't set type too small.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont set type too small.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't use low contrast on type.
+
+<div align="left"><figure><img src="../../.gitbook/assets/simpler grants dont use low contrast on type.png" alt=""><figcaption></figcaption></figure></div>
+
+Don't use unapproved typefaces.
+
+<div align="left" data-full-width="false"><figure><img src="../../.gitbook/assets/simpler grants dont use unapproved typefaces.png" alt=""><figcaption></figcaption></figure></div>

infra/api/service/main.tf

@@ -123,6 +123,8 @@ module "service" {
   max_capacity           = local.service_config.instance_scaling_max_capacity
   min_capacity           = local.service_config.instance_scaling_min_capacity
   enable_autoscaling     = true
+  enable_s3_cdn          = true
+  s3_cdn_bucket_name     = "public-files"
   cpu                    = local.service_config.instance_cpu
   memory                 = local.service_config.instance_memory
   environment_name       = var.environment_name

infra/frontend/service/main.tf

@@ -131,7 +131,7 @@ module "service" {
   cpu                    = local.service_config.instance_cpu
   memory                 = local.service_config.instance_memory
   enable_autoscaling     = true
-  enable_cdn             = true
+  enable_alb_cdn         = true
 
   app_access_policy_arn      = null
   migrator_access_policy_arn = null

infra/modules/service/cdn-logs.tf

@@ -1,5 +1,5 @@
 resource "aws_s3_bucket" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket_prefix = "${var.service_name}-cdn-access-logs"
   force_destroy = false
@@ -15,7 +15,7 @@ resource "aws_s3_bucket" "cdn" {
 }
 
 resource "aws_s3_bucket_ownership_controls" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket = aws_s3_bucket.cdn[0].id
   rule {
@@ -25,7 +25,7 @@ resource "aws_s3_bucket_ownership_controls" "cdn" {
 }
 
 resource "aws_s3_bucket_acl" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket = aws_s3_bucket.cdn[0].id
 
@@ -35,7 +35,7 @@ resource "aws_s3_bucket_acl" "cdn" {
 }
 
 resource "aws_s3_bucket_public_access_block" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket = aws_s3_bucket.cdn[0].id
 
@@ -46,7 +46,7 @@ resource "aws_s3_bucket_public_access_block" "cdn" {
 }
 
 data "aws_iam_policy_document" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   statement {
     actions = [
@@ -65,14 +65,14 @@ data "aws_iam_policy_document" "cdn" {
 }
 
 resource "aws_s3_bucket_policy" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket = aws_s3_bucket.cdn[0].id
   policy = data.aws_iam_policy_document.cdn[0].json
 }
 
 resource "aws_s3_bucket_lifecycle_configuration" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   bucket = aws_s3_bucket.cdn[0].id
 

infra/modules/service/cdn.tf

@@ -4,17 +4,35 @@ locals {
   default_origin_id        = "default"
   ssl_protocols            = ["TLSv1.2"]
   minimum_protocol_version = "TLSv1.2_2021"
-
+  enable_cdn               = var.enable_alb_cdn || var.enable_s3_cdn
+
+  # The domain name of the CDN, ie. URL people use in order to access the CDN.
+  # Null outputs here result in the CDN content being served from the CDN's default domain name.
+  #   - If the origin is an ALB, and the ALB's domain name is not null,
+  #     then use the domain name of the ALB
+  #   - If the origin is an ALB, and the ALB's domain name is null,
+  #     then return null
+  #   - If the origin is an S3 bucket, and the S3 bucket's desired domain name is not null,
+  #     then use the domain name of the S3 bucket
+  #   - If the origin is an S3 bucket, and the S3 bucket's desired domain name is null,
+  #     then return null
+  cdn_domain_name         = var.enable_alb_cdn && var.domain != null ? var.domain : var.enable_s3_cdn && var.s3_cdn_domain_name != null ? var.s3_cdn_domain_name : null
+  cdn_domain_name_env_var = local.cdn_domain_name != null ? local.cdn_domain_name : aws_cloudfront_distribution.cdn[0].domain_name
+
+  # The domain name of the origin, ie. where the content is being served from.
+  #   - If the origin is an ALB, this is the DNS name of the ALB
+  #   - If the origin is an S3 bucket, this is the regional domain name of the S3 bucket.
+  origin_domain_name = var.enable_alb_cdn ? aws_lb.alb[0].dns_name : var.enable_s3_cdn ? aws_s3_bucket.s3_buckets[var.s3_cdn_bucket_name].bucket_regional_domain_name : null
 }
 
 resource "aws_cloudfront_origin_access_identity" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   comment = "Origin Access Identity for CloudFront to access S3 bucket"
 }
 
 resource "aws_cloudfront_cache_policy" "default" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
   name = var.service_name
 
@@ -39,13 +57,13 @@ resource "aws_cloudfront_cache_policy" "default" {
 }
 
 resource "aws_cloudfront_distribution" "cdn" {
-  count = var.enable_cdn ? 1 : 0
+  count = local.enable_cdn ? 1 : 0
 
-  enabled = var.enable_cdn ? true : false
-  aliases = var.domain == null ? null : [var.domain]
+  enabled = local.enable_cdn ? true : false
+  aliases = local.cdn_domain_name == null ? null : [local.cdn_domain_name]
 
   origin {
-    domain_name = aws_lb.alb[0].dns_name
+    domain_name = local.origin_domain_name
     origin_id   = local.default_origin_id
     custom_origin_config {
       http_port              = 80
@@ -101,11 +119,12 @@ resource "aws_cloudfront_distribution" "cdn" {
 
   depends_on = [
     aws_s3_bucket_public_access_block.cdn[0],
+    aws_s3_bucket_acl.cdn[0],
     aws_s3_bucket_policy.cdn[0],
     aws_s3_bucket.cdn[0],
   ]
 
-  #checkov:skip=CKV2_AWS_46:We aren't using a S3 origin
+  #checkov:skip=CKV2_AWS_46:We sometimes use a ALB origin
   #checkov:skip=CKV_AWS_174:False positive
   #checkov:skip=CKV_AWS_310:Configure a failover in future work
   #checkov:skip=CKV_AWS_68:Configure WAF in future work

infra/modules/service/main.tf

@@ -45,9 +45,13 @@ locals {
     { name : "DB_NAME", value : var.db_vars.connection_info.db_name },
     { name : "DB_SCHEMA", value : var.db_vars.connection_info.schema_name },
   ]
+  cdn_environment_variables = local.enable_cdn ? [
+    { name : "CDN_URL", value : local.cdn_domain_name_env_var },
+  ] : []
   environment_variables = concat(
     local.base_environment_variables,
     local.db_environment_variables,
+    local.cdn_environment_variables,
     [
       for name, value in var.extra_environment_variables :
       { name : name, value : value }

infra/modules/service/variables.tf

@@ -204,12 +204,30 @@ variable "enable_load_balancer" {
   default     = true
 }
 
-variable "enable_cdn" {
-  description = "Whether to enable a CDN for the service"
+variable "enable_alb_cdn" {
+  description = "Whether to enable an ALB origin CDN for the service. Cannot be enabled at the same time as the S3 CDN."
   type        = bool
   default     = false
 }
 
+variable "enable_s3_cdn" {
+  description = "Whether to enable a S3 origin CDN for the service. Cannot be enabled at the same time as the ALB CDN."
+  type        = bool
+  default     = false
+}
+
+variable "s3_cdn_bucket_name" {
+  description = "The name of the S3 bucket to use for the S3 CDN."
+  type        = string
+  default     = null
+}
+
+variable "s3_cdn_domain_name" {
+  description = "The domain name of the S3 bucket to use for the S3 CDN"
+  type        = string
+  default     = null
+}
+
 variable "healthcheck_command" {
   description = "The command to run to check the health of the container, used on the container health check"
   type        = list(string)