From 019005e805394b824b8f9e93dfe6dbe7a7e72e8f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:30:05 -0400 Subject: [PATCH 001/184] Add shell script to deploy PL build to gh-pages branch of given repo --- scripts/deploy-gh-pages.sh | 145 +++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 scripts/deploy-gh-pages.sh diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh new file mode 100644 index 0000000000..2f96e3c9e5 --- /dev/null +++ b/scripts/deploy-gh-pages.sh @@ -0,0 +1,145 @@ +#!/bin/sh +# +# Deploying Mayflower to Github Pages +# ----------------------------------------------------- +# +# Run from the repo root, with and must have a clean working directory. +# +# Usage: +# ./scripts/deploy-gh-pages.sh [-t (remote-repo)] [-b (git-branch-or-tag)] +# -t Target: the remote repo whose gh-pages branch is being pushed to (required) +# -b Build source: the git branch or tag to build from (required) +# +# Example: ./scripts/deploy-gh-pages.sh -t jesconstantine/mayflower -b DP-1234-my-branch-name +# +# Description: +# 1. Validate the passed arguments: build source and target repo +# 2. Attempt to checkout passed build source, defaults to master branch +# 3. Build pattern lab static assets +# 4. Copy static assets (build output: styleguide/public/) into a new temp directory +# 5. Initialize a temp repo in the temp directory +# 6. Commit all of the static asset files +# 7. Add the passed target as remote +# 8. Push all build assets to target remote gh-pages branch +# 9. Remove the temp directory +# 10. Get back to mayflower/styleguide directory +# 11. Checkout prior branch +# +# @todo +# - use AWS cli to push/rsync to bucket +# - build into ci process +# + +# Default arguments +targetEnv=false +buildSrc=false + +# Get passed arguments +while getopts t:b option +do + case "${option}" + in + t) targetEnv=${OPTARG};; + b) buildSrc=${OPTARG};; + esac +done + +# Validate build source environment exists +if ${buildSrc} = false; +then + echo -e "Whoops, we need a git branch or tag name to checkout and build from." + exit 1; +fi + +# Validate that passed build source is a valid git branch or tag +if git rev-parse ${buildSrc} >/dev/null 2>&1 +then + echo "Validated git build source: ${buildSrc}..." +else + echo -e "Hmmm, couldn't find the build source ${buildSrc}... check your branch or tag name, and make sure you've pulled it down to your local repo." + exit 1; +fi + +# Validate target environment argument exists +if ${targetEnv} = false; +then + echo -e "Whoops, we need a target repo that we can push to." + exit 1; +fi + +# Validate that target argument is a remote repo +TARGET_URL = "git@github.com:${targetEnv}.git" +git ls-remote "${TARGET_URL}" &>- +if [ "$?" -ne 0 ]; +then + echo -e "Unable to read from '${TARGET_URL}', check your remote repo. It is likely something like username/mayflower" + exit 1; +else + echo "Validated target remote repo url: ${TARGET_URL}..." +fi + +# Confirm a deploy to prod if "massgov/mayflower" provided as target. +if [ ${targetEnv} = "massgov/mayflower" ]; +then + read -p "You've indicated a deploy to prod, are you sure?" -n 1 -r + echo # move to a new line + if [[ ! $REPLY =~ ^[Yy]$ ]]; + then + exit 1; + fi +fi + +# Local variables +NOW=$(date +"%c") +MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" + +# checkout the latest tag/release +echo "Checking out the build source: ${buildSrc}" +git checkout ${buildSrc} + +# Get to styleguide directory (inside of repo root), does not assume repo root is "mayflower" +echo "Changing directory into mayflower repo root/styleguide" +cd $(git rev-parse --show-toplevel)/styleguide + +# Build pattern to generate prod static assets +echo "Building mayflower static assets..." +gulp prod + +# make temp directory to copy public assets +echo "Making ~/tmp/mayflower directory..." +if [ -d "~/tmp" ]; +then + mkdir ~/tmp/mayflower +else + mkdir ~/tmp + mkdir ~/tmp/mayflower +fi + +# copy built assets in /public into temp directory +echo "Copying PL build output to ~/tmp/mayflower directory..." +cp -R public ~/tmp/mayflower + +# get to temp directory build output +echo "Changing directory to ~/tmp/mayflower/public..." +cd ~/tmp/mayflower/public + +# initialize temp git repo + push up to gh-pages +echo "Creating temporary repo and committing build to master branch..." +git init +git add . +git commit -m "$MESSAGE" + +echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." +git remote add target git@github.com:${TARGET_URL}.git +git push target master:refs/heads/gh-pages --force + +# cleanup +echo "Getting back to mayflower repo root /styleguide directory..." +cd - + +echo "Cleaning up temp dir..." +rm -rf ~/tmp/mayflower + +# check out the previous branch +echo "Checking out prior branch..." +git checkout @{-1} From 7e08d04fddfda88fc6bae4e305214bc6d1f90788 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:32:07 -0400 Subject: [PATCH 002/184] Make deploy script executable --- scripts/deploy-gh-pages.sh | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 scripts/deploy-gh-pages.sh diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh old mode 100644 new mode 100755 From fb623696857e0040f1aed7f526d28943730eb7cd Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:33:42 -0400 Subject: [PATCH 003/184] Use bash shebang in deploy script --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 2f96e3c9e5..8aa09f5ff1 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -1,4 +1,4 @@ -#!/bin/sh +#!/bin/bash # # Deploying Mayflower to Github Pages # ----------------------------------------------------- From ffc83a18dc9a6117cea4a13b4b9072e0cf3749e3 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:37:02 -0400 Subject: [PATCH 004/184] Fix conditional logic --- scripts/deploy-gh-pages.sh | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 8aa09f5ff1..7fe0e3b5b2 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -45,14 +45,15 @@ do done # Validate build source environment exists -if ${buildSrc} = false; +if [ ${buildSrc} == false ]; then echo -e "Whoops, we need a git branch or tag name to checkout and build from." exit 1; fi # Validate that passed build source is a valid git branch or tag -if git rev-parse ${buildSrc} >/dev/null 2>&1 +git rev-parse ${buildSrc} &>- +if [ "$?" -ne 0 ]; then echo "Validated git build source: ${buildSrc}..." else @@ -61,7 +62,7 @@ else fi # Validate target environment argument exists -if ${targetEnv} = false; +if [ ${targetEnv} == false ]; then echo -e "Whoops, we need a target repo that we can push to." exit 1; From 41cbd1ce785249e702bde8fe9175549115f3b0d5 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:42:45 -0400 Subject: [PATCH 005/184] Write git output to screen --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 7fe0e3b5b2..e1a0bf3f0a 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -52,7 +52,7 @@ then fi # Validate that passed build source is a valid git branch or tag -git rev-parse ${buildSrc} &>- +git rev-parse ${buildSrc} if [ "$?" -ne 0 ]; then echo "Validated git build source: ${buildSrc}..." @@ -70,7 +70,7 @@ fi # Validate that target argument is a remote repo TARGET_URL = "git@github.com:${targetEnv}.git" -git ls-remote "${TARGET_URL}" &>- +git ls-remote "${TARGET_URL}" if [ "$?" -ne 0 ]; then echo -e "Unable to read from '${TARGET_URL}', check your remote repo. It is likely something like username/mayflower" From 5576165def800fb123c2391516c16f6df94ea706 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:43:10 -0400 Subject: [PATCH 006/184] Fix conditional logic check for false --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index e1a0bf3f0a..54197df72e 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -45,7 +45,7 @@ do done # Validate build source environment exists -if [ ${buildSrc} == false ]; +if [ !${buildSrc} ]; then echo -e "Whoops, we need a git branch or tag name to checkout and build from." exit 1; @@ -62,7 +62,7 @@ else fi # Validate target environment argument exists -if [ ${targetEnv} == false ]; +if [ !${targetEnv} ]; then echo -e "Whoops, we need a target repo that we can push to." exit 1; From 52526239fc209188d7fbd1c14c17569aa9755eb7 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 07:43:29 -0400 Subject: [PATCH 007/184] print variable name in log --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 54197df72e..6f6521b678 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -55,9 +55,9 @@ fi git rev-parse ${buildSrc} if [ "$?" -ne 0 ]; then - echo "Validated git build source: ${buildSrc}..." + echo "Validated git build source: ${buildSrc} ..." else - echo -e "Hmmm, couldn't find the build source ${buildSrc}... check your branch or tag name, and make sure you've pulled it down to your local repo." + echo -e "Hmmm, couldn't find the build source ${buildSrc} ... check your branch or tag name, and make sure you've pulled it down to your local repo." exit 1; fi From 2199e94c712cc26b24f42212bc86a7f5927d9586 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 08:12:27 -0400 Subject: [PATCH 008/184] update order of args --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 6f6521b678..5279474f56 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -35,12 +35,12 @@ targetEnv=false buildSrc=false # Get passed arguments -while getopts t:b option +while getopts b:t option do case "${option}" in - t) targetEnv=${OPTARG};; b) buildSrc=${OPTARG};; + t) targetEnv=${OPTARG};; esac done From 5155a9705876fcd3ee6d55d427f1f9b848ddd9d4 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 08:13:00 -0400 Subject: [PATCH 009/184] Fix conditional logic boolean false --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 5279474f56..85342785cc 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -45,7 +45,7 @@ do done # Validate build source environment exists -if [ !${buildSrc} ]; +if [ "$buildSrc" = false ]; then echo -e "Whoops, we need a git branch or tag name to checkout and build from." exit 1; @@ -62,7 +62,7 @@ else fi # Validate target environment argument exists -if [ !${targetEnv} ]; +if [ "$targetEnv" = false ]; then echo -e "Whoops, we need a target repo that we can push to." exit 1; From ffbf27077239f411380673c7d509459851092a8a Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 08:13:27 -0400 Subject: [PATCH 010/184] fix variable assignment, remove spaces --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 85342785cc..954eeb95b7 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -69,8 +69,8 @@ then fi # Validate that target argument is a remote repo -TARGET_URL = "git@github.com:${targetEnv}.git" git ls-remote "${TARGET_URL}" +TARGET_URL="git@github.com:${targetEnv}.git" if [ "$?" -ne 0 ]; then echo -e "Unable to read from '${TARGET_URL}', check your remote repo. It is likely something like username/mayflower" From a332c9ee9de1516fdb9da1d42b786a3a84cae055 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 08:13:42 -0400 Subject: [PATCH 011/184] echo errors in red, success in green --- scripts/deploy-gh-pages.sh | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 954eeb95b7..d3010608cc 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -47,36 +47,42 @@ done # Validate build source environment exists if [ "$buildSrc" = false ]; then - echo -e "Whoops, we need a git branch or tag name to checkout and build from." + line="Whoops, we need a git branch or tag name to checkout and build from." + echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" exit 1; fi # Validate that passed build source is a valid git branch or tag -git rev-parse ${buildSrc} +git rev-parse $buildSrc &>/dev/null if [ "$?" -ne 0 ]; then - echo "Validated git build source: ${buildSrc} ..." -else - echo -e "Hmmm, couldn't find the build source ${buildSrc} ... check your branch or tag name, and make sure you've pulled it down to your local repo." + line="Hmmm, couldn't find a branch/tag named ${buildSrc} ... check spelling and make sure you've pulled it." + echo -e "\n \x1B[01;91m"$line"\x1B[0m" exit 1; +else + line="Validated git build source: ${buildSrc} ..." + echo -e "\n\x1B[01;92m"$line"\x1B[0m" fi # Validate target environment argument exists if [ "$targetEnv" = false ]; then - echo -e "Whoops, we need a target repo that we can push to." + line="Whoops, we need a target repo that we can push to." + echo -e "\n \x1B[01;91m"$line"\x1B[0m" exit 1; fi # Validate that target argument is a remote repo -git ls-remote "${TARGET_URL}" TARGET_URL="git@github.com:${targetEnv}.git" +git ls-remote "${TARGET_URL}" &>/dev/null if [ "$?" -ne 0 ]; then - echo -e "Unable to read from '${TARGET_URL}', check your remote repo. It is likely something like username/mayflower" - exit 1; + line="Validated target remote repo url: ${TARGET_URL}..." + echo -e "\n\x1B[01;92m"$line" \x1B[0m" else - echo "Validated target remote repo url: ${TARGET_URL}..." + line="Unable to read from '${TARGET_URL}', check your remote repo. Should be something like username/mayflower" + echo -e "\n \x1B[01;91m"$line"\x1B[0m" + exit 1; fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. From aa388a8aa209d7a0ad4b1877b2d76fbdbd021eda Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 29 Jun 2017 08:15:58 -0400 Subject: [PATCH 012/184] fix validation of target environment --- scripts/deploy-gh-pages.sh | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index d3010608cc..1be64711f1 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -77,12 +77,12 @@ TARGET_URL="git@github.com:${targetEnv}.git" git ls-remote "${TARGET_URL}" &>/dev/null if [ "$?" -ne 0 ]; then - line="Validated target remote repo url: ${TARGET_URL}..." - echo -e "\n\x1B[01;92m"$line" \x1B[0m" -else line="Unable to read from '${TARGET_URL}', check your remote repo. Should be something like username/mayflower" echo -e "\n \x1B[01;91m"$line"\x1B[0m" exit 1; +else + line="Validated target remote repo url: ${TARGET_URL}..." + echo -e "\n\x1B[01;92m"$line" \x1B[0m" fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. From aacc49de676d9556f6911c8c09a631c43740db22 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:10:31 -0400 Subject: [PATCH 013/184] Update deploy script argument validation --- scripts/deploy-gh-pages.sh | 62 ++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 1be64711f1..95146dad96 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -3,18 +3,18 @@ # Deploying Mayflower to Github Pages # ----------------------------------------------------- # -# Run from the repo root, with and must have a clean working directory. +# Run from the repo root, must have a clean working directory. # # Usage: -# ./scripts/deploy-gh-pages.sh [-t (remote-repo)] [-b (git-branch-or-tag)] -# -t Target: the remote repo whose gh-pages branch is being pushed to (required) +# ./scripts/deploy-gh-pages.sh [-b (git-branch-or-tag)] [-t (remote-repo)] # -b Build source: the git branch or tag to build from (required) +# -t Target: the remote repo whose gh-pages branch is being pushed to (required) # # Example: ./scripts/deploy-gh-pages.sh -t jesconstantine/mayflower -b DP-1234-my-branch-name # # Description: # 1. Validate the passed arguments: build source and target repo -# 2. Attempt to checkout passed build source, defaults to master branch +# 2. Attempt to checkout passed build source # 3. Build pattern lab static assets # 4. Copy static assets (build output: styleguide/public/) into a new temp directory # 5. Initialize a temp repo in the temp directory @@ -23,7 +23,7 @@ # 8. Push all build assets to target remote gh-pages branch # 9. Remove the temp directory # 10. Get back to mayflower/styleguide directory -# 11. Checkout prior branch +# 11. Check out prior branch # # @todo # - use AWS cli to push/rsync to bucket @@ -35,25 +35,39 @@ targetEnv=false buildSrc=false # Get passed arguments -while getopts b:t option +while getopts :b:t: option do - case "${option}" - in - b) buildSrc=${OPTARG};; - t) targetEnv=${OPTARG};; + case "${option}" in + b) buildSrc=${OPTARG};; + t) targetEnv=${OPTARG};; + : ) line="Missing argument for parameter [-${OPTARG}]"; + echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" >&2; + exit 1;; + \? ) line="Whoops, this script only accepts arguments for: git build branch/tag [-b] and target repo [-t]"; + echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" >&2; + exit 1;; esac done -# Validate build source environment exists +# Validate build source environment argument exists if [ "$buildSrc" = false ]; then - line="Whoops, we need a git branch or tag name to checkout and build from." + line="Whoops, we need a git branch or tag name to checkout and build from [-b]." echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" exit 1; fi +# Validate target environment argument exists +if [ "$targetEnv" = false ]; +then + line="Whoops, we need a target repo that we can push to [-t]." + echo -e "\n \x1B[01;91m"$line"\x1B[0m" + exit 1; +fi + + # Validate that passed build source is a valid git branch or tag -git rev-parse $buildSrc &>/dev/null +git rev-parse ${buildSrc} &>/dev/null if [ "$?" -ne 0 ]; then line="Hmmm, couldn't find a branch/tag named ${buildSrc} ... check spelling and make sure you've pulled it." @@ -64,20 +78,12 @@ else echo -e "\n\x1B[01;92m"$line"\x1B[0m" fi -# Validate target environment argument exists -if [ "$targetEnv" = false ]; -then - line="Whoops, we need a target repo that we can push to." - echo -e "\n \x1B[01;91m"$line"\x1B[0m" - exit 1; -fi - -# Validate that target argument is a remote repo -TARGET_URL="git@github.com:${targetEnv}.git" -git ls-remote "${TARGET_URL}" &>/dev/null +# Validate that passed target argument is a valid remote repo +TARGET_URL="git@github.com:"${targetEnv}".git" +git ls-remote ${TARGET_URL} &>/dev/null if [ "$?" -ne 0 ]; then - line="Unable to read from '${TARGET_URL}', check your remote repo. Should be something like username/mayflower" + line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like 'username/mayflower'." echo -e "\n \x1B[01;91m"$line"\x1B[0m" exit 1; else @@ -148,5 +154,9 @@ echo "Cleaning up temp dir..." rm -rf ~/tmp/mayflower # check out the previous branch -echo "Checking out prior branch..." +echo "Checking out your previous branch..." git checkout @{-1} + +# success message. +line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." +echo -e "\n\x1B[01;92m"$line" \x1B[0m" From bc04ffa98ef9117960fa7baafb8f9bd2c3a3cf7f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:16:06 -0400 Subject: [PATCH 014/184] Validate git push during deploy --- scripts/deploy-gh-pages.sh | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 95146dad96..c04731b576 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -118,7 +118,7 @@ cd $(git rev-parse --show-toplevel)/styleguide echo "Building mayflower static assets..." gulp prod -# make temp directory to copy public assets +# Make temp directory to copy public assets echo "Making ~/tmp/mayflower directory..." if [ -d "~/tmp" ]; then @@ -128,15 +128,15 @@ else mkdir ~/tmp/mayflower fi -# copy built assets in /public into temp directory +# Copy built assets in /public into temp directory echo "Copying PL build output to ~/tmp/mayflower directory..." cp -R public ~/tmp/mayflower -# get to temp directory build output +# Get to temp directory build output echo "Changing directory to ~/tmp/mayflower/public..." cd ~/tmp/mayflower/public -# initialize temp git repo + push up to gh-pages +# Initialize temp git repo + push up to gh-pages echo "Creating temporary repo and committing build to master branch..." git init git add . @@ -144,19 +144,27 @@ git commit -m "$MESSAGE" echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." git remote add target git@github.com:${TARGET_URL}.git -git push target master:refs/heads/gh-pages --force +if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] +then + line="Git push was successful!" + echo -e "\n\x1B[01;92m"$line" \x1B[0m" +else + line="Hmmm, looks like we couldn't push. Check your remote repo permissions." + echo -e "\n \x1B[01;91m"$line"\x1B[0m" + +fi -# cleanup +# Cleanup echo "Getting back to mayflower repo root /styleguide directory..." cd - echo "Cleaning up temp dir..." rm -rf ~/tmp/mayflower -# check out the previous branch +# Check out the previous branch echo "Checking out your previous branch..." git checkout @{-1} -# success message. +# Success message. line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." echo -e "\n\x1B[01;92m"$line" \x1B[0m" From 010273a1a4d0caff774e5583da5cd4b3af56d603 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:18:45 -0400 Subject: [PATCH 015/184] Exit deploy script on failed build --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index c04731b576..910e3eb5b0 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -151,7 +151,7 @@ then else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." echo -e "\n \x1B[01;91m"$line"\x1B[0m" - + exit 1;; fi # Cleanup From e27dd2da22a6aca41bde24b5cfadd7493b9ebd04 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:19:26 -0400 Subject: [PATCH 016/184] Update docs --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 910e3eb5b0..8d23faca52 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -155,7 +155,7 @@ else fi # Cleanup -echo "Getting back to mayflower repo root /styleguide directory..." +echo "Getting back to previous directory..." cd - echo "Cleaning up temp dir..." From 1812d9d5e0e2aef54f10c9b81e19021e18a85ece Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:21:53 -0400 Subject: [PATCH 017/184] Fix syntax error. --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 8d23faca52..ef9036661c 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -151,7 +151,7 @@ then else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." echo -e "\n \x1B[01;91m"$line"\x1B[0m" - exit 1;; + exit 1; fi # Cleanup From 5321706d8a161363a7fc321f12d240dca3d45950 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:30:00 -0400 Subject: [PATCH 018/184] Create a function for cleanup --- scripts/deploy-gh-pages.sh | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index ef9036661c..2dea1043aa 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -106,6 +106,19 @@ fi NOW=$(date +"%c") MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" +function cleanup { + # Cleanup + echo "Getting back to previous directory..." + cd - + + echo "Cleaning up temp dir..." + rm -rf ~/tmp/mayflower + + # Check out the previous branch + echo "Checking out your previous branch..." + git checkout @{-1} +} + # checkout the latest tag/release echo "Checking out the build source: ${buildSrc}" git checkout ${buildSrc} @@ -148,23 +161,13 @@ if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"D then line="Git push was successful!" echo -e "\n\x1B[01;92m"$line" \x1B[0m" + cleanup + # Success message. + line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." + echo -e "\n\x1B[01;92m"$line" \x1B[0m" else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." echo -e "\n \x1B[01;91m"$line"\x1B[0m" + cleanup exit 1; fi - -# Cleanup -echo "Getting back to previous directory..." -cd - - -echo "Cleaning up temp dir..." -rm -rf ~/tmp/mayflower - -# Check out the previous branch -echo "Checking out your previous branch..." -git checkout @{-1} - -# Success message. -line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." -echo -e "\n\x1B[01;92m"$line" \x1B[0m" From 22578edf54328b6723ea6b2adb9a90838e7fa7e1 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:30:11 -0400 Subject: [PATCH 019/184] Fix target URL --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 2dea1043aa..b1fc94dd89 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -156,7 +156,7 @@ git add . git commit -m "$MESSAGE" echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." -git remote add target git@github.com:${TARGET_URL}.git +git remote add target ${TARGET_URL} if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] then line="Git push was successful!" From 7c8c04ea93be0ad3de6b71e3c4ab748d815c71bb Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:47:09 -0400 Subject: [PATCH 020/184] Create function for success / error logging --- scripts/deploy-gh-pages.sh | 68 +++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 27 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index b1fc94dd89..49f499b9b8 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -28,7 +28,35 @@ # @todo # - use AWS cli to push/rsync to bucket # - build into ci process -# + +# Steps to clean up after script execution +# Runs on success and failure. +function cleanup { + # Cleanup + echo "Getting back to previous directory..." + cd - + + echo "Cleaning up temp dir..." + rm -rf ~/tmp/mayflower + + # Check out the previous branch + echo "Checking out your previous branch..." + git checkout @{-1} +} + +# Output success or error log during execution +function log { + # parameters + local theLogType=$1 + local theMessage=$2 + + if [[ theLogType == "success" ]]; then + echo -e "\n\x1B[01;92m"$theMessage"\x1B[0m \n" + else + echo -e "\n \x1B[01;91m"$theMessage" \x1B[0m \n" >&2 + exit + fi +} # Default arguments targetEnv=false @@ -41,10 +69,10 @@ do b) buildSrc=${OPTARG};; t) targetEnv=${OPTARG};; : ) line="Missing argument for parameter [-${OPTARG}]"; - echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" >&2; - exit 1;; + log "error" "$line"; + exit 1;; \? ) line="Whoops, this script only accepts arguments for: git build branch/tag [-b] and target repo [-t]"; - echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" >&2; + log "error" "$line"; exit 1;; esac done @@ -53,7 +81,7 @@ done if [ "$buildSrc" = false ]; then line="Whoops, we need a git branch or tag name to checkout and build from [-b]." - echo -e "\n \x1B[01;91m"$line"\x1B[0m \n" + log "error" "$line"; exit 1; fi @@ -61,21 +89,20 @@ fi if [ "$targetEnv" = false ]; then line="Whoops, we need a target repo that we can push to [-t]." - echo -e "\n \x1B[01;91m"$line"\x1B[0m" + log "error" "$line"; exit 1; fi - # Validate that passed build source is a valid git branch or tag git rev-parse ${buildSrc} &>/dev/null if [ "$?" -ne 0 ]; then line="Hmmm, couldn't find a branch/tag named ${buildSrc} ... check spelling and make sure you've pulled it." - echo -e "\n \x1B[01;91m"$line"\x1B[0m" + log "error" "$line"; exit 1; else line="Validated git build source: ${buildSrc} ..." - echo -e "\n\x1B[01;92m"$line"\x1B[0m" + log "success" "$line"; fi # Validate that passed target argument is a valid remote repo @@ -84,11 +111,11 @@ git ls-remote ${TARGET_URL} &>/dev/null if [ "$?" -ne 0 ]; then line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like 'username/mayflower'." - echo -e "\n \x1B[01;91m"$line"\x1B[0m" + log "error" "$line"; exit 1; else line="Validated target remote repo url: ${TARGET_URL}..." - echo -e "\n\x1B[01;92m"$line" \x1B[0m" + log "success" "$line"; fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. @@ -106,19 +133,6 @@ fi NOW=$(date +"%c") MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" -function cleanup { - # Cleanup - echo "Getting back to previous directory..." - cd - - - echo "Cleaning up temp dir..." - rm -rf ~/tmp/mayflower - - # Check out the previous branch - echo "Checking out your previous branch..." - git checkout @{-1} -} - # checkout the latest tag/release echo "Checking out the build source: ${buildSrc}" git checkout ${buildSrc} @@ -160,14 +174,14 @@ git remote add target ${TARGET_URL} if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] then line="Git push was successful!" - echo -e "\n\x1B[01;92m"$line" \x1B[0m" + log "success" "$line"; cleanup # Success message. line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." - echo -e "\n\x1B[01;92m"$line" \x1B[0m" + log "success" "$line"; else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." - echo -e "\n \x1B[01;91m"$line"\x1B[0m" + log "error" "$line"; cleanup exit 1; fi From 89a2ef76bf6863b588bfd7a819939e8ac463050b Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:54:00 -0400 Subject: [PATCH 021/184] Update docs --- scripts/deploy-gh-pages.sh | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 49f499b9b8..75e072c23a 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -171,13 +171,15 @@ git commit -m "$MESSAGE" echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." git remote add target ${TARGET_URL} + +# Make sure we can push to remote, return success or error based on result. if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] then line="Git push was successful!" log "success" "$line"; cleanup # Success message. - line="Success! You should be able to see your updates at: http(s)://.github.io/ (i.e. http://jesconstantine.github.io/mayflower)." + line="Woo-hoo! Deploy complete! You should be able to see your updates at: \n http(s)://.github.io/ \n (i.e. http://jesconstantine.github.io/mayflower)." log "success" "$line"; else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." From ad648efec6abb4e3723f98074990e8e99554c219 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:56:14 -0400 Subject: [PATCH 022/184] Ensure that patterns are blown away before built --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 75e072c23a..829bd44aae 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -143,7 +143,7 @@ cd $(git rev-parse --show-toplevel)/styleguide # Build pattern to generate prod static assets echo "Building mayflower static assets..." -gulp prod +gulp build prod # Make temp directory to copy public assets echo "Making ~/tmp/mayflower directory..." From 330c301c3340c633b4f1cbb867cf88da7c9edc0d Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 07:58:51 -0400 Subject: [PATCH 023/184] Remove exit on error log --- scripts/deploy-gh-pages.sh | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 829bd44aae..8ac24c1ef7 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -54,7 +54,6 @@ function log { echo -e "\n\x1B[01;92m"$theMessage"\x1B[0m \n" else echo -e "\n \x1B[01;91m"$theMessage" \x1B[0m \n" >&2 - exit fi } From a6b8eea9e7d255cd6550da6d255f51b90ae33c75 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:03:43 -0400 Subject: [PATCH 024/184] Fix string comparison in log function --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 8ac24c1ef7..7c10f7c543 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -50,10 +50,10 @@ function log { local theLogType=$1 local theMessage=$2 - if [[ theLogType == "success" ]]; then + if [[ "$theLogType" == "success" ]]; then echo -e "\n\x1B[01;92m"$theMessage"\x1B[0m \n" else - echo -e "\n \x1B[01;91m"$theMessage" \x1B[0m \n" >&2 + echo -e "\n \x1B[01;91m"$theMessage"\x1B[0m \n" >&2 fi } From 2757e2cd0f71e72066e3658703e6f9e98a08a5f4 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:07:58 -0400 Subject: [PATCH 025/184] Add final error message to deploy script --- scripts/deploy-gh-pages.sh | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 7c10f7c543..598210bd88 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -184,5 +184,7 @@ else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." log "error" "$line"; cleanup + line="Bummer! Deploy unsuccessful. Check your spellings for git branches + remotes. And check your permissions. Then try again!" + log "error" "$line"; exit 1; fi From c31de50fb15d11596fdad4618f90e9718735dc5e Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:10:41 -0400 Subject: [PATCH 026/184] Make wrong target remote repo message more helpful --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 598210bd88..6b02501a2f 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -109,7 +109,7 @@ TARGET_URL="git@github.com:"${targetEnv}".git" git ls-remote ${TARGET_URL} &>/dev/null if [ "$?" -ne 0 ]; then - line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like 'username/mayflower'." + line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like 'yourGithubUsername/mayflower'." log "error" "$line"; exit 1; else From 4934d9a5bafb9344fe3c9d75198fcbe6572301be Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:18:40 -0400 Subject: [PATCH 027/184] Create CNAME for staging (test) --- scripts/deploy-gh-pages.sh | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 6b02501a2f..e0b1e38abd 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -168,6 +168,13 @@ git init git add . git commit -m "$MESSAGE" +if [[ "$targetEnv" == "jesconstantine/mayflower" ]]; then + echo "Creating CNAME for 'stage-mayflower.digital.mass.gov'"; + echo "stage-mayflower.digital.mass.gov" >> CNAME + git add . + git commit -m "Create CNAME" +fi + echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." git remote add target ${TARGET_URL} From 2db759248f15940b2548d4478c6adc60f637680b Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:19:14 -0400 Subject: [PATCH 028/184] Test confirm functionality --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index e0b1e38abd..496824ad18 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -118,9 +118,9 @@ else fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. -if [ ${targetEnv} = "massgov/mayflower" ]; +if [ ${targetEnv} = "jesconstantine/mayflower" ]; then - read -p "You've indicated a deploy to prod, are you sure?" -n 1 -r + read -p "You've indicated a deploy to jesconstantine, are you sure?" -n 1 -r echo # move to a new line if [[ ! $REPLY =~ ^[Yy]$ ]]; then From d2d1f39c8868b6089c55e8026cd1577d0b20feb6 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:23:05 -0400 Subject: [PATCH 029/184] Create CNAME for stage / prod --- scripts/deploy-gh-pages.sh | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 496824ad18..a9f09628ee 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -18,7 +18,7 @@ # 3. Build pattern lab static assets # 4. Copy static assets (build output: styleguide/public/) into a new temp directory # 5. Initialize a temp repo in the temp directory -# 6. Commit all of the static asset files +# 6. Commit all of the static asset files (+ create a CNAME file for stage / prod) # 7. Add the passed target as remote # 8. Push all build assets to target remote gh-pages branch # 9. Remove the temp directory @@ -118,9 +118,9 @@ else fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. -if [ ${targetEnv} = "jesconstantine/mayflower" ]; +if [ ${targetEnv} = "massgov/mayflower" ]; then - read -p "You've indicated a deploy to jesconstantine, are you sure?" -n 1 -r + read -p "You've indicated a deploy to production, are you sure? [y/n] " -n 1 -r echo # move to a new line if [[ ! $REPLY =~ ^[Yy]$ ]]; then @@ -168,6 +168,7 @@ git init git add . git commit -m "$MESSAGE" +# Create staging CNAME record if [[ "$targetEnv" == "jesconstantine/mayflower" ]]; then echo "Creating CNAME for 'stage-mayflower.digital.mass.gov'"; echo "stage-mayflower.digital.mass.gov" >> CNAME @@ -175,6 +176,14 @@ if [[ "$targetEnv" == "jesconstantine/mayflower" ]]; then git commit -m "Create CNAME" fi +# Create prod CNAME record +if [[ "$targetEnv" == "massgov/mayflower" ]]; then + echo "Creating CNAME for 'mayflower.digital.mass.gov'"; + echo "mayflower.digital.mass.gov" >> CNAME + git add . + git commit -m "Create CNAME" +fi + echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." git remote add target ${TARGET_URL} From 4dcb5bbf228fda2fdf1adbbf0459a272fae60b82 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 1 Jul 2017 08:26:20 -0400 Subject: [PATCH 030/184] Add logic for final success message non/prod --- scripts/deploy-gh-pages.sh | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index a9f09628ee..328f7dbfc3 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -194,7 +194,11 @@ then log "success" "$line"; cleanup # Success message. - line="Woo-hoo! Deploy complete! You should be able to see your updates at: \n http(s)://.github.io/ \n (i.e. http://jesconstantine.github.io/mayflower)." + if [[ "$buildSrc" == "massgov/mayflower" ]]; then + line="Woo-hoo! Deploy complete! \n You should see the release live at http://mayflower.digital.mass.gov ... Time for release notes! ;)" + else + line="Woo-hoo! Deploy complete! You should be able to see your updates at: \n http(s)://.github.io/ \n (i.e. http://jesconstantine.github.io/mayflower)." + fi log "success" "$line"; else line="Hmmm, looks like we couldn't push. Check your remote repo permissions." From 31b48726e7e1c59cb36551b007cfda56405e6253 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:10:23 -0400 Subject: [PATCH 031/184] Update readme with deploy, contrib, versions, license info See template link under readme > acknowledgements --- README.md | 101 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 67 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index d3a33dd9a9..c0f4d235fa 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,68 @@ -# Style Guide -This living styleguide is built using PatternLab. - -## Machine set up -1. Install PHP -2. Install NodeJS version 6.9.4 (https://nodejs.org/en/download/) -3. Install GulpJS, via command line `npm install -g gulp-cli` - -## Set up instructions -1. Clone Repo -2. Move into the styleguide directory `cd mayflower/styleguide` -3. Generate pattern lab default files `php core/console --generate` -4. Install npm dependencies `npm install` - -## Generate a styleguide -### For local development -1. run `gulp` -2. launch browser at http://localhost:3000/ or port shown in gulp output -3. Browser will automatically refresh as you make changes - -### For a dev environment -1. run 'gulp build' - -### For a production environment -1. run 'gulp prod' - -# Working with PatternLab -* All work is done in the source folder. -* Mark-up is in the source/_patterns directory. -* Front end assets can be found in the source/assets directory -* Gulp will handle the conversion of files from source to public -* Pattern Lab specific files are in the /public/styleguide directory (the styleguide.html file is automatically generated when twig templates are updated) - -# Release Deployment +# Mayflower [![GitHub version](https://badge.fury.io/gh/massgov%2Fmayflower.svg)](https://badge.fury.io/gh/massgov%2Fmayflower) +Mayflower is the enterprise design system for the Commonwealth of Massachusetts. + +## Getting Started + +These instructions will get you a copy of the project up and running on your local machine for *browsing* and *testing* purposes. +- See [Contribute](#contribute) section for instructions on setting up your fork and repo for development and contribution purposes. +- See [Deployment](#deployment) section for notes on how to deploy the project to a live environment. + +### Prerequisites + +In order to run Mayflower locally, you need to have some things installed and set up on your machine: + +1. Install PHP + - See steps for [windows](https://www.sitepoint.com/how-to-install-php-on-windows/) || [mac os](https://ryanwinchester.ca/posts/install-php-5-6-in-osx-10-with-homebrew) +2. Install NodeJS [version 6.9.4](https://nodejs.org/en/blog/release/v6.9.4/) + - If you need a different version of NodeJS for another project, you can use a tool like [N](https://github.com/tj/n) or [NVM](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/) to manage multiple versions. +3. Install GulpJS [globally](https://docs.npmjs.com/getting-started/installing-npm-packages-globally) + - Run `npm install -g gulp-cli` from your command line + +### Installing +Follow these steps to get up and running to *view* or *test* Mayflower. Developers should see our [Contribute](#contribute) section for directions on how to set up your repo for development and contribution purposes. + +1. Clone this repo `git clone git@github.com:massgov/mayflower.git` +1. Move into the styleguide directory `cd mayflower/styleguide` +1. Generate pattern lab default files `php core/console --generate` +1. Install npm dependencies `npm install` +1. Run `gulp` +1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) +1. From your active terminal session, type `CTRL` + `C` to kill the `gulp` task execution when you're done. + +## Deployment + +See [/docs/deploy.md](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). + +### Mayflower Artifacts Tagged releases are automatically (via CircleCI) deployed to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repo for consumption by the Palantir team. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions. + +In order to be deployed, tags must follow the format: `#.#.#-optionalwords-optionalwords` (regex: `/\bv?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-[\da-z\-]+(?:\.[\da-z\-]+)*)?(?:\+[\da-z\-]+(?:\.[\da-z\-]+)*)?\b/`). + +If you do not see your tag being deployed: +1. Make sure your tag name is unique +1. Test your tag name [here](https://regex101.com/r/UJGppF/2) +1. Check circleci builds for mayflower project to see if there are any errors + +## Built With + +* [Pattern Lab 2 (PHP)](http://patternlab.io/docs/index.html) - The framework used +* [Twig](https://twig.sensiolabs.org/) - The templating language + +## Contribute + +Please read [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us. + +## Versioning + +We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/massgov/mayflower/tags). + +What SemVer means for Mayflower section coming soon... + +## License + +This project is licensed under the is licensed under the GNU General Public License v2.0 - see the [LICENSE.txt](https://github.com/massgov/mayflower/blob/master/LICENSE.txt) file for details. + +## Acknowledgments + +* [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) methodology by Brad Frost +* This awesome [README template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2) by []@PurpleBooth](https://gist.github.com/PurpleBooth) From e29f591d6ad00b22212c7d53aab273b563eee319 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:10:37 -0400 Subject: [PATCH 032/184] Create contributing documentation --- CONTRIBUTING.md | 135 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..89dd3a0f83 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,135 @@ +# Contributing + +When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. + +**On this page:** +1. [Prerequisites](#prerequisites) +1. [Forking the repo](#forking-the-repo) +1. [Cloning the repo](#cloning-the-repo) +1. [Installing project dependencies](#installing-project-dependencies) +1. [Keeping in sync](#keeping-in-sync) +1. [Spinning up a branch](#spinning-up-a-branch) +1. [Working with Pattern Lab](#working-with-pattern-lab) +1. [Committing your work](#committing-your-work) +1. [Pushing your branch](#pushing-your-branch) +1. [Creating a Pull Request](#creating-a-pull-request) +1. [Review by Maintainers](#review-by-maintainers) +1. [Acknowledgements](#acknowldegements) + +## Prerequisites + + In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the repo [README > Prerequisites](https://github.com/massgov/mayflower/blob/master/README.md#prerequesites). + +## Forking the repo + +A fork is a *copy* of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Learn more about forking repositories on [Github Help](https://help.github.com/articles/fork-a-repo/). + +1. Visit the [Mayflower repo on Github](https://github.com/massgov/mayflower) +1. Click the "Fork" icon in the upper right of the page +1. This will create a fork of the project under your user account which you can browse to at: `https://github.com//mayflower` + +## Cloning the repo +Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. + +1. On GitHub, navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. +1. Click the green Clone or download button in the top right corner. +1. In the Clone with SSH dialog, click the clipboard icon to copy the clone URL for the repository. +1. From your terminal, type `git clone `, and then paste the URL you copied. It will look like this, with your GitHub username instead of ``: `git clone git@github.com:/mayflower.git`. +1. Press Enter. Your local clone will be created. + +You now have a local representation of *your* Mayflower fork. + +## Installing project dependencies + +Follow these steps if this is your first time working with the Mayflower project. + +1. Move into the styleguide directory `cd mayflower/styleguide` +1. Generate pattern lab default files `php core/console --generate` +1. Install npm dependencies `npm install` + +## Keeping in sync + +In order to make it easy to keep your fork in sync with the original (`massgov/mayflower`), add the original as a remote: + +``` +git remote add upstream git@github.com:massgov/mayflower.git +``` + +If you check your remotes (`git remote -v`), you can now see that you have two "remotes" that your local repo is pointed towards: `origin`, which points to *your* Mayflower fork, and `upstream`, which points to `massgov/mayflower`. + +## Spinning up a branch + +Any new features and non-emergency bugfixes should branch from the `dev` branch. Make sure you're on the `dev` branch and that it's up-to-date with the source repo. + +If you just forked it, it always will be—but if there have been a lot of changes to the original repo since you forked it, yours might be out of sync. Here's how to get yours in sync: + +``` +git checkout dev +git fetch upstream +git merge upstream/dev +git push origin dev +``` + +Now you can spin up your new branch: + +``` +git checkout -b my-issue-number-feature-name +``` + +## Working with Pattern Lab + +Serve Mayflower and watch it reload as you make your changes: + +1. Run `gulp` +1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) +1. Browser will automatically refresh as you make changes + +Sections about how + what to contribute coming soon... + +**Note:** It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. + +### Pattern Lab notes + +* All work is done in the `/styleguide/source` directory. +* Mark-up is in the `/styleguide/source/_patterns` directory. +* Front end assets can be found in the `/styleguide/source/assets` directory. +* `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. +* Pattern Lab specific files are in the `/styleguide/public/styleguide` directory (the `styleguide.html` file is automatically generated when twig templates are updated). + +For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html). + +## Committing your work + +Make your changes and commit them. Ensure that you only fix the thing you're working on. Make sure that you commit in logical blocks. Each commit message should be sane. Read Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). + +``` +git add . +git commit -m "Helpful commit message" +``` + +## Pushing your branch +In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote and then press some buttons on GitHub. + +To push a new branch: + +``` +git push -u origin my-ticket/issue-number-feature-name +``` + +This will create the branch on your GitHub project. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. + +## Creating a Pull Request +Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. *Learn more about [Pull Requests on Github](https://help.github.com/articles/about-pull-requests/)*. + +1. Swap back to the browser and navigate to your fork of the project and you'll see that your new branch is listed at the top with a handy "Compare & pull request" button. +1. Go ahead and press that button! +1. On the next page, ensure that the "base fork" points to the correct repository and branch. For new features and non-emergency bugfixes related to Mayflower, these should be "base fork": `massgov/mayflower` and "base" (branch): `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. +1. Then ensure that you provide a good, succinct title for your pull request and explain why you have created it in the description box. Add any relevant issue numbers if you have them. + +## Review by Maintainers + +For your work to be integrated into the project, the maintainers will review your work and either request changes or merge it. + +## Acknowledgements + +Thanks to Rob Allen's [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) and Matt Stauffer's [How to contribute to an open-source GitHub project using your own fork](https://mattstauffer.co/blog/how-to-contribute-to-an-open-source-github-project-using-your-own-fork) for providing these helpful instructions on working with github open source projects. From bc8beca3580a9849f34743392b5b78671282ca77 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:11:04 -0400 Subject: [PATCH 033/184] Create deploy documentation --- docs/deploy.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 docs/deploy.md diff --git a/docs/deploy.md b/docs/deploy.md new file mode 100644 index 0000000000..50208803fe --- /dev/null +++ b/docs/deploy.md @@ -0,0 +1,48 @@ +# Deployment + +On this page: + +- [Developer deployment](#developer-deployment) + - [Setting up your Fork with Github Pages](#setting-up-your-fork-with-github-pages) +- [Release deployment](#release-deployment) +- [Static assets](#static-assets) + +## Developer deployment +#### Deploy feature work to your fork's Github Pages for review and testing +Developers and contributors can follow these steps to deploy your branch to your fork's Github Pages environment. This will allow reviewers to test your code without having to build from your branch locally. + +1. Set up your Mayflower fork + local repository, see our [Contribute](#contribute) section for directions. +1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. +1. Make sure you have the thing you are deploying (branch or tag) pulled down locally +1. Change directory to the root directory of your local repo (likely `mayflower`). +1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b your-branch-or-tag-name -t yourGithubUsername/mayflower` + - Where `-b` is the build source (required): your git branch or tag name. + - Where `-t` is the target remote repo (required): likely `/mayflower`. For example, the fork at [github.com/jesconstantine/mayflower](http://github.com/jesconstantine/mayflower) would use `jesconstantine/mayflower` + - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine/mayflower` + 1. If this is your first deployment, follow the steps below to set up your Mayflower fork with Github Pages. + +### Setting up your Fork with Github Pages + +This project uses [Github Pages](https://help.github.com/articles/what-is-github-pages/) as a static site hosting service. Once you have followed the steps above to deploy your work to your Mayflower fork, you should see that your fork now has a `gh-pages` branch. Follow these steps (necessary for the first deploy only) to configure your Mayflower fork to serve that static content from your `gh-pages` branch. + +1. On GitHub, navigate to your Mayflower fork's repository. +1. Under your repository name, click the Settings tab. +1. Use the Select source drop-down menu to select `gh-pages` as your GitHub Pages publishing source. (You must have a `gh-pages` branch present for this option show) +1. Click Save. + +You should now be able to see the work that you just deployed at `http://.github.io/mayflower`! + +## Release deployment +Mayflower release managers with the necessary repo permissions can follow these steps to deploy a release to production. + +Release docs coming soon. + +## Static assets + +It is possible to build Mayflower's static assets without serving them. There are two different gulp tasks, depending on the type of environment for which you are building: + +##### Building for a dev environment +1. Run `gulp build` from your command line + +##### Building for a production environment +1. Run `gulp prod` from your command line From 9287cb477c0caae4de9e2a492bffaf31a3afc94f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:16:21 -0400 Subject: [PATCH 034/184] Fix readme link typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c0f4d235fa..05e066c33b 100644 --- a/README.md +++ b/README.md @@ -65,4 +65,4 @@ This project is licensed under the is licensed under the GNU General Public Lice ## Acknowledgments * [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) methodology by Brad Frost -* This awesome [README template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2) by []@PurpleBooth](https://gist.github.com/PurpleBooth) +* This awesome [README template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2) by [@PurpleBooth](https://gist.github.com/PurpleBooth) From 68f1f442adf75ad8e70bfafa706ccfbf4dafac84 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:16:38 -0400 Subject: [PATCH 035/184] Fix link to contributing.md --- docs/deploy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/deploy.md b/docs/deploy.md index 50208803fe..cbabc9778e 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -11,7 +11,7 @@ On this page: #### Deploy feature work to your fork's Github Pages for review and testing Developers and contributors can follow these steps to deploy your branch to your fork's Github Pages environment. This will allow reviewers to test your code without having to build from your branch locally. -1. Set up your Mayflower fork + local repository, see our [Contribute](#contribute) section for directions. +1. Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for directions. 1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. 1. Make sure you have the thing you are deploying (branch or tag) pulled down locally 1. Change directory to the root directory of your local repo (likely `mayflower`). From f1c9aa9e33534957e4f6de25cb827f900d8774fc Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sun, 2 Jul 2017 13:20:43 -0400 Subject: [PATCH 036/184] Update github pages settings docs --- docs/deploy.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/deploy.md b/docs/deploy.md index cbabc9778e..7f81f03dd7 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -27,7 +27,8 @@ This project uses [Github Pages](https://help.github.com/articles/what-is-github 1. On GitHub, navigate to your Mayflower fork's repository. 1. Under your repository name, click the Settings tab. -1. Use the Select source drop-down menu to select `gh-pages` as your GitHub Pages publishing source. (You must have a `gh-pages` branch present for this option show) +1. From the Settings tab, scroll down to the Github Pages section. +1. Under Source, use the drop-down menu to select `gh-pages` as your GitHub Pages publishing source. (You must have a `gh-pages` branch present for this option show) 1. Click Save. You should now be able to see the work that you just deployed at `http://.github.io/mayflower`! From f3e8818aed55065c8fd824bec50288274e1607ca Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 06:41:27 -0400 Subject: [PATCH 037/184] Update Contributing md with Mayflower, PR tips. --- CONTRIBUTING.md | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 89dd3a0f83..6d64d06232 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -76,15 +76,21 @@ Now you can spin up your new branch: git checkout -b my-issue-number-feature-name ``` +If you are working on a ticket DP-1234-create-backto-link, then you would type: + +``` +git checkout -b DP-1234-create-backto-link +``` + ## Working with Pattern Lab -Serve Mayflower and watch it reload as you make your changes: +Serve Mayflower locally and as you save your changes, it will update automatically: 1. Run `gulp` 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) 1. Browser will automatically refresh as you make changes -Sections about how + what to contribute coming soon... +*Sections about how + what to contribute coming soon...* **Note:** It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. @@ -100,7 +106,7 @@ For more information, read the [Pattern Lab documentation](http://patternlab.io/ ## Committing your work -Make your changes and commit them. Ensure that you only fix the thing you're working on. Make sure that you commit in logical blocks. Each commit message should be sane. Read Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). +Make your changes and commit them. Ensure that you only commit the thing you're working on. Make sure that you commit in logical blocks. Each commit message should be sane. Read Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). ``` git add . @@ -108,23 +114,28 @@ git commit -m "Helpful commit message" ``` ## Pushing your branch -In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote and then press some buttons on GitHub. +In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote (your Mayflower fork) and then press some buttons on GitHub. To push a new branch: ``` -git push -u origin my-ticket/issue-number-feature-name +git push -u origin DP-1234-create-backto-link ``` -This will create the branch on your GitHub project. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. +This will create the branch on your Mayflower fork. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. ## Creating a Pull Request Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. *Learn more about [Pull Requests on Github](https://help.github.com/articles/about-pull-requests/)*. -1. Swap back to the browser and navigate to your fork of the project and you'll see that your new branch is listed at the top with a handy "Compare & pull request" button. +1. Swap back to the browser and navigate to your Mayflower fork and you'll see that your new branch is listed at the top with a handy "Compare & pull request" button. 1. Go ahead and press that button! -1. On the next page, ensure that the "base fork" points to the correct repository and branch. For new features and non-emergency bugfixes related to Mayflower, these should be "base fork": `massgov/mayflower` and "base" (branch): `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. -1. Then ensure that you provide a good, succinct title for your pull request and explain why you have created it in the description box. Add any relevant issue numbers if you have them. +1. On the next page, ensure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. +1. For your PR title, use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: + - Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later. + - Be explicit about what feedback you want, if any: a quick pair of eyes on the code, discussion on the technical approach, critique on design, a review of copy. + - Be explicit about when you want feedback, if the Pull Request is work in progress, say so. A prefix of “[WIP]” in the title is a simple, common pattern to indicate that state. + - @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”) + - @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”) ## Review by Maintainers From c1b286475ce470014d6c8b68c8b582a2168e58c9 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 06:42:17 -0400 Subject: [PATCH 038/184] Create PR template --- .github/PULL_REQUEST_TEMPLATE.md | 35 ++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000000..ae58c1add0 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,35 @@ + + +## Description + + +## Related Issue / Ticket + +- [JIRA issue]() +- [Github issue]() + +## Steps to Test + + +1. + +## Screenshots +Use something like [licecap](http://www.cockos.com/licecap/) to capture gifs to demonstrate behaviors. + + +## Additional Notes: + +Anything else to add? + +#### Impacted Areas in Application + + +* + +#### @TODO + + +* + +#### Today I learned... + From ccf17c057a1de75aec12bd9a4732d3d8a980458e Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 06:42:30 -0400 Subject: [PATCH 039/184] Create issue template --- .github/ISSUE_TEMPLATE.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE.md diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000000..62e748a0a5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,12 @@ +### Description: + +Write a sentence or two about what the issue is about. + +- Mayflower Version: +- Platform / Device: +- Browser: + +### Steps to reproduce: +- Reproducible Code Snippet or URL: + +1. Steps to reproduce From d6323d5950792fe93457e7b8cde58db1465b1e18 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 06:52:19 -0400 Subject: [PATCH 040/184] Fix typo and make contributing language more friendly --- CONTRIBUTING.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6d64d06232..932d0259a0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,7 @@ # Contributing -When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. +Thanks for contributing to Mayflower! Follow the steps on this page to get up an running. + **On this page:** 1. [Prerequisites](#prerequisites) @@ -14,7 +15,7 @@ When contributing to this repository, please first discuss the change you wish t 1. [Pushing your branch](#pushing-your-branch) 1. [Creating a Pull Request](#creating-a-pull-request) 1. [Review by Maintainers](#review-by-maintainers) -1. [Acknowledgements](#acknowldegements) +1. [Acknowledgements](#acknowledgements) ## Prerequisites @@ -130,7 +131,7 @@ Pull requests (PRs) let you tell others about changes you've pushed to a reposit 1. Swap back to the browser and navigate to your Mayflower fork and you'll see that your new branch is listed at the top with a handy "Compare & pull request" button. 1. Go ahead and press that button! 1. On the next page, ensure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. -1. For your PR title, use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: +1. For your PR title, please use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: - Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later. - Be explicit about what feedback you want, if any: a quick pair of eyes on the code, discussion on the technical approach, critique on design, a review of copy. - Be explicit about when you want feedback, if the Pull Request is work in progress, say so. A prefix of “[WIP]” in the title is a simple, common pattern to indicate that state. @@ -139,7 +140,7 @@ Pull requests (PRs) let you tell others about changes you've pushed to a reposit ## Review by Maintainers -For your work to be integrated into the project, the maintainers will review your work and either request changes or merge it. +Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it. Thanks again! ## Acknowledgements From d6d9ff50446f05e882ed3d64d1b10e712ce2ac74 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:00:58 -0400 Subject: [PATCH 041/184] Update steps to browse in readme. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05e066c33b..bab4caa0db 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,8 @@ Follow these steps to get up and running to *view* or *test* Mayflower. Develop 1. Install npm dependencies `npm install` 1. Run `gulp` 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) -1. From your active terminal session, type `CTRL` + `C` to kill the `gulp` task execution when you're done. +1. Take a look through Mayflower. You can use the menu to look at whole page layouts, templates, components (organisms and molecules), and child elements (molecules and atoms). +1. When you're done looking, type `CTRL` + `C` execution from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. ## Deployment From 6b9c7fd644a9a5555a90db7cbd96b3552e660c71 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:06:25 -0400 Subject: [PATCH 042/184] Update readme browse Mayflower steps --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bab4caa0db..c5fa62b8a7 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,10 @@ Follow these steps to get up and running to *view* or *test* Mayflower. Develop 1. Install npm dependencies `npm install` 1. Run `gulp` 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) -1. Take a look through Mayflower. You can use the menu to look at whole page layouts, templates, components (organisms and molecules), and child elements (molecules and atoms). +1. Take a look through Mayflower! + - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). + - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). + - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. 1. When you're done looking, type `CTRL` + `C` execution from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. ## Deployment From 830aab54f413342051b98b488d86b445f00ecbe7 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:07:30 -0400 Subject: [PATCH 043/184] Fix readme typo. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c5fa62b8a7..ad82c88f65 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Follow these steps to get up and running to *view* or *test* Mayflower. Develop - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. -1. When you're done looking, type `CTRL` + `C` execution from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. +1. When you're done looking, type `CTRL` + `C` from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. ## Deployment From d0afcfa4c6d11b7062c394a35a5479160ddedf3c Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:16:11 -0400 Subject: [PATCH 044/184] Add deployment steps to contributing.md --- CONTRIBUTING.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 932d0259a0..f51a2344a9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,6 +13,7 @@ Thanks for contributing to Mayflower! Follow the steps on this page to get up a 1. [Working with Pattern Lab](#working-with-pattern-lab) 1. [Committing your work](#committing-your-work) 1. [Pushing your branch](#pushing-your-branch) +1. [Deploying your work](#deploying-your-work) 1. [Creating a Pull Request](#creating-a-pull-request) 1. [Review by Maintainers](#review-by-maintainers) 1. [Acknowledgements](#acknowledgements) @@ -125,6 +126,10 @@ git push -u origin DP-1234-create-backto-link This will create the branch on your Mayflower fork. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. +## Deploying your work + +Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) for step by step instructions. + ## Creating a Pull Request Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. *Learn more about [Pull Requests on Github](https://help.github.com/articles/about-pull-requests/)*. From c0f8dc6506c7f279baff25c3cefc39786a6a98ba Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:21:28 -0400 Subject: [PATCH 045/184] Fix typo, styling of deploy docs. --- docs/deploy.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/deploy.md b/docs/deploy.md index 7f81f03dd7..6253efb78d 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -13,25 +13,28 @@ Developers and contributors can follow these steps to deploy your branch to your 1. Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for directions. 1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. -1. Make sure you have the thing you are deploying (branch or tag) pulled down locally +1. Make sure you have the thing you are deploying (branch or tag) pulled down locally. 1. Change directory to the root directory of your local repo (likely `mayflower`). -1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b your-branch-or-tag-name -t yourGithubUsername/mayflower` +1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b -t /mayflower` - Where `-b` is the build source (required): your git branch or tag name. - - Where `-t` is the target remote repo (required): likely `/mayflower`. For example, the fork at [github.com/jesconstantine/mayflower](http://github.com/jesconstantine/mayflower) would use `jesconstantine/mayflower` - - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine/mayflower` + - Where `-t` is the target remote repo (required): likely `/mayflower`. For example, the fork at [github.com/jesconstantine/mayflower](http://github.com/jesconstantine/mayflower) would use `jesconstantine/mayflower`. + - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine/mayflower`. 1. If this is your first deployment, follow the steps below to set up your Mayflower fork with Github Pages. ### Setting up your Fork with Github Pages This project uses [Github Pages](https://help.github.com/articles/what-is-github-pages/) as a static site hosting service. Once you have followed the steps above to deploy your work to your Mayflower fork, you should see that your fork now has a `gh-pages` branch. Follow these steps (necessary for the first deploy only) to configure your Mayflower fork to serve that static content from your `gh-pages` branch. -1. On GitHub, navigate to your Mayflower fork's repository. +1. On Github, navigate to your Mayflower fork's repository. 1. Under your repository name, click the Settings tab. 1. From the Settings tab, scroll down to the Github Pages section. -1. Under Source, use the drop-down menu to select `gh-pages` as your GitHub Pages publishing source. (You must have a `gh-pages` branch present for this option show) +1. Under Source, use the drop-down menu to select `gh-pages` as your Github Pages publishing source (you must have a `gh-pages` branch present for this option show). 1. Click Save. -You should now be able to see the work that you just deployed at `http://.github.io/mayflower`! +You should now be able to see the work that you just deployed! Just visit: +``` +http://.github.io/mayflower +``` ## Release deployment Mayflower release managers with the necessary repo permissions can follow these steps to deploy a release to production. From 355ee8f6b4541713df1fd401c87ad833bc501073 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:36:36 -0400 Subject: [PATCH 046/184] Add PHP version to readme. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ad82c88f65..452e68d0de 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ These instructions will get you a copy of the project up and running on your loc In order to run Mayflower locally, you need to have some things installed and set up on your machine: -1. Install PHP +1. Install PHP ([v5.6.4](https://secure.php.net/get/php-5.6.4.tar.bz2/from/a/mirror)) - See steps for [windows](https://www.sitepoint.com/how-to-install-php-on-windows/) || [mac os](https://ryanwinchester.ca/posts/install-php-5-6-in-osx-10-with-homebrew) -2. Install NodeJS [version 6.9.4](https://nodejs.org/en/blog/release/v6.9.4/) +2. Install NodeJS ([v6.9.4](https://nodejs.org/en/blog/release/v6.9.4/)) - If you need a different version of NodeJS for another project, you can use a tool like [N](https://github.com/tj/n) or [NVM](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/) to manage multiple versions. 3. Install GulpJS [globally](https://docs.npmjs.com/getting-started/installing-npm-packages-globally) - Run `npm install -g gulp-cli` from your command line From 63d439377603d0b87b6961dde829253abbc1f802 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:39:10 -0400 Subject: [PATCH 047/184] Update built with pattern lab language in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 452e68d0de..40941d3230 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ If you do not see your tag being deployed: ## Built With -* [Pattern Lab 2 (PHP)](http://patternlab.io/docs/index.html) - The framework used +* [Pattern Lab 2 (PHP)](http://patternlab.io/docs/index.html) - The pattern framework / static site generator * [Twig](https://twig.sensiolabs.org/) - The templating language ## Contribute From e4802439125eeb6903974a8f1930c3c73c83d14c Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Mon, 3 Jul 2017 07:41:32 -0400 Subject: [PATCH 048/184] Update mayflower artifacts text in readme. --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 40941d3230..7f2f3cc716 100644 --- a/README.md +++ b/README.md @@ -40,12 +40,12 @@ See [/docs/deploy.md](https://github.com/massgov/mayflower/blob/master/docs/depl ### Mayflower Artifacts Tagged releases are automatically (via CircleCI) deployed to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repo for consumption by the Palantir team. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions. -In order to be deployed, tags must follow the format: `#.#.#-optionalwords-optionalwords` (regex: `/\bv?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-[\da-z\-]+(?:\.[\da-z\-]+)*)?(?:\+[\da-z\-]+(?:\.[\da-z\-]+)*)?\b/`). +In order to be deployed, tags must follow the format: `#.#.#-optionalword-optionalword`. If you do not see your tag being deployed: -1. Make sure your tag name is unique -1. Test your tag name [here](https://regex101.com/r/UJGppF/2) -1. Check circleci builds for mayflower project to see if there are any errors +1. Make sure your tag name is unique. +1. Test your tag name with this [regex test](https://regex101.com/r/UJGppF/2). +1. Check CircleCI builds for Mayflower project to see if there are any errors. ## Built With From 697a8ae7de33fed6f840f589ae0751b441186a33 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 06:42:14 -0400 Subject: [PATCH 049/184] Add git commit context to contributing docs --- CONTRIBUTING.md | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f51a2344a9..a55ab26003 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing -Thanks for contributing to Mayflower! Follow the steps on this page to get up an running. +Thanks for contributing to Mayflower! Follow the steps on this page to get up and running. **On this page:** @@ -34,17 +34,14 @@ A fork is a *copy* of a repository. Forking a repository allows you to freely ex Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. 1. On GitHub, navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. -1. Click the green Clone or download button in the top right corner. -1. In the Clone with SSH dialog, click the clipboard icon to copy the clone URL for the repository. -1. From your terminal, type `git clone `, and then paste the URL you copied. It will look like this, with your GitHub username instead of ``: `git clone git@github.com:/mayflower.git`. -1. Press Enter. Your local clone will be created. +1. Click the green "Clone or download" button in the top right corner. +1. In the "Clone with SSH" dialog, click the clipboard icon to copy the clone URL for the repository. +1. From your terminal, type `git clone `, and then paste the URL you copied. It will look like this, with your GitHub username instead of ``: `git clone git@github.com:/mayflower.git`. Press Enter to create your clone. You now have a local representation of *your* Mayflower fork. ## Installing project dependencies -Follow these steps if this is your first time working with the Mayflower project. - 1. Move into the styleguide directory `cd mayflower/styleguide` 1. Generate pattern lab default files `php core/console --generate` 1. Install npm dependencies `npm install` @@ -78,7 +75,7 @@ Now you can spin up your new branch: git checkout -b my-issue-number-feature-name ``` -If you are working on a ticket DP-1234-create-backto-link, then you would type: +If you were working on ticket DP-1234-create-backto-link, then you would type: ``` git checkout -b DP-1234-create-backto-link @@ -92,8 +89,6 @@ Serve Mayflower locally and as you save your changes, it will update automatical 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) 1. Browser will automatically refresh as you make changes -*Sections about how + what to contribute coming soon...* - **Note:** It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. ### Pattern Lab notes @@ -106,14 +101,16 @@ Serve Mayflower locally and as you save your changes, it will update automatical For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html). +**Sections about how + what to contribute coming soon...** + ## Committing your work -Make your changes and commit them. Ensure that you only commit the thing you're working on. Make sure that you commit in logical blocks. Each commit message should be sane. Read Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). +Make your changes and commit them. Ensure that you only commit the thing you're working on. Make sure that you commit in logical blocks. + +Chris Beam explains [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/): +> ... a well-crafted Git commit message is the best way to communicate context about a change to fellow developers (and indeed to their future selves). A diff will tell you *what* changed, but only the commit message can properly tell you *why*. -``` -git add . -git commit -m "Helpful commit message" -``` +We also love the model Git commit message in Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). ## Pushing your branch In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote (your Mayflower fork) and then press some buttons on GitHub. @@ -145,8 +142,12 @@ Pull requests (PRs) let you tell others about changes you've pushed to a reposit ## Review by Maintainers -Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it. Thanks again! +Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it. + +Thanks! + +*** -## Acknowledgements +**Acknowledgements** -Thanks to Rob Allen's [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) and Matt Stauffer's [How to contribute to an open-source GitHub project using your own fork](https://mattstauffer.co/blog/how-to-contribute-to-an-open-source-github-project-using-your-own-fork) for providing these helpful instructions on working with github open source projects. +Thanks to Rob Allen's [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) and Matt Stauffer's [How to contribute to an open-source GitHub project using your own fork](https://mattstauffer.co/blog/how-to-contribute-to-an-open-source-github-project-using-your-own-fork) for providing these helpful instructions on working with Github open source projects which we relied heavily on for this document. From 51335a1930094601f538aafb1a139fbefcbb610b Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 06:42:35 -0400 Subject: [PATCH 050/184] Format readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7f2f3cc716..11101adb9a 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ In order to run Mayflower locally, you need to have some things installed and se - Run `npm install -g gulp-cli` from your command line ### Installing -Follow these steps to get up and running to *view* or *test* Mayflower. Developers should see our [Contribute](#contribute) section for directions on how to set up your repo for development and contribution purposes. +Follow these steps to get up and running to *browse* or *test* Mayflower. Developers should see our [Contribute](#contribute) section for directions on how to set up your repo for development and contribution purposes. 1. Clone this repo `git clone git@github.com:massgov/mayflower.git` 1. Move into the styleguide directory `cd mayflower/styleguide` @@ -60,7 +60,7 @@ Please read [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/C We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/massgov/mayflower/tags). -What SemVer means for Mayflower section coming soon... +**What SemVer means for Mayflower section coming soon...** ## License From 47df5cb54ec4ec4e9ad20b0a96bd69ff97746aa7 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:11:53 -0400 Subject: [PATCH 051/184] Describe project file structure in contributing.md --- CONTRIBUTING.md | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a55ab26003..bbf68bddaf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -87,21 +87,26 @@ Serve Mayflower locally and as you save your changes, it will update automatical 1. Run `gulp` 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) -1. Browser will automatically refresh as you make changes +1. Familiarize yourself with Mayflower: + - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). + - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). + - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. +1. All work is done in the `/styleguide/source` directory. + - Most patterns will have a `.twig` markup file (learn about [Twig](https://twig.sensiolabs.org/)), `.json` default [data file](http://patternlab.io/docs/data-pattern-specific.html), and `.md` [documentation file](http://patternlab.io/docs/pattern-documenting.html) in the `/styleguide/source/_patterns` directory. + - If a pattern has styles associated with it, the corresponding `.scss` files can be found in the `/styleguide/source/assets/scss` directory. We use [SMACSS](https://smacss.com/book/categorizing) to organize and [BEM](http://getbem.com/introduction/) to structure our css. + - If a pattern has js functionality associated with it, the corresponding [ES6 module](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) `.js` file can be found in the `/styleguide/source/assets/js/modules` directory. +1. These assets will automatically recompile and the browser will refresh as you save changes. **Note:** It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. -### Pattern Lab notes +### Other notes -* All work is done in the `/styleguide/source` directory. -* Mark-up is in the `/styleguide/source/_patterns` directory. -* Front end assets can be found in the `/styleguide/source/assets` directory. -* `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. +* `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. See `/styleguide/tools/gulp/gulp-readme.md`. * Pattern Lab specific files are in the `/styleguide/public/styleguide` directory (the `styleguide.html` file is automatically generated when twig templates are updated). -For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html). +**For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html).** -**Sections about how + what to contribute coming soon...** +*Sections about how + what to contribute coming soon...* ## Committing your work From 715bb99e221e4e97fb53f94fbfb164db742d7052 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:19:36 -0400 Subject: [PATCH 052/184] Format contributing.md --- CONTRIBUTING.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bbf68bddaf..eae75316fe 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -92,21 +92,19 @@ Serve Mayflower locally and as you save your changes, it will update automatical - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. 1. All work is done in the `/styleguide/source` directory. - - Most patterns will have a `.twig` markup file (learn about [Twig](https://twig.sensiolabs.org/)), `.json` default [data file](http://patternlab.io/docs/data-pattern-specific.html), and `.md` [documentation file](http://patternlab.io/docs/pattern-documenting.html) in the `/styleguide/source/_patterns` directory. + - Most patterns will have a `.twig` [markup file](https://twig.sensiolabs.org/), `.json` default [data file](http://patternlab.io/docs/data-pattern-specific.html), and `.md` [documentation file](http://patternlab.io/docs/pattern-documenting.html) in the `/styleguide/source/_patterns` directory. - If a pattern has styles associated with it, the corresponding `.scss` files can be found in the `/styleguide/source/assets/scss` directory. We use [SMACSS](https://smacss.com/book/categorizing) to organize and [BEM](http://getbem.com/introduction/) to structure our css. - If a pattern has js functionality associated with it, the corresponding [ES6 module](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) `.js` file can be found in the `/styleguide/source/assets/js/modules` directory. 1. These assets will automatically recompile and the browser will refresh as you save changes. -**Note:** It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. - ### Other notes +* It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. * `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. See `/styleguide/tools/gulp/gulp-readme.md`. * Pattern Lab specific files are in the `/styleguide/public/styleguide` directory (the `styleguide.html` file is automatically generated when twig templates are updated). +* For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html). -**For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html).** - -*Sections about how + what to contribute coming soon...* +**Sections about how + what to contribute coming soon...** ## Committing your work From 90c1124302bff8b02673b14980b3a7775653c5f4 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:23:43 -0400 Subject: [PATCH 053/184] Clarify github pull request buttons in contributing md --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eae75316fe..b9869ef382 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -133,7 +133,7 @@ Once your work is complete, deploy your branch to your Mayflower fork's Github P ## Creating a Pull Request Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. *Learn more about [Pull Requests on Github](https://help.github.com/articles/about-pull-requests/)*. -1. Swap back to the browser and navigate to your Mayflower fork and you'll see that your new branch is listed at the top with a handy "Compare & pull request" button. +1. Swap back to the browser and navigate to your Mayflower fork and (since you've recently pushed your branch up) you'll see that your new branch is listed at the top with a handy green "Compare & pull request" button. *If you don't see that button, there will always be a gray "New Pull Request" button next to the branch drop down on the "Code" tab.* 1. Go ahead and press that button! 1. On the next page, ensure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. 1. For your PR title, please use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: From dd9038ae1230f1c3caed3cb14b26782c78804337 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:25:37 -0400 Subject: [PATCH 054/184] Remove acknowledgements from contributing TOC --- CONTRIBUTING.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b9869ef382..509b8ef31b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,7 +16,6 @@ Thanks for contributing to Mayflower! Follow the steps on this page to get up a 1. [Deploying your work](#deploying-your-work) 1. [Creating a Pull Request](#creating-a-pull-request) 1. [Review by Maintainers](#review-by-maintainers) -1. [Acknowledgements](#acknowledgements) ## Prerequisites From eedad808bea67882d92b1b5551bdb7b00bce900f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:29:24 -0400 Subject: [PATCH 055/184] Format prerequisite in deploy docs --- docs/deploy.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/deploy.md b/docs/deploy.md index 6253efb78d..b7baea672b 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -8,10 +8,14 @@ On this page: - [Static assets](#static-assets) ## Developer deployment + +#### Prerequisite + +Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for directions. + #### Deploy feature work to your fork's Github Pages for review and testing Developers and contributors can follow these steps to deploy your branch to your fork's Github Pages environment. This will allow reviewers to test your code without having to build from your branch locally. -1. Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for directions. 1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. 1. Make sure you have the thing you are deploying (branch or tag) pulled down locally. 1. Change directory to the root directory of your local repo (likely `mayflower`). From 4066e7ee6369bbf32c387c7c0a0ab7d6ab3a1479 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:34:55 -0400 Subject: [PATCH 056/184] Link to gulp readme from deploy docs --- docs/deploy.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/deploy.md b/docs/deploy.md index b7baea672b..15f4bf2790 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -43,14 +43,8 @@ http://.github.io/mayflower ## Release deployment Mayflower release managers with the necessary repo permissions can follow these steps to deploy a release to production. -Release docs coming soon. +**Release docs coming soon.** ## Static assets -It is possible to build Mayflower's static assets without serving them. There are two different gulp tasks, depending on the type of environment for which you are building: - -##### Building for a dev environment -1. Run `gulp build` from your command line - -##### Building for a production environment -1. Run `gulp prod` from your command line +It is possible to build Mayflower's static assets without serving them. See the [gulp-readme](https://github.com/massgov/mayflower/blob/master/styleguide/tools/gulp/gulp-readme.md) for more information. From 98718d74cf52f6c61fc0e005b08644ccc6f2b801 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 4 Jul 2017 07:44:01 -0400 Subject: [PATCH 057/184] Log output when production deploy aborted --- scripts/deploy-gh-pages.sh | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 328f7dbfc3..9fe72f5883 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -120,10 +120,12 @@ fi # Confirm a deploy to prod if "massgov/mayflower" provided as target. if [ ${targetEnv} = "massgov/mayflower" ]; then - read -p "You've indicated a deploy to production, are you sure? [y/n] " -n 1 -r + read -p "You've indicated a deploy to production ([-t] massgov/mayflower), are you sure? [y/n] " -n 1 -r echo # move to a new line if [[ ! $REPLY =~ ^[Yy]$ ]]; then + line="Aborting deploy. Execute the script again with a different value for [-t]." + log "error" "$line"; exit 1; fi fi From e3192f3881da1be1e45101415fb6635a3581e093 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 07:14:53 -0400 Subject: [PATCH 058/184] Use main repo as example in deploy script comments --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 9fe72f5883..65d2ea0f78 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -10,7 +10,7 @@ # -b Build source: the git branch or tag to build from (required) # -t Target: the remote repo whose gh-pages branch is being pushed to (required) # -# Example: ./scripts/deploy-gh-pages.sh -t jesconstantine/mayflower -b DP-1234-my-branch-name +# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name # # Description: # 1. Validate the passed arguments: build source and target repo From 5ad608ebdf7740e7d0ed99606efc3f03e31e5a18 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 07:31:40 -0400 Subject: [PATCH 059/184] Make cname a parameter for deploy script, required for prod only --- scripts/deploy-gh-pages.sh | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 65d2ea0f78..f64677b58d 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -9,8 +9,9 @@ # ./scripts/deploy-gh-pages.sh [-b (git-branch-or-tag)] [-t (remote-repo)] # -b Build source: the git branch or tag to build from (required) # -t Target: the remote repo whose gh-pages branch is being pushed to (required) +# -cname CNAME record: a custom domain to point to Github Pages (required only when deploying to massgov/mayflower: "mayflower.digital.mass.gov") # -# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name +# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -cname mayflower.digital.mass.gov # # Description: # 1. Validate the passed arguments: build source and target repo @@ -60,13 +61,15 @@ function log { # Default arguments targetEnv=false buildSrc=false +cname=false # Get passed arguments -while getopts :b:t: option +while getopts :b:t:cname: option do case "${option}" in b) buildSrc=${OPTARG};; t) targetEnv=${OPTARG};; + cname) cname=${OPTARG};; : ) line="Missing argument for parameter [-${OPTARG}]"; log "error" "$line"; exit 1;; @@ -128,6 +131,14 @@ then log "error" "$line"; exit 1; fi + + # Make sure cname argument (i.e. mayflower.digital.mass.gov) is passed for production deploys. + if [ ${cname} = false ]; + then + line="Please include a cname value for production deployments. Execute the script again with a value for [-cname] i.e. 'mayflower.digital.mass.gov'." + log "error" "$line"; + exit 1; + fi fi # Local variables @@ -170,20 +181,13 @@ git init git add . git commit -m "$MESSAGE" -# Create staging CNAME record -if [[ "$targetEnv" == "jesconstantine/mayflower" ]]; then - echo "Creating CNAME for 'stage-mayflower.digital.mass.gov'"; - echo "stage-mayflower.digital.mass.gov" >> CNAME - git add . - git commit -m "Create CNAME" -fi - -# Create prod CNAME record -if [[ "$targetEnv" == "massgov/mayflower" ]]; then - echo "Creating CNAME for 'mayflower.digital.mass.gov'"; - echo "mayflower.digital.mass.gov" >> CNAME - git add . - git commit -m "Create CNAME" +# Create CNAME if argument passed + if [ ${cname} != false ]; + then + echo "${cname}" >> CNAME + git add . + git commit -m "Create CNAME for '${cname}'" + echo "Creating CNAME for '${cname}'"; fi echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." @@ -199,7 +203,7 @@ then if [[ "$buildSrc" == "massgov/mayflower" ]]; then line="Woo-hoo! Deploy complete! \n You should see the release live at http://mayflower.digital.mass.gov ... Time for release notes! ;)" else - line="Woo-hoo! Deploy complete! You should be able to see your updates at: \n http(s)://.github.io/ \n (i.e. http://jesconstantine.github.io/mayflower)." + line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" fi log "success" "$line"; else From 204b093a1a0c949a30957500778a3b5c9f83813a Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 07:31:56 -0400 Subject: [PATCH 060/184] Move CONTRIBUTING.md into .github directory --- CONTRIBUTING.md => .github/CONTRIBUTING.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename CONTRIBUTING.md => .github/CONTRIBUTING.md (100%) diff --git a/CONTRIBUTING.md b/.github/CONTRIBUTING.md similarity index 100% rename from CONTRIBUTING.md rename to .github/CONTRIBUTING.md From 6a6263b592e7930f3c9ed80577a7ecc021909270 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:14:27 -0400 Subject: [PATCH 061/184] Remove written descriptions of Github's UI, replace with link to docs --- .github/CONTRIBUTING.md | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 509b8ef31b..1735e36173 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -33,11 +33,9 @@ A fork is a *copy* of a repository. Forking a repository allows you to freely ex Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. 1. On GitHub, navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. -1. Click the green "Clone or download" button in the top right corner. -1. In the "Clone with SSH" dialog, click the clipboard icon to copy the clone URL for the repository. -1. From your terminal, type `git clone `, and then paste the URL you copied. It will look like this, with your GitHub username instead of ``: `git clone git@github.com:/mayflower.git`. Press Enter to create your clone. +1. Follow from Step 2 of [Github Help: Cloning a repository](https://help.github.com/articles/cloning-a-repository/). -You now have a local representation of *your* Mayflower fork. +You now have a local representation of *your* Mayflower! ## Installing project dependencies @@ -130,17 +128,16 @@ This will create the branch on your Mayflower fork. The `-u` flag links this bra Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) for step by step instructions. ## Creating a Pull Request -Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. *Learn more about [Pull Requests on Github](https://help.github.com/articles/about-pull-requests/)*. - -1. Swap back to the browser and navigate to your Mayflower fork and (since you've recently pushed your branch up) you'll see that your new branch is listed at the top with a handy green "Compare & pull request" button. *If you don't see that button, there will always be a gray "New Pull Request" button next to the branch drop down on the "Code" tab.* -1. Go ahead and press that button! -1. On the next page, ensure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev`. *Learn more about [Creating Pull Requests across forks on Github](https://help.github.com/articles/creating-a-pull-request-from-a-fork/)*. -1. For your PR title, please use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: - - Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later. - - Be explicit about what feedback you want, if any: a quick pair of eyes on the code, discussion on the technical approach, critique on design, a review of copy. - - Be explicit about when you want feedback, if the Pull Request is work in progress, say so. A prefix of “[WIP]” in the title is a simple, common pattern to indicate that state. - - @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”) - - @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”) +Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. + +1. Follow the steps on [Github Help: Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/). + - Make sure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev`. + - For your PR title, please use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: + - Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later. + - Be explicit about what feedback you want, if any: a quick pair of eyes on the code, discussion on the technical approach, critique on design, a review of copy. + - Be explicit about when you want feedback, if the Pull Request is work in progress, say so. A prefix of “[WIP]” in the title is a simple, common pattern to indicate that state. + - @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”) + - @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”) ## Review by Maintainers From 8662b1f8d80b72c9ef88946ebc58ea7bde1cc8fd Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:16:20 -0400 Subject: [PATCH 062/184] Make CONTRIBUTING.md branching language more consistent with git --- .github/CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 1735e36173..94501f0741 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -53,7 +53,7 @@ git remote add upstream git@github.com:massgov/mayflower.git If you check your remotes (`git remote -v`), you can now see that you have two "remotes" that your local repo is pointed towards: `origin`, which points to *your* Mayflower fork, and `upstream`, which points to `massgov/mayflower`. -## Spinning up a branch +## Creating a branch Any new features and non-emergency bugfixes should branch from the `dev` branch. Make sure you're on the `dev` branch and that it's up-to-date with the source repo. @@ -66,7 +66,7 @@ git merge upstream/dev git push origin dev ``` -Now you can spin up your new branch: +Now you can create your new branch: ``` git checkout -b my-issue-number-feature-name From c667e7f59b5efbd196f79d5a9086665792998a90 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:16:49 -0400 Subject: [PATCH 063/184] Move pattern lab docs to first step in CONTRIBUTING > working with PL --- .github/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 94501f0741..202fd8ed0d 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -82,6 +82,7 @@ git checkout -b DP-1234-create-backto-link Serve Mayflower locally and as you save your changes, it will update automatically: +1. Read the [Pattern Lab docs](http://patternlab.io/docs/index.html)! 1. Run `gulp` 1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) 1. Familiarize yourself with Mayflower: @@ -99,7 +100,6 @@ Serve Mayflower locally and as you save your changes, it will update automatical * It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. * `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. See `/styleguide/tools/gulp/gulp-readme.md`. * Pattern Lab specific files are in the `/styleguide/public/styleguide` directory (the `styleguide.html` file is automatically generated when twig templates are updated). -* For more information, read the [Pattern Lab documentation](http://patternlab.io/docs/index.html). **Sections about how + what to contribute coming soon...** From 56f7c305f6fe4d7b75e26144168eb6784ba913b3 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:17:14 -0400 Subject: [PATCH 064/184] Remove vague language in CONTRIBUTING.md --- .github/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 202fd8ed0d..25480cf0d3 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -113,7 +113,7 @@ Chris Beam explains [How to Write a Git Commit Message](https://chris.beams.io/ We also love the model Git commit message in Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). ## Pushing your branch -In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote (your Mayflower fork) and then press some buttons on GitHub. +In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote (your Mayflower fork). To push a new branch: From 5fa898ad51304d94be3a8f73ecb3fc1a7e14c2b2 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:30:05 -0400 Subject: [PATCH 065/184] Clarify Mayflower Artifacts in readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 11101adb9a..441f656c82 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,10 @@ Follow these steps to get up and running to *browse* or *test* Mayflower. Devel See [/docs/deploy.md](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). -### Mayflower Artifacts -Tagged releases are automatically (via CircleCI) deployed to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repo for consumption by the Palantir team. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions. +## Mayflower Artifacts +Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repository which consists of these assets. -In order to be deployed, tags must follow the format: `#.#.#-optionalword-optionalword`. +Tagged releases from Mayflower are automatically (via CircleCI) deployed to the Mayflower Artifacts repository. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions and must follow the format: `#.#.#-optionalword-optionalword`. If you do not see your tag being deployed: 1. Make sure your tag name is unique. From 232296fcf5c077b3519982f44994aad064c08897 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 08:40:50 -0400 Subject: [PATCH 066/184] Make CONTRIBUTING.md > keeping your fork in sync explanation more clear. --- .github/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 25480cf0d3..882ea86901 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -57,7 +57,7 @@ If you check your remotes (`git remote -v`), you can now see that you have two " Any new features and non-emergency bugfixes should branch from the `dev` branch. Make sure you're on the `dev` branch and that it's up-to-date with the source repo. -If you just forked it, it always will be—but if there have been a lot of changes to the original repo since you forked it, yours might be out of sync. Here's how to get yours in sync: +If you just forked it, you're probably all set. But if there have been a lot of changes to the original repo since you forked it, yours might be out of sync. Here's how to get yours in sync: ``` git checkout dev From 700b3b7fe8c183cb24672a76067710046a0a286c Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:09:23 -0400 Subject: [PATCH 067/184] Move environment setup and demo install instructions to own docs --- .github/CONTRIBUTING.md | 2 +- README.md | 31 ++++++------------------------- docs/demo-install.md | 15 +++++++++++++++ docs/setting-up-environment.md | 10 ++++++++++ 4 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 docs/demo-install.md create mode 100644 docs/setting-up-environment.md diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 882ea86901..caf366ed40 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,7 +19,7 @@ Thanks for contributing to Mayflower! Follow the steps on this page to get up a ## Prerequisites - In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the repo [README > Prerequisites](https://github.com/massgov/mayflower/blob/master/README.md#prerequesites). +In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the [Setting up your environment](https://github.com/massgov/mayflower/blob/master/docs/setting-up-environment.md). ## Forking the repo diff --git a/README.md b/README.md index 441f656c82..f013bb6184 100644 --- a/README.md +++ b/README.md @@ -3,35 +3,16 @@ Mayflower is the enterprise design system for the Commonwealth of Massachusetts. ## Getting Started -These instructions will get you a copy of the project up and running on your local machine for *browsing* and *testing* purposes. -- See [Contribute](#contribute) section for instructions on setting up your fork and repo for development and contribution purposes. -- See [Deployment](#deployment) section for notes on how to deploy the project to a live environment. +### Setting up your environment -### Prerequisites +In order to run Mayflower locally, you need to have some things installed and set up on your machine. Follow the steps in [Setting up your environment](/docs/setting-up-environment.md). -In order to run Mayflower locally, you need to have some things installed and set up on your machine: +### Installing +- Follow the steps in [Demo Install](/docs/demo-install.md) to get a copy of the project up and running on your local machine for *demo* and *testing* purposes. +- See the [Contribute docs](#contribute) for instructions on setting up your fork and repo for *development* and *contribution* purposes. +- See the [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for notes on how to deploy the project to a live environment. -1. Install PHP ([v5.6.4](https://secure.php.net/get/php-5.6.4.tar.bz2/from/a/mirror)) - - See steps for [windows](https://www.sitepoint.com/how-to-install-php-on-windows/) || [mac os](https://ryanwinchester.ca/posts/install-php-5-6-in-osx-10-with-homebrew) -2. Install NodeJS ([v6.9.4](https://nodejs.org/en/blog/release/v6.9.4/)) - - If you need a different version of NodeJS for another project, you can use a tool like [N](https://github.com/tj/n) or [NVM](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/) to manage multiple versions. -3. Install GulpJS [globally](https://docs.npmjs.com/getting-started/installing-npm-packages-globally) - - Run `npm install -g gulp-cli` from your command line -### Installing -Follow these steps to get up and running to *browse* or *test* Mayflower. Developers should see our [Contribute](#contribute) section for directions on how to set up your repo for development and contribution purposes. - -1. Clone this repo `git clone git@github.com:massgov/mayflower.git` -1. Move into the styleguide directory `cd mayflower/styleguide` -1. Generate pattern lab default files `php core/console --generate` -1. Install npm dependencies `npm install` -1. Run `gulp` -1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) -1. Take a look through Mayflower! - - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). - - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). - - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. -1. When you're done looking, type `CTRL` + `C` from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. ## Deployment diff --git a/docs/demo-install.md b/docs/demo-install.md new file mode 100644 index 0000000000..482b3702be --- /dev/null +++ b/docs/demo-install.md @@ -0,0 +1,15 @@ +# Demo Install + +Follow these steps to get up and running to *demo* or *test* Mayflower. Developers should see our [Contribute docs](/.github/CONTRIBUTING.md) for directions on how to set up your repo for development and contribution purposes. + +1. Clone this repo `git clone git@github.com:massgov/mayflower.git` +1. Move into the styleguide directory `cd mayflower/styleguide` +1. Generate pattern lab default files `php core/console --generate` +1. Install npm dependencies `npm install` +1. Run `gulp` +1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) +1. Take a look through Mayflower! + - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). + - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). + - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. +1. When you're done looking, type `CTRL` + `C` from your active terminal session to kill the `gulp` task. You can always run `gulp` again from the `mayflower/styleguide` directory to get it back up and running. diff --git a/docs/setting-up-environment.md b/docs/setting-up-environment.md new file mode 100644 index 0000000000..56c2826243 --- /dev/null +++ b/docs/setting-up-environment.md @@ -0,0 +1,10 @@ +# Setting up your environment + +In order to run Mayflower locally, you need to have some things installed and set up on your machine: + +1. Install PHP ([v5.6.4](https://secure.php.net/get/php-5.6.4.tar.bz2/from/a/mirror)) + - See steps for [windows](https://www.sitepoint.com/how-to-install-php-on-windows/) || [mac os](https://ryanwinchester.ca/posts/install-php-5-6-in-osx-10-with-homebrew) +2. Install NodeJS ([v6.9.4](https://nodejs.org/en/blog/release/v6.9.4/)) + - If you need a different version of NodeJS for another project, you can use a tool like [N](https://github.com/tj/n) or [NVM](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/) to manage multiple versions. +3. Install GulpJS [globally](https://docs.npmjs.com/getting-started/installing-npm-packages-globally) + - Run `npm install -g gulp-cli` from your command line From c77e3cc5598e1eb721456622028dcaede4f00d91 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:10:02 -0400 Subject: [PATCH 068/184] Group steps in CONTRIBUTING.md --- .github/CONTRIBUTING.md | 58 +++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index caf366ed40..f29ed55a30 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -4,24 +4,28 @@ Thanks for contributing to Mayflower! Follow the steps on this page to get up a **On this page:** -1. [Prerequisites](#prerequisites) -1. [Forking the repo](#forking-the-repo) -1. [Cloning the repo](#cloning-the-repo) -1. [Installing project dependencies](#installing-project-dependencies) -1. [Keeping in sync](#keeping-in-sync) -1. [Spinning up a branch](#spinning-up-a-branch) -1. [Working with Pattern Lab](#working-with-pattern-lab) -1. [Committing your work](#committing-your-work) -1. [Pushing your branch](#pushing-your-branch) -1. [Deploying your work](#deploying-your-work) -1. [Creating a Pull Request](#creating-a-pull-request) -1. [Review by Maintainers](#review-by-maintainers) - -## Prerequisites +1. [Getting started](#getting-started) + 1. [Setting up your environment](#setting-up-your-environment) + 1. [Forking the repo](#forking-the-repo) + 1. [Cloning the repo](#cloning-the-repo) + 1. [Installing project dependencies](#installing-project-dependencies) + 1. [Keeping in sync](#keeping-in-sync) +1. [Submitting your work](#submitting-your-work) + 1. [Spinning up a branch](#spinning-up-a-branch) + 1. [Working with Pattern Lab](#working-with-pattern-lab) + 1. [Committing your work](#committing-your-work) + 1. [Pushing your branch](#pushing-your-branch) + 1. [Deploying your work](#deploying-your-work) + 1. [Creating a Pull Request](#creating-a-pull-request) + 1. [Review by Maintainers](#review-by-maintainers) + +## Getting Started + +### Setting up your environment In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the [Setting up your environment](https://github.com/massgov/mayflower/blob/master/docs/setting-up-environment.md). -## Forking the repo +### Forking the repo A fork is a *copy* of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Learn more about forking repositories on [Github Help](https://help.github.com/articles/fork-a-repo/). @@ -29,7 +33,7 @@ A fork is a *copy* of a repository. Forking a repository allows you to freely ex 1. Click the "Fork" icon in the upper right of the page 1. This will create a fork of the project under your user account which you can browse to at: `https://github.com//mayflower` -## Cloning the repo +### Cloning the repo Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. 1. On GitHub, navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. @@ -37,13 +41,13 @@ Right now, you have a fork of the Mayflower repository, but you don't have the f You now have a local representation of *your* Mayflower! -## Installing project dependencies +### Installing project dependencies 1. Move into the styleguide directory `cd mayflower/styleguide` 1. Generate pattern lab default files `php core/console --generate` 1. Install npm dependencies `npm install` -## Keeping in sync +### Keeping in sync In order to make it easy to keep your fork in sync with the original (`massgov/mayflower`), add the original as a remote: @@ -53,7 +57,9 @@ git remote add upstream git@github.com:massgov/mayflower.git If you check your remotes (`git remote -v`), you can now see that you have two "remotes" that your local repo is pointed towards: `origin`, which points to *your* Mayflower fork, and `upstream`, which points to `massgov/mayflower`. -## Creating a branch +## Submitting your work + +### Creating a branch Any new features and non-emergency bugfixes should branch from the `dev` branch. Make sure you're on the `dev` branch and that it's up-to-date with the source repo. @@ -78,7 +84,7 @@ If you were working on ticket DP-1234-create-backto-link, then you would type: git checkout -b DP-1234-create-backto-link ``` -## Working with Pattern Lab +### Working with Pattern Lab Serve Mayflower locally and as you save your changes, it will update automatically: @@ -95,7 +101,7 @@ Serve Mayflower locally and as you save your changes, it will update automatical - If a pattern has js functionality associated with it, the corresponding [ES6 module](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) `.js` file can be found in the `/styleguide/source/assets/js/modules` directory. 1. These assets will automatically recompile and the browser will refresh as you save changes. -### Other notes +#### Other notes * It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. * `Gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. See `/styleguide/tools/gulp/gulp-readme.md`. @@ -103,7 +109,7 @@ Serve Mayflower locally and as you save your changes, it will update automatical **Sections about how + what to contribute coming soon...** -## Committing your work +### Committing your work Make your changes and commit them. Ensure that you only commit the thing you're working on. Make sure that you commit in logical blocks. @@ -112,7 +118,7 @@ Chris Beam explains [How to Write a Git Commit Message](https://chris.beams.io/ We also love the model Git commit message in Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). -## Pushing your branch +### Pushing your branch In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the origin remote (your Mayflower fork). To push a new branch: @@ -123,11 +129,11 @@ git push -u origin DP-1234-create-backto-link This will create the branch on your Mayflower fork. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. -## Deploying your work +### Deploying your work Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) for step by step instructions. -## Creating a Pull Request +### Creating a Pull Request Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. 1. Follow the steps on [Github Help: Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/). @@ -139,7 +145,7 @@ Pull requests (PRs) let you tell others about changes you've pushed to a reposit - @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”) - @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”) -## Review by Maintainers +### Review by Maintainers Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it. From 0a1664a740b10a2c90b047f0c13d1261d07b5bfc Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:10:18 -0400 Subject: [PATCH 069/184] Fix link to CONTRIBUTING.md after move to /.github --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f013bb6184..0353a9127d 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,9 @@ In order to run Mayflower locally, you need to have some things installed and se - See the [Contribute docs](#contribute) for instructions on setting up your fork and repo for *development* and *contribution* purposes. - See the [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for notes on how to deploy the project to a live environment. +## Contribute +Please read [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/.github/CONTRIBUTING.md) for details on the process for submitting pull requests to us. ## Deployment @@ -33,10 +35,6 @@ If you do not see your tag being deployed: * [Pattern Lab 2 (PHP)](http://patternlab.io/docs/index.html) - The pattern framework / static site generator * [Twig](https://twig.sensiolabs.org/) - The templating language -## Contribute - -Please read [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us. - ## Versioning We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/massgov/mayflower/tags). From ad16e9c994a2d6a62a8e465f8d8cc1cb6b260548 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:16:19 -0400 Subject: [PATCH 070/184] Simplify readme install / contribute / deploy sections --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0353a9127d..345e1a2829 100644 --- a/README.md +++ b/README.md @@ -7,18 +7,16 @@ Mayflower is the enterprise design system for the Commonwealth of Massachusetts. In order to run Mayflower locally, you need to have some things installed and set up on your machine. Follow the steps in [Setting up your environment](/docs/setting-up-environment.md). -### Installing +#### Demo Install - Follow the steps in [Demo Install](/docs/demo-install.md) to get a copy of the project up and running on your local machine for *demo* and *testing* purposes. -- See the [Contribute docs](#contribute) for instructions on setting up your fork and repo for *development* and *contribution* purposes. -- See the [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for notes on how to deploy the project to a live environment. ## Contribute -Please read [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/.github/CONTRIBUTING.md) for details on the process for submitting pull requests to us. +Please follow the steps in [Contributing docs](https://github.com/massgov/mayflower/blob/master/.github/CONTRIBUTING.md) to set up your fork and repo for *development* and *contribution* purposes. ## Deployment -See [/docs/deploy.md](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). +Please see [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). ## Mayflower Artifacts Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repository which consists of these assets. From 17c18f36d9663e5c468cb3d57337de81684bdb3f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:23:53 -0400 Subject: [PATCH 071/184] Remove link to personal fork, but keep repo name, in deploy docs --- docs/deploy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/deploy.md b/docs/deploy.md index 15f4bf2790..3398358725 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -21,7 +21,7 @@ Developers and contributors can follow these steps to deploy your branch to your 1. Change directory to the root directory of your local repo (likely `mayflower`). 1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b -t /mayflower` - Where `-b` is the build source (required): your git branch or tag name. - - Where `-t` is the target remote repo (required): likely `/mayflower`. For example, the fork at [github.com/jesconstantine/mayflower](http://github.com/jesconstantine/mayflower) would use `jesconstantine/mayflower`. + - Where `-t` is the target remote repo (required): likely `/mayflower`. - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine/mayflower`. 1. If this is your first deployment, follow the steps below to set up your Mayflower fork with Github Pages. From 8015c8ef938becb23bbc21fc2a3616ca95831b96 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:31:18 -0400 Subject: [PATCH 072/184] Fix mayflower-artifacts url in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 345e1a2829..dfce56e52f 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Please follow the steps in [Contributing docs](https://github.com/massgov/mayflo Please see [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). ## Mayflower Artifacts -Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repository which consists of these assets. +Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. Tagged releases from Mayflower are automatically (via CircleCI) deployed to the Mayflower Artifacts repository. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions and must follow the format: `#.#.#-optionalword-optionalword`. From 8edde43c2bc5dfe4ba76d55f87f5d6ceac7e37cd Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:36:34 -0400 Subject: [PATCH 073/184] Update the deploy success message to use cname if present --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index f64677b58d..b41e1036c2 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -200,8 +200,8 @@ then log "success" "$line"; cleanup # Success message. - if [[ "$buildSrc" == "massgov/mayflower" ]]; then - line="Woo-hoo! Deploy complete! \n You should see the release live at http://mayflower.digital.mass.gov ... Time for release notes! ;)" + if [[ ${cname} != false ]]; then + line="Woo-hoo! Deploy complete! \n You should see the release live at ${cname}!" else line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" fi From e0f72063eca807e49438ff9c683879de90d0069a Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:39:42 -0400 Subject: [PATCH 074/184] Fix cname conditional logic in deploy script. --- scripts/deploy-gh-pages.sh | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index b41e1036c2..0ed3b1dfbf 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -133,7 +133,7 @@ then fi # Make sure cname argument (i.e. mayflower.digital.mass.gov) is passed for production deploys. - if [ ${cname} = false ]; + if [ "${cname}" = false ]; then line="Please include a cname value for production deployments. Execute the script again with a value for [-cname] i.e. 'mayflower.digital.mass.gov'." log "error" "$line"; @@ -182,7 +182,7 @@ git add . git commit -m "$MESSAGE" # Create CNAME if argument passed - if [ ${cname} != false ]; + if [ "${cname}" != false ]; then echo "${cname}" >> CNAME git add . @@ -200,7 +200,8 @@ then log "success" "$line"; cleanup # Success message. - if [[ ${cname} != false ]]; then + if [ "${cname}" != false ]; + then line="Woo-hoo! Deploy complete! \n You should see the release live at ${cname}!" else line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" From 31957c7f80a0d8514a9198622d22b7cf3543ad82 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:49:20 -0400 Subject: [PATCH 075/184] Use [-c] rather tha [-cname] as parameter for gh pages deploy script --- scripts/deploy-gh-pages.sh | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 0ed3b1dfbf..356ec249a9 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -9,9 +9,9 @@ # ./scripts/deploy-gh-pages.sh [-b (git-branch-or-tag)] [-t (remote-repo)] # -b Build source: the git branch or tag to build from (required) # -t Target: the remote repo whose gh-pages branch is being pushed to (required) -# -cname CNAME record: a custom domain to point to Github Pages (required only when deploying to massgov/mayflower: "mayflower.digital.mass.gov") +# -c CNAME record: a custom domain to point to Github Pages (required only when deploying to massgov/mayflower: "mayflower.digital.mass.gov") # -# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -cname mayflower.digital.mass.gov +# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -c mayflower.digital.mass.gov # # Description: # 1. Validate the passed arguments: build source and target repo @@ -64,12 +64,12 @@ buildSrc=false cname=false # Get passed arguments -while getopts :b:t:cname: option +while getopts :b:t:c: option do case "${option}" in b) buildSrc=${OPTARG};; t) targetEnv=${OPTARG};; - cname) cname=${OPTARG};; + c) cname=${OPTARG};; : ) line="Missing argument for parameter [-${OPTARG}]"; log "error" "$line"; exit 1;; From 5c713e590753ee4698e7787195ec5ace67979320 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Thu, 6 Jul 2017 09:52:04 -0400 Subject: [PATCH 076/184] Fix typo in success message for cname --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 356ec249a9..e667a7f112 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -202,7 +202,7 @@ then # Success message. if [ "${cname}" != false ]; then - line="Woo-hoo! Deploy complete! \n You should see the release live at ${cname}!" + line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" else line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" fi From 06aeea930cf0e5ba0de75ea48e3b8cfe917ee0a8 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 8 Jul 2017 08:17:16 -0400 Subject: [PATCH 077/184] Fix deploy script config for url.domain/assetsPath when cname passed --- docs/deploy.md | 6 +-- scripts/deploy-gh-pages.sh | 100 +++++++++++++++++++++++++------------ 2 files changed, 72 insertions(+), 34 deletions(-) diff --git a/docs/deploy.md b/docs/deploy.md index 3398358725..dc762c51b5 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -18,11 +18,11 @@ Developers and contributors can follow these steps to deploy your branch to your 1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. 1. Make sure you have the thing you are deploying (branch or tag) pulled down locally. -1. Change directory to the root directory of your local repo (likely `mayflower`). +1. Change directory to the root directory of your local repo (`mayflower`) if you're not already there. 1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b -t /mayflower` - Where `-b` is the build source (required): your git branch or tag name. - - Where `-t` is the target remote repo (required): likely `/mayflower`. - - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine/mayflower`. + - Where `-t` is the target remote repo owner (required): ``. + - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine`. 1. If this is your first deployment, follow the steps below to set up your Mayflower fork with Github Pages. ### Setting up your Fork with Github Pages diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index e667a7f112..ef1a59e766 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -8,24 +8,26 @@ # Usage: # ./scripts/deploy-gh-pages.sh [-b (git-branch-or-tag)] [-t (remote-repo)] # -b Build source: the git branch or tag to build from (required) -# -t Target: the remote repo whose gh-pages branch is being pushed to (required) -# -c CNAME record: a custom domain to point to Github Pages (required only when deploying to massgov/mayflower: "mayflower.digital.mass.gov") +# -t Target: the target remote repo owner whose gh-pages branch is being pushed (required). +# This will often be the . For prod releases, this is "massgov". +# -c CNAME record: a custom domain to point to Github Pages (required only when deploying to prod: "mayflower.digital.mass.gov") # # Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -c mayflower.digital.mass.gov # # Description: # 1. Validate the passed arguments: build source and target repo # 2. Attempt to checkout passed build source -# 3. Build pattern lab static assets -# 4. Copy static assets (build output: styleguide/public/) into a new temp directory -# 5. Initialize a temp repo in the temp directory -# 6. Commit all of the static asset files (+ create a CNAME file for stage / prod) -# 7. Add the passed target as remote -# 8. Push all build assets to target remote gh-pages branch -# 9. Remove the temp directory +# 3. Write config to support hosting from subdirectory, if necessary +# 4. Build pattern lab static assets +# 5. Copy static assets (build output: styleguide/public/) into a new temp directory +# 6. Initialize a temp repo in the temp directory +# 7. Commit all of the static asset files (+ create a CNAME file for stage / prod) +# 8. Add the passed target as remote +# 9. Push all build assets to target remote gh-pages branch # 10. Get back to mayflower/styleguide directory -# 11. Check out prior branch -# +# 11. Remove the temp directory +# 12. Check out prior branch + # @todo # - use AWS cli to push/rsync to bucket # - build into ci process @@ -33,15 +35,16 @@ # Steps to clean up after script execution # Runs on success and failure. function cleanup { - # Cleanup - echo "Getting back to previous directory..." + # 10. Get back to mayflower/styleguide directory + echo -e "Getting back to previous directory...\n" cd - - echo "Cleaning up temp dir..." + # 11. Remove temp directory + echo -e "Cleaning up tmp dir...\n" rm -rf ~/tmp/mayflower - # Check out the previous branch - echo "Checking out your previous branch..." + # 12. Check out the previous branch + echo -e "Checking out your previous branch...\n" git checkout @{-1} } @@ -79,7 +82,7 @@ do esac done -# Validate build source environment argument exists +# 1. Validate build source environment argument exists if [ "$buildSrc" = false ]; then line="Whoops, we need a git branch or tag name to checkout and build from [-b]." @@ -145,20 +148,52 @@ fi NOW=$(date +"%c") MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" -# checkout the latest tag/release -echo "Checking out the build source: ${buildSrc}" +# 2. Checkout the build source +echo -e "Checking out the build source: ${buildSrc} \n" git checkout ${buildSrc} # Get to styleguide directory (inside of repo root), does not assume repo root is "mayflower" -echo "Changing directory into mayflower repo root/styleguide" +echo -e "Changing directory into mayflower/styleguide\n" cd $(git rev-parse --show-toplevel)/styleguide -# Build pattern to generate prod static assets -echo "Building mayflower static assets..." -gulp build prod +# 3. Set the domain and asset path config +# When there is a cname: url.domain = cname, url.assetsPath = assets +# When there is no cname: url.domain = .github.io, url.assetsPath = mayflower/assets +echo -e "Setting the domain and asset path config...\n" + +# If we're deploying something that doesn't have the url.json.example file, create it first +if [ ! -f ./source/_data/url.json.example ]; + then + urljson='{\n\t"url": {\n\t\t"comment": "Save this file as url.json and enter your domain and the path to the assets folder",\n\t\t"domain": "http://localhost:3000",\n\t\t"assetsPath": "assets"\n\t}\n}' + echo -e ${urljson} > ./source/_data/url.json.example + + # Set flag to undo these changes in the working directory before leaving script. + cleanup=true +fi + +# Create url.json from the .example and set the appropriate domain and assetsPath values +cp ./source/_data/url.json.example ./source/_data/url.json + +# Determine the value of url.domain, url.assetsPath based on whether or not we have a cname argument +domain="https:\/\/${owner}.github.io" +assetsPath="mayflower\/assets\"" + +if [ ! "${cname}" = false ]; +then + domain="http:\/\/${cname}" + assetsPath="assets\"" +fi + +# Set url.domain and url.assetsPath +find ./source/_data -type f -name "url.json" -exec sed -i "" "s/http:\/\/localhost:3000/${domain}/g" {} \; +find ./source/_data -type f -name "url.json" -exec sed -i "" "s/assets\"/${assetsPath}/g" {} \; + +# 4. Build pattern to generate prod static assets +echo -e "Building mayflower static assets...\n" +gulp build # Make temp directory to copy public assets -echo "Making ~/tmp/mayflower directory..." +echo -e "Making ~/tmp/mayflower directory...\n" if [ -d "~/tmp" ]; then mkdir ~/tmp/mayflower @@ -167,18 +202,20 @@ else mkdir ~/tmp/mayflower fi -# Copy built assets in /public into temp directory -echo "Copying PL build output to ~/tmp/mayflower directory..." +# 5. Copy built assets in /public into temp directory +echo -e "Copying PL build output to ~/tmp/mayflower directory...\n" cp -R public ~/tmp/mayflower # Get to temp directory build output -echo "Changing directory to ~/tmp/mayflower/public..." +echo -e "Changing directory to ~/tmp/mayflower/public...\n" cd ~/tmp/mayflower/public -# Initialize temp git repo + push up to gh-pages -echo "Creating temporary repo and committing build to master branch..." +# 6. Initialize temp git repo + push up to gh-pages +echo -e "Creating temporary repo and committing build to master branch...\n" git init git add . + +# 7. Commit the built assets, and CNAME if passed git commit -m "$MESSAGE" # Create CNAME if argument passed @@ -190,10 +227,11 @@ git commit -m "$MESSAGE" echo "Creating CNAME for '${cname}'"; fi -echo "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." +# 8. Add target as remote repo +echo -e "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch...\n" git remote add target ${TARGET_URL} -# Make sure we can push to remote, return success or error based on result. +# 9. Make sure we can push to remote, return success or error based on result. if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] then line="Git push was successful!" From b06e445b2abd8d02e0f221cec4bd005eda190327 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 8 Jul 2017 07:52:39 -0400 Subject: [PATCH 078/184] Improve script logging: hide lengthy status/success, color + tag logs. --- scripts/deploy-gh-pages.sh | 69 ++++++++++++++++++++++++++------------ 1 file changed, 47 insertions(+), 22 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index ef1a59e766..5827616922 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -36,15 +36,21 @@ # Runs on success and failure. function cleanup { # 10. Get back to mayflower/styleguide directory - echo -e "Getting back to previous directory...\n" + line="Getting back to previous directory..." + log "log" "$line"; + cd - # 11. Remove temp directory - echo -e "Cleaning up tmp dir...\n" + line="Cleaning up tmp dir..." + log "log" "$line"; + rm -rf ~/tmp/mayflower # 12. Check out the previous branch - echo -e "Checking out your previous branch...\n" + line="Checking out your previous branch..." + log "log" "$line"; + git checkout @{-1} } @@ -54,10 +60,12 @@ function log { local theLogType=$1 local theMessage=$2 - if [[ "$theLogType" == "success" ]]; then - echo -e "\n\x1B[01;92m"$theMessage"\x1B[0m \n" + if [ "$theLogType" == "success" ]; then + echo -e "\n\x1B[01;92m [success] "${theMessage}"\x1B[0m \n" + elif [ "$theLogType" == "error" ]; then + echo -e "\n\x1B[01;91m [error] "${theMessage}"\x1B[0m \n" >&2 else - echo -e "\n \x1B[01;91m"$theMessage"\x1B[0m \n" >&2 + echo -e "\n\x1B[01;34m [info] "${theMessage}"\x1B[0m \n" fi } @@ -102,11 +110,11 @@ fi git rev-parse ${buildSrc} &>/dev/null if [ "$?" -ne 0 ]; then - line="Hmmm, couldn't find a branch/tag named ${buildSrc} ... check spelling and make sure you've pulled it." + line="Hmmm, couldn't find a branch/tag named ${buildSrc}... check spelling and make sure you've pulled it." log "error" "$line"; exit 1; else - line="Validated git build source: ${buildSrc} ..." + line="Validated git build source: ${buildSrc}..." log "success" "$line"; fi @@ -149,17 +157,22 @@ NOW=$(date +"%c") MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" # 2. Checkout the build source -echo -e "Checking out the build source: ${buildSrc} \n" +line="Checking out the build source: ${buildSrc}" +log "log" "$line"; + git checkout ${buildSrc} # Get to styleguide directory (inside of repo root), does not assume repo root is "mayflower" -echo -e "Changing directory into mayflower/styleguide\n" +line="Changing directory into mayflower/styleguide..." +log "log" "$line"; + cd $(git rev-parse --show-toplevel)/styleguide # 3. Set the domain and asset path config # When there is a cname: url.domain = cname, url.assetsPath = assets # When there is no cname: url.domain = .github.io, url.assetsPath = mayflower/assets -echo -e "Setting the domain and asset path config...\n" +line="Setting the domain and asset path config..." +log "log" "$line"; # If we're deploying something that doesn't have the url.json.example file, create it first if [ ! -f ./source/_data/url.json.example ]; @@ -189,11 +202,14 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s/http:\/\/localho find ./source/_data -type f -name "url.json" -exec sed -i "" "s/assets\"/${assetsPath}/g" {} \; # 4. Build pattern to generate prod static assets -echo -e "Building mayflower static assets...\n" -gulp build +line="Building mayflower static assets..." +log "log" "$line"; +gulp build >/dev/null # Make temp directory to copy public assets -echo -e "Making ~/tmp/mayflower directory...\n" +line="Making ~/tmp/mayflower directory..." +log "log" "$line"; + if [ -d "~/tmp" ]; then mkdir ~/tmp/mayflower @@ -203,20 +219,26 @@ else fi # 5. Copy built assets in /public into temp directory -echo -e "Copying PL build output to ~/tmp/mayflower directory...\n" -cp -R public ~/tmp/mayflower +line="Copying PL build output to ~/tmp/mayflower directory..." +log "log" "$line"; + +cp -R public ~/tmp/mayflower >/dev/null # Get to temp directory build output -echo -e "Changing directory to ~/tmp/mayflower/public...\n" +line="Changing directory to ~/tmp/mayflower/public..." +log "log" "$line"; + cd ~/tmp/mayflower/public # 6. Initialize temp git repo + push up to gh-pages -echo -e "Creating temporary repo and committing build to master branch...\n" +line= "Creating temporary repo and committing build to master branch..." +log "log" "$line"; + git init -git add . +git add . >/dev/null # 7. Commit the built assets, and CNAME if passed -git commit -m "$MESSAGE" +git commit -m "$MESSAGE" >/dev/null # Create CNAME if argument passed if [ "${cname}" != false ]; @@ -224,11 +246,14 @@ git commit -m "$MESSAGE" echo "${cname}" >> CNAME git add . git commit -m "Create CNAME for '${cname}'" - echo "Creating CNAME for '${cname}'"; + line="Creating CNAME for '${cname}'"; + log "log" "$line"; fi # 8. Add target as remote repo -echo -e "Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch...\n" +line="Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." +log "log" "$line"; + git remote add target ${TARGET_URL} # 9. Make sure we can push to remote, return success or error based on result. From 6f5ab99f6ed7925ec2a3023e719ec587f6590fc1 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 8 Jul 2017 08:23:38 -0400 Subject: [PATCH 079/184] Fix typos. --- scripts/deploy-gh-pages.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 5827616922..6c5ab0ef15 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -219,7 +219,7 @@ else fi # 5. Copy built assets in /public into temp directory -line="Copying PL build output to ~/tmp/mayflower directory..." +line="Copying Pattern Lab build output to ~/tmp/mayflower directory..." log "log" "$line"; cp -R public ~/tmp/mayflower >/dev/null @@ -231,7 +231,7 @@ log "log" "$line"; cd ~/tmp/mayflower/public # 6. Initialize temp git repo + push up to gh-pages -line= "Creating temporary repo and committing build to master branch..." +line="Creating temporary repo and committing build to master branch..." log "log" "$line"; git init From e6c68edc5859b30b311857525bb8a5f7b406b47d Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 8 Jul 2017 08:30:20 -0400 Subject: [PATCH 080/184] Fix typo in docs for [-t] argument. --- docs/deploy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/deploy.md b/docs/deploy.md index dc762c51b5..f0c3b2b655 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -19,7 +19,7 @@ Developers and contributors can follow these steps to deploy your branch to your 1. Make sure your local repository is in a clean working state: `git status`. If it's not, you can `git commit` or [stash](https://git-scm.com/book/en/v1/Git-Tools-Stashing) your local changes. 1. Make sure you have the thing you are deploying (branch or tag) pulled down locally. 1. Change directory to the root directory of your local repo (`mayflower`) if you're not already there. -1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b -t /mayflower` +1. Execute the deploy script by running `./scripts/deploy-gh-pages.sh -b -t ` - Where `-b` is the build source (required): your git branch or tag name. - Where `-t` is the target remote repo owner (required): ``. - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine`. From 031b2bcb578b231e27b0acce98d03501c041e047 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Sat, 8 Jul 2017 08:30:38 -0400 Subject: [PATCH 081/184] Move log prior to command for creating cname in deploy script. --- scripts/deploy-gh-pages.sh | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 6c5ab0ef15..f1399d2fc3 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -243,11 +243,12 @@ git commit -m "$MESSAGE" >/dev/null # Create CNAME if argument passed if [ "${cname}" != false ]; then + line="Creating CNAME for '${cname}'"; + log "log" "$line"; + echo "${cname}" >> CNAME git add . git commit -m "Create CNAME for '${cname}'" - line="Creating CNAME for '${cname}'"; - log "log" "$line"; fi # 8. Add target as remote repo From cfd50878eb105d2f51c966e162febf0dacd0cfb0 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 06:58:47 -0400 Subject: [PATCH 082/184] Avoid having to escape / in deploy script > assetsPath var Use ! as delimeter, see: https://coderwall.com/p/khdkuw/delimiters-in-sed-substitution --- scripts/deploy-gh-pages.sh | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index f1399d2fc3..369e67594b 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -188,18 +188,18 @@ fi cp ./source/_data/url.json.example ./source/_data/url.json # Determine the value of url.domain, url.assetsPath based on whether or not we have a cname argument -domain="https:\/\/${owner}.github.io" -assetsPath="mayflower\/assets\"" +domain="https://${owner}.github.io" +assetsPath="mayflower/assets\"" if [ ! "${cname}" = false ]; then - domain="http:\/\/${cname}" assetsPath="assets\"" + domain="http://${cname}" fi # Set url.domain and url.assetsPath -find ./source/_data -type f -name "url.json" -exec sed -i "" "s/http:\/\/localhost:3000/${domain}/g" {} \; -find ./source/_data -type f -name "url.json" -exec sed -i "" "s/assets\"/${assetsPath}/g" {} \; +find ./source/_data -type f -name "url.json" -exec sed -i "" "s!http://localhost:3000!${domain}!g" {} \; +find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}!g" {} \; # 4. Build pattern to generate prod static assets line="Building mayflower static assets..." From f0db75064dbb4f21abb7dac4f8b3e9227a48be24 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 06:59:38 -0400 Subject: [PATCH 083/184] Allow assetsPath to be passed with cname flag --- scripts/deploy-gh-pages.sh | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 369e67594b..77b6216873 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -11,6 +11,7 @@ # -t Target: the target remote repo owner whose gh-pages branch is being pushed (required). # This will often be the . For prod releases, this is "massgov". # -c CNAME record: a custom domain to point to Github Pages (required only when deploying to prod: "mayflower.digital.mass.gov") +# -a Assets path: the root relative path to the assets/ directory i.e. 'mayflower/assets' (only required when passing a cname [-c] for an environment which will not serve Mayflower from the root directory) # # Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -c mayflower.digital.mass.gov # @@ -73,11 +74,13 @@ function log { targetEnv=false buildSrc=false cname=false +assetsPath=false # Get passed arguments while getopts :b:t:c: option do case "${option}" in + a) assetsPath=${OPTARG};; b) buildSrc=${OPTARG};; t) targetEnv=${OPTARG};; c) cname=${OPTARG};; @@ -193,8 +196,13 @@ assetsPath="mayflower/assets\"" if [ ! "${cname}" = false ]; then - assetsPath="assets\"" domain="http://${cname}" + if [ ! "${assetsPath}" = false ]; + then + assetsPath="${assetsPath}\"" + else + assetsPath="assets\"" + fi fi # Set url.domain and url.assetsPath From f3e6dd70d2c73253d35ef458f5a95d508ae2cef5 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 07:05:01 -0400 Subject: [PATCH 084/184] Accept [-a] argument in deploy script --- scripts/deploy-gh-pages.sh | 156 ++++++++++++++++++------------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 77b6216873..729cce0071 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -77,7 +77,7 @@ cname=false assetsPath=false # Get passed arguments -while getopts :b:t:c: option +while getopts :b:t:c:a: option do case "${option}" in a) assetsPath=${OPTARG};; @@ -210,80 +210,80 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s!http://localhost find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}!g" {} \; # 4. Build pattern to generate prod static assets -line="Building mayflower static assets..." -log "log" "$line"; -gulp build >/dev/null - -# Make temp directory to copy public assets -line="Making ~/tmp/mayflower directory..." -log "log" "$line"; - -if [ -d "~/tmp" ]; -then - mkdir ~/tmp/mayflower -else - mkdir ~/tmp - mkdir ~/tmp/mayflower -fi - -# 5. Copy built assets in /public into temp directory -line="Copying Pattern Lab build output to ~/tmp/mayflower directory..." -log "log" "$line"; - -cp -R public ~/tmp/mayflower >/dev/null - -# Get to temp directory build output -line="Changing directory to ~/tmp/mayflower/public..." -log "log" "$line"; - -cd ~/tmp/mayflower/public - -# 6. Initialize temp git repo + push up to gh-pages -line="Creating temporary repo and committing build to master branch..." -log "log" "$line"; - -git init -git add . >/dev/null - -# 7. Commit the built assets, and CNAME if passed -git commit -m "$MESSAGE" >/dev/null - -# Create CNAME if argument passed - if [ "${cname}" != false ]; - then - line="Creating CNAME for '${cname}'"; - log "log" "$line"; - - echo "${cname}" >> CNAME - git add . - git commit -m "Create CNAME for '${cname}'" -fi - -# 8. Add target as remote repo -line="Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." -log "log" "$line"; - -git remote add target ${TARGET_URL} - -# 9. Make sure we can push to remote, return success or error based on result. -if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] -then - line="Git push was successful!" - log "success" "$line"; - cleanup - # Success message. - if [ "${cname}" != false ]; - then - line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" - else - line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" - fi - log "success" "$line"; -else - line="Hmmm, looks like we couldn't push. Check your remote repo permissions." - log "error" "$line"; - cleanup - line="Bummer! Deploy unsuccessful. Check your spellings for git branches + remotes. And check your permissions. Then try again!" - log "error" "$line"; - exit 1; -fi +#line="Building mayflower static assets..." +#log "log" "$line"; +#gulp build >/dev/null +# +## Make temp directory to copy public assets +#line="Making ~/tmp/mayflower directory..." +#log "log" "$line"; +# +#if [ -d "~/tmp" ]; +#then +# mkdir ~/tmp/mayflower +#else +# mkdir ~/tmp +# mkdir ~/tmp/mayflower +#fi +# +## 5. Copy built assets in /public into temp directory +#line="Copying Pattern Lab build output to ~/tmp/mayflower directory..." +#log "log" "$line"; +# +#cp -R public ~/tmp/mayflower >/dev/null +# +## Get to temp directory build output +#line="Changing directory to ~/tmp/mayflower/public..." +#log "log" "$line"; +# +#cd ~/tmp/mayflower/public +# +## 6. Initialize temp git repo + push up to gh-pages +#line="Creating temporary repo and committing build to master branch..." +#log "log" "$line"; +# +#git init +#git add . >/dev/null +# +## 7. Commit the built assets, and CNAME if passed +#git commit -m "$MESSAGE" >/dev/null +# +## Create CNAME if argument passed +# if [ "${cname}" != false ]; +# then +# line="Creating CNAME for '${cname}'"; +# log "log" "$line"; +# +# echo "${cname}" >> CNAME +# git add . +# git commit -m "Create CNAME for '${cname}'" +#fi +# +## 8. Add target as remote repo +#line="Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." +#log "log" "$line"; +# +#git remote add target ${TARGET_URL} +# +## 9. Make sure we can push to remote, return success or error based on result. +#if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] +#then +# line="Git push was successful!" +# log "success" "$line"; +# cleanup +# # Success message. +# if [ "${cname}" != false ]; +# then +# line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" +# else +# line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" +# fi +# log "success" "$line"; +#else +# line="Hmmm, looks like we couldn't push. Check your remote repo permissions." +# log "error" "$line"; +# cleanup +# line="Bummer! Deploy unsuccessful. Check your spellings for git branches + remotes. And check your permissions. Then try again!" +# log "error" "$line"; +# exit 1; +#fi From 1011eb314c399fe52c2b34954b03ca6b237ee632 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 07:12:56 -0400 Subject: [PATCH 085/184] Fix deploy script [-t] flag to be target remote repo *owner* This seems to have reverted to a prior state somehow. --- scripts/deploy-gh-pages.sh | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 729cce0071..c397b0fadf 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -8,7 +8,7 @@ # Usage: # ./scripts/deploy-gh-pages.sh [-b (git-branch-or-tag)] [-t (remote-repo)] # -b Build source: the git branch or tag to build from (required) -# -t Target: the target remote repo owner whose gh-pages branch is being pushed (required). +# -t Target repo owner: the target remote repo owner whose gh-pages branch is being pushed (required). # This will often be the . For prod releases, this is "massgov". # -c CNAME record: a custom domain to point to Github Pages (required only when deploying to prod: "mayflower.digital.mass.gov") # -a Assets path: the root relative path to the assets/ directory i.e. 'mayflower/assets' (only required when passing a cname [-c] for an environment which will not serve Mayflower from the root directory) @@ -82,7 +82,8 @@ do case "${option}" in a) assetsPath=${OPTARG};; b) buildSrc=${OPTARG};; - t) targetEnv=${OPTARG};; + t) owner=${OPTARG} + targetEnv="${owner}/mayflower";; c) cname=${OPTARG};; : ) line="Missing argument for parameter [-${OPTARG}]"; log "error" "$line"; @@ -126,7 +127,7 @@ TARGET_URL="git@github.com:"${targetEnv}".git" git ls-remote ${TARGET_URL} &>/dev/null if [ "$?" -ne 0 ]; then - line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like 'yourGithubUsername/mayflower'." + line="Unable to reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like '/mayflower'." log "error" "$line"; exit 1; else @@ -276,7 +277,7 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${asset # then # line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" # else -# line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://.github.io/mayflower" +# line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://${owner}.github.io/mayflower" # fi # log "success" "$line"; #else From 34e5e46810aa032aaddd6ebc26f692cfb1405873 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 07:17:38 -0400 Subject: [PATCH 086/184] Remove extra " from assetsPath in url.json --- scripts/deploy-gh-pages.sh | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index c397b0fadf..f9f8a80487 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -193,22 +193,22 @@ cp ./source/_data/url.json.example ./source/_data/url.json # Determine the value of url.domain, url.assetsPath based on whether or not we have a cname argument domain="https://${owner}.github.io" -assetsPath="mayflower/assets\"" +assetsPath="mayflower/assets" if [ ! "${cname}" = false ]; then domain="http://${cname}" if [ ! "${assetsPath}" = false ]; then - assetsPath="${assetsPath}\"" + assetsPath="${assetsPath}" else - assetsPath="assets\"" + assetsPath="assets" fi fi # Set url.domain and url.assetsPath find ./source/_data -type f -name "url.json" -exec sed -i "" "s!http://localhost:3000!${domain}!g" {} \; -find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}!g" {} \; +find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}\"!g" {} \; # 4. Build pattern to generate prod static assets #line="Building mayflower static assets..." From 58beead8b04543759a3395d9cf86a6ec3deb69a7 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 14:31:23 -0400 Subject: [PATCH 087/184] Update [-c] validation log to reflect [-c] vs [-cname] --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index f9f8a80487..37fef0ed31 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -150,7 +150,7 @@ then # Make sure cname argument (i.e. mayflower.digital.mass.gov) is passed for production deploys. if [ "${cname}" = false ]; then - line="Please include a cname value for production deployments. Execute the script again with a value for [-cname] i.e. 'mayflower.digital.mass.gov'." + line="Please include a cname value for production deployments. Execute the script again with a value for [-c] i.e. 'mayflower.digital.mass.gov'." log "error" "$line"; exit 1; fi From 72ade221aab1c1e171b4945bb72386a5a57670e6 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 11 Jul 2017 14:38:16 -0400 Subject: [PATCH 088/184] Add developer deploy docs note about cname and assetPaths flags. --- docs/deploy.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/deploy.md b/docs/deploy.md index f0c3b2b655..4e2f2c9662 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -23,6 +23,7 @@ Developers and contributors can follow these steps to deploy your branch to your - Where `-b` is the build source (required): your git branch or tag name. - Where `-t` is the target remote repo owner (required): ``. - For example, to deploy the branch `DP-1234-my-awesome-thing` to the mayflower forked repo `jesconstantine/mayflower`, use `./scripts/deploy-gh-pages.sh -b DP-1234-my-awesome-thing -t jesconstantine`. + - **NOTE:** if you have a custom domain pointing to your `.github.io`, you can pass `-c ` and `-a ` where `-c` is your cname (domain) and `-t` is the root relative path to the mayflower `assests/` directory (defaults to `mayflower/assets` for `.github.io/mayflower` 1. If this is your first deployment, follow the steps below to set up your Mayflower fork with Github Pages. ### Setting up your Fork with Github Pages From 355c57243f820f4137d48184e2dc31129f75367c Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Wed, 12 Jul 2017 16:06:17 -0400 Subject: [PATCH 089/184] Uncomment script. So. It. Does. Things. (silly) --- scripts/deploy-gh-pages.sh | 154 ++++++++++++++++++------------------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 37fef0ed31..5b829102a1 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -211,80 +211,80 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s!http://localhost find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}\"!g" {} \; # 4. Build pattern to generate prod static assets -#line="Building mayflower static assets..." -#log "log" "$line"; -#gulp build >/dev/null -# -## Make temp directory to copy public assets -#line="Making ~/tmp/mayflower directory..." -#log "log" "$line"; -# -#if [ -d "~/tmp" ]; -#then -# mkdir ~/tmp/mayflower -#else -# mkdir ~/tmp -# mkdir ~/tmp/mayflower -#fi -# -## 5. Copy built assets in /public into temp directory -#line="Copying Pattern Lab build output to ~/tmp/mayflower directory..." -#log "log" "$line"; -# -#cp -R public ~/tmp/mayflower >/dev/null -# -## Get to temp directory build output -#line="Changing directory to ~/tmp/mayflower/public..." -#log "log" "$line"; -# -#cd ~/tmp/mayflower/public -# -## 6. Initialize temp git repo + push up to gh-pages -#line="Creating temporary repo and committing build to master branch..." -#log "log" "$line"; -# -#git init -#git add . >/dev/null -# -## 7. Commit the built assets, and CNAME if passed -#git commit -m "$MESSAGE" >/dev/null -# -## Create CNAME if argument passed -# if [ "${cname}" != false ]; -# then -# line="Creating CNAME for '${cname}'"; -# log "log" "$line"; -# -# echo "${cname}" >> CNAME -# git add . -# git commit -m "Create CNAME for '${cname}'" -#fi -# -## 8. Add target as remote repo -#line="Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." -#log "log" "$line"; -# -#git remote add target ${TARGET_URL} -# -## 9. Make sure we can push to remote, return success or error based on result. -#if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] -#then -# line="Git push was successful!" -# log "success" "$line"; -# cleanup -# # Success message. -# if [ "${cname}" != false ]; -# then -# line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" -# else -# line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://${owner}.github.io/mayflower" -# fi -# log "success" "$line"; -#else -# line="Hmmm, looks like we couldn't push. Check your remote repo permissions." -# log "error" "$line"; -# cleanup -# line="Bummer! Deploy unsuccessful. Check your spellings for git branches + remotes. And check your permissions. Then try again!" -# log "error" "$line"; -# exit 1; -#fi +line="Building mayflower static assets..." +log "log" "$line"; +gulp build >/dev/null + +# Make temp directory to copy public assets +line="Making ~/tmp/mayflower directory..." +log "log" "$line"; + +if [ -d "~/tmp" ]; +then + mkdir ~/tmp/mayflower +else + mkdir ~/tmp + mkdir ~/tmp/mayflower +fi + +# 5. Copy built assets in /public into temp directory +line="Copying Pattern Lab build output to ~/tmp/mayflower directory..." +log "log" "$line"; + +cp -R public ~/tmp/mayflower >/dev/null + +# Get to temp directory build output +line="Changing directory to ~/tmp/mayflower/public..." +log "log" "$line"; + +cd ~/tmp/mayflower/public + +# 6. Initialize temp git repo + push up to gh-pages +line="Creating temporary repo and committing build to master branch..." +log "log" "$line"; + +git init +git add . >/dev/null + +# 7. Commit the built assets, and CNAME if passed +git commit -m "$MESSAGE" >/dev/null + +# Create CNAME if argument passed + if [ "${cname}" != false ]; + then + line="Creating CNAME for '${cname}'"; + log "log" "$line"; + + echo "${cname}" >> CNAME + git add . + git commit -m "Create CNAME for '${cname}'" +fi + +# 8. Add target as remote repo +line="Adding ${TARGET_URL} as a remote and force pushing build to gh-pages branch..." +log "log" "$line"; + +git remote add target ${TARGET_URL} + +# 9. Make sure we can push to remote, return success or error based on result. +if [[ "$(git push target master:refs/heads/gh-pages --force --porcelain)" == *"Done"* ]] +then + line="Git push was successful!" + log "success" "$line"; + cleanup + # Success message. + if [ "${cname}" != false ]; + then + line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" + else + line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://${owner}.github.io/mayflower" + fi + log "success" "$line"; +else + line="Hmmm, looks like we couldn't push. Check your remote repo permissions." + log "error" "$line"; + cleanup + line="Bummer! Deploy unsuccessful. Check your spellings for git branches + remotes. And check your permissions. Then try again!" + log "error" "$line"; + exit 1; +fi From cef2d8b478e42d8e18d37ca39184d8848f42000e Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Tue, 18 Jul 2017 07:29:15 -0400 Subject: [PATCH 090/184] Link to mayflower artifacts docs from readme (vs duplicating content) --- README.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/README.md b/README.md index dfce56e52f..f6b20109c0 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,7 @@ Please follow the steps in [Contributing docs](https://github.com/massgov/mayflo Please see [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). ## Mayflower Artifacts -Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. - -Tagged releases from Mayflower are automatically (via CircleCI) deployed to the Mayflower Artifacts repository. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions and must follow the format: `#.#.#-optionalword-optionalword`. - -If you do not see your tag being deployed: -1. Make sure your tag name is unique. -1. Test your tag name with this [regex test](https://regex101.com/r/UJGppF/2). -1. Check CircleCI builds for Mayflower project to see if there are any errors. +Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. Learn more about Mayflower Artifacts in the [massgov/mass docs](https://github.com/massgov/mass/blob/DP-4049-document-mayflower-drupal-relationship/docs/Mayflower.md#mayflower-artifacts). ## Built With From 348c13a03bb59c4603390b6db793498773762c56 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 10:18:07 -0400 Subject: [PATCH 091/184] DP-4048 - Annotations - updating to look for JS classes used. --- styleguide/source/_annotations/annotations.js | 133 +++++++++++++----- 1 file changed, 101 insertions(+), 32 deletions(-) diff --git a/styleguide/source/_annotations/annotations.js b/styleguide/source/_annotations/annotations.js index 9b81a453a1..162a5a7c6e 100644 --- a/styleguide/source/_annotations/annotations.js +++ b/styleguide/source/_annotations/annotations.js @@ -1,34 +1,103 @@ { - "comments" : [ - { - "el": "header[role=banner]", - "title" : "Masthead", - "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests." - }, - { - "el": ".logo", - "title" : "Logo", - "comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.

