Skip to content

Commit

Permalink
docs: layout css rewrite, and adding uxdot-components and more... (#1465
Browse files Browse the repository at this point in the history
)

* docs: improve tokens overview

* docs: improve patterns overview

* docs: fix sidenav token overview active

* docs: implement inital styles for rh-table on tokens pages and uxdot-search in header

* docs: fix import of toast

* docs: add text to github masthead link

* docs: improve masthead styles

* docs: improve masthead styles

* docs: improve cls

* docs: improve token pages

* docs: reduce cls

* docs: more cls reduction

* docs: improve token styles

* docs: improve tokens styles, reduce number of sections

* docs: improve token pages styles

* docs: breakpoint tokens icon size

* docs: fix broken links in tile nav for tokens

* docs: improve token typography styles

* docs: improve token typography styles adding code and correctly families on samps

* docs: intiial work on elements pages styles

* docs: move rh-tile fix to styles.css

* docs: elements page template, accordion style improvements

* docs: when tile is compact remove uxdot-example extra margin

* docs: update accordion guidelines

* docs: reorganize includes folder, relink includes

* docs: improve release notes

* docs: reorganize font location, implment css layers

* docs: add not defined styles for subnav

* docs: add not defined styles uxdot header h1reduce jitter

* docs: move header to a component partial

* docs: clean up base layout more

* docs: remove unused setting of no-js js class

* docs: remove class from sections

* docs: fix font weight in feedback

* docs: reenvision code tab

* docs: remove usersnap from base layout

* docs: clean up playground and demo css

* docs: fix default body text size

* docs: update alert docs pages

* docs: make subnav sticky, reorg some css

* docs: more css organization

* even more css organization

* docs: lint

* docs: update rh-audio docs

* docs: remove duplication of container, fix z-index

* docs: correct scroll jank with sidenav

* docs: clean up masthead styles

* docs: re-add overflow on sidenav

* docs: fix path to backpage.css

* docs: improve avatar docs

* docs: fix offset on spacerTokensTable

* docs: update badge docs

* docs: update blockquote docs

* docs: move rule  to masthead lightdom

* docs: update button docs

* docs: update card docs

* docs: improve codeblock docs

* docs: update cta docs

* docs: fix typo

* docs: adjust whitespace in card grid

* docs: update dialog docs

* docs: improve whitespace flow styles with uxdot example

* docs: remove margin when a uxdot example is used in a figure

* docs: improve deprecated docs details styles

* docs: update footer docs

* docs: use rh-tile disabled feature for coming soon items

* docs: udpate secondary nav docs

* docs: update pagination styles

* docs: update navigation docs

* docs: fix headers that have search

* docs: ensure header font styles

* docs: update popover docs

* docs: update progress steps

* docs: update spinner docs

* docs: reduce spacing between sibling h2 and h3

* docs: update stat docs

* docs: reduce bounce of masthead on load

* docs: update subnav docs

* docs: fix example darkest background

* docs: improve uxdot-best-practice

* docs: make uxdot-example a color context provider and consumer

* docs: fix uxdot-example borders last commit broke

* docs: add transparent to foundations personalization examples

* docs: correct image width on foundations color

* docs: update surface

* docs: fix danger border color in uxdot-example

* docs: update table docs

* docs: update tabs docs

* docs: reduce header bounce on load

* docs: update tag docs

* docs: update tile docs

* docs: update timestamp docs

* docs: add a :target rule for hash links scroll margin

* docs update tooltip docs

* docs: update design-code-status rh-table

* docs: initial sidenav functionality

* docs: improve lightdom css of uxdot elements

* docs: switch masthead to a fixed position to reduce bounce on scroll

* docs: correct padding when has subnav

* docs: correct padding

* docs: add :not(:defined) ahref active border style

* docs: remove commment

* docs: inital work to get toc working

* docs: update about how we build for toc

* docs: hide details marker in safari

* docs: adjust aside header size

* docs: all elements active

* docs: fix ids on personalization for toc

* docs: fix ids in grid for personalization

* docs: remove debug test

* docs: update pattern docs

* docs: update link pattern

* docs: update container width to more match layout exploration

* docs: update home styles to match layout changes

* docs: update link search-bar and skip nav pattern docs

* docs: update sticky banner, sticky card and video thumbnail patterns

* docs: fix not defined sidenav style

* docs: remove margin from ul in sidenav

* docs: normalize ordering

* docs: remove unused ordering plugin

* docs: remove test class

* docs: clean up typography styles

* docs: add skip nav component

* docs: alphabetize guard

* docs: improve sidenav

* docs: lint

* docs: full height sidenav

* docs: await update to move focus

* docs: update masthead link order

* docs: add accessibility docs to sidenav, fix merge errors

* docs: update accessibility format to match branch

* docs: add escape key closing to sidenav

