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

Adding page option

README.md

@@ -21,7 +21,7 @@ The `ilw-tabs` component has the following slots:
 
 The `ilw-tabs` component has the following attributes:
 * `theme`: the theme/background of the content. Options are `blue`, `gray`, `white`. Defaults to `white`. 
-* `width`: whether or not this is contained in the parent (default), if it will expand to full width (`full`), or if just the background will expand and the text will be in a narrow window (`auto`). 
+* `width`: whether or not this is contained in the parent (default), if it will expand to full width (`full`), or if just the background will expand and the text will be in a narrow window (`auto`), or if it will autosize to a page format (`page`). 
 * `horizontal`: a boolean attribute that determines if the tabs are displayed in a horizontal view. Use this only if you have a few tabs in the list, as this is limited to a single row and may cause text to be truncated or displayed awkwardly. The default is to list the tabs vertically on the left-hand side, and in mobile view, both views will collapse to an accordion-like view.  
 * `default`: the ID of the tab that should be opened on page load. This will default to the first tab. 
 

builder/versions/ilw-tabs.1.0-beta.json

@@ -6,10 +6,10 @@
     "element-name": "ilw-tabs",
     "description": "This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.",
     "builder-version": "1.0-beta",
-    "version": "1.0.0-beta",
-    "date": "09/13/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-beta/ilw-tabs.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-beta/ilw-tabs.js",
+    "version": "1.0.1-beta",
+    "date": "10/09/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",
@@ -43,12 +43,13 @@
         },
         {
             "name": "width",
-            "description": "Width -- constrained to the container (default), full width, or full width but text is constrained",
+            "description": "Width -- constrained to the container (default), full width, or full width but text is constrained (auto), or text is constrained to the page width (page).",
             "depreciated": false,
             "values": [
                 "",
                 "full",
-                "auto"
+                "auto",
+                "page"
             ]
         },
         {

package.json

@@ -4,7 +4,7 @@
     "repository": "github:web-illinois/ilw-tabs",
     "private": false,
     "license": "MIT",
-    "version": "1.0.0-beta",
+    "version": "1.0.1-beta",
     "type": "module",
     "files": [
         "src/**",

src/ilw-tabs.styles.js

@@ -10,7 +10,7 @@ export default css `
         padding: 60px 30px 75px;
     }
 
-    #container.white {
+    #outer.white, #container.white {
         --ilw-tabs--color: black;
         --ilw-tabs--button-color: var(--il-blue);
         --ilw-tabs--button-color--focus: white;
@@ -19,7 +19,7 @@ export default css `
         --ilw-tabs--selected-button-background: var(--il-orange);
         --ilw-tabs--button-border: 2px solid var(--il-blue);
     }
-    #container.blue {
+    #outer.blue, #container.blue {
         --ilw-tabs--color: white;
         --ilw-tabs--background: var(--il-blue);
         --ilw-tabs--button-color: white;
@@ -56,8 +56,12 @@ export default css `
         background: var(--ilw-tabs--background);
     }
 
-    #container.auto {
-        padding: 60px max(calc(1.875rem), calc(50px - 37.5rem)) 75px;
+    #outer.page {
+        background: var(--ilw-tabs--background);
+    }
+
+    #container.auto, #container.page {
+        padding: 60px var(--ilw-content--main-margin, 0) 75px;
         max-width: 1200px;
     }