Skip to content

Commit

Permalink
Merge pull request #4 from phase2/issue/213-compare-outline-wg-and-ou…
Browse files Browse the repository at this point in the history 
…tline-templates-for-component-compatibility

213: Compare outline-wg and outline-templates for component compatibility
  • Loading branch information
@jardix22
jardix22 authored Apr 16, 2024
2 parents b48ae0c + 526c6ce commit 126bc6b
Show file tree
Hide file tree
Showing 18 changed files with 578 additions and 167 deletions.
45 changes: 27 additions & 18 deletions packages/storybook/.eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,55 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"lit"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:lit/recommended",
"plugin:storybook/recommended"
"plugin:storybook/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "lit"],
"env": {
"browser": true,
"es2021": true
},
"globals": {
"process": "readonly"
},
"rules": {
"no-prototype-builtins": "off",
"no-nested-ternary": 2,
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/no-explicit-any": "error",
"lit/no-invalid-html": "error"
},
"overrides": [
{
"files": [
"*.ts"
],
"rules": {
"@typescript-eslint/explicit-module-boundary-types": "off"
"files": ["*.config.js"],
"env": {
"node": true
}
},
{
"files": [
"*.js"
"*.js",
"*_test.ts",
"**/custom_typings/*.ts",
"packages/lit-ssr/src/test/integration/tests/**",
"packages/lit-ssr/src/lib/util/parse5-utils.ts"
],
"rules": {
"@typescript-eslint/no-var-requires": "off"
Expand Down
9 changes: 5 additions & 4 deletions packages/storybook/.prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"arrowParens": "always",
"arrowParens": "avoid",
"bracketSpacing": true,
"jsxSingleQuote": true,
"jsxSingleQuote": false,
"quoteProps": "consistent",
"printWidth": 80,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
"trailingComma": "es5",
"useTabs": false,
"plugins": ["prettier-plugin-css-order"]
}
35 changes: 19 additions & 16 deletions packages/storybook/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component Test Page</title>
<script src="/src/index.ts" type="module"></script>
<link rel="stylesheet" href="/global.css" />
</head>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component Test Page</title>
<script src="/src/index.ts" type="module"></script>
<link rel="stylesheet" href="/global.css" />
</head>

<body>
<p><outline-core-link><a href="https://github.com/phase2/outline">outline-core-link</a></outline-core-link></p>
<p><outline-link><a href="https://github.com/phase2/outline">outline-link</a></outline-link></p>
<p><a href="https://github.com/phase2/outline">Normal a tag link</a></p>
</body>

<body>
<p>
<outline-example>
<a href="https://github.com/phase2/outline">outline-example</a>
</outline-example>
</p>
<p>
<a href="https://github.com/phase2/outline">Normal a tag link</a>
</p>
</body>
</html>
31 changes: 16 additions & 15 deletions packages/storybook/outline.theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
--brand-octonary: #525252;
--brand-nonary: #1e3a8a;
--brand-denary: #171717;

/* Colors for UI notification messages. */
--status-success: #2f855a;
--status-warning: #b64301;
Expand All @@ -28,7 +28,7 @@
--outline-transparent: transparent;
--outline-white: #fff;
--outline-black: #000;

--outline-gray-50: #fafafa;
--outline-gray-100: #f5f5f5;
--outline-gray-200: #e5e5e5;
Expand Down Expand Up @@ -200,48 +200,47 @@
--fs-h1: 4rem;
--fs-h1-medium: 3rem;
--fs-h1-small: 2.5rem;

--lh-h1: 3rem;
--lh-h1-medium: 3.75rem;
--lh-h1-small: 2rem;

--fs-h2: 2.75rem;
--fs-h2-medium: 2.5rem;
--fs-h2-small: 2rem;

--lh-h2: 3.5rem;
--lh-h2-medium: 3rem;
--lh-h2-small: 2.5rem;


--fs-h3: 2rem;
--fs-h3-medium: 1.75rem;
--fs-h3-small: 1.5rem;

--lh-h3: 2.25rem;
--lh-h3-medium: 2rem;
--lh-h3-small: 1.75rem;

--fs-h4: 1.5rem;
--fs-h4-medium: 1.5rem;
--fs-h4-small: 1.375rem;

--lh-h4: 2rem;
--lh-h4-medium: 1.75rem;
--lh-h4-small: 1.75rem;

--fs-h5: 1.375rem;
--fs-h5-medium: 1.25rem;
--fs-h5-small: 1.125rem;

--lh-h5: 1.75rem;
--lh-h5-medium: 1.5rem;
--lh-h5-small: 1.375rem;

--fs-h6: 1.125rem;
--fs-h6-medium: 1.125rem;
--fs-h6-small: 1rem;

--lh-h6: 1.5rem;
--lh-h6-medium: 1.375rem;
--lh-h6-small: 1.25rem;
Expand All @@ -254,14 +253,16 @@
--outline-ring-color: var(--outline-soft-black);
--outline-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
--outline-ring-shadow: 0 0 rgba(0, 0, 0, 0);
--outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-ring-offset-color);
--outline-ring-shadow: var(--outline-ring-inset) 0 0 0 calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) var(--outline-ring-color);
--outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0
var(--outline-ring-offset-width) var(--outline-ring-offset-color);
--outline-ring-shadow: var(--outline-ring-inset) 0 0 0
calc(var(--outline-ring-width) + var(--outline-ring-offset-width))
var(--outline-ring-color);

--outline-shadow: 0 0 rgba(0, 0, 0, 0);
--outline-shadow-colored: 0 0 rgba(0, 0, 0, 0);

/*
* Custom variables overriding default variables.
*/

}
17 changes: 12 additions & 5 deletions packages/storybook/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@
"clean:modules": "rimraf node_modules",
"reset": "yarn clean && yarn install",
"restart": "yarn reset && yarn dev",
"postinstall": "patch-package"
"postinstall": "patch-package",
"format": "npm-run-all -s 'format:**'",
"format:code": "eslint --fix . && prettier --write .",
"format:svg": "svgo -f ./src -r --config=svgo.config.cjs",
"fix": "yarn format"
},
"keywords": [
"web-components",
Expand All @@ -44,13 +48,11 @@
"node": ">=20"
},
"dependencies": {
"@phase2/outline-adopted-stylesheets-controller": "^1.0.4",
"@phase2/outline-config": "^0.0.14",
"lit": "^3.1.2"
},
"devDependencies": {
"@phase2/outline-adopted-stylesheets-controller": "^1.0.4",
"@phase2/outline-config": "^0.0.14",
"@phase2/outline-core-alert": "^0.0.4",
"@phase2/outline-docs": "^0.0.21",
"@storybook/addon-essentials": "^7.6.17",
"@storybook/addon-links": "^7.6.17",
"@storybook/blocks": "^7.6.17",
Expand All @@ -63,6 +65,7 @@
"@typescript-eslint/parser": "^5.0.0",
"esbuild-decorators": "^1.0.0",
"eslint": "^8.56.0",
"eslint-plugin-lit": "^1.11.0",
"eslint-plugin-storybook": "^0.8.0",
"glob": "^10.3.10",
"npm-run-all": "^4.1.5",
Expand All @@ -74,11 +77,15 @@
"postcss-nested-import": "^1.3.0",
"postcss-nesting": "^12.0.2",
"postcss-preset-env": "^9.3.0",
"prettier": "^3.2.5",
"prettier-plugin-css-order": "^2.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^3.0.2",
"rollup-plugin-terser": "^7.0.2",
"rsync": "^0.6.1",
"storybook": "^7.6.17",
"svgo": "^3.2.0",
"ts-lit-plugin": "^2.0.2",
"typescript": "^5.3.3",
"vite": "^5.1.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/public/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
}

