Main update

web-illinois · Jul 24, 2024 · 47a71ef · 47a71ef
1 parent 21c689c
commit 47a71ef
Show file tree

Hide file tree

Showing 9 changed files with 1,217 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Links: **[ilw-columns in Builder](https://builder3.toolkit.illinois.edu/componen
 
 ## Overview
 
-This uses the [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) to split the container into multiple sections. On smaller containers, the flexbox will shrink to a single column and items will be stacked. 
+This uses the [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) to split the container into multiple sections. On smaller containers (700px or less), the flexbox will shrink to a single column and items will be stacked. 
 
 This will automatically style the components inside the ilw-columns component to the height of the largest item in the group.
 
@@ -21,12 +21,12 @@ This is meant to take the place of the old il-image-feature and il-video-feature
 * **reverse**: If the columns should reverse, so items on the left will show up on the right. This will have no effect on a smaller container where it stacks. 
 
 ### Mode options
-* **1x1**: all columns are equal length
+* **1x1**: all columns are equal length. This is the default option
 * **1x2**: Last column is twice the length of the rest of the columns
 * **2x1**: First column is twice the length of the rest of the columns
 * **1x3**: Last column is three times the length of the rest of the columns
 * **3x1**: First column is three times the length of the rest of the columns
-* **1x2x1**: The middle column is twice the length of the rest of the columns. If there's an odd number, then it will default to the left column 
+* **1x2x1**: The middle columns are twice the length of the rest of the columns 
 
 ## Code Examples
 
@@ -35,7 +35,7 @@ Three columns with information, all the same size.
 ```html
 <ilw-columns mode="1x1">
    <ilw-content>
-     <h3>Information about undergruadate programs</h3>
+     <h3>Information about undergraduate programs</h3>
      <p>.....</p>
      <p>.....</p>
    </ilw-content>

diff --git a/builder/ilw-columns.json b/builder/ilw-columns.json
@@ -4,7 +4,7 @@
     "github": "https://github.com/web-illinois/ilw-columns/",
     "type": "web component",
     "element-name": "ilw-columns",
-    "description": "Description for builder.",
+    "description": "Creates a single row of items that you can use to display information, with information of different widths.",
     "toolkit-version": "",
     "production-version": "",
     "development-version": "1.0.0-alpha"

diff --git a/builder/versions/ilw-columns.1.0.0-alpha.json b/builder/versions/ilw-columns.1.0.0-alpha.json
@@ -4,7 +4,7 @@
     "github": "https://github.com/web-illinois/ilw-columns/",
     "type": "web component",
     "element-name": "ilw-columns",
-    "description": "Description for builder.",
+    "description": "Creates a single row of items that you can use to display information, with information of different widths.",
     "version": "1.0.0-alpha",
     "date": "07/17/2024",
     "css": "https://dev.toolkit.illinois.edu/ilw-columns/1.0.0-alpha/ilw-columns.css",
@@ -16,24 +16,79 @@
         {
             "name": "default",
             "description": "Default information",
-            "text": "<p>Lorem ipsum</p>"
+            "text": "<div class='test'><h3>Lorem ipsum dolor sit amet</h3><p>Consectetur adipiscing elit. <div>Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.</div> </p></div><div class='test'><h3>Lorem ipsum dolor sit amet</h3><p>Nunc sed leo arcu. Nulla non eleifend sapien. </p></div>"
+        },
+        {
+            "name": "image",
+            "description": "Image Feature",
+            "text": "<div class='ilw-image-cover'><img src='https://picsum.photos/300/300' alt=''></div><div class='test'><h3>Lorem ipsum dolor sit amet</h3><p>Nunc sed leo arcu. Nulla non eleifend sapien. </p></div>"
         }
     ],
     "attributes-fixed": [],
-    "attributes-text": [],
+    "attributes-text": [
+        {
+			"name": "padding",
+			"description": "Padding of the text inside the component",
+			"depreciated": false,
+			"value": ""
+		},
+        {
+			"name": "gap",
+			"description": "Gap in pixels or percentage between the columns, defaults to none",
+			"depreciated": false,
+			"value": ""
+		}
+    ],
     "attributes": [
         {
-            "name": "theme",
-            "description": "Color theme used",
-            "depreciated": false,
-            "values": [
-                "",
-                "blue",
-                "orange",
-                "white"
-            ]
-        }
+			"name": "mode",
+			"description": "Mode of the columns (width)",
+			"depreciated": false,
+			"values": [
+				"",
+				"1x1",
+				"1x2",
+				"1x3",
+				"2x1",
+				"3x1",
+				"1x2x1"
+			]
+		},
+        {
+			"name": "theme",
+			"description": "Color theme used",
+			"depreciated": false,
+			"values": [
+				"",
+				"blue",
+				"orange",
+				"blue-gradient",
+				"orange-gradient",
+				"gray",
+				"white"
+			]
+		},
+		{
+			"name": "width",
+			"description": "Width of component",
+			"depreciated": false,
+			"values": [
+				"",
+				"full",
+				"auto"
+			]
+		},
+        {
+			"name": "reverse",
+			"description": "If the order of the columns are reversed in a row, defaults to false",
+			"depreciated": false,
+			"values": [
+				"",
+				"true"
+			]
+		}
     ],
+
     "classes-fixed": [],
     "classes": [],
     "css-variables": [