From 2daf62c331e30477b7cad35335950cdc2ec1b242 Mon Sep 17 00:00:00 2001
From: "W. Bomar" <62723358+tacc-wbomar@users.noreply.github.com>
Date: Sun, 13 Mar 2022 14:48:17 -0500
Subject: [PATCH 1/2] Web Comp. Example Page, Fix Class Attribute

Styles are applied to the element when the attribute is `class`, not `className`.
---
 lib/cli/src/frameworks/web-components/js/Page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/cli/src/frameworks/web-components/js/Page.js b/lib/cli/src/frameworks/web-components/js/Page.js
index e6c5181fe36e..53f0abd78473 100644
--- a/lib/cli/src/frameworks/web-components/js/Page.js
+++ b/lib/cli/src/frameworks/web-components/js/Page.js
@@ -43,8 +43,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
         .
       </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
         <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path

From f1d39bc2e142083bd9e8d2c555b57cb876995d66 Mon Sep 17 00:00:00 2001
From: "W. Bomar" <62723358+tacc-wbomar@users.noreply.github.com>
Date: Sun, 13 Mar 2022 14:51:21 -0500
Subject: [PATCH 2/2] Web Comp. Example Page, Mimic Class Attribute Fix

Mimic the attribute change made and tested on the respective `.js` file:
https://github.com/storybookjs/storybook/commit/2daf62c
---
 lib/cli/src/frameworks/web-components/ts/Page.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/cli/src/frameworks/web-components/ts/Page.ts b/lib/cli/src/frameworks/web-components/ts/Page.ts
index db59099e9524..19e8265157f4 100644
--- a/lib/cli/src/frameworks/web-components/ts/Page.ts
+++ b/lib/cli/src/frameworks/web-components/ts/Page.ts
@@ -50,8 +50,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
         <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
         .
       </p>
-      <div className="tip-wrapper">
-        <span className="tip">Tip</span> Adjust the width of the canvas with the
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
         <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path