* docs: add main id to elements pages

* docs: add toc to accessibility section

* docs: fix 404 links in prerelease, rename to md

* docs: remove unused files

* docs: reorganize assets move all javascript to single folder

* docs: fix lightdom css for elements broken by previous commit

* docs: style tweaks

* docs: remove headline feature from uxdot-example, not used

* docs: remove headerlevel attribute

* docs: fix best-practice implementation

* docs: fix best-practice implementation

* docs: add grid

* docs: adjusted layout with toc and added max-width to paras and headings

* docs: fixing accessibility pages and styling code and kbd elements

* docs: adjusting para line-length

* docs: update qa testing permalink and heading

* docs: remove unused shortcodes

* docs: fix shortcodes that were missed and more cleanup

* docs: rename confusing heading frontmatter for sidenavTitle

* docs: fix typo

* docs: update 404 with additional sitemap items

* docs: correct aria role

* docs: add aria-label to patterns tile nav

* docs: add aria-label get started nav

* docs: add aria-label elements nav

* docs: add aria-label to sidenav

* docs: initial RTI implementation

* docs: rename prism.css to prism-rhds.css to reflect that it is a theme

* docs: reorganize dev-server styles

* docs: correct path to woff file, eot does not exist

* docs: fix all font paths

* docs: add margin-block to li

* docs: remove underline from aside nav links

* docs: fix token header link style

* docs: set grid gap to 32px

* docs: reduce sidenav font size

* docs: lint

* docs: base text color set to primary on light

* docs: fix visited link color

* docs: use es6 syntax for backtop script

* docs: fix extra margin in sidenav

* docs: add passive to scroll listener for backtotop

* docs: merge updates missed in branch merge

* docs: update merged code to use uxdot components

* docs: uxdot-repo-status-list component

* chore: lint

* docs: add support for declarative shadowdom

* docs: remove tile override fixed at component level

* docs: remove masthead lightdom styles

* docs: fix missing semicolon

* docs: remove header lightdom styles

* docs: remove skipnav lightdom styles

* docs: fix typo

* docs: thin down sidenav lightdom to only deeply nested slotted element rules

* docs: ensure link color

* docs: fix sidenav missing style

* docs: remove extra margin on slotted ul in sidenav

* docs: removed unused helper from uxdot-example

* docs: add hero, feedback, copy-permalink to dsd list

* docs: lint

* docs: remove permalink lightdom styles

* docs: add permalink lightdom styles back to support deep nested slotted styles

* docs: add meta description, seo suggestion from lighthouse

* docs: fix about generic link text, lighthouse suggestion

* docs: fix about generic link text, lighthouse suggestion x2

* docs: add more uxdot components for DSD, reduce CLS with uxdot-header

* docs: add isServer check for uxdot-search, hard code has-subnav for element docs

* docs: lint

* docs: adjust flow given typography page specs

* docs: adjust more spacing flow based on spacing spec

* docs: switch foundations overview to use tiles instead of cards

* docs: convert toc to a uxdot component

* docs: remove marker for webkit

* docs: tweak spacing per spec

* docs : only show toc when it has content

* docs: correct max-width for h2 and p in get-started section of homepage

* docs: only load the js for components that need hydrated

* docs: remove fallback max-width

* docs: missing list indention causing early div closure for container

* docs: consolidate grid classes

* docs: remove duplicate figcaption style

* docs: backpage first child margin style

* docs: fix header centering on about page

* docs: remove custom flow styles from about page wip

* docs: reclassify styles

* docs: whoops forgot to save

* docs: ssr toc

* docs: opt just to duplicate html

* docs: add `aria-labelledby` to `<section>` tags

* docs: add rti to sidenav

* chore: update comment

* docs: reduce jank in hero load

* docs: undo hiding of the dom on dsd hydration if noscript

* docs: masthead hide link text visually on narrow screens

* docs: handle spacing when toc is not present

* docs: fix missing columns

* docs: ensure spacing between header sections

* docs: improve back-to-top positioning

* docs: fix incorrect breakpoint value

* docs: fix all other incorrect breakpoint values

* docs: fix more  incorrect breakpoint values

* docs: fix aside toc for elements pages

* docs: fix sidenav tab keyboard navigation

* docs: fix sidenave keyboard navigation tabs and rti

* docs: lint sidenav

* docs: sidenav revert change with typo

* docs: fix code status urls

* docs: remove extra space from  repo status svgs to eliminate markdown extra p tags

* docs: add important to margin-block of repo-status-list

* docs: sidenav dynamically add to RTi when details element is opened

* docs: remove commented out code

* docs: if target is a link dont preventDefault

---------

Co-authored-by: Mark Caron <[email protected]>
Co-authored-by: Adam Johnson <[email protected]>
  • Loading branch information
