Skip to content

Commit bef830e

Browse files
stephiescastlestephiescastle
authored
Feature: theming enhancements and additions (#459)
* adding theme store, adjusting colors, fixing unsplash images * adding more options to the nuxt module, adding PageEventDetail component * updating package.json and updating nuxt module tsconfig * fixing typescript errors in nuxt module * fixing type error in PageEventDetail * adding reverse-primary button variation, adding bg-stars * updating gitignore * rebuilding packages * updating color tokens in components * cleaning up star backgrounds * lint * fixing html-storybook * updating type styles for EDU theme * adding foundational docs to vue-storybook, adding mixinCarousel story * fixing order of operations when building nuxt module * adding assets to vue-storybook public folder * adding PageListingIndex template component
1 parent 5d96efc commit bef830e

File tree

182 files changed

+4203
-9954
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

182 files changed

+4203
-9954
lines changed

‎.gitignore

+12-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,18 @@ storybook_compiled
6868
# copied assets when preparing builds
6969
apps/**/.storybook/static/dist
7070
packages/**/src/assets/fonts
71+
apps/**/public/explorer-1/
72+
apps/**/public/edu/explorer-1/
73+
packages/**/public/explorer-1/
74+
packages/**/public/edu/explorer-1/
75+
!public/explorer-1/**/.gitkeep
76+
!packages/common/src/public/explorer-1
77+
apps/vue-storybook/public/fonts
78+
apps/vue-storybook/public/css
7179

7280
# dist
7381
dist
74-
!packages/**/dist
82+
!packages/**/dist
83+
84+
85+
!.gitkeep

‎apps/html-storybook/.storybook/preview.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import '@explorer-1/html/src/assets/scss/styles.scss'
44
import './../public/dist/css/font-face.css'
55
import '@explorer-1/html/src/main.js'
66
import '@explorer-1/common-storybook/src/config/canvas.css'
7-
import { withGlobals } from '@explorer-1/common-storybook/src/config/withGlobals'
7+
import { withGlobals } from './withGlobals'
88

99
// viewports that match our tailwind config
1010
const customViewports = {

‎packages/common-storybook/src/config/withGlobals.ts ‎apps/html-storybook/.storybook/withGlobals.ts

File renamed without changes.

‎apps/html-storybook/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
"prettier": "@explorer-1/prettier-config",
1515
"scripts": {
1616
"dev": "pnpm run storybook",
17-
"prepare": "npm run prepare:clean && npm run prepare:public",
17+
"prepare": "npm run prepare:clean && npm run prepare:assets",
1818
"prepare:clean": "rimraf ./public/dist",
19-
"prepare:public": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist",
19+
"prepare:assets": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist",
2020
"storybook": "pnpm run prepare && storybook dev -c .storybook -p 7007 --ci",
2121
"lint": "eslint .storybook",
2222
"lint:fix": "eslint .storybook --fix",

‎apps/vue-storybook/.storybook/main.ts

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
/** @type { import('@storybook/vue3-vite').StorybookConfig } */
2+
import remarkGfm from 'remark-gfm'
23
const config = {
3-
stories: ['./../stories/**/*.stories.@(js|jsx|ts|tsx)'],
4+
stories: [
5+
'./../stories/**/*.stories.@(js|jsx|ts|tsx)',
6+
'./../stories/**/*.docs.mdx',
7+
'./../docs/**/*.stories.@(js|jsx|ts|tsx)',
8+
'./../docs/**/*.docs.mdx'
9+
],
410
addons: [
511
{
612
name: '@storybook/addon-essentials',
@@ -10,11 +16,25 @@ const config = {
1016
outlines: false
1117
}
1218
},
19+
{
20+
name: '@storybook/addon-docs',
21+
options: {
22+
mdxPluginOptions: {
23+
mdxCompileOptions: {
24+
remarkPlugins: [remarkGfm]
25+
}
26+
}
27+
}
28+
},
1329
'@storybook/addon-a11y',
1430
'@whitespace/storybook-addon-html',
1531
'storybook-addon-vue-slots'
1632
],
17-
33+
staticDirs: [
34+
'./../public',
35+
'./../node_modules/@explorer-1/common-storybook/src/public',
36+
'./../node_modules/@explorer-1/common/src'
37+
],
1838
framework: {
1939
name: '@storybook/vue3-vite',
2040
options: {}

‎apps/vue-storybook/.storybook/manager-head.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<style type="text/css">
2+
/* styles for the storybook sidebar */
3+
@import 'css/font-face.css';
4+
5+
.sidebar-item {
6+
font-family: Metropolis, sans-serif !important;
7+
line-height: 1.2rem !important;
8+
display: flex !important;
9+
align-items: center !important;
10+
}
11+
.sidebar-item svg:not([type='document']) {
12+
color: inherit !important;
13+
}
14+
15+
/* www should be in uppercase */
16+
.sidebar-item#www {
17+
text-transform: uppercase;
18+
}
19+
20+
/* create illusion of hrs between sidebar sections */
21+
.sidebar-item#www,
22+
.sidebar-item#appendix {
23+
border-radius: 0;
24+
border-top: 2px solid rgba(0, 0, 0, 0.1);
25+
margin-top: 0.5rem;
26+
padding-top: 1rem !important;
27+
}
28+
29+
/* logo placement tweaks */
30+
.sidebar-header > div {
31+
margin-right: 0 !important;
32+
}
33+
.sidebar-header a {
34+
margin: 6px 0 !important;
35+
}
36+
.sidebar-header a > img {
37+
max-width: none !important;
38+
max-height: none !important;
39+
}
40+
</style>

‎apps/vue-storybook/.storybook/manager.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// customizing Storybook's manager UI
2+
// see config options: https://storybook.js.org/docs/vue/configure/features-and-behavior
3+
4+
import { addons } from '@storybook/manager-api'
5+
import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
6+
7+
// to collapse all sections and use custom theme
8+
addons.setConfig({
9+
theme: customTheme,
10+
sidebar: { showRoots: false }
11+
})

‎apps/vue-storybook/.storybook/preview-head.html

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<style type="text/css">
2+
/* styles for docs tab */
3+
/* @import 'dist/css/font-face.css'; */
4+
5+
#storybook-docs
6+
.sbdocs
7+
.sbdocs-content
8+
*:not(.sbdocs-preview, .sbdocs-preview *, pre, pre *, code, code *) {
9+
font-family: Metropolis, sans-serif !important;
10+
}
11+
/* make docs have full width iframes
12+
** rescopes width to all nested divs, not the container wrapper */
13+
.sbdocs.sbdocs-content {
14+
max-width: 1950px;
15+
}
16+
.sbdocs.sbdocs-content > * {
17+
width: 100%;
18+
max-width: 950px;
19+
margin-left: auto;
20+
margin-right: auto;
21+
}
22+
.sbdocs.sbdocs-content > div[id*='anchor--'],
23+
.sbdocs.sbdocs-content .reactdocs-content {
24+
max-width: none;
25+
}
26+
.sbdocs.sbdocs-content > div[id*='anchor--'] > *,
27+
.sbdocs.sbdocs-content .reactdocs-content > div,
28+
.reactdocs-container {
29+
width: 100%;
30+
max-width: 950px;
31+
margin-left: auto;
32+
margin-right: auto;
33+
}
34+
35+
/* .sbdocs.sbdocs-content .sbdocs-pre {
36+
margin-left: auto;
37+
margin-right: auto;
38+
} */
39+
.sbdocs.sbdocs-content > pre {
40+
margin-left: auto;
41+
margin-right: auto;
42+
}
43+
44+
.sbdocs .sbdocs-content ol:not(.list-none) {
45+
list-style-type: decimal;
46+
}
47+
48+
/* custom border color for h2 to match gray-light-mid */
49+
.sbdocs.sbdocs-h2 {
50+
border-bottom: 1px solid rgba(216, 216, 216, 1);
51+
}
52+
53+
/* .sbdocs-preview-full-width overrides max width in doc view
54+
** use this class via the `className` prop on Canvas
55+
*/
56+
.sbdocs.sbdocs-content .sbdocs-preview-full-width,
57+
.sbdocs-preview-full-width .sbdocs.sbdocs-content .sbdocs-preview,
58+
.sbdocs.sbdocs-content .sb-anchor .sbdocs-preview {
59+
max-width: none !important;
60+
margin-top: 2rem;
61+
margin-bottom: 2rem;
62+
}
63+
64+
/* unset the mysterious height that storybook adds to Canvas doc blocks rendered via a React component */
65+
.sbdocs.sbdocs-content .reactdocs-content .sbdocs-preview .docs-story div[height='20'] {
66+
height: unset;
67+
}
68+
69+
/* sometimes inline stories still need an explicit height set */
70+
.sbdocs-inline-height .docs-story {
71+
height: 500px !important;
72+
}
73+
.sbdocs-inline-height-2xs .docs-story {
74+
height: 200px !important;
75+
}
76+
.sbdocs-inline-height-xs .docs-story {
77+
height: 300px !important;
78+
}
79+
.sbdocs-inline-height-sm .docs-story {
80+
height: 400px !important;
81+
}
82+
.sbdocs-inline-height-lg .docs-story {
83+
height: 600px !important;
84+
}
85+
.sbdocs-inline-height-xl .docs-story {
86+
height: 700px !important;
87+
}
88+
.sbdocs-inline-height-2xl .docs-story {
89+
height: 800px !important;
90+
}
91+
.sbdocs-inline-height .docs-story > div:first-child {
92+
height: inherit !important;
93+
}
94+
95+
/* sbdocs link style */
96+
.sbdocs.sbdocs-a {
97+
font-weight: 600;
98+
border-bottom: 1px solid #489fdf;
99+
color: black;
100+
}
101+
.sbdocs.sbdocs-a:hover {
102+
border-bottom-color: black;
103+
}
104+
105+
/* sbdocs table styles */
106+
.sbdocs.sbdocs-table {
107+
margin-top: 24px;
108+
margin-bottom: 24px;
109+
}
110+
.sbdocs.sbdocs-table tr:nth-of-type(2n) {
111+
background: white;
112+
}
113+
.sbdocs.sbdocs-table tr th,
114+
.sbdocs.sbdocs-table tr td {
115+
border-left: none;
116+
border-right: none;
117+
}
118+
119+
/* tag or image alignment */
120+
.sbdocs.sbdocs-content img[src*='#left'] {
121+
float: left;
122+
}
123+
.sbdocs.sbdocs-content img[src*='#right'] {
124+
float: right;
125+
}
126+
.sbdocs.sbdocs-content img[src*='#center'] {
127+
display: block;
128+
margin: auto;
129+
}
130+
.sbdocs.sbdocs-content img[src*='#inline'] {
131+
display: inline;
132+
}
133+
134+
/* background color for code blocks */
135+
.sbdocs .docblock-source {
136+
background-color: #f5f5f5;
137+
}
138+
139+
/* make details > summary text appear clickable in docs */
140+
.sbdocs details > summary {
141+
cursor: pointer;
142+
}
143+
.sbdocs details > summary > .sbdocs-span {
144+
font-size: unset !important;
145+
}
146+
</style>

0 commit comments

Comments
 (0)