Skip to content

Commit

Permalink
Add full width option (closes #2).
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Aug 30, 2024
1 parent bf59e79 commit ef63b71
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 45 deletions.
76 changes: 45 additions & 31 deletions samples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Call To Action Component</title>
<link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">
<link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-global/3.0.0-alpha/ilw-global.css">
<script type="module" src="/src/ilw-call-to-action.js"></script>
<style>
body {
body {
padding: 15px;
font-size: 18px;
font-family: var(--il-font-sans);
Expand All @@ -19,34 +19,48 @@
</head>

<body style="margin: 0; padding: 0;">
<ilw-call-to-action theme="white">
<img src="https://cdn.brand.illinois.edu/icons/line/blue/faq.svg" alt="" slot="icon">
<h2>Get started today</h2>
<p>Enroll in a class after you are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
<ilw-call-to-action align="center" theme="blue">

<h2>Get started today</h2>
<p>Enroll in a <a href="#">a class after you</a> are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
</ilw-call-to-action>
<ilw-call-to-action theme="blue-gradient">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 7 51.26 51.26"><defs><style>.cls-1{fill:#0c1b55;}</style></defs><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M37.92,10.39H13.33a4.08,4.08,0,0,0-4.06,4.06V28.18a4.08,4.08,0,0,0,4.06,4.06h4.76L17.55,39a1.14,1.14,0,0,0,1.95.89l7.56-7.64H37.92A4.08,4.08,0,0,0,42,28.18V14.45A4.08,4.08,0,0,0,37.92,10.39ZM19.48,23.26a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,19.48,23.26Zm6.15,0a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,25.63,23.26Zm6.15,0a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,31.78,23.26Z"/></g></svg>
<h2>Get started today</h2>
<p>Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
<div style="width: 800px; margin: auto">
<ilw-call-to-action theme="white">
<img src="https://cdn.brand.illinois.edu/icons/line/blue/faq.svg" alt="" slot="icon">
<h2>Get started today</h2>
<p>Enroll in a class after you are admitted as a non-degree student. Enroll in a class after you are admitted as
a
non-degree student. Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
<ilw-call-to-action align="center" theme="blue" width="full">
<h2>Get started today</h2>
<p>Enroll in a <a href="#">a class after you</a> are admitted as a non-degree student. Enroll in a class after
you
are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
<ilw-call-to-action theme="blue-gradient">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 7 51.26 51.26">
<defs>
<style>.cls-1 {
fill: #0c1b55;
}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<path class="cls-1"
d="M37.92,10.39H13.33a4.08,4.08,0,0,0-4.06,4.06V28.18a4.08,4.08,0,0,0,4.06,4.06h4.76L17.55,39a1.14,1.14,0,0,0,1.95.89l7.56-7.64H37.92A4.08,4.08,0,0,0,42,28.18V14.45A4.08,4.08,0,0,0,37.92,10.39ZM19.48,23.26a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,19.48,23.26Zm6.15,0a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,25.63,23.26Zm6.15,0a1.83,1.83,0,1,1,1.83-1.83A1.83,1.83,0,0,1,31.78,23.26Z"/>
</g>
</svg>
<h2>Get started today</h2>
<p>Enroll in a class after you are admitted as a non-degree student.</p>
<ul class="ilw-buttons">
<li><a href="#">Register <span class="ilw-sr-only">for classes</span></a></li>
<li><a href="#">Contact us</a></li>
</ul>
</ilw-call-to-action>
</div>
</body>

</html>
7 changes: 1 addition & 6 deletions src/ilw-call-to-action.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,7 @@
}

ilw-call-to-action {
container-type: inline-size;
background: var(--ilw-call-to-action--background);
padding-top: var(--ilw-call-to-action--padding-top);
padding-right: var(--ilw-call-to-action--padding-right);
padding-bottom: var(--ilw-call-to-action--padding-bottom);
padding-left: var(--ilw-call-to-action--padding-left);
contain: layout;
color: var(--ilw-call-to-action--text-color);

.ilw-buttons {
Expand Down
17 changes: 10 additions & 7 deletions src/ilw-call-to-action.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { LitElement, html } from 'lit';
import styles from './ilw-call-to-action.styles';
import './ilw-call-to-action.css';
import { LitElement, html } from "lit";
import styles from "./ilw-call-to-action.styles";
import "./ilw-call-to-action.css";
import { classMap } from "lit/directives/class-map.js";

class CallToAction extends LitElement {

static get properties() {
return {
theme: {},
align: {},
width: {},
_hasGraphic: { state: true, type: Boolean },
};
}
Expand All @@ -19,8 +19,9 @@ class CallToAction extends LitElement {

constructor() {
super();
this.theme = 'gray';
this.align = 'left';
this.theme = "gray";
this.align = "left";
this.width = "auto";
this._hasGraphic = false;
}

Expand All @@ -43,6 +44,8 @@ class CallToAction extends LitElement {
const classes = {
"call-to-action": true,
graphic: this._hasGraphic,
fixed: this.width === "full",
page: this.width === "page",
};
return html`
<div class=${classMap(classes)}>
Expand All @@ -57,4 +60,4 @@ class CallToAction extends LitElement {
}
}

customElements.define('ilw-call-to-action', CallToAction);
customElements.define("ilw-call-to-action", CallToAction);
17 changes: 16 additions & 1 deletion src/ilw-call-to-action.styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,26 @@ export default css`
display: flex;
flex-direction: row;
justify-content: center;
background: var(--ilw-call-to-action--background);
padding-top: var(--ilw-call-to-action--padding-top);
padding-right: var(--ilw-call-to-action--padding-right);
padding-bottom: var(--ilw-call-to-action--padding-bottom);
padding-left: var(--ilw-call-to-action--padding-left);
column-gap: var(--ilw-call-to-action--icon-margin);
row-gap: var(--ilw-call-to-action--icon-margin);
}
.call-to-action.fixed {
left:50%;
margin-left:-50vw;
margin-right:-50vw;
padding-left:0;
padding-right:0;
position:relative;
right:50%;
width: 100vw;
}
@container (width <= 650px) {
.call-to-action {
Expand Down

0 comments on commit ef63b71

Please sign in to comment.