body {
font-family: Roboto, sans-serif;
font-size: 16px;
font-family: Roboto, sans-serif;
}
2 changes: 1 addition & 1 deletion ...s/storybook/src/components/shared/outline-example/styles/outline-example.encapsulated.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.encapsulated-container {
padding: 15px;
background-color: #f5f5f5;
padding: 15px;
}
4 changes: 2 additions & 2 deletions packages/storybook/src/components/shared/outline-example/styles/outline-example.imported.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
a {
transition: border-color 0.3s ease;
border-bottom: 5px solid red;
color: purple;
font-weight: bold;
text-decoration: none;
border-bottom: 5px solid red;
transition: border-color 0.3s ease;

&:hover {
border-color: transparent;
Expand Down
67 changes: 36 additions & 31 deletions packages/storybook/src/stories/Configure.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,37 @@
import { Meta } from "@storybook/blocks";

import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
import Tutorials from "./assets/tutorials.svg";
import Styling from "./assets/styling.png";
import Context from "./assets/context.png";
import Assets from "./assets/assets.png";
import Docs from "./assets/docs.png";
import Share from "./assets/share.png";
import FigmaPlugin from "./assets/figma-plugin.png";
import Testing from "./assets/testing.png";
import Accessibility from "./assets/accessibility.png";
import Theming from "./assets/theming.png";
import AddonLibrary from "./assets/addon-library.png";

export const RightArrow = () => <svg
viewBox="0 0 14 14"
width="8px"
height="14px"
style={{
marginLeft: '4px',
display: 'inline-block',
shapeRendering: 'inherit',
verticalAlign: 'middle',
fill: 'currentColor',
'path fill': 'currentColor'
import { Meta } from '@storybook/blocks';

import Github from './assets/github.svg';
import Discord from './assets/discord.svg';
import Youtube from './assets/youtube.svg';
import Tutorials from './assets/tutorials.svg';
import Styling from './assets/styling.png';
import Context from './assets/context.png';
import Assets from './assets/assets.png';
import Docs from './assets/docs.png';
import Share from './assets/share.png';
import FigmaPlugin from './assets/figma-plugin.png';
import Testing from './assets/testing.png';
import Accessibility from './assets/accessibility.png';
import Theming from './assets/theming.png';
import AddonLibrary from './assets/addon-library.png';

export const RightArrow = () => (
<svg
viewBox="0 0 14 14"
width="8px"
height="14px"
style={{
'marginLeft': '4px',
'display': 'inline-block',
'shapeRendering': 'inherit',
'verticalAlign': 'middle',
'fill': 'currentColor',
'path fill': 'currentColor',
}}
>
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>
>
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>
);

<Meta title="Welcome Guide/Configure your project" />

Expand All @@ -38,6 +40,7 @@ export const RightArrow = () => <svg
# Configure your project

Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.

</div>
<div className="sb-section">
<div className="sb-section-item">
Expand Down Expand Up @@ -84,6 +87,7 @@ export const RightArrow = () => <svg
# Do more with Storybook

Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.

</div>

<div className="sb-section">
Expand Down Expand Up @@ -203,6 +207,7 @@ export const RightArrow = () => <svg
target="_blank"
>Discover tutorials<RightArrow /></a>
</div>

</div>

<style>
Expand Down
Loading

0 comments on commit 126bc6b

Please sign in to comment.