Further reading: Optimizing Web Experiences for High Resolution Screens

" - }, - { - "el": "#nav", - "title" : "Navigation", - "comment": "

Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. Bagcheck and Contents Magazine add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, ESPN's mobile navigation overlays the main content of the page.

The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.

See also: Responsive Navigation Patterns

" - }, - { - "el": ".search-form", - "title" : "Search", - "comment": "

Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the Burton and Yelp mobile sites for great examples of experiences that prioritize search.

We're also using the HTML5 search input type, which is great for mobile devices that can bring up the appropriate virtual keyboard for many smartphones. And like the main header navigation, we're hiding the search form on small screens to save space. Clicking the search anchor toggles the form.

" - }, - { - "el": ".article-header h1", - "title" : "Article Header", - "comment": "

The article header should be no more than 140 characters.

" - }, - { - "el": ".block-hero", - "title" : "Hero", - "comment": "

The hero area highlights one major story using a large image and a captivating headline.

" - } - ] + "comments" : [{ + "el": "#main-content .js-accordion", + "title" : "Accordion", + "comment": " - assets/js/modules/accordion.js" + },{ + "el": "#main-content .js-back2top", + "title" : "Back to Top", + "comment": " - assets/js/modules/back2top.js" + },{ + "el": "#main-content .js-clickable", + "title" : "Clickable Item", + "comment": " - assets/js/modules/clickable.js" + },{ + "el": "#main-content .js-dropdown", + "title" : "Dropdown Menu", + "comment": " - assets/js/modules/dropdown.js" + },{ + "el": "#main-content .js-emergency-alerts", + "title" : "Emergency Alerts", + "comment": " - assets/js/modules/emergencyAlerts.js" + },{ + "el": "#main-content .js-footnote", + "title" : "Footnotes", + "comment": " - assets/js/modules/footnote.js" + },{ + "el": "#main-content textarea[maxlength]", + "title" : "Text Area with maxlenth", + "comment": " - assets/js/modules/formInputs.js" + },{ + "el": "#main-content input[type='number']", + "title" : "Input of type number", + "comment": " - assets/js/modules/formInputs.js" + },{ + "el": "#main-content .js-input-number", + "title" : "Input of type number", + "comment": " - assets/js/modules/formInputs.js" + },{ + "el": "#main-content form", + "title" : "Form with basic validation", + "comment": " - assets/js/modules/formValidation.js" + },{ + "el": "#main-content .js-google-map", + "title" : "Google Map", + "comment": " - assets/js/modules/googleMap.js" + },{ + "el": "#main-content .js-header-alert", + "title" : "Header Alerts", + "comment": " - assets/js/modules/hideAlert.js" + },{ + "el": "#main-content .js-keyword-search", + "title" : "Keyword Search", + "comment": " - assets/js/modules/keywordSearch.js" + },{ + "el": "#main-content .js-location-filters", + "title" : "Location Filters", + "comment": " - assets/js/modules/locationFilters.js" + },{ + "el": "#main-content .js-location-listing", + "title" : "Location Listing", + "comment": " - assets/js/modules/locationListing.js" + },{ + "el": "#main-content .js-main-nav", + "title" : "Main Navigation", + "comment": " - assets/js/modules/mainNav.js" + },{ + "el": "#main-content .js-header-menu-button", + "title" : "Mobile Navigation", + "comment": " - assets/js/modules/mobileNav.js" + },{ + "el": "#main-content .js-org-selector", + "title" : "Organization Selector", + "comment": " - assets/js/modules/orgSelector.js" + },{ + "el": "#main-content .js-pagination", + "title" : "Pagination", + "comment": " - assets/js/modules/pagination.js" + },{ + "el": "#main-content .js-input-date", + "title" : "Date Picker", + "comment": " - assets/js/modules/pickaday.js" + },{ + "el": "#main-content .js-ma-responsive-video", + "title" : "Responsive Video", + "comment": " - assets/js/modules/responsiveVideo.js" + },{ + "el": "#main-content .js-results-heading", + "title" : "Results Heading", + "comment": " - assets/js/modules/resultsHeading.js" + },{ + "el": "#main-content .js-ma-rich-text table", + "title" : "Rich Text Table", + "comment": " - assets/js/modules/richText.js" + },{ + "el": "#main-content .js-scroll-anchors", + "title" : "Scrolling Navigation", + "comment": " - assets/js/modules/scrollAnchors.js" + },{ + "el": "#main-content .js-util-nav", + "title" : "Utility Navigation", + "comment": " - assets/js/modules/utilNav.js" + }] } From 4c7c21bc90d4eec1a39909481a41270fcc8c0126 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 10:19:25 -0400 Subject: [PATCH 092/184] DP-4048 - Annotations - The extra html added breaks the styles --- styleguide/source/_annotations/annotations.js | 102 +----------------- 1 file changed, 1 insertion(+), 101 deletions(-) diff --git a/styleguide/source/_annotations/annotations.js b/styleguide/source/_annotations/annotations.js index 162a5a7c6e..d952e7eac5 100644 --- a/styleguide/source/_annotations/annotations.js +++ b/styleguide/source/_annotations/annotations.js @@ -1,103 +1,3 @@ { - "comments" : [{ - "el": "#main-content .js-accordion", - "title" : "Accordion", - "comment": " - assets/js/modules/accordion.js" - },{ - "el": "#main-content .js-back2top", - "title" : "Back to Top", - "comment": " - assets/js/modules/back2top.js" - },{ - "el": "#main-content .js-clickable", - "title" : "Clickable Item", - "comment": " - assets/js/modules/clickable.js" - },{ - "el": "#main-content .js-dropdown", - "title" : "Dropdown Menu", - "comment": " - assets/js/modules/dropdown.js" - },{ - "el": "#main-content .js-emergency-alerts", - "title" : "Emergency Alerts", - "comment": " - assets/js/modules/emergencyAlerts.js" - },{ - "el": "#main-content .js-footnote", - "title" : "Footnotes", - "comment": " - assets/js/modules/footnote.js" - },{ - "el": "#main-content textarea[maxlength]", - "title" : "Text Area with maxlenth", - "comment": " - assets/js/modules/formInputs.js" - },{ - "el": "#main-content input[type='number']", - "title" : "Input of type number", - "comment": " - assets/js/modules/formInputs.js" - },{ - "el": "#main-content .js-input-number", - "title" : "Input of type number", - "comment": " - assets/js/modules/formInputs.js" - },{ - "el": "#main-content form", - "title" : "Form with basic validation", - "comment": " - assets/js/modules/formValidation.js" - },{ - "el": "#main-content .js-google-map", - "title" : "Google Map", - "comment": " - assets/js/modules/googleMap.js" - },{ - "el": "#main-content .js-header-alert", - "title" : "Header Alerts", - "comment": " - assets/js/modules/hideAlert.js" - },{ - "el": "#main-content .js-keyword-search", - "title" : "Keyword Search", - "comment": " - assets/js/modules/keywordSearch.js" - },{ - "el": "#main-content .js-location-filters", - "title" : "Location Filters", - "comment": " - assets/js/modules/locationFilters.js" - },{ - "el": "#main-content .js-location-listing", - "title" : "Location Listing", - "comment": " - assets/js/modules/locationListing.js" - },{ - "el": "#main-content .js-main-nav", - "title" : "Main Navigation", - "comment": " - assets/js/modules/mainNav.js" - },{ - "el": "#main-content .js-header-menu-button", - "title" : "Mobile Navigation", - "comment": " - assets/js/modules/mobileNav.js" - },{ - "el": "#main-content .js-org-selector", - "title" : "Organization Selector", - "comment": " - assets/js/modules/orgSelector.js" - },{ - "el": "#main-content .js-pagination", - "title" : "Pagination", - "comment": " - assets/js/modules/pagination.js" - },{ - "el": "#main-content .js-input-date", - "title" : "Date Picker", - "comment": " - assets/js/modules/pickaday.js" - },{ - "el": "#main-content .js-ma-responsive-video", - "title" : "Responsive Video", - "comment": " - assets/js/modules/responsiveVideo.js" - },{ - "el": "#main-content .js-results-heading", - "title" : "Results Heading", - "comment": " - assets/js/modules/resultsHeading.js" - },{ - "el": "#main-content .js-ma-rich-text table", - "title" : "Rich Text Table", - "comment": " - assets/js/modules/richText.js" - },{ - "el": "#main-content .js-scroll-anchors", - "title" : "Scrolling Navigation", - "comment": " - assets/js/modules/scrollAnchors.js" - },{ - "el": "#main-content .js-util-nav", - "title" : "Utility Navigation", - "comment": " - assets/js/modules/utilNav.js" - }] + "comments" : [] } From 593d82ba32b3451b805be4106e763c14477c2b63 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 10:19:59 -0400 Subject: [PATCH 093/184] Dp-4048 - Extra Js - removing unused JS files --- styleguide/source/assets/js/index.js | 2 -- .../assets/js/modules/bannerCarousel.js | 17 ---------------- .../source/assets/js/modules/mainNavPilot.js | 20 ------------------- 3 files changed, 39 deletions(-) delete mode 100644 styleguide/source/assets/js/modules/bannerCarousel.js delete mode 100644 styleguide/source/assets/js/modules/mainNavPilot.js diff --git a/styleguide/source/assets/js/index.js b/styleguide/source/assets/js/index.js index 6f734efa8d..5c5c7c3b66 100644 --- a/styleguide/source/assets/js/index.js +++ b/styleguide/source/assets/js/index.js @@ -2,7 +2,6 @@ import "./helpers/jQueryExtend.js"; import accordions from "./modules/accordions.js"; import googleMap from "./modules/googleMap.js"; import back2top from "./modules/back2top.js"; -import bannerCarousel from "./modules/bannerCarousel.js"; import clickable from "./modules/clickable.js"; import dropdown from "./modules/dropdown.js"; import emergencyAlerts from "./modules/emergencyAlerts.js"; @@ -13,7 +12,6 @@ import keywordSearch from "./modules/keywordSearch.js"; import locationFilters from "./modules/locationFilters.js"; import locationListing from "./modules/locationListing.js"; import mainNav from "./modules/mainNav.js"; -import mainNavPilot from "./modules/mainNavPilot.js"; import mobileNav from "./modules/mobileNav.js"; import orgSelector from "./modules/orgSelector.js"; import pagination from "./modules/pagination.js"; diff --git a/styleguide/source/assets/js/modules/bannerCarousel.js b/styleguide/source/assets/js/modules/bannerCarousel.js deleted file mode 100644 index 8efd6a8d9e..0000000000 --- a/styleguide/source/assets/js/modules/bannerCarousel.js +++ /dev/null @@ -1,17 +0,0 @@ -export default function (window,document,$,undefined) { - - $('.js-banner-carousel').each(function(){ - let $el = $(this); - - if($el.children().length <= 1) { - return; - } - - let slider = $el.slick({ - dots: true, - prevArrow: '', - nextArrow: '' - }); - }); - -}(window,document,jQuery); \ No newline at end of file diff --git a/styleguide/source/assets/js/modules/mainNavPilot.js b/styleguide/source/assets/js/modules/mainNavPilot.js deleted file mode 100644 index a5d84e5026..0000000000 --- a/styleguide/source/assets/js/modules/mainNavPilot.js +++ /dev/null @@ -1,20 +0,0 @@ -export default function (window,document,$,undefined) { - - $('.js-main-nav').each(function() { - let $parent = $(this), - $mainNavToggle = $parent.find('.js-main-nav-toggle'); - - // make root top-level links inert for pilot - $mainNavToggle.children('a').on('click', function(e) { - e.preventDefault(); - }); - - // Ensure top-level links that are potential anchor links close the sidebar on mobile - $parent.find('.js-main-nav-top-link').find('a').on('click', function() { - $('.js-header-menu-button').trigger('click'); - }); - - }); - -}(window,document,jQuery); - From 842c6b8f698feb26233f0874eee2b473a8f5e338 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 10:22:13 -0400 Subject: [PATCH 094/184] DP-4048 - updating Styling of Pattern Info panel --- .../public/styleguide/css/styleguide.custom.css | 12 ++++++++++++ .../source/assets/scss/pattern-scaffolding.scss | 10 ---------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/styleguide/public/styleguide/css/styleguide.custom.css b/styleguide/public/styleguide/css/styleguide.custom.css index e44b8fa90b..381d798256 100644 --- a/styleguide/public/styleguide/css/styleguide.custom.css +++ b/styleguide/public/styleguide/css/styleguide.custom.css @@ -89,3 +89,15 @@ border-top: 1px solid #ccc; } +.sg-tabs-panel code[class*=language-], +.sg-tabs-panel pre[class*=language-] { + font-size: 16px; +} + +.sg-pattern-desc { + font-size: 16px; +} + +.sg-pattern-desc hr + h2 { + display: none; +} diff --git a/styleguide/source/assets/scss/pattern-scaffolding.scss b/styleguide/source/assets/scss/pattern-scaffolding.scss index 8b6b03e8c1..a5e712c1f7 100644 --- a/styleguide/source/assets/scss/pattern-scaffolding.scss +++ b/styleguide/source/assets/scss/pattern-scaffolding.scss @@ -73,13 +73,3 @@ display: block; width: 100%; } - -.pl__styleguide { - - & > .ma__helpful-links, - & > .ma__rich-text, - & > .ma__action-map .ma__action-map__header { - @include ma-container; - } -} - From b29c177a5010de3ef5e52fb7e6d283aa28748a82 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 13:54:11 -0400 Subject: [PATCH 095/184] DP-4048 - Contact List - Documentation --- .../contact-list-without-accordion.md | 6 +++ .../03-organisms/by-author/contact-list.md | 38 +++++++++++++++++++ ...on => contact-list~without-accordion.json} | 0 3 files changed, 44 insertions(+) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/contact-list.md rename styleguide/source/_patterns/03-organisms/by-author/{contact-list~single-item.json => contact-list~without-accordion.json} (100%) diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md new file mode 100644 index 0000000000..879269cf4e --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md @@ -0,0 +1,6 @@ +--- +title: Contact List without accordion +--- + +### Description +This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md new file mode 100644 index 0000000000..3a0d4e23da --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md @@ -0,0 +1,38 @@ +--- +title: Contact List +--- + +### Description +Displays one of more Contacts Us patterns as a stacked list of accordions. + +### Status +* Stable as of 1.0.0 + +### Pattern Contains +* Contact Us +* Comp Heading + +### Usage Guidelines +* Can be added as the first item in the sidebar displayed witout the accordions +* Can be added near the bottom of the main content displayed with accordions +* if used in the sidebar and main content, then the sidebar contact should have the 'viewSpecific' variable enabled and ideally a copy of the sidebar contact should be added to the top of the main content with 'viewSpecific' enabled. +* See Contact Us and Comp Heading for more details + +### Variant options +* Turning on the viewSpecific variable, will hide the component at certain points when used on a two column layout. When placed in the sidebar, it will hide when the page is a single column. When placed in the page-content, it will hide when the page is two columns. + +### JavaScript Used +* This pattern uses JavaScript for the accordions (js/modules/accordions.js) + +### Variables +~~~ +contactList: { + viewSpecific: + type: boolean, + compHeading: { + type: compHeading / optional + }, + contacts:[{ + type: array of contactUs / required + }] +~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list~single-item.json b/styleguide/source/_patterns/03-organisms/by-author/contact-list~without-accordion.json similarity index 100% rename from styleguide/source/_patterns/03-organisms/by-author/contact-list~single-item.json rename to styleguide/source/_patterns/03-organisms/by-author/contact-list~without-accordion.json From 51903e8f4acab56a2cee443b0adc826863f23abc Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Wed, 19 Jul 2017 13:54:29 -0400 Subject: [PATCH 096/184] DP-4048 - Image --- .../_patterns/01-atoms/09-media/image.md | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md index 9bae765404..03931d9119 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/image.md +++ b/styleguide/source/_patterns/01-atoms/09-media/image.md @@ -1,26 +1,30 @@ --- title: Image --- -Description: an atom for `` elements with alt text -## State: ALPHA +### Description +Displays an image using the image HTML element -## Used In: -- [@organisms/by-author/sidebar-promo](/?p=organisms-sidebar-promo) - -## Notes: +### Status +* Stable as of 1.0.0 +### Usage Guidelines +* Use this pattern any where you wish to include an image +* Make sure the height and width values match the image's height and width +* Avoid using CSS to stretch the image beyond it's height and width or to change it's aspect ratio ### Variables ~~~ image { - alt: - type: string / required - src: - type: string (url) / required - height: - type: string - width: - type: string + alt: + type: string / required + src: + type: string (url) / required + height: + type: string / required + width: + type: string / required } +~~~ + From f508b57563ee4748e8382fd4e413fd0e28b01404 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Thu, 20 Jul 2017 13:36:03 -0400 Subject: [PATCH 097/184] DP-4048 - Pattern Documentation - Remving Usage Guidelines. --- .../source/_patterns/03-organisms/by-author/contact-list.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md index 3a0d4e23da..9bb5e29f87 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md @@ -12,12 +12,6 @@ Displays one of more Contacts Us patterns as a stacked list of accordions. * Contact Us * Comp Heading -### Usage Guidelines -* Can be added as the first item in the sidebar displayed witout the accordions -* Can be added near the bottom of the main content displayed with accordions -* if used in the sidebar and main content, then the sidebar contact should have the 'viewSpecific' variable enabled and ideally a copy of the sidebar contact should be added to the top of the main content with 'viewSpecific' enabled. -* See Contact Us and Comp Heading for more details - ### Variant options * Turning on the viewSpecific variable, will hide the component at certain points when used on a two column layout. When placed in the sidebar, it will hide when the page is a single column. When placed in the page-content, it will hide when the page is two columns. From d9b730091d60ff8fc22bd0d8029fa7c5af11be83 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Thu, 20 Jul 2017 13:41:45 -0400 Subject: [PATCH 098/184] DP-4048 - additional tweaks to md files --- styleguide/source/_patterns/01-atoms/09-media/image.md | 5 ----- .../source/_patterns/03-organisms/by-author/contact-list.md | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md index 03931d9119..1785cbba15 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/image.md +++ b/styleguide/source/_patterns/01-atoms/09-media/image.md @@ -8,11 +8,6 @@ Displays an image using the image HTML element ### Status * Stable as of 1.0.0 -### Usage Guidelines -* Use this pattern any where you wish to include an image -* Make sure the height and width values match the image's height and width -* Avoid using CSS to stretch the image beyond it's height and width or to change it's aspect ratio - ### Variables ~~~ image { diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md index 9bb5e29f87..ce77c608a4 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md @@ -6,7 +6,7 @@ title: Contact List Displays one of more Contacts Us patterns as a stacked list of accordions. ### Status -* Stable as of 1.0.0 +* Stable as of 5.0.0 ### Pattern Contains * Contact Us From 3f539d507b4effdb6d550d8bbb9c175f72db3de1 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Thu, 20 Jul 2017 14:42:10 -0400 Subject: [PATCH 099/184] DP-4048 - Lineage styling --- .../public/styleguide/css/styleguide.custom.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/styleguide/public/styleguide/css/styleguide.custom.css b/styleguide/public/styleguide/css/styleguide.custom.css index 381d798256..d1b66f2d73 100644 --- a/styleguide/public/styleguide/css/styleguide.custom.css +++ b/styleguide/public/styleguide/css/styleguide.custom.css @@ -101,3 +101,17 @@ .sg-pattern-desc hr + h2 { display: none; } + +.sg-pattern-lineage { + font-size: 14px; +} + +.sg-pattern-lineage:first-of-type:before { + content: "Lineage"; + display: block; + font-size: 1.34em; + font-style: normal; + font-weight: bold; + margin-top: 1em; + margin-bottom: 1em; +} From fb8b7a8731c09e9e79d84debacd276a1db4d6ebe Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Thu, 20 Jul 2017 14:45:08 -0400 Subject: [PATCH 100/184] DP-4048 - Removing title yaml. --- styleguide/public/styleguide/css/styleguide.custom.css | 4 ---- styleguide/source/_patterns/01-atoms/09-media/image.md | 4 ---- .../source/_patterns/03-organisms/by-author/contact-list.md | 4 ---- 3 files changed, 12 deletions(-) diff --git a/styleguide/public/styleguide/css/styleguide.custom.css b/styleguide/public/styleguide/css/styleguide.custom.css index d1b66f2d73..629c861456 100644 --- a/styleguide/public/styleguide/css/styleguide.custom.css +++ b/styleguide/public/styleguide/css/styleguide.custom.css @@ -98,10 +98,6 @@ font-size: 16px; } -.sg-pattern-desc hr + h2 { - display: none; -} - .sg-pattern-lineage { font-size: 14px; } diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md index 1785cbba15..22fb6f4d03 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/image.md +++ b/styleguide/source/_patterns/01-atoms/09-media/image.md @@ -1,7 +1,3 @@ ---- -title: Image ---- - ### Description Displays an image using the image HTML element diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md index ce77c608a4..a6ca71fdbd 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md @@ -1,7 +1,3 @@ ---- -title: Contact List ---- - ### Description Displays one of more Contacts Us patterns as a stacked list of accordions. From 96f34ba9db4e127cfe47f0a4b0c5cfe6c4a1e791 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 07:08:26 -0400 Subject: [PATCH 101/184] Make all intra-docs links relative --- .github/CONTRIBUTING.md | 2 +- README.md | 8 ++++---- docs/demo-install.md | 2 +- docs/deploy.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index f29ed55a30..6a87a08148 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -23,7 +23,7 @@ Thanks for contributing to Mayflower! Follow the steps on this page to get up a ### Setting up your environment -In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the [Setting up your environment](https://github.com/massgov/mayflower/blob/master/docs/setting-up-environment.md). +In order to run Mayflower locally, you need to have some things installed and set up on your machine. See the [Setting up your environment](../docs/setting-up-environment.md). ### Forking the repo diff --git a/README.md b/README.md index f6b20109c0..30fb326e93 100644 --- a/README.md +++ b/README.md @@ -5,21 +5,21 @@ Mayflower is the enterprise design system for the Commonwealth of Massachusetts. ### Setting up your environment -In order to run Mayflower locally, you need to have some things installed and set up on your machine. Follow the steps in [Setting up your environment](/docs/setting-up-environment.md). +In order to run Mayflower locally, you need to have some things installed and set up on your machine. Follow the steps in [Setting up your environment](docs/setting-up-environment.md). #### Demo Install -- Follow the steps in [Demo Install](/docs/demo-install.md) to get a copy of the project up and running on your local machine for *demo* and *testing* purposes. +- Follow the steps in [Demo Install](docs/demo-install.md) to get a copy of the project up and running on your local machine for *demo* and *testing* purposes. ## Contribute -Please follow the steps in [Contributing docs](https://github.com/massgov/mayflower/blob/master/.github/CONTRIBUTING.md) to set up your fork and repo for *development* and *contribution* purposes. +Please follow the steps in [Contributing docs](.github/CONTRIBUTING.md) to set up your fork and repo for *development* and *contribution* purposes. ## Deployment Please see [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). ## Mayflower Artifacts -Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. Learn more about Mayflower Artifacts in the [massgov/mass docs](https://github.com/massgov/mass/blob/DP-4049-document-mayflower-drupal-relationship/docs/Mayflower.md#mayflower-artifacts). +Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. Learn more about Mayflower Artifacts in the [massgov/mass docs](https://github.com/massgov/mass/blob/master/docs/Mayflower.md#mayflower-artifacts). ## Built With diff --git a/docs/demo-install.md b/docs/demo-install.md index 482b3702be..4b8b79fcfe 100644 --- a/docs/demo-install.md +++ b/docs/demo-install.md @@ -1,6 +1,6 @@ # Demo Install -Follow these steps to get up and running to *demo* or *test* Mayflower. Developers should see our [Contribute docs](/.github/CONTRIBUTING.md) for directions on how to set up your repo for development and contribution purposes. +Follow these steps to get up and running to *demo* or *test* Mayflower. Developers should see our [Contribute docs](../.github/CONTRIBUTING.md) for directions on how to set up your repo for development and contribution purposes. 1. Clone this repo `git clone git@github.com:massgov/mayflower.git` 1. Move into the styleguide directory `cd mayflower/styleguide` diff --git a/docs/deploy.md b/docs/deploy.md index 4e2f2c9662..081cbf6d5d 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -11,7 +11,7 @@ On this page: #### Prerequisite -Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md) for directions. +Set up your Mayflower fork + local repository, see our [CONTRIBUTING.md](../.github/CONTRIBUTING.md) for directions. #### Deploy feature work to your fork's Github Pages for review and testing Developers and contributors can follow these steps to deploy your branch to your fork's Github Pages environment. This will allow reviewers to test your code without having to build from your branch locally. @@ -48,4 +48,4 @@ Mayflower release managers with the necessary repo permissions can follow these ## Static assets -It is possible to build Mayflower's static assets without serving them. See the [gulp-readme](https://github.com/massgov/mayflower/blob/master/styleguide/tools/gulp/gulp-readme.md) for more information. +It is possible to build Mayflower's static assets without serving them. See the [gulp-readme](../styleguide/tools/gulp/gulp-readme.md) for more information. From c042dd508f994f2fa6b52fe9e0d44f8ea87fa637 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 07:17:13 -0400 Subject: [PATCH 102/184] Fix deploy docs links --- .github/CONTRIBUTING.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 6a87a08148..9186172e02 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -131,7 +131,7 @@ This will create the branch on your Mayflower fork. The `-u` flag links this bra ### Deploying your work -Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) for step by step instructions. +Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](../docs/deploy.md#developer-deployment) for step by step instructions. ### Creating a Pull Request Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. diff --git a/README.md b/README.md index 30fb326e93..a53740d057 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Please follow the steps in [Contributing docs](.github/CONTRIBUTING.md) to set u ## Deployment -Please see [Deployment docs](https://github.com/massgov/mayflower/blob/master/docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#developer-deployment) as well as [production release deployment](https://github.com/massgov/mayflower/blob/master/docs/deploy.md#release-deployment). +Please see [Deployment docs](docs/deploy.md) for steps on [deploying development work to a Mayflower fork's Github Pages](docs/deploy.md#developer-deployment) as well as [production release deployment](docs/deploy.md#release-deployment). ## Mayflower Artifacts Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates for markup in addition to the static css, js, + icon assets from Mayflower. To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository which consists of these assets. Learn more about Mayflower Artifacts in the [massgov/mass docs](https://github.com/massgov/mass/blob/master/docs/Mayflower.md#mayflower-artifacts). From 4d7c86d0cfe5538da84fee88d0c4f56b480df851 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 07:49:07 -0400 Subject: [PATCH 103/184] Update clone steps to be more clear --- .github/CONTRIBUTING.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9186172e02..39ac0de078 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -36,14 +36,14 @@ A fork is a *copy* of a repository. Forking a repository allows you to freely ex ### Cloning the repo Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. -1. On GitHub, navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. -1. Follow from Step 2 of [Github Help: Cloning a repository](https://help.github.com/articles/cloning-a-repository/). - -You now have a local representation of *your* Mayflower! +1. `git clone git@github.com:/mayflower.git` +1. Or, if you don't have [ssh set up on your local environment or with github](https://help.github.com/articles/connecting-to-github-with-ssh/), navigate to your fork of the Mayflower repository at `https://github.com//mayflower`. + 1. Follow from Step 2 of [Github Help: Cloning a repository](https://help.github.com/articles/cloning-a-repository/). +1. You now have a local representation of *your* Mayflower! Change directory into the repo root: `cd mayflower` ### Installing project dependencies -1. Move into the styleguide directory `cd mayflower/styleguide` +1. Move into the styleguide directory `cd styleguide` 1. Generate pattern lab default files `php core/console --generate` 1. Install npm dependencies `npm install` From 29c26e71155bb731eca76d192a161f91e6de49ee Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 07:49:29 -0400 Subject: [PATCH 104/184] Ensure branch is clean after deploy, fix typos --- scripts/deploy-gh-pages.sh | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 5b829102a1..fbfa5129bd 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -13,7 +13,7 @@ # -c CNAME record: a custom domain to point to Github Pages (required only when deploying to prod: "mayflower.digital.mass.gov") # -a Assets path: the root relative path to the assets/ directory i.e. 'mayflower/assets' (only required when passing a cname [-c] for an environment which will not serve Mayflower from the root directory) # -# Example: ./scripts/deploy-gh-pages.sh -t massgov/mayflower -b DP-1234-my-branch-name -c mayflower.digital.mass.gov +# Example: ./scripts/deploy-gh-pages.sh -t massgov -b DP-1234-my-branch-name -c mayflower.digital.mass.gov # # Description: # 1. Validate the passed arguments: build source and target repo @@ -215,6 +215,9 @@ line="Building mayflower static assets..." log "log" "$line"; gulp build >/dev/null +# Remove url.json to keep repo clean +rm source/_data/url.json + # Make temp directory to copy public assets line="Making ~/tmp/mayflower directory..." log "log" "$line"; @@ -277,7 +280,7 @@ then then line="Woo-hoo! Deploy complete! \n You should see your updates at ${cname}!" else - line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n http(s)://${owner}.github.io/mayflower" + line="Woo-hoo! Deploy complete! You should be able to see your updates at your Mayflower fork's Github Pages: \n https://${owner}.github.io/mayflower" fi log "success" "$line"; else From abda85fc715ed7f69daf8f83ac5edf2e0294ab9f Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 11:03:34 -0400 Subject: [PATCH 105/184] Add patternlab task to deafult gulp ( = always generate patterns) --- styleguide/tools/gulp/gulpfile.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/styleguide/tools/gulp/gulpfile.js b/styleguide/tools/gulp/gulpfile.js index 14afcac043..1686b246a7 100755 --- a/styleguide/tools/gulp/gulpfile.js +++ b/styleguide/tools/gulp/gulpfile.js @@ -30,7 +30,7 @@ var defaults = { dest: path.resolve(__dirname, "../../public/assets"), patternLabRoot: path.resolve(__dirname, "../../"), rootSite: path.resolve(__dirname, "../../public"), - tasks: ["copy", "js", "css", "bower"], + tasks: ["copy", "js", "css", "bower", "patternlab"], env: "development", // "development", "production", "local" watch: false, browserSync: false @@ -45,8 +45,7 @@ gulp.task("default", function(){ var config = Object.assign({}, defaults, { env : "development", watch : true, - browserSync : true, - tasks : defaults.tasks.concat("patternlab") + browserSync : true }); quench.build(config); @@ -76,8 +75,7 @@ gulp.task("build", function(){ var config = Object.assign({}, defaults, { env : "development", watch : false, - browserSync: false, - tasks : defaults.tasks.concat("patternlab") + browserSync: false }); quench.build(config); From ca4388ed5b27cd3b202e67e5f90653a39062a813 Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 11:04:08 -0400 Subject: [PATCH 106/184] Try gulp prod in deploy script --- scripts/deploy-gh-pages.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index fbfa5129bd..6140c3ad5e 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -213,7 +213,7 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${asset # 4. Build pattern to generate prod static assets line="Building mayflower static assets..." log "log" "$line"; -gulp build >/dev/null +gulp prod >/dev/null # Remove url.json to keep repo clean rm source/_data/url.json From 243f6d6a4811b868eb07f1831a63cf0dab12b9fc Mon Sep 17 00:00:00 2001 From: Jes Constantine Date: Fri, 21 Jul 2017 11:19:20 -0400 Subject: [PATCH 107/184] Ensure public directory gets cleaned out prior to generation --- scripts/deploy-gh-pages.sh | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh index 6140c3ad5e..fad9548c95 100755 --- a/scripts/deploy-gh-pages.sh +++ b/scripts/deploy-gh-pages.sh @@ -211,6 +211,10 @@ find ./source/_data -type f -name "url.json" -exec sed -i "" "s!http://localhost find ./source/_data -type f -name "url.json" -exec sed -i "" "s!assets\"!${assetsPath}\"!g" {} \; # 4. Build pattern to generate prod static assets +line="Generating mayflower patterns..." +log "log" "$line"; +php core/console --generate >/dev/null + line="Building mayflower static assets..." log "log" "$line"; gulp prod >/dev/null From a32f1fa2f49c3ff3f1ecfed19d9c0e0a7a823b44 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 11:29:37 -0400 Subject: [PATCH 108/184] DP-4048 - Contact List - removed 'title' field from docs --- .../03-organisms/by-author/contact-list-without-accordion.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md index 879269cf4e..39b11f7b75 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md @@ -1,6 +1,2 @@ ---- -title: Contact List without accordion ---- - ### Description This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. From 7fd162ef652ab4446abaa5057e772405b057f9f1 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 13:11:58 -0400 Subject: [PATCH 109/184] DP-4176 - Service Page and Template - documentation --- .../04-templates/01-content-types/services.md | 87 +++++++++++++++++++ .../source/_patterns/05-pages/service.md | 13 +++ 2 files changed, 100 insertions(+) create mode 100644 styleguide/source/_patterns/04-templates/01-content-types/services.md create mode 100644 styleguide/source/_patterns/05-pages/service.md diff --git a/styleguide/source/_patterns/04-templates/01-content-types/services.md b/styleguide/source/_patterns/04-templates/01-content-types/services.md new file mode 100644 index 0000000000..88f7c4831d --- /dev/null +++ b/styleguide/source/_patterns/04-templates/01-content-types/services.md @@ -0,0 +1,87 @@ +### Description +Displays a collect of components to help describe an available Service on Mass Gov + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Page Banner organism +* Image atom +* Video atom +* Rich Text organisms +* Key Actions organism +* Icon Links organism +* Link List organism +* Action Finder organism +* Mapped Locations organism +* Split Columns organism +* Form Downloads organism + + +### Variant options +* Most of the elements on the page are optional. The Page Banner, Intro text, and Google Map are required on this template. + + +### Notes +* This Pattern's Layout is based off of the Stack Row template +* The 50/50 columns contain a Linked List and a Form Downloads organism. + +### Variables +~~~ +{ + pageBanner: + type: pageBanner / required + + introPageContent: { + video: { + type: video / optional + } + intro: { + type: richText / required + }, + + keyActions: { + type: keyActions / optional + } + }, + + introSidebar: { + logo: { + type: image / optional + }, + + social: { + sidebarHeading: { + type: sidebarHeading / optional + }, + iconLinks: { + type: iconLinks / optional + } + }, + + linkList : { + type: linkList / optional + } + }, + + doActionFinder: { + actionFinder: { + type: actionFinder / optional + } + }, + + learnActionFinder: { + actionFinder: { + type: actionFinder / optional + } + }, + + mappedLocations: { + type: mappedLocations / required + }, + + splitColumns: { + type: splitColumns / optional + } +} +~~~ diff --git a/styleguide/source/_patterns/05-pages/service.md b/styleguide/source/_patterns/05-pages/service.md new file mode 100644 index 0000000000..c30c610ac7 --- /dev/null +++ b/styleguide/source/_patterns/05-pages/service.md @@ -0,0 +1,13 @@ +### Description +Example of a Services template to show how it could be used as an Unemployment Benefits Page on mass gov. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Header Organism +* Services Template +* Footer Organism + +### Variables +See Services Template From bc00f705563885a0a41431cef121db5b5ec9967a Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 14:41:19 -0400 Subject: [PATCH 110/184] DP-4176 - Page Banner - Documentation --- .../by-template/page-banner-as-blue.md | 5 +++++ .../by-template/page-banner-as-columns.md | 5 +++++ .../by-template/page-banner-as-large.md | 5 +++++ .../by-template/page-banner-as-overlay.md | 5 +++++ .../by-template/page-banner-as-small.md | 5 +++++ .../03-organisms/by-template/page-banner.md | 21 ++++++++----------- .../by-template/page-banner~as-blue.json | 12 +++++++++++ .../by-template/page-banner~as-columns.json | 12 +++++++++++ ...r~large.json => page-banner~as-large.json} | 0 ...color.json => page-banner~as-overlay.json} | 2 +- ...r~small.json => page-banner~as-small.json} | 2 +- 11 files changed, 60 insertions(+), 14 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner-as-blue.md create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner-as-columns.md create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner-as-large.md create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner-as-overlay.md create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner-as-small.md create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner~as-blue.json create mode 100644 styleguide/source/_patterns/03-organisms/by-template/page-banner~as-columns.json rename styleguide/source/_patterns/03-organisms/by-template/{page-banner~large.json => page-banner~as-large.json} (100%) rename styleguide/source/_patterns/03-organisms/by-template/{page-banner~with-overlay-color.json => page-banner~as-overlay.json} (96%) rename styleguide/source/_patterns/03-organisms/by-template/{page-banner~small.json => page-banner~as-small.json} (95%) diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-blue.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-blue.md new file mode 100644 index 0000000000..00f388e6ec --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-blue.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [Page Banner](./?p=organisms-page-banner) showing an example with color set to 'blue'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-columns.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-columns.md new file mode 100644 index 0000000000..fb9d60403e --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-columns.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [Page Banner](./?p=organisms-page-banner) showing an example with size set to 'columns'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-large.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-large.md new file mode 100644 index 0000000000..e2fa67112b --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-large.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [Page Banner](./?p=organisms-page-banner) showing an example with size set to 'large'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-overlay.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-overlay.md new file mode 100644 index 0000000000..51dff9bd29 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-overlay.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [Page Banner](./?p=organisms-page-banner) showing an example with size set to 'overlay' and color set to 'blue'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-small.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-small.md new file mode 100644 index 0000000000..8aedf74fda --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner-as-small.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [Page Banner](./?p=organisms-page-banner) showing an example with size set to 'small'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner.md b/styleguide/source/_patterns/03-organisms/by-template/page-banner.md index a2a7a1d979..521d0dec91 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/page-banner.md +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner.md @@ -1,17 +1,14 @@ ---- -Title: Page Banner ---- -Description: Page Header with title, icon and background used at the top of a page. +Description: Full width banner image shown behind a wedge shaped overlay containing a title and an optional description or icon. -## Status: ALPHA +### Status +* Stable as of 5.0.0 -### Used in: -- [@pages\L1-state-parks-and-recreation](/?p=pages-L1-state-parks-and-recreation) -- [@pages/L0-visiting-and-exploring](/?p=pages-L0-visiting-and-exploring) -- [@pages/ORG-Health-Services](/?p=pages-ORG-Health-Services) +### Variant options +* This pattern can be adjusted to display as four other layouts, in addition to the default, by setting the size variable to ['small'](./?p=organisms-page-banner-as-small), ['large'](./?p=organisms-page-banner-as-large), ['overlay'](./?p=organisms-page-banner-as-overlay), and ['columns'](./?p=organisms-page-banner-as-columns). +* This pattern and it's layout variants can be viewed in an optional blue color by setting the color variable to ['blue'](./?p=organisms-page-banner-as-blue) +* The icon and description are both optional - -### Required Variables +### Variables ~~~ pageBanner: { bgWide: @@ -19,7 +16,7 @@ pageBanner: { bgNarrow: type: string/required (path to image for narrow screens) size: - type: string(optional) ('small', 'large', 'overlay') + type: string(optional) (null, 'small', 'medium', 'large', 'overlay', 'columns') icon: type: string/optional (path to icon file), title: diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-blue.json b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-blue.json new file mode 100644 index 0000000000..f0012c21dd --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-blue.json @@ -0,0 +1,12 @@ +{ + "pageBanner": { + "bgWide": "../../assets/images/placeholder/1600x400.png", + "bgNarrow": "../../assets/images/placeholder/800x400.png", + "size": "", + "icon": "@atoms/05-icons/svg-lg-park.twig", + "title": "Visiting & Exploring", + "titleSubText": "", + "description": "", + "color": "blue" + } +} diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-columns.json b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-columns.json new file mode 100644 index 0000000000..26121fb60f --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-columns.json @@ -0,0 +1,12 @@ +{ + "pageBanner": { + "bgWide": "../../assets/images/placeholder/800x400.png", + "bgNarrow": "../../assets/images/placeholder/800x400.png", + "size": "columns", + "icon": "", + "title": "Unemployment Benefits", + "titleSubText": "", + "description": "Have you lost your job? You may qualify for temporary income to support you while you look for a new one.", + "color": "green" + } +} diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner~large.json b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-large.json similarity index 100% rename from styleguide/source/_patterns/03-organisms/by-template/page-banner~large.json rename to styleguide/source/_patterns/03-organisms/by-template/page-banner~as-large.json diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner~with-overlay-color.json b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-overlay.json similarity index 96% rename from styleguide/source/_patterns/03-organisms/by-template/page-banner~with-overlay-color.json rename to styleguide/source/_patterns/03-organisms/by-template/page-banner~as-overlay.json index 935a487409..118f294f17 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/page-banner~with-overlay-color.json +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-overlay.json @@ -9,4 +9,4 @@ "description": "Have you lost your job? You may qualify for temporary income to support you while you look for a new one.", "color": "blue" } -} \ No newline at end of file +} diff --git a/styleguide/source/_patterns/03-organisms/by-template/page-banner~small.json b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-small.json similarity index 95% rename from styleguide/source/_patterns/03-organisms/by-template/page-banner~small.json rename to styleguide/source/_patterns/03-organisms/by-template/page-banner~as-small.json index b0a6eb0f53..06be482452 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/page-banner~small.json +++ b/styleguide/source/_patterns/03-organisms/by-template/page-banner~as-small.json @@ -9,4 +9,4 @@ "description": "", "color": null } -} \ No newline at end of file +} From 0b14948fea333ce87dc9797908ca1725b89db759 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 14:57:28 -0400 Subject: [PATCH 111/184] DP-4048 Establish format for pattern docs (#515) * DP-4048 - Annotations - updating to look for JS classes used. * DP-4048 - Annotations - The extra html added breaks the styles * Dp-4048 - Extra Js - removing unused JS files * DP-4048 - updating Styling of Pattern Info panel * DP-4048 - Contact List - Documentation * DP-4048 - Image * DP-4048 - Pattern Documentation - Remving Usage Guidelines. * DP-4048 - additional tweaks to md files * DP-4048 - Lineage styling * DP-4048 - Removing title yaml. * DP-4048 - Contact List - removed 'title' field from docs --- .../styleguide/css/styleguide.custom.css | 22 +++++++++++++ styleguide/source/_annotations/annotations.js | 33 +------------------ .../_patterns/01-atoms/09-media/image.md | 33 ++++++++----------- .../contact-list-without-accordion.md | 2 ++ .../03-organisms/by-author/contact-list.md | 28 ++++++++++++++++ ...on => contact-list~without-accordion.json} | 0 styleguide/source/assets/js/index.js | 2 -- .../assets/js/modules/bannerCarousel.js | 17 ---------- .../source/assets/js/modules/mainNavPilot.js | 20 ----------- .../assets/scss/pattern-scaffolding.scss | 10 ------ 10 files changed, 67 insertions(+), 100 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/contact-list.md rename styleguide/source/_patterns/03-organisms/by-author/{contact-list~single-item.json => contact-list~without-accordion.json} (100%) delete mode 100644 styleguide/source/assets/js/modules/bannerCarousel.js delete mode 100644 styleguide/source/assets/js/modules/mainNavPilot.js diff --git a/styleguide/public/styleguide/css/styleguide.custom.css b/styleguide/public/styleguide/css/styleguide.custom.css index e44b8fa90b..629c861456 100644 --- a/styleguide/public/styleguide/css/styleguide.custom.css +++ b/styleguide/public/styleguide/css/styleguide.custom.css @@ -89,3 +89,25 @@ border-top: 1px solid #ccc; } +.sg-tabs-panel code[class*=language-], +.sg-tabs-panel pre[class*=language-] { + font-size: 16px; +} + +.sg-pattern-desc { + font-size: 16px; +} + +.sg-pattern-lineage { + font-size: 14px; +} + +.sg-pattern-lineage:first-of-type:before { + content: "Lineage"; + display: block; + font-size: 1.34em; + font-style: normal; + font-weight: bold; + margin-top: 1em; + margin-bottom: 1em; +} diff --git a/styleguide/source/_annotations/annotations.js b/styleguide/source/_annotations/annotations.js index 9b81a453a1..d952e7eac5 100644 --- a/styleguide/source/_annotations/annotations.js +++ b/styleguide/source/_annotations/annotations.js @@ -1,34 +1,3 @@ { - "comments" : [ - { - "el": "header[role=banner]", - "title" : "Masthead", - "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests." - }, - { - "el": ".logo", - "title" : "Logo", - "comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.

