Skip to content

Commit

Permalink
Merge pull request #98 from ASU/asu-cookie-consent
Browse files Browse the repository at this point in the history
ASU Cookie Consent Package added, and alterLoginUrl helper added for initHeader function
  • Loading branch information
ctestama authored Sep 9, 2020
2 parents 9c5f087 + 8065443 commit 228c4c6
Show file tree
Hide file tree
Showing 21 changed files with 974 additions and 91 deletions.
3 changes: 1 addition & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules/": true,
"**/.git": true
}
}
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@
"compression": "^1.7.4",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^3.2.0",
"css-loader": "^4.2.2",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"del": "^4.1.0",
"dotenv": "^8.0.0",
"emotion-server": "^10.0.27",
Expand All @@ -90,6 +91,7 @@
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.14.2",
"express": "^4.17.1",
"extract-loader": "^5.1.0",
"global": "^4.3.2",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
Expand Down Expand Up @@ -145,8 +147,8 @@
"style-loader": "^0.20.3",
"terser-webpack-plugin": "^3.0.3",
"webfontloader": "^1.6.28",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {},
Expand Down
11 changes: 1 addition & 10 deletions packages/component-forms/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,5 @@ module.exports = {
'@storybook/addon-viewport',
'@storybook/addon-a11y',
],
stories: ['../src/**/*.stories.js'],
webpackFinal: config => {
config.module.rules.push({
test: [/\.stories\.js$/],
loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
return config;
},
stories: ['../src/**/*.stories.js']
}
4 changes: 3 additions & 1 deletion packages/component-forms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
"storybook": "start-storybook -p 8089 -s ./public",
"build-storybook": "build-storybook -c .storybook -s public -o export"
},
"devDependencies": {},
"devDependencies": {
"@storybook/preact": "^6.0.7"
},
"dependencies": {
"@asu-design-system/components-library": "^1.0.19",
"@asu-design-system/design-tokens": "^1.1.0",
Expand Down
9 changes: 0 additions & 9 deletions packages/components-library/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,4 @@ module.exports = {
'@storybook/addon-a11y',
],
stories: ['../src/**/*.stories.js'],
webpackFinal: config => {
config.module.rules.push({
test: [/\.stories\.js$/],
loaders: [require.resolve('@storybook/source-loader')],
include: [path.resolve(__dirname, '../src')],
enforce: 'pre',
});
return config;
},
}
4 changes: 3 additions & 1 deletion packages/components-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
"build-storybook": "build-storybook -c .storybook -s public -o export",
"prerender": "node scripts/prerender-templates.js"
},
"devDependencies": {},
"devDependencies": {
"@storybook/preact": "^6.0.7"
},
"dependencies": {
"@asu-design-system/design-tokens": "^1.1.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
Expand Down
6 changes: 3 additions & 3 deletions packages/components-library/src/components/Login/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ Login.propTypes = {
};

Login.defaultProps = {
loginLink: "/cas", // default paths are Drupal
logoutLink: "/caslogout",
loggedIn: false,
logoutLink: "https://webapp4.asu.edu/myasu/Signout",
loginLink: "https://weblogin.asu.edu/cgi-bin/login",
loggedIn: false
};

export { Login };
18 changes: 7 additions & 11 deletions packages/components-library/src/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,15 @@ const checkSSOCookie = () => {
return loginStatus;
};

/**
* Alters the default login Url to add the '?callapp=' query string
*/
const alterLoginUrl = (url) => {
if (url) {
return url;
}

const callbackUrl = window.location.toString();

url = decodeURI(url); // Decode the URL just in case

url = url.replace(
`/login`,
`/login?callapp=${callbackUrl}`
Expand All @@ -52,8 +53,6 @@ const alterLoginUrl = (url) => {
return url;
};



/**
* Initialize the header.
*
Expand All @@ -65,10 +64,8 @@ const alterLoginUrl = (url) => {
* be either hydrated or rendered.
*/
const initHeader = ( props, hydrate = false, target = "headerContainer") => {
const { loggedIn, userName, loginUrl, logoutUrl, ...theRest } = props;

const fullLoginUrl = alterLoginUrl(loginUrl);

const { loggedIn, userName, loginLink, ...theRest } = props;
const fullLoginUrl = loginLink ? loginLink : alterLoginUrl(Header.defaultProps.loginLink);

// If login data is incomplete, check the SSO cookie for data.
const loginStatus =
Expand All @@ -82,10 +79,9 @@ const initHeader = ( props, hydrate = false, target = "headerContainer") => {
const headerProps = {
...loginStatus,
...theRest,
loginLink: fullLoginUrl
};

console.log(headerProps, 'the props');

if (hydrate) {
HydratePreact(Header, headerProps, document.getElementById(target));
} else {
Expand Down
1 change: 0 additions & 1 deletion packages/components-library/src/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import {HydratePreact, RenderPreact, initHeader} from "./helpers";

export * from "./components";
Expand Down
4 changes: 4 additions & 0 deletions packages/cookie-consent/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
/*.log
*.lock
package-lock.json
12 changes: 12 additions & 0 deletions packages/cookie-consent/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const path = require("path");

module.exports = {
stories: [
'../stories/*.stories.js',
],
addons: [
'@storybook/addon-knobs',
'@storybook/addon-viewport',
'@storybook/addon-a11y',
],
};
3 changes: 3 additions & 0 deletions packages/cookie-consent/.storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- files under the 'dist' directory are configured to be served statically by storybook -->
<link href="/cookie-consent.css" rel="stylesheet" type="text/css" media="all" />
<script src="/cookie-consent.js"></script>
11 changes: 11 additions & 0 deletions packages/cookie-consent/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { addDecorator, addParameters } from '@storybook/html';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

addParameters({
viewport: {
viewports: INITIAL_VIEWPORTS,
},
ally: {

}
});
8 changes: 8 additions & 0 deletions packages/cookie-consent/.storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const path = require('path');
// use development webpack config
let custom = require('../webpack.config.js');
custom = custom[0];

module.exports = async ({ config, mode }) => {
return { ...config, module: { ...config.module, rules: custom.module.rules }, resolve: {...config.resolve, alias: custom.resolve.alias }}
};
30 changes: 30 additions & 0 deletions packages/cookie-consent/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@asu-design-system/cookie-consent",
"version": "1.0.0",
"description": "ASU implementation of cookieconsent npm library",
"main": "src/index.js",
"author": "Colton Testamarck",
"license": "UNLICENSED",
"private": false,
"dependencies": {
"cookieconsent": "^3.1.1"
},
"scripts": {
"clean": "yarn shx rm -rf ./dist",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress --hide-modules",
"storybook": "start-storybook -s ./dist -p 9009",
"build-storybook": "build-storybook"
},
"publishConfig": {
"access": "restricted",
"registry": "https://registry.web.asu.edu/"
},
"repository": {
"type": "git",
"url": "https://github.com/asu/asu-unity-stack",
"directory": "packages/cookie-consent"
},
"devDependencies": {
"@storybook/html": "^6.0.7"
}
}
42 changes: 42 additions & 0 deletions packages/cookie-consent/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import "cookieconsent";
import "./styles.css";

/***
* Initializes cookie consent and sets cookie consent domain to cookieDomain
*/
const init = cookieDomain => {
const customContent = {
message:
"ASU websites use cookies to enhance user experience, analyze site usage, and assist with outreach and enrollment. By continuing to use this site, you are giving us your consent to do this. Learn more about cookies on ASU websites in our",
dismiss: "I agree",
link: "Privacy Statement",
href: "https://www.asu.edu/privacy#cookies",
};

const customElements = {
message:
'<span id="cookieconsent:desc" class="cc-message">{{message}}</span>',
messagelink:
'<span id="cookieconsent:desc" class="cc-message">{{message}} <a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="{{href}}" target="_blank">{{link}}</a>.</span>',
dismiss:
'<a aria-label="dismiss cookie message" tabindex="0" class="cc-btn cc-dismiss asu-cc-btn">{{dismiss}}</a>',
};

// If top level cookie domain not found in hostname, set to empty string (auto)
if (window.location.hostname.indexOf(cookieDomain) === -1) {
cookieDomain = "";
}

window.cookieconsent.initialise({
content: customContent,
elements: customElements,
theme: "classic",
palette: null,
cookie: {
domain: cookieDomain,
expiryDays: 90,
},
});
};

export { init };
53 changes: 53 additions & 0 deletions packages/cookie-consent/src/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@import "cookieconsent/build/cookieconsent.min.css";

/* ASU Customization */
.cc-window.cc-theme-classic.cc-type-info {
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.5;
padding: 1.5em;
background-color: #5c6670;
color: #fff;
width: auto;
max-width: 100%;
z-index: 2147483647;
}

.cc-window.cc-theme-classic {
opacity: 0.92;
}

.cc-floating.cc-theme-classic {
border-radius: 0;
}

a.cc-link {
color: #fff;
border-bottom: none;
}
.cc-theme-classic .cc-link:visited {
color: #fff;
}

.cc-theme-classic .cc-btn {
border: none;
padding: 0.6em 1.2em;
background-color: #8c1d40;
color: #fff;
font-size: 1em;
font-weight: 500;
width: 100%;
}
.cc-btn:hover {
background-color: #d23153;
color: white;
}

body .__acs .acsModalBackdrop {
z-index: 2147483646;
}

.cc-window.cc-invisible.cc-theme-classic {
opacity: 0;
}
13 changes: 13 additions & 0 deletions packages/cookie-consent/stories/cookie-consent.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { AsuCookieConsent, window } from "global";

export default {
title: "Cookie Consent",
};

export const base = () => {
window.addEventListener("DOMContentLoaded", event => {
AsuCookieConsent.init();
});

return `<div style="width:100%; height:200vh;"></div>`;
};
Loading

0 comments on commit 228c4c6

Please sign in to comment.