Jhernandez has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/379593 )
Change subject: New: Add Content component and style guide examples
......................................................................
New: Add Content component and style guide examples
This patch adds the Content component with the content typography
settings from the design specs. It also adds different variants and
examples to the style guide.
Changes:
* Changed typography sizes based on design specs
* Moved typography settings to root scope
* Added linux fonts to the sans stack per design comments
* Increased default spacing to 16px per design specs
* Added variables for half and double space, as they are commonly used
and they are good shortcuts, and they get referenced in design specs
* Moved content typography settings to Content component
* Left the chrome typography in a simple state
* Extracted Card component from Page, for use in the style guide
* Fixed double-spacing bug on Card when used without a footer
* Added Card variations to the style guide
* Added Content component with the typography settings from the spec
* Added a card in the style guide with a variety of elements as seen
in the design specs
* Simplify the Page template source by relying on Card
* Added variations of the Page template to the style guide
* Improved the style guide and added more content
* Added title
* Added examples of the above mentioned component in different states
* Removed unnecessary component and changed examples to use Card
Change-Id: I53172ceb442d2e54d3fd6cf433c8eae4bcbe9086
---
M src/client/index.css
A src/common/components/card/card.css
A src/common/components/card/card.tsx
A src/common/components/content/content.css
A src/common/components/content/content.tsx
M src/common/components/page/page.css
M src/common/components/page/page.tsx
M src/common/pages/style-guide.tsx
8 files changed, 233 insertions(+), 114 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/93/379593/1
diff --git a/src/client/index.css b/src/client/index.css
index 6984247..0b4cb3d 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -1,6 +1,8 @@
:root {
/*
- Font sizes, see
https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_typography.html
+ Font sizes, see:
+ *
https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_typography.html
+ *
https://app.zeplin.io/project/59a0bcd4dc66f1a973f36568/screen/59c02dbc0df0559ebb12a527
TODO: Remove when the typography scale is upstreamed in wikimedia-ui-base
See https://gerrit.wikimedia.org/r/378041 Add typograpy scale variables
@@ -8,18 +10,30 @@
--font-size-caption: 13px;
--font-size-note: 14px;
--font-size-base: 16px;
- --font-size-h5: 18px;
- --font-size-h4: 23px;
- --font-size-h3: 28px;
- --font-size-h2: 36px;
- --font-size-h1: 46px;
+ --font-size-blockquote: 18px;
+
+ --font-size-h1: 28px;
+ --font-size-h2: 22px;
+ --font-size-h3: 18px;
+ --font-size-h4: var(--font-size-base);
+ --font-size-h5: var(--font-size-base);
+ --font-size-h6: var(--font-size-base);
+
+
+ /* This size is an intentional deviation from the base typography. */
+ --font-size-page-title: 24px;
+ --font-size-page-subtitle: var(--font-size-note);
/* TODO: Remove once https://gerrit.wikimedia.org/r/#/c/378016/ is merged */
- --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Cantarell, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-family-base: var(--font-family-sans);
+ --font-weight-semibold: 500;
+
/* TODO: Upstream to wikimedia-ui-base once reviewed by design */
- --space: 15px;
+ --space: 16px;
+ --half-space: calc(var(--space) / 2);
+ --double-space: calc(var(--space) * 2);
/* TODO: Upstream to wikimedia-ui-base once reviewed by design */
--box-shadow-paper: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 );
@@ -33,7 +47,7 @@
background-color: var(--wmui-color-base80);
}
-/* Default typography */
+/* Default application chrome typography */
body, input, button, textarea, td {
font-family: var(--font-family-base);
line-height: var(--line-height-base);
@@ -41,23 +55,31 @@
color: var(--color-base);
}
-blockquote {
- font-family: var(--font-family-serif);
- font-size: var(--font-size-h4);
-}
-
h1, h2, h3, h4, h5, h6 {
- font-weight: normal;
+ font-family: var(--font-family-base);
+ line-height: var(--line-height-heading);
+}
+h1 { font-size: var(--font-size-h1); }
+h2 { font-size: var(--font-size-h2); }
+h3 { font-size: var(--font-size-h3); }
+h4 { font-size: var(--font-size-h4); }
+h5 { font-size: var(--font-size-h5); }
+h6 { font-size: var(--font-size-h6); }
+
+blockquote { font-size: var(--font-size-blockquote); }
+
+/* Default application chrome spacing */
+h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
+ margin-bottom: var(--half-space);
+}
+h1 {
margin: 0 0 var(--space) 0;
}
+h2, h3, h4, h5, h6 {
+ margin: 0 0 var(--half-space) 0;
+}
-h5, h6 { font-weight: bold; }
-h6 { font-size: var(--font-size-base); }
-h5 { font-size: var(--font-size-h5); }
-
-h1, h2, h3, h4 { font-family: var(--font-family-serif); }
-h4 { font-weight: bold; font-size: var(--font-size-h4); }
-h3 { font-size: var(--font-size-h3); }
-h2 { font-size: var(--font-size-h2); }
-h1 { font-size: var(--font-size-h1); }
\ No newline at end of file
+p {
+ margin: var(--space) 0;
+}
\ No newline at end of file
diff --git a/src/common/components/card/card.css
b/src/common/components/card/card.css
new file mode 100644
index 0000000..91e4626
--- /dev/null
+++ b/src/common/components/card/card.css
@@ -0,0 +1,38 @@
+.Card {
+ /* Variable to apply the same spacing to heading, content and separator */
+ --card-spacing: var(--space);
+}
+
+.Card-header {
+ /* Top spacing of 4 units */
+ padding: var(--card-spacing) var(--card-spacing) 0;
+ /* Use margin in the bottom to collapse with content if necessary */
+ margin-bottom: var(--card-spacing);
+}
+
+.Card-content {
+ /* Keep bottom spacing, for when there is no footer */
+ padding: 0 var(--card-spacing) var(--card-spacing);
+ /* Use margin at the top to collapse with content spacing */
+ margin-top: var(--card-spacing);
+}
+
+.Card-content > :last-child {
+ /* Remove extrinsic bottom spacing (margin) from the last element in the
+ content, given that it will accumulate with padding in the Paper sheet and
+ present double spacing at the bottom of the container */
+ margin-bottom: 0;
+}
+
+.Card-footer-separator {
+ /* Remove the top spacing of the footer separator given the Card-content has
+ its own internal bottom inner spacing */
+ margin-top: 0;
+}
+
+.Card-footer {
+ /* Spacing everywhere except top. */
+ padding: 0 var(--card-spacing) var(--card-spacing);
+ /* Use margin in the top to collapse with separator if necessary. */
+ margin-top: var(--card-spacing);
+}
diff --git a/src/common/components/card/card.tsx
b/src/common/components/card/card.tsx
new file mode 100644
index 0000000..bd3c1b0
--- /dev/null
+++ b/src/common/components/card/card.tsx
@@ -0,0 +1,34 @@
+import { h } from "preact";
+import Paper from "../paper/paper";
+import Separator from "../separator/separator";
+import {
+ ComponentChild,
+ ChildrenProps,
+ ClassProps,
+ classOf
+} from "../preact-utils";
+import "./card.css";
+
+interface Props extends ChildrenProps, ClassProps {
+ header: ComponentChild;
+ footer?: ComponentChild;
+}
+
+export default function Card({
+ header,
+ footer,
+ children,
+ ...props
+}: Props): JSX.Element {
+ return (
+ <div class={classOf("Card", props.class)}>
+ <Paper>
+ <div class="Card-header">{header}</div>
+ {children && <Separator class="Card-content-separator" />}
+ <div class="Card-content">{children}</div>
+ {footer && <Separator class="Card-footer-separator" />}
+ {footer && <div class="Card-footer">{footer}</div>}
+ </Paper>
+ </div>
+ );
+}
diff --git a/src/common/components/content/content.css
b/src/common/components/content/content.css
new file mode 100644
index 0000000..8f53be3
--- /dev/null
+++ b/src/common/components/content/content.css
@@ -0,0 +1,46 @@
+.Content {}
+
+/* Remove margin bottom on the last and top on the first child so that content
+ wraps the inner elements exactly right. */
+.Content > :last-child { margin-bottom: 0; }
+.Content > :first-child { margin-top: 0; }
+
+/* Typography */
+.Content h1,
+.Content h2 {
+ font-family: var(--font-family-serif);
+}
+
+.Content h2 {
+ font-weight: normal;
+}
+
+.Content h3 {
+ font-weight: var(--font-weight-semibold);
+}
+
+.Content h2,
+.Content h3,
+.Content h4,
+.Content h5,
+.Content h6 {
+ margin-top: var(--double-space);
+}
+
+.Content p {
+ /* Remove margin top on paragraphs to allow them to come closer to the top
+ element, like h2-6 */
+ margin-top: 0;
+}
+
+.Content blockquote {
+ font-family: var(--font-family-serif);
+ font-style: italic;
+
+ border-left: 3px solid var(--wmui-color-base80);
+
+ /* Inner spacing */
+ padding: var(--half-space) 0 var(--space) var(--space);
+ /* Outer spacing */
+ margin: 0 0 var(--space) 0;
+}
diff --git a/src/common/components/content/content.tsx
b/src/common/components/content/content.tsx
new file mode 100644
index 0000000..493238c
--- /dev/null
+++ b/src/common/components/content/content.tsx
@@ -0,0 +1,10 @@
+import { h } from "preact";
+import { classOf, ClassProps, ChildrenProps } from "../preact-utils";
+import "./content.css";
+
+export default function Content({
+ children,
+ ...props
+}: ChildrenProps & ClassProps): JSX.Element {
+ return <div class={classOf("Content", props.class)}>{children}</div>;
+}
diff --git a/src/common/components/page/page.css
b/src/common/components/page/page.css
index 8648c47..f262808 100644
--- a/src/common/components/page/page.css
+++ b/src/common/components/page/page.css
@@ -1,20 +1,12 @@
-.Page {
- /* Variable to apply the same spacing to heading, content and separator */
- --page-spacing: var(--space);
-
- /* This size is an intentional deviation from the base typography. */
- --page-title-font-size: 24px;
-}
+.Page {}
.Page-header {
- /* Top spacing of 4 units */
- padding: calc(var(--page-spacing) * 4) var(--page-spacing) 0;
- /* Use margin in the bottom to collapse with content if necessary */
- margin-bottom: var(--page-spacing);
+ /* Top spacing of 3 units */
+ padding-top: calc(var(--space) * 3);
}
.Page-title {
- font-size: var(--page-title-font-size);
+ font-size: var(--font-size-page-title);
/* TODO: Extract to typography components once we have the specs */
font-weight: bold;
line-height: var(--line-height-heading);
@@ -22,30 +14,6 @@
.Page-subtitle {
/* TODO: Extract to typography components once we have the specs */
- font-size: var(--font-size-note);
+ font-size: var(--font-size-page-subtitle);
color: var(--wmui-color-base20);
-}
-
-.Page-content-separator {}
-
-.Page-content {
- padding: 0 var(--page-spacing);
- /* Use margin at the top to collapse with content spacing */
- margin-top: var(--page-spacing);
-}
-
-.Page-content > :last-child {
- /* Remove extrinsic bottom spacing (margin) from the last element in the
- content, given that it will accumulate with padding in the Paper sheet and
- present double spacing at the bottom of the container */
- margin-bottom: 0;
-}
-
-.Page-footer-separator {}
-
-.Page-footer {
- /* Spacing everywhere except top. */
- padding: 0 var(--page-spacing) var(--page-spacing);
- /* Use margin in the top to collapse with separator if necessary. */
- margin-top: var(--page-spacing);
}
diff --git a/src/common/components/page/page.tsx
b/src/common/components/page/page.tsx
index 7ccddac..9652c5e 100644
--- a/src/common/components/page/page.tsx
+++ b/src/common/components/page/page.tsx
@@ -1,6 +1,5 @@
import { h } from "preact";
-import Paper from "../paper/paper";
-import Separator from "../separator/separator";
+import Card from "../card/card";
import { ComponentChild, ChildrenProps } from "../preact-utils";
import "./page.css";
@@ -17,17 +16,17 @@
children
}: Props): JSX.Element {
return (
- <div class="Page">
- <Paper>
+ <Card
+ class="Page"
+ header={
<div class="Page-header">
<div class="Page-title">{title}</div>
<div class="Page-subtitle">{subtitle}</div>
</div>
- {children && <Separator class="Page-content-separator" />}
- <div class="Page-content">{children}</div>
- {footer && <Separator class="Page-footer-separator" />}
- <div class="Page-footer">{footer}</div>
- </Paper>
- </div>
+ }
+ footer={footer}
+ >
+ {children}
+ </Card>
);
}
diff --git a/src/common/pages/style-guide.tsx b/src/common/pages/style-guide.tsx
index 6313bcf..37d02bd 100644
--- a/src/common/pages/style-guide.tsx
+++ b/src/common/pages/style-guide.tsx
@@ -1,55 +1,57 @@
import { h } from "preact";
import App from "../components/app/app";
-import Paper from "../components/paper/paper";
+import Card from "../components/card/card";
+import Page from "../components/page/page";
+import Content from "../components/content/content";
import Separator from "../components/separator/separator";
-import { ChildrenProps } from "../components/preact-utils";
+
+const lorem = `
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quisquam
+ facilis ab suscipit quos deleniti similique officia cumque, dignissimos iusto
+ laudantium facere sint fuga vero iste vel asperiores beatae aliquam!`;
export function Component(): JSX.Element {
return (
<App>
- <Card title="Headings">
- <h1>Heading 1</h1>
- <h2>Heading 2</h2>
- <h3>Heading 3</h3>
- <h4>Heading 4</h4>
- <h5>Heading 5</h5>
- <h6>Heading 6</h6>
+ <h1 style={{ margin: "var(--double-space)", textAlign: "center" }}>
+ Style guide
+ </h1>
+ <Card header={<h3>Card</h3>}>
+ <p>{lorem}</p>
</Card>
- <Card title="Text">
- <p>This is a paragraph with paragraph styles.</p>
- <p>This is a second paragraph with paragraph styles.</p>
- <Separator />
- <blockquote>
- This is a blockquote with an important sentence.
- </blockquote>
+ <Card header={<h3>Card w/ footer</h3>} footer="This, is a footer">
+ <p>{lorem}</p>
</Card>
+ <Card header={<h3>Content typography</h3>}>
+ <Content>
+ <h1>Heading 1</h1>
+ <p>{lorem}</p>
+ <h2>Heading 2</h2>
+ <p>{lorem}</p>
+ <h3>Heading 3</h3>
+ <p>{lorem}</p>
+ <h4>Heading 4</h4>
+ <p>{lorem}</p>
+ <h5>Heading 5</h5>
+ <p>{lorem}</p>
+ <h6>Heading 6</h6>
+ <p>{lorem}</p>
+ <p>{lorem}</p>
+ <blockquote>{lorem}</blockquote>
+ <p>This is a separator:</p>
+ <Separator />
+ <p>The end</p>
+ </Content>
+ </Card>
+ <Page title="Page template" subtitle="This is the subtitle of the page">
+ <p>{lorem}</p>
+ </Page>
+ <Page title="Page template, no subtitle">
+ <p>{lorem}</p>
+ </Page>
+ <Page title="Page template, w/ footer" footer="Hello, footer world">
+ <p>{lorem}</p>
+ </Page>
</App>
- );
-}
-
-interface CardProps extends ChildrenProps {
- title: string;
-}
-function Card({ title, children }: CardProps): JSX.Element {
- /* Use inline styles as we don't want this in the general CSS since it is a
- dev only route */
- return (
- <Paper>
- <div
- style={{
- padding: "var(--space) var(--space) 0"
- }}
- >
- <h5>{title}</h5>
- </div>
- <Separator />
- <div
- style={{
- padding: "0 var(--space) var(--space)"
- }}
- >
- {children}
- </div>
- </Paper>
);
}
--
To view, visit https://gerrit.wikimedia.org/r/379593
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I53172ceb442d2e54d3fd6cf433c8eae4bcbe9086
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
