chore(storybook): Fixes for utilizing outline-core-link as an exten…

…ded component.
phase2 · Feb 27, 2024 · fb20f5b · fb20f5b
1 parent 4b9f578
commit fb20f5b
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 60 deletions.
diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
@@ -1,2 +1 @@
-<script src="/src/index.ts" type="module"></script>
 <link rel="stylesheet" href="/global.css" />
diff --git a/packages/storybook/index.html b/packages/storybook/index.html
@@ -11,7 +11,8 @@
 </head>
 
 <body>
-  <outline-link><a href="https://github.com/phase2/outline">Outline</a></outline-link>
+  <outline-core-link><a href="https://github.com/phase2/outline">OutlineCoreLink</a></outline-core-link>
+  <outline-link><a href="https://github.com/phase2/outline">OutlineLink</a></outline-link>
 </body>
 
 </html>
diff --git a/packages/storybook/package.eval.json b/packages/storybook/package.eval.json
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -32,7 +32,8 @@
     "clean:storybook": "rimraf storybook-static",
     "clean:modules": "rimraf node_modules",
     "reset": "yarn clean && yarn install",
-    "restart": "yarn reset && yarn dev"
+    "restart": "yarn reset && yarn dev",
+    "postinstall": "patch-package"
   },
   "keywords": [
     "web-components",
@@ -47,7 +48,7 @@
     "@phase2/outline-config": "^0.0.14",
     "@phase2/outline-core": "^0.2.7",
     "@phase2/outline-core-alert": "^0.0.2",
-    "@phase2/outline-core-link": "^0.0.11",
+    "@phase2/outline-core-link": "^0.0.14",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
     "postcss": "^8.3.0",
     "postcss-discard-comments": "^5.1.0",
     "postcss-load-config": "^5.0.3",

diff --git a/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx b/packages/storybook/src/components/shared/outline-link/docs/outline-link.mdx
@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
+import { OutlineLink } from '../outline-link';
 
 <Meta
   title="Core Components/Link"
@@ -15,6 +16,8 @@ import { Meta } from '@storybook/addon-docs';
 # `OutlineLink`: `outline-link`
 
 > This is an `outline-link` component. 
+> This component is a wrapper around an anchor tag that provides a consistent style for links.
+> This component extends `OutlineCoreLink` and adds custom styling.
 
 <outline-link><a href="https://github.com/phase2/outline" class="sb-unstyled">Outline</a></outline-link>
 

diff --git a/packages/storybook/src/components/shared/outline-link/outline-link.ts b/packages/storybook/src/components/shared/outline-link/outline-link.ts
@@ -1,9 +1,11 @@
 import { customElement } from 'lit/decorators.js';
-import { LitElement, html } from 'lit';
-// import { OutlineCoreLink } from '@phase2/outline-core-link';
+import { html } from 'lit';
+
+import { OutlineCoreLink } from '@phase2/outline-core-link';
 import globalStyles from './styles/outline-link.global.css?inline';
 import encapsulatedStyles from './styles/outline-link.encapsulated.css?inline';
 import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
+
 /**
  * Link component.
  *
@@ -13,7 +15,7 @@ import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controll
  * @extends OutlineCoreLink
  */
 @customElement('outline-link')
-export class OutlineLink extends LitElement {
+export class OutlineLink extends OutlineCoreLink {
   GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets(
     this,
     globalStyles,
@@ -29,10 +31,17 @@ export class OutlineLink extends LitElement {
       : undefined;
     return root;
   }
+
+  /**
+   * Overrides the render method from the parent class to wrap the rendered content
+   * in a div with the class "encapsulated-container". This demonstrates the difference
+   * between encapsulated and light DOM styling.
+   *
+   * @category rendering
+   * @returns {TemplateResult} The template to render.
+   */
   render() {
-    return html` <div class="encapsulated-container">
-      <slot></slot>
-    </div>`;
+    return html` <div class="encapsulated-container">${super.render()}</div> `;
   }
 }
 

diff --git a/packages/storybook/src/components/shared/outline-link/styles/outline-link.imported.css b/packages/storybook/src/components/shared/outline-link/styles/outline-link.imported.css
@@ -1,8 +1,8 @@
 a {
-  color: red;
+  color: purple;
   font-weight: bold;
   text-decoration: none;
-  border-bottom: 1px solid red;
+  border-bottom: 5px solid red;
   transition: border-color 0.3s ease;
 
   &:hover {

diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
@@ -23,6 +23,6 @@
     "useDefineForClassFields": false,
     "esModuleInterop": true
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "node_modules/@phase2/**/*.ts"],
   "exclude": ["node_modules"]
 }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		<script src="/src/index.ts" type="module"></script>
		<link rel="stylesheet" href="/global.css" />