3 people authored Jun 10, 2024
1 parent f853997 commit 4fc8f7b
Show file tree
Hide file tree
Showing 429 changed files with 35,220 additions and 18,228 deletions.
3 changes: 1 addition & 2 deletions .pfe.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@
"description": "Red Hat Design System",
"componentSubpath": "elements",
"stylesheets": [
"/docs/assets/base.css",
"/docs/assets/demos.css"
"/docs/styles/dev-server/styles.css"
]
}
}
12 changes: 6 additions & 6 deletions CONTRIBUTING_DESIGN.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Most pages should have front matter that looks like this:

```jinja
---
layout: layout-basic.njk
layout: layouts/pages/basic.njk
title: Grid
order: -10
tags:
Expand All @@ -73,7 +73,7 @@ tags:
### Getting pages into the navigation

The navigation is an included template:
`pages/component/header.njk`
`pages/partials/component/sidenav.njk`

It is a mixture of hardcoding and dynamic listing so that it's _hopefully_ easy to understand.

Expand Down Expand Up @@ -129,14 +129,14 @@ Here's a two simple examples:

```jinja
---
layout: layout-basic.njk
layout: layouts/pages/basic.njk
title: Example page
---
```

```jinja
---
layout: layout-home.njk
layout: layouts/pages/home.njk
title: Home
---
```
Expand All @@ -146,7 +146,7 @@ This tells 11ty what the page template should be (relative to the `pages` folder
Here's an example including tags, which is a multi-value piece of data.
```jinja
---
layout: layout-basic.njk
layout: layouts/pages/basic.njk
title: Accordion Element
tags:
- javascript
Expand All @@ -164,7 +164,7 @@ the components to be used on the page:

