diff --git a/README.md b/README.md index c9251bc58a..a79b35f7f0 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ Please follow the steps in [Contributing docs](.github/CONTRIBUTING.md) to set u ### Developer Deployment -Please see [Deployment docs](docs/developer-deploy.md) for steps on deploying development work to a fork of Mayflower's Github Pages. - +Every time a branch passes CircleCI it will deploy the code to a the following URL `http://mayflower.digital.mass.gov/b//index.html` which will allow the developer to share the URL with reviewers to test their code. + ### Production Deployment Mayflower release managers with the necessary repo permissions can see [Release docs](docs/release.md) for steps on deploying code to production (i.e. do a release). diff --git a/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png b/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png index a7cdaff1b2..7cf463de73 100644 Binary files a/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png and b/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png differ diff --git a/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png b/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png index 9370a10a1d..7ee190b480 100644 Binary files a/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png and b/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png differ diff --git a/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png b/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png index afc33721ca..560c6b1ac5 100644 Binary files a/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png and b/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png differ diff --git a/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png b/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png index d229ca4862..c4e43983de 100644 Binary files a/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png and b/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png differ diff --git a/backstopjs/reference/regression_page_organization_0_document_0_phone.png b/backstopjs/reference/regression_page_organization_0_document_0_phone.png index 89188d603a..1cf83d8e53 100644 Binary files a/backstopjs/reference/regression_page_organization_0_document_0_phone.png and b/backstopjs/reference/regression_page_organization_0_document_0_phone.png differ diff --git a/backstopjs/reference/regression_page_organization_0_document_1_tablet.png b/backstopjs/reference/regression_page_organization_0_document_1_tablet.png index e783bea5b2..dfcfa39f8c 100644 Binary files a/backstopjs/reference/regression_page_organization_0_document_1_tablet.png and b/backstopjs/reference/regression_page_organization_0_document_1_tablet.png differ diff --git a/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png b/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png index 29b4c79670..5c3b22c075 100644 Binary files a/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png and b/backstopjs/reference/regression_page_people-listing_0_document_0_phone.png differ diff --git a/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png b/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png index 2cf2f39925..23ce068fd1 100644 Binary files a/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png and b/backstopjs/reference/regression_page_people-listing_0_document_1_tablet.png differ diff --git a/docs/developer-deploy.md b/docs/developer-deploy.md deleted file mode 100644 index 9c3f6e8678..0000000000 --- a/docs/developer-deploy.md +++ /dev/null @@ -1,33 +0,0 @@ -# Developer Deployment - -## Prerequisite - -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. - -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 ` - - 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 - -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. 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! Just visit: -``` -http://.github.io/mayflower -``` diff --git a/docs/release.md b/docs/release.md index d1f91034e5..598db1d2db 100644 --- a/docs/release.md +++ b/docs/release.md @@ -17,7 +17,7 @@ Mayflower release managers with the necessary repo permissions can follow these 1. Run `npm install` in case the release includes new packages. 1. Update the version of the npm package by editing the `version` field in the `package.json` with `#.#.#` for the release. 1. Commit your version change from `package.json`. - 1. Push release branch to `massgov/mayflower` (i.e. `git push release-#.#.#`). *Note that once this release branch has been pushed to GitHub a `http://mayflower.digital.mass.gov/b/release-#.#.#` will be deployed to Production for testing.* + 1. Push release branch to `massgov/mayflower` (i.e. `git push release-#.#.#`). ## Deployment 1. Wait for [the circle build](https://circleci.com/gh/massgov/mayflower) to pass, which will deploy your release branch to staging automagically :). @@ -46,12 +46,3 @@ Mayflower release managers with the necessary repo permissions can follow these 1. Go to the list of issues contained within the release version and copy the URL (link to this issue from release notes). 1. Follow the [Communicate Releases](https://wiki.state.ma.us/display/massgovredesign/Communicating+Releases) instructions for Deployment Completed to email Release Notes to the team. 1. Celebrate!! - -## Rollback -In the event that a release needs to be rolled back from production, follow these steps: - -1. Pull down and checkout the prior release tag and check it out by running `git pull --tags` then `git checkout ` (*Note: you should see a message from git that you are in a [detached head state](https://www.git-tower.com/learn/git/faq/detached-head-when-checkout-commit) and that is okay.*) -1. Make sure you are in `/styleguide` directory -1. Deploy prior release tag to S3 (note: you must have the S3 credentials to do this): - 1. `gulp patternlab:release` -1. Validate rollback by browsing to [Prod](http://mayflower.digital.mass.gov) as well as `https://mayflower.digital.mass.gov//` and verifying that the home page reflects the correct version diff --git a/docs/visual-regression.md b/docs/visual-regression.md index 26c75cd628..34180e4445 100644 --- a/docs/visual-regression.md +++ b/docs/visual-regression.md @@ -8,8 +8,8 @@ This repository uses [BackstopJS](https://garris.github.io/BackstopJS/) for visu * [Docker and Docker Compose](https://www.docker.com/community-edition#/download) must be installed. ### Workflow: - -To check how your current work compares with the reference screenshots that are committed to the repository, run the following: +First, ensure you've run a pattern lab build. +Then, to check how your current work compares with the reference screenshots that are committed to the repository, run the following: ```bash docker-compose run backstop test diff --git a/release-notes.md b/release-notes.md index 062e710fbc..007d44fa82 100644 --- a/release-notes.md +++ b/release-notes.md @@ -13,6 +13,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) **For example** - DP-1234: The short description text on a [service detail](http://mayflower.digital.mass.gov/?p=pages-detail-for-service-howto-location) page banner ([@organisms/by-template/page-banner](http://mayflower.digital.mass.gov/?p=organisms-page-banner)) should now render ([PR #493](https://github.com/massgov/mayflower/pull/493)) +## 5.23.0 (5/15/2018) + +### Added +- DP-8825: Adds an expandable/accordion variation to the teaser listing organism. +- DP-8942: Add missing content examples in JSON for elected official page. + +### Changed +- DP-8924: reorder sections in organization page to have featured topics above news. +- DP-8940: Increases font size of short description on org pages to match production website +- DP-8948: Close up contact information on org pages extra horizontal spacing + +### Fixed +- DP-8890: Always print expander and let JavaScript control visibility. + + ## 5.22.0 (5/9/2018) ### Added diff --git a/scripts/deploy-gh-pages.sh b/scripts/deploy-gh-pages.sh deleted file mode 100755 index ea4707c4c6..0000000000 --- a/scripts/deploy-gh-pages.sh +++ /dev/null @@ -1,298 +0,0 @@ -#!/bin/bash -# -# Deploying Mayflower to Github Pages -# ----------------------------------------------------- -# -# Run from the repo root, must have a clean working directory. -# -# 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 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) -# -# 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 -# 2. Attempt to checkout passed build source -# 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. Remove the temp directory -# 12. Check out prior branch - -# @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 { - # 10. Get back to mayflower/styleguide directory - line="Getting back to previous directory..." - log "log" "$line"; - - cd - - - # 11. Remove temp directory - line="Cleaning up tmp dir..." - log "log" "$line"; - - rm -rf ~/tmp/mayflower - - # 12. Check out the previous branch - line="Checking out your previous branch..." - log "log" "$line"; - - 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 [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;34m [info] "${theMessage}"\x1B[0m \n" - fi -} - -# Default arguments -targetEnv=false -buildSrc=false -cname=false -assetsPath=false - -# Get passed arguments -while getopts :b:t:c:a: option -do - case "${option}" in - a) assetsPath=${OPTARG};; - b) buildSrc=${OPTARG};; - t) owner=${OPTARG} - targetEnv="${owner}/mayflower";; - c) cname=${OPTARG};; - : ) line="Missing argument for parameter [-${OPTARG}]"; - log "error" "$line"; - exit 1;; - \? ) line="Whoops, this script only accepts arguments for: git build branch/tag [-b] and target repo [-t]"; - log "error" "$line"; - exit 1;; - esac -done - -# 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]." - log "error" "$line"; - 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]." - 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." - log "error" "$line"; - exit 1; -else - line="Validated git build source: ${buildSrc}..." - log "success" "$line"; -fi - -# 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 reach remote repo at '${TARGET_URL}'. Check your target repo, should be something like '/mayflower'." - log "error" "$line"; - exit 1; -else - line="Validated target remote repo url: ${TARGET_URL}..." - log "success" "$line"; -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 ([-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 - - # 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 [-c] i.e. 'mayflower.digital.mass.gov'." - log "error" "$line"; - exit 1; - fi -fi - -# Local variables -NOW=$(date +"%c") -MESSAGE="GH Pages deployed ${buildSrc} on: ${NOW}" - -# 2. Checkout the build source -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" -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 -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 ]; - 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" - -if [ ! "${cname}" = false ]; -then - domain="http://${cname}" - if [ ! "${assetsPath}" = false ]; - then - assetsPath="${assetsPath}" - else - assetsPath="assets" - fi -else - assetsPath="mayflower/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 -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 - -# 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"; - -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 https://${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 diff --git a/styleguide/package.json b/styleguide/package.json index b0e3d20750..9369d8e296 100644 --- a/styleguide/package.json +++ b/styleguide/package.json @@ -1,7 +1,7 @@ { "name": "@massds/mayflower", "description": "Open source UI components and visual style guide for Massachusetts government websites", - "version": "5.22.0", + "version": "5.23.0", "author": "Massachusetts Digital Services (MDS)", "repository": { "type": "git", diff --git a/styleguide/source/_patterns/03-organisms/by-author/short-description.json b/styleguide/source/_patterns/03-organisms/by-author/short-description.json index d9b2943fc4..39889d33ef 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/short-description.json +++ b/styleguide/source/_patterns/03-organisms/by-author/short-description.json @@ -2,9 +2,9 @@ "short_description": { "richText": { "rteElements": [{ - "path": "@atoms/04-headings/heading-6.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "heading6" : { + "heading4" : { "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " } } diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.md b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.md index 35c4444ee1..6d1bc1399c 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.md +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.md @@ -22,6 +22,12 @@ teaserListing: { }, stacked: type: boolean / optional, + expandable: + type: boolean / optional, + accordionLabel: + type: string / required if expandable is true + itemsLabel: + type: string / required if expandable is true featuredItems: [{ type: generalTeaser / optional }], diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.twig b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.twig index de67884581..4c6c8eafe5 100644 --- a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.twig +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing.twig @@ -1,10 +1,12 @@ {% set teaserHeading = 2 %} {% set stacked = teaserListing.stacked ? 'stacked': 'side-by-side' %} -{% set gridTwoColumns = teaserListing.contained and teaserListing.gridTwoColumns ? 'ma__teaser-listing__2-col-grid' : 'ma__teaser-listing__3-col-grid' %} +{% set columnCount = teaserListing.contained and teaserListing.gridTwoColumns ? 2 : 3 %} +{% set columnClass = 2 ? 'ma__teaser-listing__2-col-grid' : 'ma__teaser-listing__3-col-grid' %} +{% set shownNumber = teaserListing.shownNumber ? teaserListing.shownNumber : columnCount %}
-
+
{% if teaserListing.compHeading %} {% set compHeading = teaserListing.compHeading %} {% include "@atoms/04-headings/comp-heading.twig" %} @@ -30,14 +32,39 @@
{% endif %} {% if teaserListing.items %} -
    - {% for generalTeaser in teaserListing.items %} -
  • - {% set generalTeaser = generalTeaser|merge({"level":teaserHeading}) %} - {% include "@molecules/general-teaser.twig" %} -
  • - {% endfor %} -