Further reading: Optimizing Web Experiences for High Resolution Screens

" - }, - { - "el": "#nav", - "title" : "Navigation", - "comment": "

Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. Bagcheck and Contents Magazine add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, ESPN's mobile navigation overlays the main content of the page.

The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.

See also: Responsive Navigation Patterns

" - }, - { - "el": ".search-form", - "title" : "Search", - "comment": "

Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the Burton and Yelp mobile sites for great examples of experiences that prioritize search.

We're also using the HTML5 search input type, which is great for mobile devices that can bring up the appropriate virtual keyboard for many smartphones. And like the main header navigation, we're hiding the search form on small screens to save space. Clicking the search anchor toggles the form.

" - }, - { - "el": ".article-header h1", - "title" : "Article Header", - "comment": "

The article header should be no more than 140 characters.

" - }, - { - "el": ".block-hero", - "title" : "Hero", - "comment": "

The hero area highlights one major story using a large image and a captivating headline.

" - } - ] + "comments" : [] } diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md index 9bae765404..22fb6f4d03 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/image.md +++ b/styleguide/source/_patterns/01-atoms/09-media/image.md @@ -1,26 +1,21 @@ ---- -title: Image ---- -Description: an atom for `` elements with alt text - -## State: ALPHA - -## Used In: -- [@organisms/by-author/sidebar-promo](/?p=organisms-sidebar-promo) - -## Notes: +### Description +Displays an image using the image HTML element +### Status +* Stable as of 1.0.0 ### Variables ~~~ image { - alt: - type: string / required - src: - type: string (url) / required - height: - type: string - width: - type: string + alt: + type: string / required + src: + type: string (url) / required + height: + type: string / required + width: + type: string / required } +~~~ + diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md new file mode 100644 index 0000000000..39b11f7b75 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md @@ -0,0 +1,2 @@ +### Description +This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md new file mode 100644 index 0000000000..a6ca71fdbd --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list.md @@ -0,0 +1,28 @@ +### Description +Displays one of more Contacts Us patterns as a stacked list of accordions. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Contact Us +* Comp Heading + +### Variant options +* Turning on the viewSpecific variable, will hide the component at certain points when used on a two column layout. When placed in the sidebar, it will hide when the page is a single column. When placed in the page-content, it will hide when the page is two columns. + +### JavaScript Used +* This pattern uses JavaScript for the accordions (js/modules/accordions.js) + +### Variables +~~~ +contactList: { + viewSpecific: + type: boolean, + compHeading: { + type: compHeading / optional + }, + contacts:[{ + type: array of contactUs / required + }] +~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list~single-item.json b/styleguide/source/_patterns/03-organisms/by-author/contact-list~without-accordion.json similarity index 100% rename from styleguide/source/_patterns/03-organisms/by-author/contact-list~single-item.json rename to styleguide/source/_patterns/03-organisms/by-author/contact-list~without-accordion.json diff --git a/styleguide/source/assets/js/index.js b/styleguide/source/assets/js/index.js index 6f734efa8d..5c5c7c3b66 100644 --- a/styleguide/source/assets/js/index.js +++ b/styleguide/source/assets/js/index.js @@ -2,7 +2,6 @@ import "./helpers/jQueryExtend.js"; import accordions from "./modules/accordions.js"; import googleMap from "./modules/googleMap.js"; import back2top from "./modules/back2top.js"; -import bannerCarousel from "./modules/bannerCarousel.js"; import clickable from "./modules/clickable.js"; import dropdown from "./modules/dropdown.js"; import emergencyAlerts from "./modules/emergencyAlerts.js"; @@ -13,7 +12,6 @@ import keywordSearch from "./modules/keywordSearch.js"; import locationFilters from "./modules/locationFilters.js"; import locationListing from "./modules/locationListing.js"; import mainNav from "./modules/mainNav.js"; -import mainNavPilot from "./modules/mainNavPilot.js"; import mobileNav from "./modules/mobileNav.js"; import orgSelector from "./modules/orgSelector.js"; import pagination from "./modules/pagination.js"; diff --git a/styleguide/source/assets/js/modules/bannerCarousel.js b/styleguide/source/assets/js/modules/bannerCarousel.js deleted file mode 100644 index 8efd6a8d9e..0000000000 --- a/styleguide/source/assets/js/modules/bannerCarousel.js +++ /dev/null @@ -1,17 +0,0 @@ -export default function (window,document,$,undefined) { - - $('.js-banner-carousel').each(function(){ - let $el = $(this); - - if($el.children().length <= 1) { - return; - } - - let slider = $el.slick({ - dots: true, - prevArrow: '', - nextArrow: '' - }); - }); - -}(window,document,jQuery); \ No newline at end of file diff --git a/styleguide/source/assets/js/modules/mainNavPilot.js b/styleguide/source/assets/js/modules/mainNavPilot.js deleted file mode 100644 index a5d84e5026..0000000000 --- a/styleguide/source/assets/js/modules/mainNavPilot.js +++ /dev/null @@ -1,20 +0,0 @@ -export default function (window,document,$,undefined) { - - $('.js-main-nav').each(function() { - let $parent = $(this), - $mainNavToggle = $parent.find('.js-main-nav-toggle'); - - // make root top-level links inert for pilot - $mainNavToggle.children('a').on('click', function(e) { - e.preventDefault(); - }); - - // Ensure top-level links that are potential anchor links close the sidebar on mobile - $parent.find('.js-main-nav-top-link').find('a').on('click', function() { - $('.js-header-menu-button').trigger('click'); - }); - - }); - -}(window,document,jQuery); - diff --git a/styleguide/source/assets/scss/pattern-scaffolding.scss b/styleguide/source/assets/scss/pattern-scaffolding.scss index 8b6b03e8c1..a5e712c1f7 100644 --- a/styleguide/source/assets/scss/pattern-scaffolding.scss +++ b/styleguide/source/assets/scss/pattern-scaffolding.scss @@ -73,13 +73,3 @@ display: block; width: 100%; } - -.pl__styleguide { - - & > .ma__helpful-links, - & > .ma__rich-text, - & > .ma__action-map .ma__action-map__header { - @include ma-container; - } -} - From 8e0014810c5105be80885fd0e6a2235205d306a9 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:09:43 -0400 Subject: [PATCH 112/184] DP-4176 - Image - documentation --- styleguide/source/_patterns/01-atoms/09-media/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styleguide/source/_patterns/01-atoms/09-media/image.md b/styleguide/source/_patterns/01-atoms/09-media/image.md index 22fb6f4d03..37760435cd 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/image.md +++ b/styleguide/source/_patterns/01-atoms/09-media/image.md @@ -2,7 +2,7 @@ Displays an image using the image HTML element ### Status -* Stable as of 1.0.0 +* Stable as of 4.0.0 ### Variables ~~~ From dc368dc6c2030e8b422cc07117a361f9fab5db71 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:13:10 -0400 Subject: [PATCH 113/184] DP-4176 - Video - documentation --- .../09-media/video-as-floated-right.md | 5 +++ .../_patterns/01-atoms/09-media/video.json | 7 +++- .../_patterns/01-atoms/09-media/video.md | 38 ++++++++++++++----- .../_patterns/01-atoms/09-media/video.twig | 4 +- ...cript.json => video~as-floated-right.json} | 2 +- 5 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 styleguide/source/_patterns/01-atoms/09-media/video-as-floated-right.md rename styleguide/source/_patterns/01-atoms/09-media/{video~with-transcript.json => video~as-floated-right.json} (94%) diff --git a/styleguide/source/_patterns/01-atoms/09-media/video-as-floated-right.md b/styleguide/source/_patterns/01-atoms/09-media/video-as-floated-right.md new file mode 100644 index 0000000000..3fd7bc2379 --- /dev/null +++ b/styleguide/source/_patterns/01-atoms/09-media/video-as-floated-right.md @@ -0,0 +1,5 @@ +Description: This is a variant of the [video](./?p=atoms-video) pattern showing an example with position set to 'right'. + +### Status +* Stable as of 5.0.0 + diff --git a/styleguide/source/_patterns/01-atoms/09-media/video.json b/styleguide/source/_patterns/01-atoms/09-media/video.json index 626d3e29c6..c280475650 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/video.json +++ b/styleguide/source/_patterns/01-atoms/09-media/video.json @@ -4,7 +4,12 @@ "label": "Using a gas grill safely", "width": "853", "height": "480", - "link": null, + "link": { + "href": "/patterns/05-pages-GEN-Building-Energy-Codes/05-pages-GEN-Building-Energy-Codes.html", + "text": "View transcript", + "info": "View transcript of Using a gas grill safely", + "property": "" + }, "position": "" } } diff --git a/styleguide/source/_patterns/01-atoms/09-media/video.md b/styleguide/source/_patterns/01-atoms/09-media/video.md index 17dde1f762..04ade64a3b 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/video.md +++ b/styleguide/source/_patterns/01-atoms/09-media/video.md @@ -1,14 +1,32 @@ ---- -title: Video ---- -Description: an atom for a video element. -## State: STABLE +### Description +Displays a video using an iframe with an optional link. -### Used In: -- [@organisms/by-author/rich-text](/?p=organisms-rich-text) -- [@organisms/by-author/rich-text-description](/?p=organisms-rich-text-description) +### Status +* Stable as of 5.0.0 -### Required Variables +### Pattern Contains +* Decorative Link + +### Variant options +* This pattern includes an optional link to a page containing a transcript of the video +* This pattern can also by floated to the right by setting the position to ['right'](./?p=atoms-video-as-floated-right) + +### Variables ~~~ -None +video { + src: + type: string(url) / required + label: + type: string / required + width: + type: string (numbers only) / required + height: + type: string (numbers only) / required + link: + type: decorativeLink / optional + position: + type: string (null, 'right') / optional +} ~~~ + + diff --git a/styleguide/source/_patterns/01-atoms/09-media/video.twig b/styleguide/source/_patterns/01-atoms/09-media/video.twig index 74f3b127e0..c0afef87c8 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/video.twig +++ b/styleguide/source/_patterns/01-atoms/09-media/video.twig @@ -1,6 +1,4 @@ -{% if video.position %} - {% set posClass = "ma__video--" ~ video.position %} -{% endif %} +{% set posClass = video.position ? "ma__video--" ~ video.position : '' %}
diff --git a/styleguide/source/_patterns/01-atoms/09-media/video~with-transcript.json b/styleguide/source/_patterns/01-atoms/09-media/video~as-floated-right.json similarity index 94% rename from styleguide/source/_patterns/01-atoms/09-media/video~with-transcript.json rename to styleguide/source/_patterns/01-atoms/09-media/video~as-floated-right.json index c280475650..80b45ff0b0 100644 --- a/styleguide/source/_patterns/01-atoms/09-media/video~with-transcript.json +++ b/styleguide/source/_patterns/01-atoms/09-media/video~as-floated-right.json @@ -10,6 +10,6 @@ "info": "View transcript of Using a gas grill safely", "property": "" }, - "position": "" + "position": "right" } } From d4fdd8c54d9a698eb44743f08b432549741f22f0 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:13:34 -0400 Subject: [PATCH 114/184] DP-4176 - Documentation template --- .../_patterns/documentation-template.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 styleguide/source/_patterns/documentation-template.md diff --git a/styleguide/source/_patterns/documentation-template.md b/styleguide/source/_patterns/documentation-template.md new file mode 100644 index 0000000000..a935f9a31c --- /dev/null +++ b/styleguide/source/_patterns/documentation-template.md @@ -0,0 +1,28 @@ +### Description +This is a sample of documentation to use for patterns. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Contact Us molecule +* Comp Heading atom + +### Variant options +* describe the different variants that can be created and link them to the actual variant + +### JavaScript Used +* This pattern uses JavaScript for the accordions (js/modules/accordions.js) + +### Variables +~~~ +contactList: { + viewSpecific: + type: boolean, + compHeading: { + type: compHeading / optional + }, + contacts:[{ + type: array of contactUs / required + }] +~~~ From aacbec84f83ddac890b619e9b64211a40d45b85a Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:34:59 -0400 Subject: [PATCH 115/184] DP-4176 - Key Actions - Documentation --- .../03-organisms/by-author/key-actions.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/key-actions.md diff --git a/styleguide/source/_patterns/03-organisms/by-author/key-actions.md b/styleguide/source/_patterns/03-organisms/by-author/key-actions.md new file mode 100644 index 0000000000..158d29ce6b --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/key-actions.md @@ -0,0 +1,30 @@ +### Description +This pattern shows a grid containing a combination of Callout links and Illustrated Links beneath an optional title + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Comp Heading atom (optional) +* Sidebar Heading atom (optional) +* Callout Link +* Illustrated Link (optional) + +### Variant options +* This pattern can also contain Illustrated Links in addition to just Callout Links. + + +### Variables +~~~ +"keyActions": { + "compHeading": { + "type": compHeading / optional + }, + sidebarHeading: { + type: sidebarHeading / optional + }, + "links":[{ + type: array of Callout Links or Illustrated Links / required + }] +} +~~~ From d502a2a627494baa89ba93cf175f6ef293c389cc Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:47:23 -0400 Subject: [PATCH 116/184] DP-4176 - Decorative Link - documentation --- .../_patterns/01-atoms/05-icons/svg-arrow.md | 12 ------ .../_patterns/01-atoms/decorative-link.md | 41 +++++++------------ 2 files changed, 14 insertions(+), 39 deletions(-) delete mode 100644 styleguide/source/_patterns/01-atoms/05-icons/svg-arrow.md diff --git a/styleguide/source/_patterns/01-atoms/05-icons/svg-arrow.md b/styleguide/source/_patterns/01-atoms/05-icons/svg-arrow.md deleted file mode 100644 index 3c7b2fe4f8..0000000000 --- a/styleguide/source/_patterns/01-atoms/05-icons/svg-arrow.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Arrow Icon ---- -Description: Used at the end of links to denote that the link will take the user to a page on the existing domain (verses an external link) - -## State: ALPHA - -### Used In: -- [@atoms/decorative-link](/?p=atoms-decorative-link) -- [@molecules/section-links](/?p=molecules-section-links) -- [@organisms/by-author/action-card](/?p=organisms-action-card) -- [@organisms/by-template/footer](/?p=organisms-footer) diff --git a/styleguide/source/_patterns/01-atoms/decorative-link.md b/styleguide/source/_patterns/01-atoms/decorative-link.md index 10acc20afc..77c3e2ed1b 100644 --- a/styleguide/source/_patterns/01-atoms/decorative-link.md +++ b/styleguide/source/_patterns/01-atoms/decorative-link.md @@ -1,34 +1,21 @@ ---- -title: Decorative link ---- -Description: an atom for a decorative link. -## State: BETA +Description: This pattern shows a stylized `a` tag with an arrow icon. -### Notes -The svg reference could possibly change. 05-icons and 06-icons-location may still be consolodated. +### Status +* Stable as of 4.0.0 -### Used in: -- [@molecules/action-downloads](/?p=molecules-action-downloads) -- [@molecules/action-event](/?p=molecules-action-event) -- [@molecules/callout-link](/?p=molecules-callout-link) -- [@molecules/illustrated-link](/?p=molecules-illustrated-link) -- [@molecules/related-action](/?p=molecules-related-action) -- [@organisms/by-author/blog-feed](/?p=organisms-blog-feed) -- [@organisms/by-author/callout-alert](/?p=organisms-callout-alert) -- [@organisms/by-author/quick-actions](/?p=organisms-quick-actions) -- [@organisms/by-author/suggested-pages](/?p=organisms-suggested-pages) -- [@organisms/by-author/test-feed](/?p=organisms-test-feed) +### Pattern Contains +* SVG arrow atom -### Required Variables +### Variables ~~~ decorativeLink { - href: - type: string/required - text: - type: string/required - info: (description of link for in use in aria-label) - type: string/optional - property: - type: string/optional + href: + type: string (url) / required + text: + type: string / required + info: + type: string (adds more description to the link) / optional + property: + type: string / optional } ~~~ From b14b397c0b626726f3e4ccfef46f18a804c3a19c Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:48:50 -0400 Subject: [PATCH 117/184] DP-4176 - Key Actions - adding contained type --- .../source/_patterns/03-organisms/by-author/key-actions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/key-actions.md b/styleguide/source/_patterns/03-organisms/by-author/key-actions.md index 158d29ce6b..447be93fd7 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/key-actions.md +++ b/styleguide/source/_patterns/03-organisms/by-author/key-actions.md @@ -7,8 +7,8 @@ This pattern shows a grid containing a combination of Callout links and Illustra ### Pattern Contains * Comp Heading atom (optional) * Sidebar Heading atom (optional) -* Callout Link -* Illustrated Link (optional) +* Callout Link molecule +* Illustrated Link molecule (optional) ### Variant options * This pattern can also contain Illustrated Links in addition to just Callout Links. From 7188b15f85489c1a3b0fb8bee2ad7ed7074af207 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Fri, 21 Jul 2017 15:59:57 -0400 Subject: [PATCH 118/184] DP-4167 - Callout Link - documentation --- .../_patterns/02-molecules/callout-link.json | 5 ++-- .../_patterns/02-molecules/callout-link.md | 25 ++++++++----------- .../_patterns/02-molecules/callout-link.twig | 2 +- .../02-molecules/callout-link~external.json | 6 ----- .../scss/02-molecules/_callout-link.scss | 4 --- 5 files changed, 13 insertions(+), 29 deletions(-) delete mode 100644 styleguide/source/_patterns/02-molecules/callout-link~external.json diff --git a/styleguide/source/_patterns/02-molecules/callout-link.json b/styleguide/source/_patterns/02-molecules/callout-link.json index 358b1f1b78..58e46c6fc9 100644 --- a/styleguide/source/_patterns/02-molecules/callout-link.json +++ b/styleguide/source/_patterns/02-molecules/callout-link.json @@ -1,8 +1,7 @@ { "calloutLink": { "text": "Order a MassParks Pass online through Reserve America", - "type": "", "href": "#", - "info": "" + "info": "Order a MassParks Pass online through Reserve America" } -} \ No newline at end of file +} diff --git a/styleguide/source/_patterns/02-molecules/callout-link.md b/styleguide/source/_patterns/02-molecules/callout-link.md index dd7c0be278..b36e006834 100644 --- a/styleguide/source/_patterns/02-molecules/callout-link.md +++ b/styleguide/source/_patterns/02-molecules/callout-link.md @@ -1,25 +1,20 @@ ---- -title: Callout link ---- -Description: An decorative link `` element which wraps a styled container. +Description: This pattern shows a link styled as a card -## Status: BETA +### Status +* Stable as of 6.0.0 -### Used in: -- [@organisms/by-author/action-finder](/?p=organisms-action-finder) -- [@organisms/by-author/key-actions](/?p=organisms-key-actions) -- [@organisms/by-author/top-actions](/?p=organisms-top-actions) +### Pattern Contains +* SVG Arrow atom -### Required Variables + +### Variables ~~~ calloutLink: { href: - type: string/required + type: string / required text: - type: string/required - type: - type: string/optional ("external") + type: string / required info: - type: string/optional + type: string (adds more description to the link) / optional } ~~~ diff --git a/styleguide/source/_patterns/02-molecules/callout-link.twig b/styleguide/source/_patterns/02-molecules/callout-link.twig index f2dc08ce04..5f576ee6b8 100644 --- a/styleguide/source/_patterns/02-molecules/callout-link.twig +++ b/styleguide/source/_patterns/02-molecules/callout-link.twig @@ -1,4 +1,4 @@ - + {{ calloutLink.text }}{% if calloutLink.info %}{{ calloutLink.info }}{% endif %} {% include "@atoms/05-icons/svg-arrow.twig" %} diff --git a/styleguide/source/_patterns/02-molecules/callout-link~external.json b/styleguide/source/_patterns/02-molecules/callout-link~external.json deleted file mode 100644 index b0f4815d63..0000000000 --- a/styleguide/source/_patterns/02-molecules/callout-link~external.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "calloutLink": { - "text": "Order a MassParks Pass online through Reserve America", - "type": "external" - } -} \ No newline at end of file diff --git a/styleguide/source/assets/scss/02-molecules/_callout-link.scss b/styleguide/source/assets/scss/02-molecules/_callout-link.scss index bb46cb086b..1976b53b96 100644 --- a/styleguide/source/assets/scss/02-molecules/_callout-link.scss +++ b/styleguide/source/assets/scss/02-molecules/_callout-link.scss @@ -36,10 +36,6 @@ vertical-align: middle; } - &__info { - @include ma-visually-hidden; - } - &__text { @include ma-link-underline; font-size: 1.625rem; From fc1ef0625e06de5ce7620bab05bb85cd816d6a35 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:24:47 -0400 Subject: [PATCH 119/184] DP-4176 - Illustrated link - documentation --- .../illustrated-link-without-image.md | 5 ++++ .../02-molecules/illustrated-link.md | 23 +++++++++++-------- 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md diff --git a/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md b/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md new file mode 100644 index 0000000000..f7b6269472 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Illustrated Link](/?p=molecules-illustrated-link) showing an example without an image + +### How to generate +* Set the 'image' variable to null. diff --git a/styleguide/source/_patterns/02-molecules/illustrated-link.md b/styleguide/source/_patterns/02-molecules/illustrated-link.md index 0f57d3fa5e..4292f509bd 100644 --- a/styleguide/source/_patterns/02-molecules/illustrated-link.md +++ b/styleguide/source/_patterns/02-molecules/illustrated-link.md @@ -1,12 +1,15 @@ ---- -title: Illustrated link ---- -Description: a molecule for an illustrated link. -## Status: ALPHA -### Used in: -- [@organisms/by-author/action-finder](/?p=organisms-action-finder) -- [@organisms/by-author/suggested-pages](/?p=organisms-suggested-pages) -### Required Variables +### Description: Displays a link as a card with an optional category label. + +### Status +* Stable as of 4.0.0 + +### Pattern Contains +* Decorative Link + +### Variant options +* if the image variable is set to null a [blue background](./?p=molecules-illustrated-link-without-image) will show in it's place. + +### Variables ~~~ illustratedLink { text: @@ -20,4 +23,4 @@ illustratedLink { label: type: string / optional } -~~~ \ No newline at end of file +~~~ From 88c9f3a6a72b970366142eb5b7d8fa3a4251350c Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:25:28 -0400 Subject: [PATCH 120/184] DP-4176 - Variant Documentation template --- .../source/_patterns/documentation-template-variant.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 styleguide/source/_patterns/documentation-template-variant.md diff --git a/styleguide/source/_patterns/documentation-template-variant.md b/styleguide/source/_patterns/documentation-template-variant.md new file mode 100644 index 0000000000..4a88126a72 --- /dev/null +++ b/styleguide/source/_patterns/documentation-template-variant.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. + +### How to generate +* \ No newline at end of file From c4153c001758448998e202bcd8b6a15bd3bd225b Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:25:56 -0400 Subject: [PATCH 121/184] DP-4176 - Contact List - Updated variant documentation --- .../03-organisms/by-author/contact-list-without-accordion.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md index 39b11f7b75..007ffb7ef5 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md @@ -1,2 +1,5 @@ ### Description -This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. +This is a variant of the [Contact List](/?p=organisms-contact-list) showing how it would be rendered in the right rail (note: The right railwill restyle the heading to be a Sidebar Heading). + +### How to generate +* Set the "accordion" variable to false for each of items in the "contacts" array. From 62df2adca3338b2eb4b28511912031ec9be4665f Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:29:19 -0400 Subject: [PATCH 122/184] DP-4176 - Sidebar Heading - documentation --- .../01-atoms/04-headings/sidebar-heading.md | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/styleguide/source/_patterns/01-atoms/04-headings/sidebar-heading.md b/styleguide/source/_patterns/01-atoms/04-headings/sidebar-heading.md index 84a94ba514..193c6b0dce 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/sidebar-heading.md +++ b/styleguide/source/_patterns/01-atoms/04-headings/sidebar-heading.md @@ -1,19 +1,10 @@ ---- -title: Sidebar Heading ---- -Description: An `

