Merge pull request #10 from web-illinois/jonker/BugFixes

Jonker/bug fixes
web-illinois · Oct 8, 2024 · c208901 · c208901
2 parents aa3539c + aeb7664
commit c208901
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 22 deletions.
diff --git a/builder/versions/ilw-content-inset.1.0-beta.json b/builder/versions/ilw-content-inset.1.0-beta.json
@@ -6,10 +6,10 @@
     "element-name": "ilw-content",
     "description": "The Content component with the inset mode enabled",
     "builder-version": "1.0-beta",
-    "version": "1.0.0-beta",
-    "date": "9/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.0-beta/ilw-content.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-hero/1.0.0-beta/ilw-content.js",
+    "version": "1.0.1-beta",
+    "date": "10/08/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",
@@ -70,6 +70,15 @@
                 "center",
                 "right"
             ]
+        },
+        {
+            "name": "transparent",
+            "description": "Whether the background is transparent -- note it will use the styling of whatever theme it is set to.",
+            "depreciated": false,
+            "values": [
+                "",
+                "true"
+            ]
         }
     ],
     "classes-fixed": [],

diff --git a/builder/versions/ilw-content-introduction.1.0-beta.json b/builder/versions/ilw-content-introduction.1.0-beta.json
@@ -6,10 +6,10 @@
     "element-name": "ilw-content",
     "description": "The Content component with the introduction mode enabled. Note that the emphasized piece needs to be in an emphasized tag",
     "builder-version": "1.0-beta",
-    "version": "1.0.0-beta",
-    "date": "9/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.0-beta/ilw-content.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-hero/1.0.0-beta/ilw-content.js",
+    "version": "1.0.1-beta",
+    "date": "10/08/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",

diff --git a/builder/versions/ilw-content-lede.1.0-beta.json b/builder/versions/ilw-content-lede.1.0-beta.json
@@ -6,10 +6,10 @@
     "element-name": "ilw-content",
     "description": "The Content component with the lede mode enabled",
     "builder-version": "1.0-beta",
-    "version": "1.0.0-beta",
-    "date": "9/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.0-beta/ilw-content.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-hero/1.0.0-beta/ilw-content.js",
+    "version": "1.0.1-beta",
+    "date": "10/08/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",

diff --git a/builder/versions/ilw-content.1.0-beta.json b/builder/versions/ilw-content.1.0-beta.json
@@ -6,10 +6,10 @@
     "element-name": "ilw-content",
     "description": "The Content component.",
     "builder-version": "1.0-beta",
-    "version": "1.0.0-beta",
-    "date": "9/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.0-beta/ilw-content.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-hero/1.0.0-beta/ilw-content.js",
+    "version": "1.0.1-beta",
+    "date": "10/08/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-content/1.0.1-beta/ilw-content.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Illinois Toolkit: Basic content item.",
   "repository": "github:web-illinois/ilw-content",
   "private": false,
-  "version": "1.0.0-beta",
+  "version": "1.0.1-beta",
   "type": "module",
   "files": [
     "src/**",

diff --git a/samples/inset.html b/samples/inset.html
@@ -14,6 +14,9 @@
       if (params.has('theme')) {
         component.setAttribute('theme', params.get('theme'));
       }
+      if (params.has('transparent')) {
+        component.setAttribute('transparent', true);
+      }
       if (params.has('width')) {
         component.setAttribute('width', params.get('width'));
       }
@@ -35,6 +38,16 @@ <h2>Lorem ipsum dolor sit amet</h2><p>Nunc sed leo arcu. Nulla non eleifend sapi
       <h3>Lorem ipsum dolor sit amet</h3><p>Nunc sed leo arcu. Nulla non eleifend sapien. </p>
     </ilw-content>
     <ilw-content mode="inset">
-      <h4>Lorem ipsum dolor sit amet</h4><p>Nunc sed leo arcu. Nulla non eleifend sapien. </p>
+      <h3>Student Life</h3>
+      <p>
+        Animal sciences students extend their learning and career networks beyond
+        the classroom through internships, <a href="#">judging teams</a>, student
+        organizations, undergraduate research projects with our faculty, as well
+        as short- and long-term study abroad opportunities all over the world.
+      </p>
+      <ul class="ilw-buttons">
+        <li><a href="#">Subscribe</a></li>
+        <li><a href="#">Find a departmental advisor</a></li>
+      </ul>
     </ilw-content>
 </body>
diff --git a/src/ilw-content.css b/src/ilw-content.css
@@ -66,8 +66,8 @@ ilw-content h6, ilw-content p.ilw-heading {
 }
 
 ilw-content h1 {
-  font-size: 4.25rem;
-  line-height: 5.25rem;
+  font-size: 3.25rem;
+  line-height: 4rem;
   margin-top: 1.3125rem;
   margin-bottom: 2.625rem;
   font-family: var(--il-font-heading);

diff --git a/src/ilw-content.js b/src/ilw-content.js
@@ -8,6 +8,7 @@ class Content extends LitElement {
   static get properties() {
     return {
       theme: { type: String, attribute: true },
+      transparent: { type: Boolean, attribute: true },
       mode: { type: String, attribute: true },
       align: { type: String, attribute: true },
       width: { type: String, attribute: true },
@@ -42,7 +43,7 @@ class Content extends LitElement {
 
   render() {
       return html`
-      <div class="content ${this.mode} ${this.theme} ${this.outerWidth}">
+      <div class="content ${this.mode} ${this.theme} ${this.outerWidth} ${this.transparent ? 'transparent' : ''}">
       <div style="${this.paddingStyle}" class="content-inner ${this.innerWidth} ${this.align}">
       <div class="content-padding">
           <slot></slot>

diff --git a/src/ilw-content.styles.js b/src/ilw-content.styles.js
@@ -55,7 +55,7 @@ export default css`
         --ilw-content--background-color: var(--il-storm-lighter-4);
     }
 
-    .content.inset {
+    .content.transparent {
         --ilw-content--background-color: transparent;
     }