Skip to content

Commit

Permalink
[NO-TICKET] Doc site design updates (#2019)
Browse files Browse the repository at this point in the history
* Update table of contents spacing

* Update doc site header and left nav header

* Update style and prop tables

* Set the font size for h4s too

* Fix a problem with a markdown header that I fixed before but probably got clobbered

Co-authored-by: Patrick Wolfert <[email protected]>
line47 and pwolfert authored Aug 4, 2022
1 parent f661684 commit 1c2ae47
Showing 7 changed files with 44 additions and 10 deletions.
2 changes: 1 addition & 1 deletion packages/docs/src/components/ComponentThemeOptions.tsx
Original file line number Diff line number Diff line change
@@ -66,7 +66,7 @@ const ComponentThemeOptions = ({ theme, componentname }: ComponentThemeOptionsPr
componentname = componentname.toLowerCase();
const currentTheme = componentThemes[theme];
const componentOptions = (
<Table scrollable stackable>
<Table scrollable stackable borderless>
<TableCaption className="ds-u-visibility--screen-reader">
Sass variables for {componentname}{' '}
</TableCaption>
9 changes: 6 additions & 3 deletions packages/docs/src/components/DocSiteNavigation.tsx
Original file line number Diff line number Diff line change
@@ -95,9 +95,12 @@ const DocSiteNavigation = ({ location }: DocSiteNavProps) => {

return (
<div
className={classnames('ds-u-padding--0 ds-u-md-padding--2 c-navigation', {
'c-navigation--open': isMobile && isMobileNavOpen,
})}
className={classnames(
'ds-u-padding--0 ds-u-md-padding--2 ds-u-md-padding-top--4 c-navigation',
{
'c-navigation--open': isMobile && isMobileNavOpen,
}
)}
>
<header className="c-navigation__header">
<Button
6 changes: 3 additions & 3 deletions packages/docs/src/components/PageHeader.tsx
Original file line number Diff line number Diff line change
@@ -23,9 +23,9 @@ const PageHeader = ({ frontmatter = { title: '' }, theme }: PageHeaderProps) =>
const storyId = themeLinks?.storybookLink || core?.storybookLink || null;

return (
<header className="ds-u-padding--3 ds-u-sm-padding--6 ds-u-display--block">
<h1 className="ds-display">{title}</h1>
{intro && <p className="ds-u-font-size--lg ds-u-measure--base">{intro}</p>}
<header className="ds-u-padding--3 ds-u-sm-padding-x--6 ds-u-sm-padding-bottom--7 ds-u-sm-padding-top--2">
<h1 className="ds-text-heading--4xl">{title}</h1>
{intro && <p className="ds-u-font-size--lg ds-u-measure--base ds-u-margin-top--1">{intro}</p>}
<div>
{status && (
<Badge variation="warn" className="ds-u-margin-right--2 ds-u-text-transform--capitalize">
2 changes: 1 addition & 1 deletion packages/docs/src/components/PropTable.tsx
Original file line number Diff line number Diff line change
@@ -86,7 +86,7 @@ const PropTable = ({ componentName }: PropTableProps, theme: string) => {
);

return (
<Table className="c-prop-table" stackable scrollable compact>
<Table className="c-prop-table" stackable scrollable borderless>
<TableCaption>
<span className="ds-u-visibility--screen-reader">React Properties Documentation</span>
</TableCaption>
2 changes: 1 addition & 1 deletion packages/docs/src/components/TableOfContents.tsx
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ export const TableOfContentsList = ({ items, level, className = '' }: TableOfCon
: 'c-table-of-contents__list-item';

return (
<ul className={`c-table-of-contents__list ds-u-padding-right--0 ${className}`}>
<ul className={`c-table-of-contents__list ${className}`}>
{items.map((item) => (
<li key={item.title} className={itemClasses}>
<a href={item.url}>{item.title}</a>
4 changes: 3 additions & 1 deletion packages/docs/src/styles/components/tableOfContents.scss
Original file line number Diff line number Diff line change
@@ -11,12 +11,14 @@
.c-table-of-contents__list,
.c-table-of-contents-mobile__list {
list-style-type: none;
padding-left: $spacer-1;
margin-top: 0;
}

.c-table-of-contents__list .c-table-of-contents__list,
.c-table-of-contents-mobile__list .c-table-of-contents-mobile__list {
list-style-type: '- ';
padding-left: $spacer-2;
padding-left: $spacer-3;
}

.c-table-of-contents-mobile {
29 changes: 29 additions & 0 deletions packages/docs/src/styles/pages/layout.scss
Original file line number Diff line number Diff line change
@@ -27,6 +27,16 @@ body {
& > :nth-child(2) {
margin-top: 0;
}
> h2 {
font-size: $font-size-3xl;
font-weight: normal;
}
> h3 {
font-size: $font-size-2xl;
}
> h4 {
font-size: $font-size-xl;
}
}
}

@@ -37,6 +47,25 @@ body {
}
}

.page-content__content {
> .ds-c-table,
.c-configuration-options .ds-c-table {
width: 100%;
}
& .c-configuration-options th,
.c-prop-table th {
background-color: $color-gray-lightest;
}
& .c-configuration-options td,
.c-prop-table td {
border-color: $color-gray-lighter;
}
& .c-configuration-options p,
.c-prop-table p {
font-size: $font-size-sm;
}
}

blockquote {
background-color: $color-gray-lightest;
border-left: 4px solid $color-gray-light;

0 comments on commit 1c2ae47

Please sign in to comment.