` element used as a subheading in the sidebar, designated by its CSS class. +### Description +An `

` element used as a subheading. Typically used in the right rail or in a 50/50 column container. -## State: ALPHA +### Status +* Stable as of 3.0.0 -### Notes: - -### Used In: -- [@pages/GUIDE-movng-to-ma-part1](/?p=pages-GUIDE-movng-to-ma-part1) -- [@pages/GUIDE-movng-to-ma-part2](/?p=pages-GUIDE-movng-to-ma-part2) -- [@pages/GUIDE-movng-to-ma-part3](/?p=pages-GUIDE-movng-to-ma-part3) -- [@organisms/by-author/quick-actions](/?p=organisms-quick-actions) - -### Variables: +### Variables ~~~ sidebarHeading: { title: From 777bdc826f22c6d6496bca9f1c4a9af88532e9bc Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:47:16 -0400 Subject: [PATCH 123/184] DP-4176 - Comp Heading - documentation --- .../04-headings/comp-heading-centered.md | 13 +++---- .../04-headings/comp-heading-subheading.md | 13 +++---- .../04-headings/comp-heading-yellow.md | 13 +++---- .../01-atoms/04-headings/comp-heading.json | 2 +- .../01-atoms/04-headings/comp-heading.md | 36 +++++++------------ .../04-headings/comp-heading~centered.json | 4 +-- .../04-headings/comp-heading~subheading.json | 4 +-- .../04-headings/comp-heading~yellow.json | 2 +- 8 files changed, 30 insertions(+), 57 deletions(-) diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-centered.md b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-centered.md index 6682524a5d..46b0b7e543 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-centered.md +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-centered.md @@ -1,10 +1,5 @@ ---- -title: Comp Heading Centered ---- -Description: Centered Variant of Comp Heading. +### Description +This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example with a centered underline. -### Notes -- _centered variable is set to 'true'_ - -### Base -- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading) +### How to generate +* Set the 'centered' variable equal to boolean value true diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-subheading.md b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-subheading.md index 92568ea4b8..ab65d26ca9 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-subheading.md +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-subheading.md @@ -1,10 +1,5 @@ ---- -title: Comp Subheading ---- -Description: Subheading Variant of Comp Heading. +### Description +This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example as a sub heading (H3). -### Notes -- _sub variable is set to 'true'_ - -### Base -- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading) +### How to generate +* Set the 'sub' variable equal to the boolean value true diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-yellow.md b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-yellow.md index df50af470b..b815560447 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-yellow.md +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading-yellow.md @@ -1,10 +1,5 @@ ---- -title: Comp Heading Yellow ---- -Description: Yellow Variant of Comp Heading. +### Description +This is a variant of the [Comp Heading](./?p=atoms-comp-heading) showing an example with a yellow underline. -### Notes: -- _color variable is set to 'yellow'_ - -### Base -- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading) +### How to generate +* Set the 'color' variable equal to "yellow" diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.json b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.json index b94ca7dfe1..e4bb2d9335 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.json +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.json @@ -1,6 +1,6 @@ { "compHeading": { - "title": "Employment", + "title": "Title text", "sub": "", "color": "", "id": "employment", diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.md b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.md index 371b78713c..b554f8e64b 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.md +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading.md @@ -1,38 +1,26 @@ ---- -title: Comp Heading ---- -Description: An `

