diff --git a/src/scss/typography.stories.js b/src/scss/typography.stories.js new file mode 100644 index 0000000000000000000000000000000000000000..313fba16e9c3fb14bc6f9f00c3d289f6efe6a853 --- /dev/null +++ b/src/scss/typography.stories.js @@ -0,0 +1,204 @@ +export const Default = () => ({ + template: ` +
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+

+ The p HTML element represents a paragraph. Paragraphs are usually represented in visual media as + blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but + HTML paragraphs can be any structural grouping of related content, such as images or form + fields. +

+

+ Paragraphs can contain inline elements such as links, + abbr, strong, emphasis, + delete, underline, bold, italic, + strikethrough,mark, key, code, quotation, + small, subscript, superscript, and + variable elements. +

+ 
javascript:(function() { document.documentElement.classList.toggle('gl-dark'); })();
+
+ `, +}); + +export const Blockquote = () => ({ + template: ` +
+
+

+ The blockquote HTML element indicates that the enclosed text is an extended quotation. + Usually, this is rendered visually by indentation. A URL for the source of the quotation may + be given using the cite attribute, while a text representation of the source can be given + using the cite element. +

+ Blockquote citation +
+
+

+ The blockquote HTML element indicates that the enclosed text is an extended quotation. + Usually, this is rendered visually by indentation. A URL for the source of the quotation may + be given using the cite attribute, while a text representation of the source can be given + using the cite element. +

+ Blockquote citation +
+
+ `, +}); + +export const Lists = () => ({ + template: ` +
+ +
    +
  1. + Ordered list item +
    2. +
  2. + Ordered list item +
      +
    1. + Child ordered list item +
        +
      1. + Grandchild ordered list item +
        2. +
      2. + Grandchild ordered list item +
        3. +
      +
      2. +
    2. + Child ordered list item +
      3. +
    +
    3. +
  3. + Ordered list item +
    4. +
  4. + Ordered list item +
    5. +
+
+ `, +}); + +export const Tables = () => ({ + template: ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Table Caption +
Table headerTable headerTable header
Table cellTable cellTable cell
Table cellTable cellTable cell
Table cellTable cellTable cell
Table footerTable footerTable footer
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Table Caption +
Table headerTable headerTable header
Table cellTable cellTable cell
Table cellTable cellTable cell
Table cellTable cellTable cell
Table footerTable footerTable footer
+
+ `, +}); + +// eslint-disable-next-line storybook/csf-component +export default { + title: 'scss/typography', +}; diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-blockquote-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-blockquote-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..eb0ba226e0a8c9a52f800652f814d4490a89b330 Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-blockquote-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..74c5c1e043dc1767f131f32ec05ad776edc97f0f Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-lists-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-lists-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b8a80c96419382dfb935187a13e8f4c8f32905b2 Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-lists-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-tables-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-tables-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..6c3123ce4683ac879880f803b15c31ae0e152382 Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-tables-1-snap.png differ