+ {% if teaserListing.expandable %} +
    + {% for generalTeaser in teaserListing.items[:shownNumber] %} + {% block teaserListItem %} +
  • + {% set generalTeaser = generalTeaser|merge({"level":teaserHeading}) %} + {% include "@molecules/general-teaser.twig" %} +
  • + {% endblock %} + {% endfor %} +
+ {% if teaserListing.items|length > shownNumber %} +
+
    + {% for generalTeaser in teaserListing.items[shownNumber:last] %} + {{ block('teaserListItem') }} + {% endfor %} +
+
+ + {% endif %} + {% else %} +
    + {% for generalTeaser in teaserListing.items %} + {{ block('teaserListItem') }} + {% endfor %} +
+ {% endif %} {% endif %} {% if teaserListing.more %}
diff --git a/styleguide/source/_patterns/03-organisms/by-author/teaser-listing~as-expandable.json b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing~as-expandable.json new file mode 100644 index 0000000000..366a4f3301 --- /dev/null +++ b/styleguide/source/_patterns/03-organisms/by-author/teaser-listing~as-expandable.json @@ -0,0 +1,249 @@ +{ + "teaserListing": { + "stacked": true, + "expandable": true, + "shownNumber": 4, + "gridTwoColumns": true, + "moreItemsLabel": "Show all board members", + "lessItemsLabel": "Show fewer board members", + "compHeading": { + "title": "Teaser Listing", + "sub": "", + "color": "", + "id": "", + "centered": "" + }, + "description" : { + "text": "This is an optional descriptive paragraph field, explaining the listings below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget." + }, + "featuredItems": [{ + "image": { + "src":"../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Eyebrow", + "title" : { + "href":"#", + "text":"Massachusetts Health Officials Release Quarterly Report on Opioid OD Deaths", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Health & Human Services, Public Safety", + "4/4/2017" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph" : { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + },{ + "image": { + "src":"../../assets/images/placeholder/172x228.png", + "alt": "placeholder image", + "width": "172", + "height": "228" + }, + "eyebrow": "Eyebrow", + "title" : { + "text":"MassParks", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Org Name", + "4/3/2017" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph" : { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }], + "items": [ + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + },{ + "path": "@atoms/decorative-link.twig", + "data": { + "decorativeLink": { + "href": "#", + "text": "More", + "chevron": true, + "label": "" + } + } + } + ] + }, + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "contents-stacked", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + } + ], + "more":{ + "href": "#", + "text": "See all news and announcements", + "chevron": true, + "label": "See all news and announcements for the blah blah location" + } + } +} diff --git a/styleguide/source/_patterns/03-organisms/by-template/sticky-toc.twig b/styleguide/source/_patterns/03-organisms/by-template/sticky-toc.twig index db8b7b8da1..a63030fcca 100644 --- a/styleguide/source/_patterns/03-organisms/by-template/sticky-toc.twig +++ b/styleguide/source/_patterns/03-organisms/by-template/sticky-toc.twig @@ -17,12 +17,10 @@ {% endfor %}
- {% if stickyTOC.seeAll %} - - {% endif %} +
diff --git a/styleguide/source/_patterns/05-pages/organization-elected-official.json b/styleguide/source/_patterns/05-pages/organization-elected-official.json index 7312f4ab8a..c1f3824334 100644 --- a/styleguide/source/_patterns/05-pages/organization-elected-official.json +++ b/styleguide/source/_patterns/05-pages/organization-elected-official.json @@ -24,9 +24,9 @@ "richText": { "rteElements": [ { - "path": "@atoms/04-headings/heading-6.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "heading6": { + "heading4": { "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " } } @@ -273,47 +273,7 @@ } ], "sideBar": [ - { - "path": "@molecules/icon-links.twig", - "data": { - "iconLinks": { - "compHeading": { - "title": "Social", - "sub": true, - "color": "", - "id": "", - "centered": "", - "titleContext": "links for Executive Office of Health and Human Services" - }, - "items": [ - { - "icon": "twitter", - "link": { - "href": "https://twitter.com/MassHHS", - "text": "@MassHHS", - "chevron": "" - } - }, - { - "icon": "flickr", - "link": { - "href": "https://www.flickr.com/photos/mass_hhs/", - "text": "Mass_HHS", - "chevron": "" - } - }, - { - "icon": "blog", - "link": { - "href": "https://blog.mass.gov/hhs", - "text": "blog.mass.gov/hhs", - "chevron": "" - } - } - ] - } - } - } + ] }, { @@ -622,6 +582,119 @@ } } }, + { + "path": "@organisms/by-author/sections-three-up.twig", + "data": { + "sectionThreeUp": { + "compHeading": { + "title": "Featured Topics", + "sub": "", + "color": "", + "id": "", + "centered": "", + "titleContext": "for Executive Office of Health and Human Services" + }, + "sections": [ + { + "id": "GUIDasjdhf1", + "catIcon": null, + "title": { + "href": "#", + "text": "Health & Social Services" + }, + "description": "Massachusetts offers services and resources to keep you and your loved ones healthy, safe, and happy. Find out how we can support you.", + "links": [ + { + "href": "#", + "text": "Housing Assistance" + }, + { + "href": "#", + "text": "MassHealth & Other Health Care" + }, + { + "href": "#", + "text": "Food & Cash Assistance" + }, + { + "href": "#", + "text": "Special Needs & Accessible Living" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Health & Social Services" + } + }, + { + "id": "GUIDasjdhf2", + "catIcon": null, + "title": { + "href": "#", + "text": "Families & Children" + }, + "description": "The Commonwealth is committed to supporting safe, healthy, happy families. Find information ranging from how to get a marriage certificate to tips on raising active children.", + "links": [ + { + "href": "#", + "text": "Caring for Children" + }, + { + "href": "#", + "text": "Health, Nutrition & Safety" + }, + { + "href": "#", + "text": "Marriage & Divorce" + }, + { + "href": "#", + "text": "Housing Assistance" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Families & Children" + } + }, + { + "id": "GUIDasjdhf3", + "catIcon": null, + "title": { + "href": "#", + "text": "Housing & Property" + }, + "description": "Do you own or rent property in Massachusetts? Find resources for tenants and landlords, homeowners, developers, and more.", + "links": [ + { + "href": "#", + "text": "Renters/Tenants" + }, + { + "href": "#", + "text": "Landlords" + }, + { + "href": "#", + "text": "Homeowners" + }, + { + "href": "#", + "text": "Safety & Inspections" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Housing & Property" + } + } + ] + } + } + }, { "path": "@organisms/by-author/link-list.twig", "data": { @@ -965,6 +1038,101 @@ } } } + }, + { + "path": "@organisms/by-author/mapped-locations.twig", + "data": { + "mappedLocations": { + "compHeading": { + "title": "Locations", + "sub": "", + "color": "", + "id": "", + "centered": "", + "titleContext": "of Executive Office of Health and Human Services" + }, + "link": { + "href": "/patterns/05-pages-Map-listing-human-services/05-pages-Map-listing-human-services.html", + "text": "Location Details", + "chevron": "true" + }, + "googleMap": { + "map": { + "center": { + "lat": 42.366565, + "lng": -71.058940 + }, + "zoom": 16 + }, + "markers": [ + { + "position": { + "lat": 42.366565, + "lng": -71.058940 + }, + "label": "A", + "infoWindow": { + "name": "Department of Conservation and Recreation", + "phone": "16176261250", + "fax": "16176261351", + "email": "mass.parks@state.ma.us", + "address": "251 Causeway Street, Suite 900\nBoston, MA 02114-2104" + } + }, + { + "position": { + "lat": 42.358795, + "lng": -71.063858 + }, + "label": "B", + "infoWindow": { + "name": "Department of Recreation and Fun", + "phone": "16176261250", + "fax": "", + "email": "mass.parks@state.ma.us", + "address": "24 Beacon St\nBoston, MA 02133" + } + } + ] + } + } + } + }, + { + "path": "@organisms/by-author/link-list.twig", + "data": { + "linkList": { + "compHeading": { + "title": "Related Organizations", + "sub": "", + "color": "", + "id": "", + "centered": "" + }, + "links": [ + { + "href": "#", + "text": "Executive Office of Elder Affairs" + }, + { + "href": "#", + "text": "Department of Public Health" + }, + { + "href": "#", + "text": "Department of Transitional Assistance" + }, + { + "href": "#", + "text": "Massachusetts Health Connector" + }, + { + "href": "#", + "text": "Executive Office of Health & Human Services" + } + ] + } + } } ] } @@ -993,4 +1161,4 @@ ] } } -} \ No newline at end of file +} diff --git a/styleguide/source/_patterns/05-pages/organization.json b/styleguide/source/_patterns/05-pages/organization.json index 6ac9a3a9d2..3d4db59bf2 100644 --- a/styleguide/source/_patterns/05-pages/organization.json +++ b/styleguide/source/_patterns/05-pages/organization.json @@ -13,9 +13,9 @@ "richText": { "rteElements": [ { - "path": "@atoms/04-headings/heading-6.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "heading6": { + "heading4": { "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " } } @@ -413,6 +413,119 @@ } } }, + { + "path": "@organisms/by-author/sections-three-up.twig", + "data": { + "sectionThreeUp": { + "compHeading": { + "title": "Featured Topics", + "sub": "", + "color": "", + "id": "", + "centered": "", + "titleContext": "for Executive Office of Health and Human Services" + }, + "sections": [ + { + "id": "GUIDasjdhf1", + "catIcon": null, + "title": { + "href": "#", + "text": "Health & Social Services" + }, + "description": "Massachusetts offers services and resources to keep you and your loved ones healthy, safe, and happy. Find out how we can support you.", + "links": [ + { + "href": "#", + "text": "Housing Assistance" + }, + { + "href": "#", + "text": "MassHealth & Other Health Care" + }, + { + "href": "#", + "text": "Food & Cash Assistance" + }, + { + "href": "#", + "text": "Special Needs & Accessible Living" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Health & Social Services" + } + }, + { + "id": "GUIDasjdhf2", + "catIcon": null, + "title": { + "href": "#", + "text": "Families & Children" + }, + "description": "The Commonwealth is committed to supporting safe, healthy, happy families. Find information ranging from how to get a marriage certificate to tips on raising active children.", + "links": [ + { + "href": "#", + "text": "Caring for Children" + }, + { + "href": "#", + "text": "Health, Nutrition & Safety" + }, + { + "href": "#", + "text": "Marriage & Divorce" + }, + { + "href": "#", + "text": "Housing Assistance" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Families & Children" + } + }, + { + "id": "GUIDasjdhf3", + "catIcon": null, + "title": { + "href": "#", + "text": "Housing & Property" + }, + "description": "Do you own or rent property in Massachusetts? Find resources for tenants and landlords, homeowners, developers, and more.", + "links": [ + { + "href": "#", + "text": "Renters/Tenants" + }, + { + "href": "#", + "text": "Landlords" + }, + { + "href": "#", + "text": "Homeowners" + }, + { + "href": "#", + "text": "Safety & Inspections" + } + ], + "seeAll": { + "href": "#", + "text": "more", + "info": "learn more about Housing & Property" + } + } + ] + } + } + }, { "path": "@organisms/by-author/press-listing.twig", "data": { @@ -677,119 +790,6 @@ } } }, - { - "path": "@organisms/by-author/sections-three-up.twig", - "data": { - "sectionThreeUp": { - "compHeading": { - "title": "Featured Topics", - "sub": "", - "color": "", - "id": "", - "centered": "", - "titleContext": "for Executive Office of Health and Human Services" - }, - "sections": [ - { - "id": "GUIDasjdhf1", - "catIcon": null, - "title": { - "href": "#", - "text": "Health & Social Services" - }, - "description": "Massachusetts offers services and resources to keep you and your loved ones healthy, safe, and happy. Find out how we can support you.", - "links": [ - { - "href": "#", - "text": "Housing Assistance" - }, - { - "href": "#", - "text": "MassHealth & Other Health Care" - }, - { - "href": "#", - "text": "Food & Cash Assistance" - }, - { - "href": "#", - "text": "Special Needs & Accessible Living" - } - ], - "seeAll": { - "href": "#", - "text": "more", - "info": "learn more about Health & Social Services" - } - }, - { - "id": "GUIDasjdhf2", - "catIcon": null, - "title": { - "href": "#", - "text": "Families & Children" - }, - "description": "The Commonwealth is committed to supporting safe, healthy, happy families. Find information ranging from how to get a marriage certificate to tips on raising active children.", - "links": [ - { - "href": "#", - "text": "Caring for Children" - }, - { - "href": "#", - "text": "Health, Nutrition & Safety" - }, - { - "href": "#", - "text": "Marriage & Divorce" - }, - { - "href": "#", - "text": "Housing Assistance" - } - ], - "seeAll": { - "href": "#", - "text": "more", - "info": "learn more about Families & Children" - } - }, - { - "id": "GUIDasjdhf3", - "catIcon": null, - "title": { - "href": "#", - "text": "Housing & Property" - }, - "description": "Do you own or rent property in Massachusetts? Find resources for tenants and landlords, homeowners, developers, and more.", - "links": [ - { - "href": "#", - "text": "Renters/Tenants" - }, - { - "href": "#", - "text": "Landlords" - }, - { - "href": "#", - "text": "Homeowners" - }, - { - "href": "#", - "text": "Safety & Inspections" - } - ], - "seeAll": { - "href": "#", - "text": "more", - "info": "learn more about Housing & Property" - } - } - ] - } - } - }, { "path": "@organisms/by-author/event-listing.twig", "data": { @@ -936,4 +936,4 @@ ] } } -} \ No newline at end of file +} diff --git a/styleguide/source/_patterns/05-pages/organization~boards.json b/styleguide/source/_patterns/05-pages/organization~boards.json index 54214f84c8..f63ac77145 100644 --- a/styleguide/source/_patterns/05-pages/organization~boards.json +++ b/styleguide/source/_patterns/05-pages/organization~boards.json @@ -15,9 +15,9 @@ "short_description": { "richText": { "rteElements": [{ - "path": "@atoms/04-headings/heading-6.twig", + "path": "@atoms/04-headings/heading-4.twig", "data": { - "heading6" : { + "heading4" : { "text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. " } } @@ -103,6 +103,10 @@ "teaserListing": { "stacked": false, "contained": true, + "shownNumber": 6, + "expandable": true, + "moreItemsLabel": "Show all members", + "lessItemsLabel": "Show fewer members", "gridTwoColumns": true, "featuredItems": [ { @@ -157,16 +161,6 @@ "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." } } - },{ - "path": "@atoms/decorative-link.twig", - "data": { - "decorativeLink": { - "href": "#", - "text": "More", - "chevron": true, - "label": "" - } - } } ] } @@ -198,14 +192,138 @@ "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." } } - },{ - "path": "@atoms/decorative-link.twig", + } + ] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Member's title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + }, + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board Member", + "title": { + "text": "Board Member's Name", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Board Member's Title" + ], + "contents": [{ + "path": "@atoms/11-text/paragraph.twig", + "data": { + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + } + } + }] + } + ] + } + } + }, + { + "path": "@organisms/by-author/teaser-listing.twig", + "data": { + "teaserListing": { + "stacked": false, + "contained": true, + "gridTwoColumns": true, + "shownNumber": 2, + "expandable": true, + "moreItemsLabel": "Show all members", + "lessItemsLabel": "Show fewer members", + "compHeading": { + "title": "Subsection of boards", + "sub": "", + "color": "", + "id": "", + "level": 3, + "centered": "" + }, + "description": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." + }, + "items": [ + { + "layout": "inline-image", + "image": { + "src": "../../assets/images/placeholder/72x96.png", + "alt": "placeholder image", + "width": "72", + "height": "96" + }, + "eyebrow": "Board member", + "title": { + "href": "#", + "text": "Sally Testperson", + "info": "", + "property": "" + }, + "emphasizedText": [ + "Awesome board member" + ], + "contents": [ + { + "path": "@atoms/11-text/paragraph.twig", "data": { - "decorativeLink": { - "href": "#", - "text": "More", - "chevron": true, - "label": "" + "paragraph": { + "text": "Optional descriptive text. Vel impetus tamquam equidem cu, ei possit possim constituam eos, mea ut rebum iudico. Soluta bonorum partiendo est ne, nominati postulant argumentum ius no, quo ne quaeque sanctus." } } } @@ -341,13 +459,7 @@ } }] } - ], - "more": { - "href": "#", - "text": "See all board members", - "chevron": true, - "label": "See all the members of this-a-here board" - } + ] } } } diff --git a/styleguide/source/_patterns/05-pages/readme2.json b/styleguide/source/_patterns/05-pages/readme2.json index cd23f50701..9cf720a89d 100644 --- a/styleguide/source/_patterns/05-pages/readme2.json +++ b/styleguide/source/_patterns/05-pages/readme2.json @@ -5,7 +5,7 @@ }, "errorPage": { - "type": "v5.17.0 (3/29/2018)", + "type": "", "title": "Welcome to Mayflower, the Commonwealth's Design System", "message": "Use the navigation menu above to browse our pattern library." }, diff --git a/styleguide/source/assets/scss/02-molecules/_contact-us.scss b/styleguide/source/assets/scss/02-molecules/_contact-us.scss index ddbc190b20..5178fc3cc7 100644 --- a/styleguide/source/assets/scss/02-molecules/_contact-us.scss +++ b/styleguide/source/assets/scss/02-molecules/_contact-us.scss @@ -128,6 +128,10 @@ &__extra { display: none; padding-top: 20px; + + @media ($bp-small-min) { + padding-top: 0; + } } &--columns { @@ -139,7 +143,7 @@ .ma__contact-us__extra { width: 100%; @media ($bp-medium-min) { - width: calc(50% - 15px); // account for margin on desktop + width: calc(36% - 15px); // account for margin on desktop } &:first-child { @@ -164,6 +168,7 @@ } .ma__contact-group { margin-bottom: 20px; + width: 100%; } } diff --git a/styleguide/source/assets/scss/02-molecules/_general-teaser.scss b/styleguide/source/assets/scss/02-molecules/_general-teaser.scss index 9268e12c74..9d915ebee6 100644 --- a/styleguide/source/assets/scss/02-molecules/_general-teaser.scss +++ b/styleguide/source/assets/scss/02-molecules/_general-teaser.scss @@ -41,14 +41,12 @@ &__image-wrapper { flex-shrink: 0; flex-grow: 0; - flex-basis: auto; font-size: 0; margin-right: 30px; margin-bottom: 10px; } &__image-wrapper + &__details { - flex-basis: 60%; flex-shrink: 1; flex-grow: 1; } diff --git a/styleguide/source/assets/scss/03-organisms/_short-description.scss b/styleguide/source/assets/scss/03-organisms/_short-description.scss new file mode 100644 index 0000000000..08fde98e31 --- /dev/null +++ b/styleguide/source/assets/scss/03-organisms/_short-description.scss @@ -0,0 +1,7 @@ +.ma__short-description { + + h4::after { + display: none; + } +} + diff --git a/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss b/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss index 79afd121eb..31c337165d 100644 --- a/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss +++ b/styleguide/source/assets/scss/03-organisms/_teaser-listing.scss @@ -18,7 +18,8 @@ } } - &__description + *, &__featured-items + &__items { + &__description + *, + &__featured-items + &__items { border-top-width: 1px; border-top-style: solid; margin-top: 0; @@ -39,6 +40,10 @@ } } + &__description + &__items{ + border-top: 0; + } + &__featured-items.side-by-side, &__items { @media ($bp-small-min) { display: flex; @@ -59,6 +64,7 @@ flex-shrink: 1; flex-grow: 0; flex-basis: 50%; + max-width: 50%; padding: 0 $border-padding; } } @@ -186,4 +192,53 @@ margin-top: 45px; } } + + // Accordion behavior + &__container { + .ma__content-link--chevron.ma__content-link__acordion-toggle { + font-weight: 700; + border: 0; + padding-left: 0; + background: transparent; + &:after { + top: 20%; + right: 0; + } + } + .ma__teaser-listing__items { + margin-bottom: 40px; + } + .ma__teaser-listing__items:last-child { + margin-bottom: 0; + } + + .ma__teaser-listing__extra { + display: none; + padding-top: 40px; + border-top-style: solid; + border-top-width: 1px; + } + .ma__content-link--chevron.ma__content-link__acordion-toggle .more { + display: inline; + border: 0; + } + .ma__content-link--chevron.ma__content-link__acordion-toggle .less { + display: none; + border: 0; + } + .ma__content-link--chevron.ma__content-link__acordion-toggle:after { + transform: rotate(45deg); + } + &.is-open { + .ma__content-link--chevron.ma__content-link__acordion-toggle:after { + transform: rotate(-135deg); + } + .ma__content-link--chevron.ma__content-link__acordion-toggle .more { + display: none; + } + .ma__content-link--chevron.ma__content-link__acordion-toggle .less { + display: inline; + } + } + } } diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_teaser-listing.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_teaser-listing.scss index 78e316cf37..1bd6b164ff 100644 --- a/styleguide/source/assets/scss/06-theme/03-organisms/_teaser-listing.scss +++ b/styleguide/source/assets/scss/06-theme/03-organisms/_teaser-listing.scss @@ -1,6 +1,6 @@ .ma__teaser-listing { - &__optional-content, &__featured-items, &__items { + &__optional-content, &__featured-items, &__items, &__extra { border-color: $c-bd-divider; } diff --git a/styleguide/source/assets/scss/index.scss b/styleguide/source/assets/scss/index.scss index adc9abd8dc..f314d2a18b 100644 --- a/styleguide/source/assets/scss/index.scss +++ b/styleguide/source/assets/scss/index.scss @@ -166,6 +166,7 @@ @import "03-organisms/rich-text"; @import "03-organisms/search-banner"; @import "03-organisms/sections-three-up"; +@import "03-organisms/short-description"; @import "03-organisms/sidebar-promo"; @import "03-organisms/sidebar-widget"; @import "03-organisms/split50";