` or `

` element with a styled underline color designated by its CSS class. +### Description +An `

` element with a styled underline color -## State: ALPHA +### Status +* Stable as of 5.0.0 -### Notes: +### Variant options +* [Sub Heading](./?p=atoms-comp-heading-subheading) by setting 'sub' to true. +* [Centered](./?p=atoms-comp-heading-centered) by setting 'centered' to true +* [Yelllow Underline](./?p=atoms-comp-heading-yellow) by setting 'color' to "yellow" - -### Used In: -- [@molecules/action-section](/?p=molecules-action-section) -- [@organisms/by-author/key-actions](/?p=organisms-key-actions) -- [@organisms/by-author/helpful-links](/?p=organisms-helpful-links) -- [@organisms/by-author/form-download](/?p=organisms-form-download) -- [@organisms/by-author/multi-row-section](/?p=organisms-multi-row-section) - -### Variables: +### Variables ~~~ compHeading: { title: type: string / required sub: - type: string ("true" || "" ) + type: string ("true" || "" ) / optional color: - type: string ("yellow") + type: string ("yellow") / optional id: - type: string + type: string (unique per page) / optional centered: type: boolean } ~~~ - -### Variations -- [@atoms/04-headings/comp-heading](/?p=atoms-comp-heading) -- [@atoms/04-headings/comp-heading-subheading](/?p=atoms-comp-heading-subheading) -- [@atoms/04-headings/comp-heading-yellow](/?p=atoms-comp-heading-yellow) -- [@atoms/04-headings/comp-heading-centered](/?p=atoms-comp-heading-centered) diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~centered.json b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~centered.json index 75a59f9909..9f92cb7dfc 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~centered.json +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~centered.json @@ -1,9 +1,9 @@ { "compHeading": { - "title": "Employment", + "title": "Title text", "sub": "", "color": "", - "id": "employment", + "id": "", "centered": "true" } } \ No newline at end of file diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~subheading.json b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~subheading.json index 6566c534c5..91b9336014 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~subheading.json +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~subheading.json @@ -1,9 +1,9 @@ { "compHeading": { - "title": "Key Actions", + "title": "Title text", "sub": true, "color": "", - "id": "key-actions", + "id": "", "centered": "" } } \ No newline at end of file diff --git a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~yellow.json b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~yellow.json index de547dc06c..590034762a 100644 --- a/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~yellow.json +++ b/styleguide/source/_patterns/01-atoms/04-headings/comp-heading~yellow.json @@ -1,6 +1,6 @@ { "compHeading": { - "title": "Employment", + "title": "Title text", "sub":"", "color": "yellow", "id": "", From 11a653f947d895fcbcb54ca9cc83f5fdeac7bf19 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:47:44 -0400 Subject: [PATCH 124/184] DP-4176 - Variants - making link relative './' --- .../_patterns/02-molecules/illustrated-link-without-image.md | 2 +- .../03-organisms/by-author/contact-list-without-accordion.md | 2 +- styleguide/source/_patterns/documentation-template-variant.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md b/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md index f7b6269472..4d1b9a0922 100644 --- a/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md +++ b/styleguide/source/_patterns/02-molecules/illustrated-link-without-image.md @@ -1,5 +1,5 @@ ### Description -This is a variant of the [Illustrated Link](/?p=molecules-illustrated-link) showing an example without an image +This is a variant of the [Illustrated Link](./?p=molecules-illustrated-link) showing an example without an image ### How to generate * Set the 'image' variable to null. diff --git a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md index 007ffb7ef5..cd327c3269 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md +++ b/styleguide/source/_patterns/03-organisms/by-author/contact-list-without-accordion.md @@ -1,5 +1,5 @@ ### Description -This is a variant of the [Contact List](/?p=organisms-contact-list) showing how it would be rendered in the right rail (note: The right railwill restyle the heading to be a Sidebar Heading). +This is a variant of the [Contact List](./?p=organisms-contact-list) showing how it would be rendered in the right rail (note: The right railwill restyle the heading to be a Sidebar Heading). ### How to generate * Set the "accordion" variable to false for each of items in the "contacts" array. diff --git a/styleguide/source/_patterns/documentation-template-variant.md b/styleguide/source/_patterns/documentation-template-variant.md index 4a88126a72..a0ec6dfd8e 100644 --- a/styleguide/source/_patterns/documentation-template-variant.md +++ b/styleguide/source/_patterns/documentation-template-variant.md @@ -1,5 +1,5 @@ ### Description -This is a variant of the [Contact List](/?p=organisms-contact-list) showing an example with accordions disabled. +This is a variant of the [Contact List](./?p=organisms-contact-list) showing an example with accordions disabled. ### How to generate * \ No newline at end of file From 9c9fcc935cd2abfb38d0f22d26c560ab645ef9b1 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 10:54:20 -0400 Subject: [PATCH 125/184] DP-4176 - Icon Links - documentation --- .../_patterns/02-molecules/icon-links.md | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/styleguide/source/_patterns/02-molecules/icon-links.md b/styleguide/source/_patterns/02-molecules/icon-links.md index 63d1c1ace8..4cddb9f078 100644 --- a/styleguide/source/_patterns/02-molecules/icon-links.md +++ b/styleguide/source/_patterns/02-molecules/icon-links.md @@ -1,22 +1,20 @@ ---- -title: Icon Links ---- -Description: A list of links with corresponding icon. +### Description +This is a list of links with a corresponding icon. -## State: ALPHA -### Notes: -The way icons are referenced will change and require an update here as well. -### Variables: +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Decorative Link + +### Variables ~~~ iconLinks: { items: [{ icon: - type: string (path to icon) / required + type: string (path to SVG icon) / required link: { - href: - type: string (url) / required - text: - type: string / required + type: decorativeLink / required } }] } From 6232107a0c2dc00572336b84b0ecdcfc194ce033 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 11:21:30 -0400 Subject: [PATCH 126/184] DP-4176 - Link List - documentation --- .../by-author/link-list-as-stacked.md | 5 ++ .../by-author/link-list-with-description.md | 5 ++ .../by-author/link-list-with-short-list.md | 5 ++ .../03-organisms/by-author/link-list.json | 18 +++---- .../03-organisms/by-author/link-list.md | 32 ++++++----- .../by-author/link-list~as-stacked.json | 36 +++++++++++++ .../by-author/link-list~centered.json | 54 ------------------- .../by-author/link-list~with-description.json | 18 +++---- ...rt.json => link-list~with-short-list.json} | 8 +-- 9 files changed, 88 insertions(+), 93 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/link-list-as-stacked.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/link-list-with-description.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/link-list-with-short-list.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/link-list~as-stacked.json delete mode 100644 styleguide/source/_patterns/03-organisms/by-author/link-list~centered.json rename styleguide/source/_patterns/03-organisms/by-author/{link-list~short.json => link-list~with-short-list.json} (65%) diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list-as-stacked.md b/styleguide/source/_patterns/03-organisms/by-author/link-list-as-stacked.md new file mode 100644 index 0000000000..35f961e478 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list-as-stacked.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Link List](./?p=organisms-link-list) pattern showing show the links in a single column. + +### How to generate +* Set the 'stacked' variable to true diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list-with-description.md b/styleguide/source/_patterns/03-organisms/by-author/link-list-with-description.md new file mode 100644 index 0000000000..ea878ab737 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list-with-description.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Link List](./?p=organisms-link-list) pattern showing an optional description. + +### How to generate +* Populate the richText variable. diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list-with-short-list.md b/styleguide/source/_patterns/03-organisms/by-author/link-list-with-short-list.md new file mode 100644 index 0000000000..b6e1d98206 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list-with-short-list.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Link List](./?p=organisms-link-list) pattern showing a short list. + +### How to generate +* Passing less than four links will render as a single column. diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list.json b/styleguide/source/_patterns/03-organisms/by-author/link-list.json index cc5f8f7c1e..7f1c5d656a 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list.json +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list.json @@ -1,7 +1,7 @@ { "linkList" : { "compHeading": { - "title": "Related Topics", + "title": "Link List", "sub": "", "color": "", "id": "", @@ -11,42 +11,42 @@ "stacked": false, "links" : [{ "href":"#", - "text":"MassParks", + "text":"Lorem ipsum dolor sit amet.", "info": "", "property": "" },{ "href":"#", - "text":"Energy & Environmental Affairs (EEA)", + "text":"Lorem ipsum dolor sit amet, consectetur.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Conservation and Recreation (DCR)", + "text":"Lorem ipsum dolor sit.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Agricultural Resources (DAR)", + "text":"Lorem ipsum dolor", "info": "", "property": "" },{ "href":"#", - "text":"Department of Energy Resources (DOER)", + "text":"Lorem ipsum dolor sit amet", "info": "", "property": "" },{ "href":"#", - "text":"Department of Energy Resources (DOER)", + "text":"Lorem ipsum dolor sit amet, consectetur.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Fish and Game (DFG)", + "text":"Lorem ipsum dolor", "info": "", "property": "" },{ "href":"#", - "text":"Department of Public Utilities (DPU)", + "text":"Lorem ipsum dolor sit ", "info": "", "property": "" }] diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list.md b/styleguide/source/_patterns/03-organisms/by-author/link-list.md index fc77dc638e..e7325a0335 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list.md +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list.md @@ -1,24 +1,23 @@ ---- -title: Link List ---- -Description: List of links that can be rendered stack or two column +### Description +List of links that can be rendered stack or as two columns -## State: Alpha +### Status +* Stable as of 5.0.0 -### Notes +### Pattern Contains +* Comp Heading atom (optional) +* Sidebar Heading (optional) +* Rich text (optional) +* Decorative Link +### Variant options +* See Variants for Comp Heading +* [Short List](./?p=organisms-link-list-with-short-list) by passing less than four items +* [Stacked](./?p=organisms-link-list-as-stacked) by setting the stacked variable to true +* With a [short description](./?p=organisms-link-list-with-description) by setting the 'richText variable' -### Contains -- [@atoms/04-headings/comp-heading](?p=atoms-comp-heading) -- [@atoms/04-headings/sidebar-heading](?p=atoms-sidebar-heading) -- [@organisms/by-author/rich-text](?p=organisms-rich-text) -- [@atoms/decorative-link](?p=atoms-decorative-link) - -### Used in: - - -### Required Variables +### Variables ~~~ linkList : { compHeading: { @@ -36,5 +35,4 @@ linkList : { type: array of object (decorative-link) / required }] } - ~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list~as-stacked.json b/styleguide/source/_patterns/03-organisms/by-author/link-list~as-stacked.json new file mode 100644 index 0000000000..3efc903722 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list~as-stacked.json @@ -0,0 +1,36 @@ +{ + "linkList" : { + "sidebarHeading": { + "title": "Link List" + }, + "compHeading": null, + "description": null, + "stacked": true, + "links" : [{ + "href":"#", + "text":"Lorem ipsum dolor sit amet.", + "info": "", + "property": "" + },{ + "href":"#", + "text":"Lorem ipsum dolor sit amet, consectetur.", + "info": "", + "property": "" + },{ + "href":"#", + "text":"Lorem ipsum dolor sit.", + "info": "", + "property": "" + },{ + "href":"#", + "text":"Lorem ipsum dolor", + "info": "", + "property": "" + },{ + "href":"#", + "text":"Lorem ipsum dolor sit amet", + "info": "", + "property": "" + }] + } +} diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list~centered.json b/styleguide/source/_patterns/03-organisms/by-author/link-list~centered.json deleted file mode 100644 index a8b5272032..0000000000 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list~centered.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "linkList" : { - "compHeading": { - "title": "Related Topics", - "sub": "", - "color": "", - "id": "", - "centered": true - }, - "description": null, - "stacked": false, - "links" : [{ - "href":"#", - "text":"MassParks", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Energy & Environmental Affairs (EEA)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Conservation and Recreation (DCR)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Agricultural Resources (DAR)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Energy Resources (DOER)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Energy Resources (DOER)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Fish and Game (DFG)", - "info": "", - "property": "" - },{ - "href":"#", - "text":"Department of Public Utilities (DPU)", - "info": "", - "property": "" - }] - } -} diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list~with-description.json b/styleguide/source/_patterns/03-organisms/by-author/link-list~with-description.json index ec5fdd14d2..1119335af8 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list~with-description.json +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list~with-description.json @@ -1,7 +1,7 @@ { "linkList" : { "compHeading": { - "title": "Related Topics", + "title": "Link List", "sub": "", "color": "", "id": "", @@ -21,42 +21,42 @@ "stacked": false, "links" : [{ "href":"#", - "text":"MassParks", + "text":"Lorem ipsum dolor sit amet.", "info": "", "property": "" },{ "href":"#", - "text":"Energy & Environmental Affairs (EEA)", + "text":"Lorem ipsum dolor sit amet, consectetur.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Conservation and Recreation (DCR)", + "text":"Lorem ipsum dolor sit.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Agricultural Resources (DAR)", + "text":"Lorem ipsum dolor", "info": "", "property": "" },{ "href":"#", - "text":"Department of Energy Resources (DOER)", + "text":"Lorem ipsum dolor sit amet", "info": "", "property": "" },{ "href":"#", - "text":"Department of Energy Resources (DOER)", + "text":"Lorem ipsum dolor sit amet, consectetur.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Fish and Game (DFG)", + "text":"Lorem ipsum dolor", "info": "", "property": "" },{ "href":"#", - "text":"Department of Public Utilities (DPU)", + "text":"Lorem ipsum dolor sit ", "info": "", "property": "" }] diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list~short.json b/styleguide/source/_patterns/03-organisms/by-author/link-list~with-short-list.json similarity index 65% rename from styleguide/source/_patterns/03-organisms/by-author/link-list~short.json rename to styleguide/source/_patterns/03-organisms/by-author/link-list~with-short-list.json index 649054c0b0..1792680779 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list~short.json +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list~with-short-list.json @@ -1,7 +1,7 @@ { "linkList" : { "compHeading": { - "title": "Related Topics", + "title": "Link List", "sub": "", "color": "", "id": "", @@ -11,17 +11,17 @@ "stacked": false, "links" : [{ "href":"#", - "text":"MassParks", + "text":"Lorem ipsum dolor sit amet.", "info": "", "property": "" },{ "href":"#", - "text":"Energy & Environmental Affairs (EEA)", + "text":"Lorem ipsum dolor sit amet, consectetur.", "info": "", "property": "" },{ "href":"#", - "text":"Department of Conservation and Recreation (DCR)", + "text":"Lorem ipsum dolor sit.", "info": "", "property": "" }] From 0491c0d871bd3017f000bae8803e42fdc066d496 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 11:24:48 -0400 Subject: [PATCH 127/184] DP-4176 - Link List - documention of Right Rail usage --- .../source/_patterns/03-organisms/by-author/link-list.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styleguide/source/_patterns/03-organisms/by-author/link-list.md b/styleguide/source/_patterns/03-organisms/by-author/link-list.md index e7325a0335..2556d32f06 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/link-list.md +++ b/styleguide/source/_patterns/03-organisms/by-author/link-list.md @@ -16,6 +16,9 @@ List of links that can be rendered stack or as two columns * [Stacked](./?p=organisms-link-list-as-stacked) by setting the stacked variable to true * With a [short description](./?p=organisms-link-list-with-description) by setting the 'richText variable' +### Usage Guidelines +* When this pattern is used in the Right Rail, the Comp Heading will render as a Sidebar Heading and the bullets will disappear. + ### Variables ~~~ From b5f0c0ceab2375075cf22238a6228d4380a65b16 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 12:58:06 -0400 Subject: [PATCH 128/184] DP-4176 - Action Finder - documentation --- .../by-author/action-finder-filter.md | 10 +- .../by-author/action-finder-see-all.md | 9 +- .../action-finder-without-background.md | 5 + .../03-organisms/by-author/action-finder.md | 103 +++++++----------- .../03-organisms/by-author/action-finder.twig | 2 +- 5 files changed, 53 insertions(+), 76 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/action-finder-without-background.md diff --git a/styleguide/source/_patterns/03-organisms/by-author/action-finder-filter.md b/styleguide/source/_patterns/03-organisms/by-author/action-finder-filter.md index a83f3ca3f5..3ca1142f0a 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/action-finder-filter.md +++ b/styleguide/source/_patterns/03-organisms/by-author/action-finder-filter.md @@ -1,6 +1,6 @@ ---- -title: Action Finder with Filter ---- -Description: Filter variant of Action Finder +### Description +This is a variant of the [Action Finder](./?p=organisms-action-finder) showing an example with a search filter. -### Base: [@organism/by-author/action-finder.twig](?p=organisms-action-finder) +### How to generate +* Shows up automatically when there are more than six non-feature links. +* Set the 'hideFilter' variable to false diff --git a/styleguide/source/_patterns/03-organisms/by-author/action-finder-see-all.md b/styleguide/source/_patterns/03-organisms/by-author/action-finder-see-all.md index 77dece8e8a..44f3dd1553 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/action-finder-see-all.md +++ b/styleguide/source/_patterns/03-organisms/by-author/action-finder-see-all.md @@ -1,6 +1,5 @@ ---- -title: Action Finder with See All ---- -Description: Action Finder with See All variant +### Description +This is a variant of the [Action Finder](./?p=organisms-action-finder) showing an example with a see all link at the bottom. -### Base: [@organism/by-author/action-finder.twig](?p=organisms-action-finder) +### How to generate +* Populate the 'seeAll' variable with 'decorativeLink' data diff --git a/styleguide/source/_patterns/03-organisms/by-author/action-finder-without-background.md b/styleguide/source/_patterns/03-organisms/by-author/action-finder-without-background.md new file mode 100644 index 0000000000..d228fb571c --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/action-finder-without-background.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Action Finder](./?p=organisms-action-finder) showing an example without a background image + +### How to generate +* Set the 'bwWide' variable to null diff --git a/styleguide/source/_patterns/03-organisms/by-author/action-finder.md b/styleguide/source/_patterns/03-organisms/by-author/action-finder.md index 037db3a499..01b5598979 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/action-finder.md +++ b/styleguide/source/_patterns/03-organisms/by-author/action-finder.md @@ -1,73 +1,46 @@ ---- -title: Action Finder ---- -Description: A collection of featured and general links +### Description +A collection of featured and general links -## State: Alpha -### Notes -- If there are more than six general links to display a search filter input will be included. -- See all link is optional -- If the wide background image is omitted, an alternative styling is applied. -- If the narrow background is provided and wide background must also be provided. +### Status +* Stable as of 5.0.0 -### Contains: -- [@molecules/keyword-search.twig](?p=molecules-keyword-search) -- [@molecules/illustrated-link.twig](?p=molecules-illustrated-link) -- [@molecules/callout-link.twig](?p=molecules-callout-link) -- [@atoms/11-text/link.twig](?p=atoms-link) +### Pattern Contains +* Callout Link +* Illustrated Link +* Decorative Link -### Used in -- [@pages/L2-nature-and-outdoor-activities.twig](?p=pages-L2-nature-and-outdoor-activities) +### Variant options +* [Without a Background](./?p=organisms-action-finder-without-background) +* [See All Link](./?p=organisms-action-finder-see-all) +* [Search Filter](./?p=organisms-action-finder-filter) -### Variables -~~~ -{ - actionFinder: { - id: - type: string/uniqueID/required - bgWide: - type: string/image-url/optional/(required with bgNarrow) - bgNarrow: - type: string/image-url/optional - title: - type: string/required - featuredHeading: - type: string/required - generalHeading: - type: string/required - seeAll: { - href: - type: string/url/required, - text: - type: string/required, - chevron: - type: 'true' - } +### Variables +~~~ +actionFinder: { + id: + type: string/uniqueID/required + bgWide: + type: string/image-url/optional/(required with bgNarrow) + bgNarrow: + type: string/image-url/optional + title: + type: string/required + featuredHeading: + type: string/required + generalHeading: + type: string/required - featuredLinks: [{ - image: - type: string/image-url/optional, - text: - type: string/required, - type: - type: null or 'external', - href: - type: string/url/required, - label: - type: string/optional - }], - - links: [{ - image: - type: string/image-url/optional, - text: - type: string/required, - type: - type: null or 'external', - href: - type: string/url/required - }] + seeAll: { + type: decorativeLink / optional } + + featuredLinks: [{ + type: illustratedLink or calloutLink / optional, + }], + + links: [{ + type: illustratedLink or calloutLink / required, + }] } -~~~ \ No newline at end of file +~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/action-finder.twig b/styleguide/source/_patterns/03-organisms/by-author/action-finder.twig index 27a3704107..00f7e2d8eb 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/action-finder.twig +++ b/styleguide/source/_patterns/03-organisms/by-author/action-finder.twig @@ -5,7 +5,7 @@ {% set noBgClass = "ma__action-finder--no-background" %} {% endif %} -{% if actionFinder.links|length <= 6 and hideFilter %} +{% if actionFinder.links|length <= 6 or hideFilter %} {% set filterClass = "ma__action-finder--no-filter" %} {% endif %} From 605e5520f8ea05539fd03d4aeb33503f75a1eb90 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 14:41:21 -0400 Subject: [PATCH 129/184] DP-4176 - Mapped Locations - documentation --- .../by-author/mapped-locations-contained.md | 5 +++ .../by-author/mapped-locations.md | 38 +++++++++++-------- 2 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/mapped-locations-contained.md diff --git a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations-contained.md b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations-contained.md new file mode 100644 index 0000000000..4891219cb6 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations-contained.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Mapped Locations](./?p=organisms-mapped-locations) pattern showing the map wrapped in a colored container. + +### How to generate +* Set the 'contained' variable to true diff --git a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.md b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.md index 7a59e8d292..e06de906c3 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.md +++ b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.md @@ -1,27 +1,33 @@ ---- -title: Mapped Locations ---- -Description: A google map with a title and see all link +### Description +A google map with a title and see all link -## State: Alpha +### Status +* Stable as of 5.0.0 -### Contains -- [@atoms/11-text/link.twig](?p=atoms-link) -- [@atoms/04-headings/compHeading.twig](?p=atoms-comp-heading) -- [@molecules/google-map.twig](?p=molecules-google-map) +### Pattern Contains +* Comp Heading (optional) +* Google Map +* Decorative Link -### Used in: -- [@organisms/by-author/location-banner](?p=organisms-location-banner) -- [@pages/ORG-Health-Services](?p=pages-ORG-Health-Services) +### Variant options +* Wrapped in a colored [container](./?p=organisms-mapped-locations-contained) -### Required Variables +### Usage Guidelines +* The decorative link is placed above the map for accessibility reasons. +### JavaScript Used +* This pattern uses JavaScript for the Google map (js/modules/googleMap.js) + +### Variables ~~~ mappedLocations: { - compHeading: see: atoms/04-headings/compHeading.json + compHeading: + type: compHeading / optional contained: type: boolean - link: see: atoms/11-text/link.json - map: see: molecules/google-map.json + link: + type: decorativeLink / optional + map: + type: googleMap / required } ~~~ From 52a23330e28dce483fa528b5e51872fc65fa2ea9 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 14:41:43 -0400 Subject: [PATCH 130/184] DP-4176 - Variant template updated --- styleguide/source/_patterns/documentation-template-variant.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide/source/_patterns/documentation-template-variant.md b/styleguide/source/_patterns/documentation-template-variant.md index a0ec6dfd8e..0eef3069bc 100644 --- a/styleguide/source/_patterns/documentation-template-variant.md +++ b/styleguide/source/_patterns/documentation-template-variant.md @@ -1,5 +1,5 @@ ### Description -This is a variant of the [Contact List](./?p=organisms-contact-list) showing an example with accordions disabled. +This is a variant of the [Contact List](./?p=organisms-contact-list) pattern showing an example with accordions disabled. ### How to generate -* \ No newline at end of file +* set the 'blah' variable to ... From 93a7197b0be48d10bc9134a634f13f0322986bc4 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 14:42:17 -0400 Subject: [PATCH 131/184] DP-4176 - Mapped Locations - Removed title from contained version --- .../by-author/mapped-locations~contained.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations~contained.json b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations~contained.json index 35fd23b2fe..dd8a223e35 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations~contained.json +++ b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations~contained.json @@ -1,12 +1,6 @@ { "mappedLocations": { - "compHeading": { - "title": "All Locations", - "sub": "", - "color": "", - "id": "", - "centered": "" - }, + "compHeading": null, "contained": true, "link": { "href": "#", From 4014afd68851fbf61b2bc7e62828561e7cfeca5d Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 14:42:41 -0400 Subject: [PATCH 132/184] DP-4176 - Callout Link External - removed variant --- .../_patterns/02-molecules/callout-link-external.md | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 styleguide/source/_patterns/02-molecules/callout-link-external.md diff --git a/styleguide/source/_patterns/02-molecules/callout-link-external.md b/styleguide/source/_patterns/02-molecules/callout-link-external.md deleted file mode 100644 index 2fe9a4ad98..0000000000 --- a/styleguide/source/_patterns/02-molecules/callout-link-external.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Callout link - external ---- -Description: External Variant of Callout link. - -### Notes: -- _type variable is set to 'external'_ - -### Base -- [@molecules/callout-link](/?p=molecules-callout-link) From 2eaedcca118eecfda690456e5f896e0c93fe2ccf Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 14:46:32 -0400 Subject: [PATCH 133/184] Mapped Locations - Fixing bug with assigning the colored background --- .../_patterns/03-organisms/by-author/mapped-locations.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.twig b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.twig index d130eefa25..050387f51d 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.twig +++ b/styleguide/source/_patterns/03-organisms/by-author/mapped-locations.twig @@ -1,4 +1,5 @@ -
+{% set modClass = mappedLocations.contained ? 'ma__mapped-locations--contained' : '' %} +
{% if mappedLocations.compHeading or mappedLocations.link %}
{% if mappedLocations.compHeading %} @@ -22,6 +23,5 @@ {% endif %} {% set googleMap = mappedLocations.googleMap %} {% include "@molecules/google-map.twig" %} -
From 0f9eb440c27fb0b0240d33451fc027e82539e56f Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 15:19:29 -0400 Subject: [PATCH 134/184] DP-4176 - Split Columns - documentation --- .../by-author/split-columns-example.md | 7 ++ .../by-author/split-columns-two.md | 6 ++ .../03-organisms/by-author/split-columns.md | 30 +++++++++ .../by-author/split-columns~example.json | 65 +++++++++++++++++++ 4 files changed, 108 insertions(+) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/split-columns-example.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/split-columns-two.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/split-columns.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/split-columns~example.json diff --git a/styleguide/source/_patterns/03-organisms/by-author/split-columns-example.md b/styleguide/source/_patterns/03-organisms/by-author/split-columns-example.md new file mode 100644 index 0000000000..ed3f413c27 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/split-columns-example.md @@ -0,0 +1,7 @@ +### Description +This is a variant of the [Split Columns](./?p=organisms-split-columns) pattern showing an example with a Link List and a Form Download. + +### How to generate +* In the first item, set 'path' to "@organisms/by-author/link-list.twig" and the 'data' to "{ "linkList" : { ... } }" +* In the second item, set 'path' to "@organisms/by-author/form-downloads.twig" and the 'data' to "{ "formDownloads": { ... } }" + diff --git a/styleguide/source/_patterns/03-organisms/by-author/split-columns-two.md b/styleguide/source/_patterns/03-organisms/by-author/split-columns-two.md new file mode 100644 index 0000000000..4557eac413 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/split-columns-two.md @@ -0,0 +1,6 @@ +### Description +This is a variant of the [Split Columns](./?p=organisms-split-columns) pattern showing an example with two columns. + +### How to generate +* Only add two items to the 'columns' array + diff --git a/styleguide/source/_patterns/03-organisms/by-author/split-columns.md b/styleguide/source/_patterns/03-organisms/by-author/split-columns.md new file mode 100644 index 0000000000..3f3e1adbf5 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/split-columns.md @@ -0,0 +1,30 @@ +### Description +This is a set of columns designed to contain other patterns. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Any pattern can be rendered in these columns by setting the 'path' variable to the location of the pattern and setting the 'data' variable to container the data object of that pattern. +** {% include item.path with item.data %} + + +### Variant options +* Can be viewed as [two columns](./?p=organisms-split-columns-two) +* [Example](./?p=organisms-split-columns-example) two column including a Linked List and a Form Download + + +### Variables +~~~ +splitColumns: { + columns: [{ + items:[{ + path: + type: string / required, + data: { + type: object / required + } + }] + }] +} +~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/split-columns~example.json b/styleguide/source/_patterns/03-organisms/by-author/split-columns~example.json new file mode 100644 index 0000000000..ef94ba0da4 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/split-columns~example.json @@ -0,0 +1,65 @@ +{ + "splitColumns": { + "columns": [{ + "items": [{ + "path": "@organisms/by-author/link-list.twig", + "data": { + "linkList" : { + "sidebarHeading": { + "title": "Related Services" + }, + "stacked": true, + "links" : [{ + "href":"#", + "text":"Job Search Help" + },{ + "href":"#", + "text":"Job Training" + },{ + "href":"#", + "text":"Career Counseling" + }] + } + } + }] + },{ + "items": [{ + "path": "@organisms/by-author/form-downloads.twig", + "data": { + "formDownloads": { + "sidebarHeading": { + "title": "Additional Resources" + }, + "downloadLinks": [{ + "downloadLink": { + "iconSize": "small", + "icon": "@atoms/05-icons/svg-doc-pdf.twig", + "decorativeLink": { + "text": "Work Search Activity Log", + "href": "#", + "info": "", + "property": "" + }, + "size": "1MB", + "format": "PDF" + } + },{ + "downloadLink": { + "iconSize": "small", + "icon": "@atoms/05-icons/svg-doc-docx.twig", + "decorativeLink": { + "text": "Name of Doc", + "href": "#", + "info": "", + "property": "" + }, + "size": "107KB", + "format": "DOCX" + } + }] + } + } + }] + }] + } +} From 7c32634148e3b69d9f0906bf3a5081c58231b101 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Mon, 24 Jul 2017 16:03:42 -0400 Subject: [PATCH 135/184] DP-4176 - Rich Text - documentation --- .../by-author/rich-text-with-title.md | 5 + .../03-organisms/by-author/rich-text.json | 209 ++++------ .../03-organisms/by-author/rich-text.md | 33 ++ .../by-author/rich-text~with-title.json | 366 +----------------- .../assets/scss/03-organisms/_rich-text.scss | 6 + 5 files changed, 124 insertions(+), 495 deletions(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/rich-text-with-title.md create mode 100644 styleguide/source/_patterns/03-organisms/by-author/rich-text.md diff --git a/styleguide/source/_patterns/03-organisms/by-author/rich-text-with-title.md b/styleguide/source/_patterns/03-organisms/by-author/rich-text-with-title.md new file mode 100644 index 0000000000..495285f662 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/rich-text-with-title.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Rich Text](./?p=organisms-rich-text) pattern showing it with a Comp Heading as the first item. + +### How to generate +* Populate the 'compHeading' object variable diff --git a/styleguide/source/_patterns/03-organisms/by-author/rich-text.json b/styleguide/source/_patterns/03-organisms/by-author/rich-text.json index cc3a297a4a..23bb1841ef 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/rich-text.json +++ b/styleguide/source/_patterns/03-organisms/by-author/rich-text.json @@ -1,92 +1,12 @@ { "richText": { + "compHeading": null, "property": "", "rteElements": [{ "path": "@atoms/04-headings/heading-2.twig", "data": { "heading2" : { - "text": "H2 - This component is usually used on a two column page" - } - } - }, - { - "path": "@atoms/04-headings/heading-3.twig", - "data": { - "heading3" : { - "text": "This is a heading 3 - H3" - } - } - }, - { - "path": "@atoms/04-headings/heading-4.twig", - "data": { - "heading4" : { - "text": "This is an Heading 4 - H4" - } - } - }, - { - "path": "@atoms/04-headings/heading-5.twig", - "data": { - "heading5" : { - "text": "This is an Heading 5 - H5" - } - } - }, - { - "path": "@atoms/04-headings/heading-6.twig", - "data": { - "heading6" : { - "text": "This is an Heading 6 - H6" - } - } - }, - { - "path": "@molecules/callout-stats.twig", - "data": { - "statsCallout": { - "pull": "right", - "stat": "$12", - "content": "standard fee for residents" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Lorem ipsum dolor sit amet, Internal Link consectetur External Link adipisicing elit. Suscipit amet sint quia est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." - } - } - }, - { - "path": "@atoms/09-media/figure.twig", - "data": { - "figure": { - "align": "", - "image": { - "alt": "alt text", - "src": "../../assets/images/placeholder/800x400.png", - "height": "", - "width": "" - }, - "caption": "" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, External Link fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." + "text": "This is an Heading-2 atom (H2)" } } }, @@ -101,7 +21,7 @@ "height": "", "width": "" }, - "caption": "" + "caption": "This is a Figure with caption floated right" } } }, @@ -109,7 +29,7 @@ "path": "@atoms/11-text/paragraph.twig", "data": { "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." + "text": "This is a paragraph atom. Lorem ipsum dolor sit amet, consectetur adipisicing elit. This is a link within a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, nemo? Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias." } } }, @@ -117,15 +37,15 @@ "path": "@atoms/11-text/paragraph.twig", "data": { "paragraph" : { - "text": "Voluptatibus, dicta consequatur placeat aliquid laudantium quo minima assumenda perspiciatis maxime id architecto tenetur a in dolore ipsa dolorum ratione aut qui ex asperiores, laborum, rerum numquam animi. Mollitia, a?" + "text": "This is another paragraph atom. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quis doloribus expedita facilis illum aperiam? This is a link within a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, nemo? Explicabo itaque possimus dignissimos?" } } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/04-headings/heading-3.twig", "data": { - "paragraph" : { - "text": "Repudiandae accusamus Internal Link distinctio dignissimos odit officiis est, ipsa ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" + "heading3" : { + "text": "This is a Heading-3 atom (H3)" } } }, @@ -133,46 +53,72 @@ "path": "@atoms/09-media/figure.twig", "data": { "figure": { - "align": "align-left", + "align": "", "image": { "alt": "alt text", - "src": "../../assets/images/placeholder/400x300.png", + "src": "../../assets/images/placeholder/800x400.png", "height": "", "width": "" }, - "caption": "" + "caption": "This is a full width Figure atom with a caption" } } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "paragraph" : { - "text": "Lorem ipsum dolor sit amet, consectetur External Link adipisicing elit. Suscipit amet sint quia External Link est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." + "heading4" : { + "text": "This is a Heading-4 atom (H4)" } } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/08-lists/unordered-list.twig", "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." - } + "unorderedList": [ + { "text": "This is a list item in an unordered list" }, + { "text": "An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line." }, + { + "text": "Lists can be nested inside of each other", + "sublist" : [ + {"text":"This is a nested list item"}, + {"text":"This is another nested list item in an unordered list"} + ] + }, + {"text":"This is the last list item"} + ] } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "paragraph" : { - "text": "Voluptatibus, dicta consequatur placeat aliquid laudantium quo minima assumenda perspiciatis maxime Internal Link id architecto tenetur a in dolore ipsa dolorum ratione aut qui ex asperiores, laborum, rerum numquam animi. Mollitia, a?" + "heading4" : { + "text": "This is a Heading-4 atom (H4)" } } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/08-lists/ordered-list.twig", "data": { - "paragraph" : { - "text": "Lorem ipsum dolor External Link sit amet, consectetur adipisicing elit. Suscipit amet sint quia est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." + "orderedList": [ + { "text": "This is a list item in an ordered list" }, + { "text": "An ordered list is a list in which the sequence of items is important." }, + { + "text": "Lists can be nested inside of each other", + "sublist" : [ + {"text":"This is a nested list item"}, + {"text":"This is another nested list item in an ordered list"} + ] + }, + {"text":"This is the last list item"} + ] + } + }, + { + "path": "@atoms/04-headings/heading-5.twig", + "data": { + "heading5" : { + "text": "This is a Heading 5 - H5" } } }, @@ -180,7 +126,7 @@ "path": "@atoms/11-text/paragraph.twig", "data": { "paragraph" : { - "text": "Repudiandae accusamus distinctio dignissimos odit officiis est, ipsa Internal Link ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" + "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." } } }, @@ -349,45 +295,42 @@ } }, { - "path": "@atoms/11-text/paragraph.twig", + "path": "@atoms/04-headings/heading-6.twig", "data": { - "paragraph" : { - "text": "Repudiandae accusamus distinctio External Link dignissimos odit officiis est, ipsa ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" + "heading6" : { + "text": "This is a Heading 6 - H6" } } }, { - "path": "@atoms/08-lists/unordered-list.twig", + "path": "@atoms/09-media/figure.twig", "data": { - "unorderedList": [ - { "text": "This is a list item in an unordered list" }, - { "text": "An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line." }, - { - "text": "Lists can be nested inside of each other", - "sublist" : [ - {"text":"This is a nested list item"}, - {"text":"This is another nested list item in an unordered list"} - ] + "figure": { + "align": "align-left", + "image": { + "alt": "alt text", + "src": "../../assets/images/placeholder/400x300.png", + "height": "", + "width": "" }, - {"text":"This is the last list item"} - ] + "caption": "This is a Figure with an optional caption floated left" + } } }, { - "path": "@atoms/08-lists/ordered-list.twig", + "path": "@atoms/11-text/paragraph.twig", "data": { - "orderedList": [ - { "text": "This is a list item in an ordered list" }, - { "text": "An ordered list is a list in which the sequence of items is important." }, - { - "text": "Lists can be nested inside of each other", - "sublist" : [ - {"text":"This is a nested list item"}, - {"text":"This is another nested list item in an ordered list"} - ] - }, - {"text":"This is the last list item"} - ] + "paragraph" : { + "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit amet sint quia est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." + } + } + }, + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph" : { + "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." + } } }] } diff --git a/styleguide/source/_patterns/03-organisms/by-author/rich-text.md b/styleguide/source/_patterns/03-organisms/by-author/rich-text.md new file mode 100644 index 0000000000..e39825e6d3 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/rich-text.md @@ -0,0 +1,33 @@ +### Description +This pattern displays the contents of a rich text editor. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Comp Heading +* Sidebar Heading +* Any pattern can be rendered in these columns by setting the 'path' variable to the location of the pattern and setting the 'data' variable to container of the data object of that pattern. +** {% include item.path with item.data %} + + +### Variant options +* With a [Heading](./?p=organisms-rich-text-with-title) + +### JavaScript Used +* This pattern uses JavaScript to wrap tables in a div with scrollbars (js/modules/richText.js) + +### Variables +~~~ +"richText": { + "property": + type: string, + "rteElements": [{ + "path": + type: string / required, + "data": { + type: object / required + } + }] +} +~~~ diff --git a/styleguide/source/_patterns/03-organisms/by-author/rich-text~with-title.json b/styleguide/source/_patterns/03-organisms/by-author/rich-text~with-title.json index 67685ad6d8..e3887f077c 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/rich-text~with-title.json +++ b/styleguide/source/_patterns/03-organisms/by-author/rich-text~with-title.json @@ -1,101 +1,12 @@ { "richText": { "compHeading": { - "title": "Rich Text Editor", + "title": "Rich Text Editor with a Comp Heading", "id": "rich-text-editor", "sub": false }, "property": "", "rteElements": [{ - "path": "@atoms/04-headings/heading-2.twig", - "data": { - "heading2" : { - "text": "H2 - This component is usually used on a two column page" - } - } - }, - { - "path": "@atoms/04-headings/heading-3.twig", - "data": { - "heading3" : { - "text": "This is a heading 3 - H3" - } - } - }, - { - "path": "@atoms/04-headings/heading-4.twig", - "data": { - "heading4" : { - "text": "This is an Heading 4 - H4" - } - } - }, - { - "path": "@atoms/04-headings/heading-5.twig", - "data": { - "heading5" : { - "text": "This is an Heading 5 - H5" - } - } - }, - { - "path": "@atoms/04-headings/heading-6.twig", - "data": { - "heading6" : { - "text": "This is an Heading 6 - H6" - } - } - }, - { - "path": "@molecules/callout-stats.twig", - "data": { - "statsCallout": { - "pull": "right", - "stat": "$12", - "content": "standard fee for residents" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Lorem ipsum dolor sit amet, Internal Link consectetur External Link adipisicing elit. Suscipit amet sint quia est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." - } - } - }, - { - "path": "@atoms/09-media/figure.twig", - "data": { - "figure": { - "align": "", - "image": { - "alt": "alt text", - "src": "../../assets/images/placeholder/800x400.png", - "height": "", - "width": "" - }, - "caption": "" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, External Link fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." - } - } - }, - { "path": "@atoms/09-media/figure.twig", "data": { "figure": { @@ -106,54 +17,7 @@ "height": "", "width": "" }, - "caption": "" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Voluptatibus, dicta consequatur placeat aliquid laudantium quo minima assumenda perspiciatis maxime id architecto tenetur a in dolore ipsa dolorum ratione aut qui ex asperiores, laborum, rerum numquam animi. Mollitia, a?" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Repudiandae accusamus Internal Link distinctio dignissimos odit officiis est, ipsa ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" - } - } - }, - { - "path": "@atoms/09-media/figure.twig", - "data": { - "figure": { - "align": "align-left", - "image": { - "alt": "alt text", - "src": "../../assets/images/placeholder/400x300.png", - "height": "", - "width": "" - }, - "caption": "" - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Lorem ipsum dolor sit amet, consectetur External Link adipisicing elit. Suscipit amet sint quia External Link est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." + "caption": "This is a Figure with caption floated right" } } }, @@ -161,7 +25,7 @@ "path": "@atoms/11-text/paragraph.twig", "data": { "paragraph" : { - "text": "Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias. Veritatis provident hic voluptate voluptatibus ullam accusantium, obcaecati tempora soluta praesentium accusamus sed dicta sapiente." + "text": "This is a paragraph atom. Lorem ipsum dolor sit amet, consectetur adipisicing elit. This is a link within a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, nemo? Explicabo itaque possimus dignissimos? Repudiandae tempore, fugit illum? Iure error omnis eveniet eius iste molestias." } } }, @@ -169,231 +33,9 @@ "path": "@atoms/11-text/paragraph.twig", "data": { "paragraph" : { - "text": "Voluptatibus, dicta consequatur placeat aliquid laudantium quo minima assumenda perspiciatis maxime Internal Link id architecto tenetur a in dolore ipsa dolorum ratione aut qui ex asperiores, laborum, rerum numquam animi. Mollitia, a?" + "text": "This is another paragraph atom. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quis doloribus expedita facilis illum aperiam? This is a link within a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, nemo? Explicabo itaque possimus dignissimos?" } } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Lorem ipsum dolor External Link sit amet, consectetur adipisicing elit. Suscipit amet sint quia est porro aperiam soluta reiciendis labore a maiores architecto illo aspernatur ad nihil laudantium magni dolor, ea nulla." - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Repudiandae accusamus distinctio dignissimos odit officiis est, ipsa Internal Link ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" - } - } - }, - { - "path": "@atoms/10-table/table.twig", - "data": { - "table": { - "head": { - "rows": [{ - "rowSpanOffset":false, - "cells":[{ - "heading": true, - "colspan": "", - "rowspan": "", - "text": "Type" - }, - { - "heading": true, - "colspan": "", - "rowspan": "", - "text": "Name" - }, - { - "heading": true, - "colspan": "", - "rowspan": "", - "text": "Fee" - }] - }] - }, - "bodies": [{ - "rows": [{ - "rowSpanOffset":false, - "cells":[{ - "heading": true, - "colspan": "", - "rowspan": "4", - "text": "Freshwater Fishing" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen or Non-Resident Fishing" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "$27.50" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen or Minor Fishing (Age 15-17)" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "FREE" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen Fishing (Age 65-69)" - },{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "$16.25" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen Fishing (Aged 70 or Over)" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "FREE" - }] - }] - }, - { - "rows": [{ - "rowSpanOffset":false, - "cells":[{ - "heading": true, - "colspan": "", - "rowspan": "4", - "text": "Hunting" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen Hunting" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "$27.50" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Citizen Hunting, (Age 65-69)" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "$16.25" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident and Non-Resident Citizen Hunting" - },{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "FREE" - }] - }, - { - "rowSpanOffset":true, - "cells":[{ - "heading": false, - "colspan": "", - "rowspan": "", - "text": "Resident Hunting" - }, - { - "heading": false, - "colspan": "", - "rowspan": "", - "text": "$27.50" - }] - }] - }] - } - } - }, - { - "path": "@atoms/11-text/paragraph.twig", - "data": { - "paragraph" : { - "text": "Repudiandae accusamus distinctio External Link dignissimos odit officiis est, ipsa ipsam magnam fuga! Rerum rem aperiam nobis quos blanditiis. Inventore, iusto ducimus pariatur autem deserunt illo, aut, quibusdam sint eum iure molestiae!" - } - } - }, - { - "path": "@atoms/08-lists/unordered-list.twig", - "data": { - "unorderedList": [ - { "text": "This is a list item in an unordered list" }, - { "text": "An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line." }, - { - "text": "Lists can be nested inside of each other", - "sublist" : [ - {"text":"This is a nested list item"}, - {"text":"This is another nested list item in an unordered list"} - ] - }, - {"text":"This is the last list item"} - ] - } - }, - { - "path": "@atoms/08-lists/ordered-list.twig", - "data": { - "orderedList": [ - { "text": "This is a list item in an ordered list" }, - { "text": "An ordered list is a list in which the sequence of items is important." }, - { - "text": "Lists can be nested inside of each other", - "sublist" : [ - {"text":"This is a nested list item"}, - {"text":"This is another nested list item in an ordered list"} - ] - }, - {"text":"This is the last list item"} - ] - } }] } } diff --git a/styleguide/source/assets/scss/03-organisms/_rich-text.scss b/styleguide/source/assets/scss/03-organisms/_rich-text.scss index abee1e8273..cc07e6a285 100644 --- a/styleguide/source/assets/scss/03-organisms/_rich-text.scss +++ b/styleguide/source/assets/scss/03-organisms/_rich-text.scss @@ -48,6 +48,7 @@ $rich-text-spacing-mobile: 1.5rem; h3:not(.ma__sidebar-heading), h4 { @include ma-comp-heading; + display: block; } h2 { @@ -68,9 +69,14 @@ $rich-text-spacing-mobile: 1.5rem; } h5 { + display: block; margin-bottom: 0; } + h6 { + display: block; + } + p { margin-bottom: $rich-text-spacing-mobile; From eca96ed502ab19d92c0a8249ab855150d98ab1e5 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 11:13:17 -0400 Subject: [PATCH 136/184] DP-4176 - Download Link - documentation --- .../02-molecules/download-link-as-form.md | 5 +++ .../02-molecules/download-link-as-generic.md | 5 +++ .../download-link-with-small-icon.md | 5 +++ .../_patterns/02-molecules/download-link.json | 2 +- .../_patterns/02-molecules/download-link.md | 31 +++++++++++++++++++ .../_patterns/02-molecules/download-link.twig | 5 ++- .../02-molecules/download-link~as-form.json | 2 +- .../download-link~as-generic.json | 14 +++++++++ .../download-link~with-small-icon.json | 2 +- 9 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 styleguide/source/_patterns/02-molecules/download-link-as-form.md create mode 100644 styleguide/source/_patterns/02-molecules/download-link-as-generic.md create mode 100644 styleguide/source/_patterns/02-molecules/download-link-with-small-icon.md create mode 100644 styleguide/source/_patterns/02-molecules/download-link.md create mode 100644 styleguide/source/_patterns/02-molecules/download-link~as-generic.json diff --git a/styleguide/source/_patterns/02-molecules/download-link-as-form.md b/styleguide/source/_patterns/02-molecules/download-link-as-form.md new file mode 100644 index 0000000000..d5dc35f858 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/download-link-as-form.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Download Link](./?p=molecules-download-link) pattern showing an example with a link to a form page. + +### How to generate +* set the "format" variable to "form" diff --git a/styleguide/source/_patterns/02-molecules/download-link-as-generic.md b/styleguide/source/_patterns/02-molecules/download-link-as-generic.md new file mode 100644 index 0000000000..f0816c3ef0 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/download-link-as-generic.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Download Link](./?p=molecules-download-link) pattern showing an example link with a generic icon. + +### How to generate +* set the "icon" variable to "@atoms/05-icons/svg-doc-generic.twig" diff --git a/styleguide/source/_patterns/02-molecules/download-link-with-small-icon.md b/styleguide/source/_patterns/02-molecules/download-link-with-small-icon.md new file mode 100644 index 0000000000..a025821fd5 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/download-link-with-small-icon.md @@ -0,0 +1,5 @@ +### Description +This is a variant of the [Download Link](./?p=molecules-download-link) pattern showing an example link with small icon. + +### How to generate +* set the "iconSize" variable to "small" diff --git a/styleguide/source/_patterns/02-molecules/download-link.json b/styleguide/source/_patterns/02-molecules/download-link.json index 253c8d5e00..c1c11c8a5a 100644 --- a/styleguide/source/_patterns/02-molecules/download-link.json +++ b/styleguide/source/_patterns/02-molecules/download-link.json @@ -3,7 +3,7 @@ "iconSize": "", "icon": "@atoms/05-icons/svg-doc-docx.twig", "decorativeLink": { - "text": "Online Form: Out-of-Country Driver's License Conversion", + "text": "Link to a file for download", "href": "#", "info": "", "property": "" diff --git a/styleguide/source/_patterns/02-molecules/download-link.md b/styleguide/source/_patterns/02-molecules/download-link.md new file mode 100644 index 0000000000..525c0954a5 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/download-link.md @@ -0,0 +1,31 @@ +### Description +This pattern is a link to a file or online form. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Decorative Link + +### Variant options +* You can use [small](./?p=molecules-download-link-with-small-icon) icons +* You can link to an [online form](./?p=molecules-download-link-as-form) icons +* There are icons in Mayflower for 'docx', 'pdf', and 'xlsx' file formats along with a [generic](./?p=molecules-download-link-as-generic) icon for other formats + + +### Variables +~~~ +downloadLink: { + iconSize: + type: string (null or 'small') / optional + icon: + type: string (icon path) / optional + decorativeLink: { + type: decorativeLink / required + } + size: + type: string (filesize) / optional + format: + type: string (fileformat or 'form') / optional +} +~~~ diff --git a/styleguide/source/_patterns/02-molecules/download-link.twig b/styleguide/source/_patterns/02-molecules/download-link.twig index fc4a21ce0a..e2edcfc57e 100644 --- a/styleguide/source/_patterns/02-molecules/download-link.twig +++ b/styleguide/source/_patterns/02-molecules/download-link.twig @@ -1,6 +1,5 @@ -{% if downloadLink.iconSize %} - {% set sizeClass = "ma__download-link--" ~ downloadLink.iconSize %} -{% endif %} +{% set sizeClass = downloadLink.iconSize ? "ma__download-link--" ~ downloadLink.iconSize : "" %} +
{% if downloadLink.icon %}
diff --git a/styleguide/source/_patterns/02-molecules/download-link~as-form.json b/styleguide/source/_patterns/02-molecules/download-link~as-form.json index f7faae2564..76a3d1782f 100644 --- a/styleguide/source/_patterns/02-molecules/download-link~as-form.json +++ b/styleguide/source/_patterns/02-molecules/download-link~as-form.json @@ -3,7 +3,7 @@ "iconSize": "", "icon": "@atoms/05-icons/svg-laptop.twig", "decorativeLink": { - "text": "Online Form: Out-of-Country Driver's License Conversion", + "text": "Online form: Link to an online form", "href": "#", "info": "", "property": "" diff --git a/styleguide/source/_patterns/02-molecules/download-link~as-generic.json b/styleguide/source/_patterns/02-molecules/download-link~as-generic.json new file mode 100644 index 0000000000..26b51e5594 --- /dev/null +++ b/styleguide/source/_patterns/02-molecules/download-link~as-generic.json @@ -0,0 +1,14 @@ +{ + "downloadLink": { + "iconSize": "", + "icon": "@atoms/05-icons/svg-doc-generic.twig", + "decorativeLink": { + "text": "Link with a generic icon", + "href": "#", + "info": "", + "property": "" + }, + "size": "40kb", + "format": "JSON" + } +} diff --git a/styleguide/source/_patterns/02-molecules/download-link~with-small-icon.json b/styleguide/source/_patterns/02-molecules/download-link~with-small-icon.json index dd87d78e8f..4089e246c6 100644 --- a/styleguide/source/_patterns/02-molecules/download-link~with-small-icon.json +++ b/styleguide/source/_patterns/02-molecules/download-link~with-small-icon.json @@ -3,7 +3,7 @@ "iconSize": "small", "icon": "@atoms/05-icons/svg-doc-docx.twig", "decorativeLink": { - "text": "Online Form: Out-of-Country Driver's License Conversion", + "text": "link using a small icon", "href": "#", "info": "", "property": "" From 830110c4d9dc7e4fa49937a9b9c40ab7cf3d6e9f Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 11:13:37 -0400 Subject: [PATCH 137/184] DP-4176 - Forms Downloads - documentation --- .../by-author/form-downloads.json | 28 ++++++++++++++++++- .../03-organisms/by-author/form-downloads.md | 27 ++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 styleguide/source/_patterns/03-organisms/by-author/form-downloads.md diff --git a/styleguide/source/_patterns/03-organisms/by-author/form-downloads.json b/styleguide/source/_patterns/03-organisms/by-author/form-downloads.json index 22fe6e8f0b..8834e3f611 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/form-downloads.json +++ b/styleguide/source/_patterns/03-organisms/by-author/form-downloads.json @@ -30,12 +30,38 @@ "size": "40kb", "format": "DOCX" } + },{ + "downloadLink": { + "iconSize": "", + "icon": "@atoms/05-icons/svg-doc-generic.twig", + "decorativeLink": { + "text": "Generic type of download", + "href": "#", + "info": "", + "property": "" + }, + "size": "40kb", + "format": "???" + } },{ "downloadLink": { "iconSize": "", "icon": "@atoms/05-icons/svg-laptop.twig", "decorativeLink": { - "text": "Online Form: Out-of-Country Driver's License Conversion", + "text": "Link to an online form", + "href": "#", + "info": "", + "property": "" + }, + "size": "", + "format": "form" + } + },{ + "downloadLink": { + "iconSize": "", + "icon": "", + "decorativeLink": { + "text": "Link to another page", "href": "#", "info": "", "property": "" diff --git a/styleguide/source/_patterns/03-organisms/by-author/form-downloads.md b/styleguide/source/_patterns/03-organisms/by-author/form-downloads.md new file mode 100644 index 0000000000..b959378cd9 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/form-downloads.md @@ -0,0 +1,27 @@ +### Description +This pattern shows a list of links to downloadable files and online forms. You can also include a link to another page, but that should be used sparingly. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Comp Heading +* Sidebar Heading +* Download Link + +### Variables +~~~ +formDownloads: { + compHeading: { + type: compHeading / optional + }, + sidebarHeading: { + type: sidebarHeading / optional + }, + "downloadLinks": [{ + "downloadLink": { + type: downloadLink / required + } + }] +} +~~~ From d0b777f8084ce39b896d9ef611bcb5179c7ee8d0 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 14:20:27 -0400 Subject: [PATCH 138/184] DP-4176 - Utility Panel - documentation --- .../03-organisms/by-template/utility-panel.md | 35 ++++++++++--------- .../06-theme/03-organisms/_utility-panel.scss | 3 ++ 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/styleguide/source/_patterns/03-organisms/by-template/utility-panel.md b/styleguide/source/_patterns/03-organisms/by-template/utility-panel.md index 73c3e560f5..90edf2ef19 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/utility-panel.md +++ b/styleguide/source/_patterns/03-organisms/by-template/utility-panel.md @@ -1,22 +1,23 @@ ---- -title: Utility Panel ---- -Description: A Rich Text field followed by 1-3 decorative links. +### Description +A Rich Text field followed by 1-3 optional decorative links. -## State: Alpha +### Status +* Stable as of 5.0.0 -### Contains -- [@organisms/by-author/rich-text](?p=organisms-rich-text) -- [@atoms/decorative-link](?p=atoms-decorative-link) +### Pattern Contains +* Rich Text +* Decorative Link -### Required Variables -~~~ - -description: - See: [@organisms/by-author/rich-text](?p=organisms-rich-text) - -(optional) links: [{ - See: [@atoms/decorative-link](?p=atoms-decorative-link) -}] +### JavaScript Used +* Clickable object (js/modules/clickable.js) +### Variables +~~~ +contactList: { + description: + type: richText / required + }, + links:[{ + type: decorativeLink / optional + }] ~~~ diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_utility-panel.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_utility-panel.scss index 3934b05d69..ecc0d23098 100644 --- a/styleguide/source/assets/scss/06-theme/03-organisms/_utility-panel.scss +++ b/styleguide/source/assets/scss/06-theme/03-organisms/_utility-panel.scss @@ -1,4 +1,6 @@ .ma__utility-panel { + background-color: $c-theme-primary; + color: $c-font-inverse; &__description { font-weight: 300; @@ -8,6 +10,7 @@ background-color: rgba($c-white, 0.2); a { + color: $c-font-inverse; font-weight: 500; } From d7644751c0552b7bab74b975c9fe5a414d290e2b Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 14:20:48 -0400 Subject: [PATCH 139/184] DP-4176 - Utility Nav - documentation --- styleguide/source/_data/utilityNav.json | 19 -------- .../03-organisms/by-template/utility-nav.md | 43 +++++++++++++------ 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/styleguide/source/_data/utilityNav.json b/styleguide/source/_data/utilityNav.json index cfcf16735d..85c846cf7c 100644 --- a/styleguide/source/_data/utilityNav.json +++ b/styleguide/source/_data/utilityNav.json @@ -1,24 +1,5 @@ { "utilityNav": { - "dropdown": { - "labelText": "Language:", - "id": "lang-select", - "name": "lang-select", - "options": [{ - "text": "Default language: English", - "value": "en" - },{ - "text": "Français", - "value": "fr" - },{ - "text": "Deutsch", - "value": "de" - },{ - "text": "Español", - "value": "es" - }] - }, - "items": [{ "text": "State Organizations", "ariaLabelText": "", diff --git a/styleguide/source/_patterns/03-organisms/by-template/utility-nav.md b/styleguide/source/_patterns/03-organisms/by-template/utility-nav.md index 7d45b68c28..7b81bedcc6 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/utility-nav.md +++ b/styleguide/source/_patterns/03-organisms/by-template/utility-nav.md @@ -1,13 +1,30 @@ ---- -title: Utility Nav ---- -Description: Sitewide utility links -## Status: Alpha -### Notes: -- The way the icons are rendered is deprecrated and will need to be updated here once refactored. -### Contains: -- [@molecules/login-util](?p=molecules-login-util) -- [@molecules/state-util](?p=molecules-state-util) - -### Used in: -- [@organisms/by-template/header](?p=organisms-header) +### Description +Sitewide utility links + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Utility Panel + +### JavaScript Used +* Utility Nav (js/modules/utilNav.js) + +### Variables +~~~ +utilityNav: { + items: [{ + text: + type: string / required + ariaLabelText: + type: string / optional + icon: + type: string (path to icon) / required + closeText: + type: string / required + panel: { + type: utilityPanel / required + } + }] +} +~~~ From 5b11ef678315a790e39b762af339e08759dd37b7 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 14:21:11 -0400 Subject: [PATCH 140/184] DP-4176 - Header - documentation --- .../03-organisms/by-template/header.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 styleguide/source/_patterns/03-organisms/by-template/header.md diff --git a/styleguide/source/_patterns/03-organisms/by-template/header.md b/styleguide/source/_patterns/03-organisms/by-template/header.md new file mode 100644 index 0000000000..948b0a8c22 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-template/header.md @@ -0,0 +1,30 @@ +### Description +This is a pattern for the site header. + +### Status +* Stable as of 5.0.0 + +### Pattern Contains +* Utility Nav +* Site Logo +* Header Search +* Main Nav + +### JavaScript Used +* Header Search (js/modules/mobileNav.js) +* Scrolling Nav (js/modules/scrollAnchors.js) +* Utility Nav (js/modules/utilNav.js) +* Main Nav (js/modules/mainNav.js) + +### Variables +~~~ +utilityNav: { + type: utilityNav / required +} +headerSearch : { + type: headerSearch / required +} +mainNav: [{ + type: mainNav / required +}] +~~~ From 9530661d4674cd9e3a9f4c10a5a42c2e3a6a2b47 Mon Sep 17 00:00:00 2001 From: Jonathan Dallas Date: Tue, 25 Jul 2017 15:07:14 -0400 Subject: [PATCH 141/184] DP-4176 - Button Search - documentation --- .../01-atoms/01-buttons/button-search.md | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md b/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md index df9ce260eb..4279dd63b6 100644 --- a/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md +++ b/styleguide/source/_patterns/01-atoms/01-buttons/button-search.md @@ -1,22 +1,13 @@ ---- -title: Button Search ---- -Description: A `