Update widget catalog to show Material 3 widgets

src/_data/catalog/index.json

@@ -6,8 +6,9 @@
     "id": "basics"
   },
   {
-    "name": "Material Components",
-    "description": "Visual, behavioral, and motion-rich widgets implementing the <a href=\"https://material.io/design/guidelines-overview\">Material Design guidelines</a>.",
+    "name": "Material 2 Components",
+    "description": "Widgets implementing the <a href=\"https://m2.material.io/design\">Material 2 Design guidelines</a>.",
+    "pagecontent": "Flutter will make Material 3 (M3), the latest version of Material Design, the default in late 2023. Check out our <a href=\"/development/ui/widgets/material/\">M3 widget catalog</a> now.",
     "subcategories": [
       {
         "name": "App structure and navigation"
@@ -28,6 +29,40 @@
         "name": "Layout"
       }
     ],
+    "id": "material2"
+  },  
+  {
+    "name": "Material Components",
+    "description": "Visual, behavioral, and motion-rich widgets implementing the <a href=\"https://m3.material.io/get-started\">Material 3</a> design specification.<br /><br />Material 3 becomes the default Flutter interface in late 2023. To learn more about this transition, check out <a href=\"https://m3.material.io/develop/flutter\">Flutter support for Material 3</a>.",
+    "pagecontent": "To opt into Material 3, set the <a href=\"https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html\"><code>useMaterial3</code></a> flag to <code>true</code> in your theme.<br /><br />To catch these widgets in action, check out our live Material 3 <a href=\"https://flutter.github.io/samples/web/material_3_demo\" target=\"_blank\" rel=\"noopener noreferrer\">demo app</a>.<br /><br />You can still check out our legacy <a href=\"/development/ui/widgets/material2\">Material 2 widgets</a> over at their catalog page.",
+    "subcategories": [
+      {
+        "name": "Actions",
+        "color": "#D9E7CB"
+      },
+      {
+        "name": "Communication",
+        "color": "#F9DBDA"
+      },
+      {
+        "name": "Containment",
+        "color": "#F9DBDA"
+      },
+      {
+        "name": "Navigation",
+        "color": "#E5E4C2"
+
+      },
+      {
+        "name": "Selection",
+        "color": "#D9E7CB"
+
+      },
+      {
+        "name": "Text Inputs",
+        "color": "#E5E4C2"
+      }
+    ],
     "id": "material"
   },
   {

src/_includes/docs/catalogpage-material.html

@@ -0,0 +1,53 @@
+<!-- Material 3 Catalog Page -->
+{% for section in site.data.catalog.index %}
+    {% if section.name == include.category %}
+        {% assign category = section %}
+        {% break %}
+    {% endif %}
+{% endfor %}
+
+<div class="catalog">
+    <div class="category-description">
+        <p>{{category.description}}</p>
+    </div>
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    <ul>
+        {% for sub in category.subcategories -%}
+            <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+        {% endfor -%}
+    </ul>
+    {% endif -%}
+
+    <p> {{ category.pagecontent }}</p>
+
+    {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%}
+
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    {% for sub in category.subcategories -%}
+        {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.subcategories contains sub.name" -%}
+        {% if components.size != 0 -%}
+        <h2 id="{{sub.name}}">{{sub.name}}</h2>
+        <div class="card-deck card-deck--responsive">
+            {% for comp in components -%}
+                <div class="card">
+                    <a href="{{comp.link}}">
+                        <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
+                                {{ comp.image }}
+                            <div class="card-image-material-3-hover">
+                                {{ comp.hoverimage }}
+                            </div>
+                        </div>
+                    </a>
+                    <div class="card-body">
+                        <a href="{{comp.link}}"><header class="card-title card-title-material-3">{{comp.name}}</header></a>
+                        <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
+                    </div>
+                </div>
+            {% endfor -%}
+        </div>
+        {% endif -%}
+    {% endfor -%}
+    {% endif -%}
+
+    <p>Check out more widgets in the <a href="{{site.url}}/development/ui/widgets">widget catalog</a>.</p>
+</div>

src/_includes/docs/catalogpage.html

@@ -17,6 +17,8 @@
     </ul>
     {% endif -%}
 
+    <p>{{ category.pagecontent }}</p>
+
     <p>See more widgets in the <a href="{{site.url}}/development/ui/widgets">widget catalog</a>.</p>
 
     {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%}

src/_sass/base/_base.scss

@@ -63,6 +63,48 @@ dd {
   }
 }
 
+.card-title-material-3 {
+  color: $site-color-body;
+}
+
+.card-image-holder-material-3 {
+  align-items: center;
+  z-index: -1;
+  background-size: 0%;
+  opacity: .999;
+  background-color: var(--bg-color, white);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    z-index: 1;
+  }
+}
+
+.card-image-material-3-hover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: .25s ease;
+  z-index: -1;
+
+ img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+   z-index: -1;
+
+   }
+}
+
+.card-image-holder-material-3:hover .card-image-material-3-hover {
+  opacity: 1;
+}
+
 .happy-paths-image-holder {
   align-items: left;
   display: flex;

src/development/ui/widgets/index.md

@@ -11,15 +11,18 @@ you can also see all the widgets in the [widget index][].
 <div class="card-deck card-deck--responsive">
 {% assign categories = site.data.catalog.index | sort: 'name' -%}
 {% for section in categories %}
-    <div class="card">
-        <div class="card-body">
-            <a href="{{page.url}}{{section.id}}"><header class="card-title">{{section.name}}</header></a>
-            <p class="card-text">{{section.description}}</p>
-        </div>
-        <div class="card-footer card-footer--transparent">
-            <a href="{{page.url}}{{section.id}}">Visit</a>
+    <!-- Don't display the legacy Material 2 card. It is only accessible via the Material 3 components page. -->
+    {% if section.name != "Material 2 Components" %}
+        <div class="card">
+            <div class="card-body">
+                <a href="{{page.url}}{{section.id}}"><header class="card-title">{{section.name}}</header></a>
+                <p class="card-text">{{section.description}}</p>
+            </div>
+            <div class="card-footer card-footer--transparent">
+                <a href="{{page.url}}{{section.id}}">Visit</a>
+            </div>
         </div>
-    </div>
+    {% endif -%}
 {% endfor %}
 </div>
 

src/development/ui/widgets/material.md

@@ -2,7 +2,7 @@
 title: Material Components widgets
 short-title: Material
 description: > 
-  A catalog of Flutter's widgets implementing the Material design guidelines.
+  A catalog of Flutter's widgets implementing Material 3 design guidelines.
 ---
 
-{% include docs/catalogpage.html category="Material Components" %}
+{% include docs/catalogpage-material.html category="Material Components" %}

src/development/ui/widgets/material2.md

@@ -0,0 +1,16 @@
+---
+title: Material 2 Components widgets
+short-title: Material
+description: > 
+  A catalog of Flutter's widgets implementing the Material 2 design guidelines.
+---
+
+{% include docs/catalogpage.html category="Material 2 Components" %}
+---
+title: Material 2 Components widgets
+short-title: Material
+description: > 
+  A catalog of Flutter's widgets implementing the Material 2 design guidelines.
+---
+
+{% include docs/catalogpage.html category="Material 2 Components" %}