```jinja
---
layout: layout-basic.njk
layout: layouts/pages/basic.njk
title: Card
tags:
- component
Expand Down
51 changes: 23 additions & 28 deletions docs/404.njk
Original file line number Diff line number Diff line change
@@ -1,35 +1,30 @@
---
layout: layout-basic.njk
layout: layouts/pages/basic.njk
title: Oops!
permalink: 404.html
---
<!doctype html>

{% import 'component/components.njk' as components %}

<div class="centered feature-box">
<h1 class="section-headline">404 error</h1>
<h2 class="pfe-headline-alpha">This is embarrassing, we can’t find that page</h2>
<h3 class="pfe-headline-gamma" style="margin-top:48px;">Try one of these popular links instead</h3>
<ul class="inline-list">
<li><a href="/about">About this website</a></li>
<li><a href="/foundations">Foundations</a></li>
<li><a href="/elements">Elements</a></li>
<li><a href="/patterns">Patterns</a></li>
<li><a href="/get-started">Get started</a></li>
</ul>
</div>
<div class="centered feature-box">
<h1 class="section-headline">404 error</h1>
<h2 class="pfe-headline-alpha">This is embarrassing, we can’t find that page</h2>
<h3 class="pfe-headline-gamma" style="margin-top:48px;">Try one of these popular links instead</h3>
<ul class="inline-list">
<li><a href="{{ '/about' | url }}">About this website</a></li>
<li><a href="{{ '/get-started' | url }}">Get started</a></li>
<li><a href="{{ '/foundations' | url }}">Foundations</a></li>
<li><a href="{{ '/tokens' | url }}">Tokens</a></li>
<li><a href="{{ '/elements' | url }}">Elements</a></li>
<li><a href="{{ '/patterns' | url }}">Patterns</a></li>
<li><a href="{{ '/accessibility' | url }}">Accessibility</a></li>
</ul>
</div>

<div class="multi-column--min-300-wide section section--palette-default container feedback">
<section aria-labelledby="aria__contact-us">
<h2 id="aria__contact-us">Contact us</h2>
<p>If you feel that you reached this page in error, <a href="{{ '../get-started' | url }}">contact us</a> and we'll point you in the right direction.</p>

<div>
{% call components.section("Feedback or requests") -%}
<p>Do you have any feedback? Or do you need to request something? Create an issue in our <a href="https://github.com/patternfly/patternfly-elements">GitHub repo</a> if so.</p>
{%- endcall %}
</div>
<div>
{% call components.section("Contact us") -%}
<p>If you feel that you reached this page in error, <a href="../get-started">contact us</a> and we'll point you in the right direction.</p>
{%- endcall %}
</div>
</div>
<uxdot-feedback>
<h3 slot="header">Feedback or requests</h3>
<p slot="content">Do you have any feedback? Or do you need to request something? Create an issue in our <a href="https://github.com/patternfly/patternfly-elements">GitHub repo</a> if so.</p>
</uxdot-feedback>
</section>
3 changes: 2 additions & 1 deletion docs/_data/comingSoonItems.yaml
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
- rh-breadcrumb
- rh-footnote
- rh-footnote
- rh-jump-links
53 changes: 32 additions & 21 deletions docs/_data/playgrounds.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,12 @@ module.exports = async function(data) {

const playgroundConfigsMap = new Map();

const baseCssPath = url.pathToFileURL(path.join(process.cwd(), 'docs/assets/base.css'));
const baseCssSource = await fs.readFile(baseCssPath.pathname, 'utf8');
const resetCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/reset.css'));
const resetCSSSource = await fs.readFile(resetCSS.pathname, 'utf8');
const fontsCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/fonts.css'));
const fontsCSSSource = await fs.readFile(fontsCSS.pathname, 'utf8');
const typographyCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/typography.css'));
const typographyCSSSource = await fs.readFile(typographyCSS.pathname, 'utf8');

for (const [primaryElementName, demos] of Object.entries(demoManifests)) {
const fileMap = new Map();
Expand All @@ -121,25 +125,24 @@ module.exports = async function(data) {
}

const demoSource = await fs.readFile(demo.filePath, 'utf8');

const fragment = parseFragment(demoSource);

const baseCssPathPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
const cssPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';

append(
fragment,
Tools.createCommentNode('playground-fold'),
Tools.createElement('link', {
rel: 'stylesheet',
href: 'https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css',
href: `${cssPrefix}reset.css`,
}),
Tools.createElement('link', {
rel: 'stylesheet',
href: 'https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css',
href: `${cssPrefix}fonts.css`,
}),
Tools.createElement('link', {
rel: 'stylesheet',
href: `${baseCssPathPrefix}rhds-demo-base.css`,
href: `${cssPrefix}typography.css`,
}),
Tools.createTextNode('\n\n'),
Tools.createCommentNode('playground-fold-end'),
Expand All @@ -148,10 +151,8 @@ module.exports = async function(data) {
const filename = getDemoFilename(demo);

/** @see docs/_plugins/rhds.cjs demoPaths transform */
const base = url.pathToFileURL(path.join(process.cwd(),
'elements',
primaryElementName,
'demo/'));
const base =
url.pathToFileURL(path.join(process.cwd(), 'elements', primaryElementName, 'demo/'));
const docsDir = url.pathToFileURL(path.join(process.cwd(), 'docs/'));
const isMainDemo = filename === 'demo/index.html';
const demoSlug = filename.split('/').at(1);
Expand All @@ -160,7 +161,8 @@ module.exports = async function(data) {
if (subresourceURL && !subresourceURL.startsWith('http')) {
const subresourceFileURL = !subresourceURL.startsWith('/') ?
// non-tabular ternary
new URL(subresourceURL, base)

new URL(subresourceURL, base)
: new URL(subresourceURL.replace('/', './'), docsDir);
try {
const resourceName =
Expand All @@ -174,18 +176,26 @@ module.exports = async function(data) {
fileMap.set(resourceName, { content, hidden: true });
}
} catch (e) {
throw new SubresourceError(
`Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`,
e,
subresourceFileURL,
);
throw new SubresourceError(`Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`, e, subresourceFileURL);
}
}
};

fileMap.set('demo/rhds-demo-base.css', {
fileMap.set('demo/reset.css', {
contentType: 'text/css',
content: resetCSSSource,
hidden: true,
});

fileMap.set('demo/fonts.css', {
contentType: 'text/css',
content: fontsCSSSource,
hidden: true,
});

fileMap.set('demo/typography.css', {
contentType: 'text/css',
content: baseCssSource,
content: typographyCSSSource,
hidden: true,
});

Expand All @@ -204,9 +214,10 @@ module.exports = async function(data) {
const attrs = getAttrMap(el);
await addSubresourceURL(attrs.href);
} catch (e) {
// we can swallow the error for the demo base file because we wrote it ourselves above.
// we can swallow the error for the demo typography and font file because we wrote it ourselves above.
// maybe not the most elegant solution, but it works
if (e.subresourceFileURL?.href?.endsWith('rhds-demo-base.css')) {
if (e.subresourceFileURL?.href?.endsWith('typography.css')
|| e.subresourceFileURL?.href?.endsWith('fonts.css')) {
continue;
} else {
// In order to surface the error to the user, let's enable console logging
Expand Down
33 changes: 0 additions & 33 deletions docs/_includes/component/about.njk

This file was deleted.

35 changes: 0 additions & 35 deletions docs/_includes/component/components.njk

This file was deleted.

10 changes: 0 additions & 10 deletions docs/_includes/component/documentation.njk

This file was deleted.

33 changes: 0 additions & 33 deletions docs/_includes/component/foundations.njk

This file was deleted.

33 changes: 0 additions & 33 deletions docs/_includes/component/get-started.njk

This file was deleted.

Loading

0 comments on commit 4fc8f7b

Please sign in to comment.