Skip to content

Commit f50368b

Browse files
castastrophekylebuch8
castastrophe
and
kylebuch8
authored
fix: Storybook bug fixes; jump links imports (#828)
* feat Add theming support to storybook * feat Update theming to support custom color * feat Remove commented out code * feat Remove reset functionality * feat Add Color prototype to utilities * feat Clean up color prototype, add todo notes * Update Color object with latest code * Update CHANGELOG-prerelease.md * feat: Update version dependencies * feat: Update dep for pfe-jump-links * feat: Add a dynamic context if custom is selected * Revert package updates * Update CHANGELOG-prerelease.md * feat: Updating styles to latest * feat: Working through some jump links issues via storybook * feat: Fix bug in panel on jump links * feat: Update other references to autoPropKnobs * feat: Fixing storybook * feat: Remove requirement for storybook bridge to be passed to method; move styles to separate css * feat: Remove list overrides from base styles * feat: Fix 2 more minor storybook bugs * removing console.log * removing priority override Co-authored-by: Kyle Buchanan <[email protected]>
1 parent 4608cba commit f50368b

File tree

40 files changed

+1242
-814
lines changed

40 files changed

+1242
-814
lines changed

‎.storybook/color.js‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
export function Color(initial) {
2+
const getsRGB = (c) => {
3+
let item = c / 255;
4+
item =
5+
item <= 0.03928
6+
? item / 12.92
7+
: Math.pow((item + 0.055) / 1.055, 2.4);
8+
return item;
9+
};
10+
11+
this.getRGBA = (string) => {
12+
const rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/;
13+
let match, check, getColor;
14+
15+
// Create an element upon which to attach this color
16+
check = document.createElement("span");
17+
check.style.setProperty("background-color", string);
18+
check.style.setProperty("display", "none");
19+
document.querySelector("body").appendChild(check);
20+
21+
// Get the color from this new element
22+
getColor = window
23+
.getComputedStyle(check, null)
24+
.getPropertyValue("background-color");
25+
26+
if ((match = getColor.match(rgbRegex))) {
27+
this.red = match[1];
28+
this.green = match[2];
29+
this.blue = match[3];
30+
this.opacity = match[4] || 1;
31+
}
32+
33+
return this;
34+
};
35+
36+
this.setHSL = () => {
37+
let r = this.red / 255;
38+
let g = this.green / 255;
39+
let b = this.blue / 255;
40+
41+
let min = Math.min(r, g, b);
42+
let max = Math.max(r, g, b);
43+
let diff = max - min;
44+
45+
this.lightness = (max + min) / 2;
46+
47+
if (max === min) {
48+
// Achromatic
49+
this.hue = 0;
50+
this.saturation = 0;
51+
} else {
52+
this.saturation =
53+
this.lightness < 0.5
54+
? diff / (max + min)
55+
: diff / (2 - max - min);
56+
57+
switch (max) {
58+
case r:
59+
this.hue = (g - b) / diff + (g < b ? 6 : 0);
60+
break;
61+
case g:
62+
this.hue = (b - r) / diff + 2;
63+
break;
64+
case b:
65+
this.hue = (r - g) / diff + 4;
66+
break;
67+
}
68+
69+
this.hue = this.hue / 6;
70+
}
71+
};
72+
73+
this.random = (limit = {}) => {
74+
let lower;
75+
let upper;
76+
function checkRange(lower, upper) {
77+
if (lower > upper) {
78+
console.warn(
79+
`Color.random() | ${color}: The lower limit (${lower}) must be a smaller number than the upper limit (${upper}).`
80+
);
81+
// Switch the values
82+
return [upper, lower];
83+
}
84+
85+
return [lower, upper];
86+
}
87+
88+
limit = Object.assign(
89+
{
90+
red: {},
91+
green: {},
92+
blue: {},
93+
opacity: {}
94+
},
95+
limit
96+
);
97+
98+
["red", "green", "blue"].forEach((color) => {
99+
lower = limit[color].lower || 1;
100+
upper = limit[color].upper || 255;
101+
[lower, upper] = checkRange(lower, upper);
102+
this[color] = Math.floor(Math.random() * (upper - lower)) + lower;
103+
});
104+
105+
lower = limit.opacity.lower || 0;
106+
upper = limit.opacity.upper || 1;
107+
[lower, upper] = checkRange(lower, upper);
108+
this.opacity =
109+
Math.round((Math.random() * (upper - lower) + lower) * 100) / 100;
110+
111+
this.setHSL();
112+
return this;
113+
};
114+
115+
// Initialize color
116+
if (typeof initial === "string") {
117+
this.getRGBA(initial);
118+
} else if (typeof initial === "object") {
119+
this.red = initial.red || 0;
120+
this.green = initial.green || 0;
121+
this.blue = initial.blue || 0;
122+
this.opacity = initial.opacity || 1;
123+
}
124+
125+
this.setHSL();
126+
127+
Object.defineProperty(this, "brightness", {
128+
get() {
129+
return (
130+
1 -
131+
(0.299 * this.red + 0.587 * this.green + 0.114 * this.blue) /
132+
255
133+
);
134+
}
135+
});
136+
137+
Object.defineProperty(this, "luminance", {
138+
get() {
139+
return (
140+
0.2126 * getsRGB(this.red) +
141+
0.7152 * getsRGB(this.green) +
142+
0.0722 * getsRGB(this.blue)
143+
);
144+
}
145+
});
146+
147+
Object.defineProperty(this, "rgba", {
148+
get() {
149+
return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.opacity})`;
150+
}
151+
});
152+
153+
Object.defineProperty(this, "rgb", {
154+
get() {
155+
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
156+
}
157+
});
158+
159+
Object.defineProperty(this, "hex", {
160+
get() {
161+
function convert(num) {
162+
let hex;
163+
num = num < 1 ? Math.round(num * 255) : num;
164+
hex = Number(num).toString(16);
165+
return hex.length < 2 ? "0" + hex : hex;
166+
}
167+
168+
return `#${convert(this.red)}${convert(this.green)}${convert(
169+
this.blue
170+
)}${convert(this.opacity)}`;
171+
}
172+
});
173+
174+
Object.defineProperty(this, "hsla", {
175+
get() {
176+
return `hsla(${Math.floor(this.hue * 360)}, ${Math.floor(
177+
this.saturation * 100
178+
)}%, ${Math.floor(this.lightness * 100)}%, ${this.opacity})`;
179+
}
180+
});
181+
182+
this.difference = (compare) => {
183+
if (typeof compare === "object") {
184+
return (
185+
Math.max(this.red, compare.red) -
186+
Math.min(this.red, compare.red) +
187+
(Math.max(this.green, compare.green) -
188+
Math.min(this.green, compare.green)) +
189+
(Math.max(this.blue, compare.blue) -
190+
Math.min(this.blue, compare.blue))
191+
);
192+
}
193+
};
194+
195+
// WIP
196+
this.a11yRating = (type) => {
197+
const results = ["FAIL", "AA", "AAA"];
198+
let l1, l2, contrast;
199+
let ret = results[0];
200+
201+
// Collect typography values
202+
const styles = window.getComputedStyle(type, null);
203+
const size = parseInt(styles.getPropertyValue("font-size"));
204+
const weight = parseInt(styles.getPropertyValue("font-weight"));
205+
const color = new Color(styles.getPropertyValue("color"));
206+
207+
l1 = color.luminance;
208+
l2 = this.luminance;
209+
210+
contrast =
211+
Math.floor(
212+
((Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)) * 100
213+
) / 100;
214+
215+
// AAA Large means that your large text has a contrast ratio of 4.5 or higher, which is the same score as AA
216+
// The WCAG describes 14pt bold and 18pt as "large" sizes
217+
if (size < 24 && (size < 18.5 || weight < 400)) {
218+
// Requires 4.5:1 contrast ratio
219+
if (contrast > 4.5) {
220+
ret = results[1];
221+
} else if (contrast > 7) {
222+
ret = results[2];
223+
}
224+
} else {
225+
// Requires 3:1 contrast ratio
226+
if (contrast > 3) {
227+
ret = results[1];
228+
} else if (contrast > 4.5) {
229+
ret = results[2];
230+
}
231+
}
232+
233+
// @TODO how to include opacity in this?
234+
235+
return {
236+
background: this.hex,
237+
foreground: color.hex,
238+
ratio: contrast,
239+
rating: ret
240+
};
241+
};
242+
}

‎.storybook/config.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { configure, addParameters } from "@storybook/polymer";
22

3-
import "./test-theme.css";
3+
import "./custom-theme.css";
44

55
const req = require.context("../elements", true, /\.story\.js$/);
66

@@ -13,22 +13,7 @@ addParameters({
1313
brandTitle: "PatternFly Elements",
1414
brandUrl: "/"
1515
}
16-
},
17-
backgrounds: [
18-
{
19-
name: "light",
20-
value: "#fff",
21-
default: true
22-
},
23-
{
24-
name: "dark",
25-
value: "#252525"
26-
},
27-
{
28-
name: "saturated",
29-
value: "#007a87"
30-
}
31-
]
16+
}
3217
});
3318

3419
function loadStories() {

‎.storybook/custom-theme.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
margin: 5px 10px;
3+
}
4+
5+
.sb-show-main pre {
6+
font-family: "Overpass Mono", Consolas, Monaco, 'Andale Mono', monospace;
7+
white-space: pre-wrap;
8+
padding: 10px 20px;
9+
background-color: #ddd;
10+
border: 1px solid #bbb;
11+
margin: 20px 10px;
12+
}
13+
14+
hr {
15+
border: 1px solid #f0f0f0;
16+
margin: 20px 0;
17+
}
18+
19+
[on="dark"] {
20+
--pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);
21+
--pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);
22+
--pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);
23+
--pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);
24+
--pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);
25+
--pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);
26+
--pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);
27+
--pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);
28+
--pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);
29+
}
30+
31+
[on="saturated"] {
32+
--pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);
33+
--pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);
34+
--pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);
35+
--pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);
36+
--pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #8476d1);
37+
--pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);
38+
--pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);
39+
--pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);
40+
--pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);
41+
}

‎.storybook/preview-head.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
2-
<style>
3-
html,
4-
body {
5-
font-family: 'Open Sans', sans-serif;
6-
}
7-
</style>
1+
<link rel="preconnect" href="https://fonts.gstatic.com">
2+
<link
3+
href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;600;700&family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
4+
rel="stylesheet">
5+
6+
<link href="/pfe-styles/dist/pfe-base.css" rel="stylesheet">
7+
<link href="/pfe-styles/dist/pfe-layouts.css" rel="stylesheet">

‎.storybook/test-theme.css‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)