nodejs.org/packages/ui-components/__design__/text.stories.tsx at da5bdc70e8ed982d8edb708b3263e20eb8796069 · nodejs/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import type { Meta as MetaObj, StoryObj } from '@storybook/react';

export const Anchor: StoryObj = {
  render: () => (
    <main>
      <p>
        The current Node.js security policy can be found at{' '}
        <a href="https://github.com/nodejs/node/security/policy#security">
          https://github.com/nodejs/node/security/policy#security
        </a>
        , including information on how to report a vulnerability in Node.js.
        Subscribe to the low-volume announcement-only nodejs-sec mailing list at{' '}
        <a href="https://groups.google.com/forum/#!forum/nodejs-sec">
          https://groups.google.com/forum/#!forum/nodejs-sec
        </a>{' '}
        to stay up to date on security vulnerabilities and security-related
        releases of Node.js and the projects maintained in the nodejs GitHub
        organization.
      </p>
    </main>
  ),
};

export const InlineCode: StoryObj = {
  render: () => (
    <main>
      <p>
        This is an example of <code>inline code block</code>
      </p>
      <p>
        This is an example of{' '}
        <a href="https://nodejs.org/">
          <code>inline code block inside link</code>
        </a>
      </p>
    </main>
  ),
};

export const Headings: StoryObj = {
  render: () => (
    <main>
      <h1>HTML Section Heading 1</h1>
      <h2>HTML Section Heading 2</h2>
      <h3>HTML Section Heading 3</h3>
      <h4>HTML Section Heading 4</h4>
      <h5>HTML Section Heading 5</h5>
      <h6>HTML Section Heading 6</h6>
    </main>
  ),
};

// Create the behavior of the headings with links
// on nodejs.org, this is happening due to `rehype-autolink-headings`
export const HeadingsWithLinks: StoryObj = {
  render: () => (
    <main>
      <h1 id="heading-1">
        <a href="#heading-1">HTML Section Heading 1</a>
      </h1>
      <h2 id="heading-2">
        <a href="#heading-2">HTML Section Heading 2</a>
      </h2>
      <h3 id="heading-3">
        <a href="#heading-3">HTML Section Heading 3</a>
      </h3>
      <h4 id="heading-4">
        <a href="#heading-4">HTML Section Heading 4</a>
      </h4>
      <h5 id="heading-5">
        <a href="#heading-5">HTML Section Heading 5</a>
      </h5>
      <h6 id="heading-6">
        <a href="#heading-6">HTML Section Heading 6</a>
      </h6>
    </main>
  ),
};

export default { title: 'Design System' } as MetaObj;