brand/packages/react/src/SectionIntroStacked/SectionIntroStacked.features.stories.tsx at 4daf8e9ffbee1f7bb6ae58338d61b885930fca14 · primer/brand · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React from 'react'
import type {Meta, StoryObj} from '@storybook/react'
import {useTranslation} from 'react-i18next'
import {CpuIcon, LightBulbIcon, HeartIcon} from '@primer/octicons-react'
import {SectionIntroStacked} from '.'
import {Grid} from '../Grid'

export default {
  title: 'Components/SectionIntroStacked/Features',
  component: SectionIntroStacked,
} satisfies Meta<typeof SectionIntroStacked>

type Story = StoryObj<typeof SectionIntroStacked>

export const WithEmphasizedText: Story = {
  render: function WithEmphasizedTextComponent() {
    const {t} = useTranslation('SectionIntroStacked')

    return (
      <SectionIntroStacked>
        <SectionIntroStacked.Heading>
          <b>{t('playground_heading_emphasis')}</b>
          {t('playground_heading_suffix')}
        </SectionIntroStacked.Heading>
        <SectionIntroStacked.Link href="#">{t('explore_github')}</SectionIntroStacked.Link>

        <SectionIntroStacked.Items>
          <SectionIntroStacked.Item>
            <b>{t('developer_first')}</b>
            {t('developer_first_description')}
          </SectionIntroStacked.Item>
          <SectionIntroStacked.Item>
            <b>{t('enterprise_grade')}</b>
            {t('enterprise_grade_description')}
          </SectionIntroStacked.Item>
          <SectionIntroStacked.Item>
            <b>{t('ai_powered')}</b>
            {t('ai_powered_description')}
          </SectionIntroStacked.Item>
        </SectionIntroStacked.Items>
      </SectionIntroStacked>
    )
  },
}

const InGridTemplate = () => {
  const {t} = useTranslation('SectionIntroStacked')
  return (
    <Grid>
      <Grid.Column>
        <SectionIntroStacked>
          <SectionIntroStacked.Heading>{t('enterprise_platform_heading')}</SectionIntroStacked.Heading>
          <SectionIntroStacked.Description>{t('playground_description')}</SectionIntroStacked.Description>
          <SectionIntroStacked.Link href="#">{t('explore_github_enterprise')}</SectionIntroStacked.Link>
          <SectionIntroStacked.Items>
            <SectionIntroStacked.Item>
              <SectionIntroStacked.ItemIcon icon={CpuIcon} />
              <SectionIntroStacked.ItemHeading>{t('item_one_heading')}</SectionIntroStacked.ItemHeading>
              <SectionIntroStacked.ItemDescription>{t('item_one_description')}</SectionIntroStacked.ItemDescription>
            </SectionIntroStacked.Item>
            <SectionIntroStacked.Item>
              <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
              <SectionIntroStacked.ItemHeading>{t('item_two_heading')}</SectionIntroStacked.ItemHeading>
              <SectionIntroStacked.ItemDescription>{t('item_two_description')}</SectionIntroStacked.ItemDescription>
            </SectionIntroStacked.Item>
            <SectionIntroStacked.Item>
              <SectionIntroStacked.ItemIcon icon={HeartIcon} />
              <SectionIntroStacked.ItemHeading>{t('item_three_heading')}</SectionIntroStacked.ItemHeading>
              <SectionIntroStacked.ItemDescription>{t('item_three_description')}</SectionIntroStacked.ItemDescription>
            </SectionIntroStacked.Item>
          </SectionIntroStacked.Items>
        </SectionIntroStacked>
      </Grid.Column>
    </Grid>
  )
}

export const InGrid: Story = {
  render: InGridTemplate,
}

export const InGridNarrow: Story = {
  name: 'Narrow view, menu closed (mobile)',
  globals: {
    viewport: {value: 'iphonexr'},
  },
  render: InGridTemplate,
}

export const Gridline: Story = {
  render: function GridlineComponent() {
    const {t} = useTranslation('SectionIntroStacked')

    return (
      <SectionIntroStacked variant="gridline">
        <SectionIntroStacked.Heading>{t('with_item_icons_heading')}</SectionIntroStacked.Heading>
        <SectionIntroStacked.Description>{t('playground_description')}</SectionIntroStacked.Description>
        <SectionIntroStacked.Link href="#">{t('sign_up_now')}</SectionIntroStacked.Link>
        <SectionIntroStacked.Items>
          <SectionIntroStacked.Item>
            <SectionIntroStacked.ItemIcon icon={CpuIcon} />
            <SectionIntroStacked.ItemHeading>{t('item_one_heading')}</SectionIntroStacked.ItemHeading>
            <SectionIntroStacked.ItemDescription>{t('item_one_description')}</SectionIntroStacked.ItemDescription>
          </SectionIntroStacked.Item>
          <SectionIntroStacked.Item>
            <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
            <SectionIntroStacked.ItemHeading>{t('item_two_heading')}</SectionIntroStacked.ItemHeading>
            <SectionIntroStacked.ItemDescription>{t('item_two_description')}</SectionIntroStacked.ItemDescription>
          </SectionIntroStacked.Item>
          <SectionIntroStacked.Item>
            <SectionIntroStacked.ItemIcon icon={HeartIcon} />
            <SectionIntroStacked.ItemHeading>{t('item_three_heading')}</SectionIntroStacked.ItemHeading>
            <SectionIntroStacked.ItemDescription>{t('item_three_description')}</SectionIntroStacked.ItemDescription>
          </SectionIntroStacked.Item>
        </SectionIntroStacked.Items>
      </SectionIntroStacked>
    )
  },
}

export const GridlineTablet: Story = {
  name: 'Gridline (tablet)',
  globals: {
    viewport: {value: 'ipad10p'},
  },
  render: Gridline.render,
}