Skip to content

Commit 29ebc55

Browse files
heiskrheiskr
authored
Add btn-primary-matte, ScrollButton, TruncateLines to storybook (#21611)
* Update create-processor.js * Use built in semibold * Preparing articlelist * Add blue button to storybook * Scope fade styles * Add truncate component * Add scroll button to storybook * Update storybook.tsx * Update DefaultLayout.tsx
1 parent a4618c6 commit 29ebc55

21 files changed

Lines changed: 111 additions & 140 deletions

‎components/DefaultLayout.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import Head from 'next/head'
33
import { SidebarNav } from 'components/sidebar/SidebarNav'
44
import { Header } from 'components/page-header/Header'
55
import { SmallFooter } from 'components/page-footer/SmallFooter'
6-
import { ScrollButton } from 'components/ScrollButton'
6+
import { ScrollButton } from 'components/ui/ScrollButton'
77
import { SupportSection } from 'components/page-footer/SupportSection'
88
import { DeprecationBanner } from 'components/page-header/DeprecationBanner'
99
import { useMainContext } from 'components/context/MainContext'
10-
import { useTranslation } from './hooks/useTranslation'
10+
import { useTranslation } from 'components/hooks/useTranslation'
1111

1212
type Props = { children?: React.ReactNode }
1313
export const DefaultLayout = (props: Props) => {
@@ -23,7 +23,7 @@ export const DefaultLayout = (props: Props) => {
2323
fullUrl,
2424
status,
2525
} = useMainContext()
26-
const { t } = useTranslation('errors')
26+
const { t } = useTranslation(['errors', 'scroll_button'])
2727
return (
2828
<div className="d-lg-flex">
2929
<Head>
@@ -90,7 +90,10 @@ export const DefaultLayout = (props: Props) => {
9090

9191
<SupportSection />
9292
<SmallFooter />
93-
<ScrollButton />
93+
<ScrollButton
94+
className="position-fixed bottom-0 mb-3 right-0 mr-3"
95+
ariaLabel={t('scroll_to_top')}
96+
/>
9497
</main>
9598
</div>
9699
)

‎components/Search.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export function Search({
192192
dangerouslySetInnerHTML={{ __html: breadcrumbs }}
193193
/>
194194
<div
195-
className={cx(styles.searchResultTitle, 'd-block f4 font-weight-semibold')}
195+
className={cx(styles.searchResultTitle, 'd-block f4 text-semibold')}
196196
dangerouslySetInnerHTML={{
197197
__html: heading ? `${title}: ${heading}` : title,
198198
}}

‎components/landing/ArticleList.tsx‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,21 @@ import dayjs from 'dayjs'
44
import { Link } from 'components/Link'
55
import { ArrowRightIcon } from '@primer/octicons-react'
66
import { FeaturedLink } from 'components/context/ProductLandingContext'
7-
import { TruncateLines } from 'components/TruncateLines'
7+
import { TruncateLines } from 'components/ui/TruncateLines'
88
import { BumpLink } from 'components/ui/BumpLink'
99

10-
type Props = {
10+
export type ArticleListPropsT = {
1111
title?: string
1212
viewAllHref?: string
1313
articles: Array<FeaturedLink>
14-
variant?: 'compact' | 'spaced'
15-
titleVariant?: 'large' | 'default'
1614
}
17-
export const ArticleList = ({
18-
title,
19-
viewAllHref,
20-
articles,
21-
variant = 'compact',
22-
titleVariant = 'default',
23-
}: Props) => {
15+
16+
export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT) => {
2417
return (
2518
<>
2619
{title && (
2720
<div className="mb-4 d-flex flex-items-baseline">
28-
<h3
29-
className={cx(
30-
titleVariant === 'large'
31-
? 'f4 font-weight-semibold'
32-
: 'f5 text-normal underline-dashed color-text-secondary'
33-
)}
34-
>
35-
{title}
36-
</h3>
21+
<h3 className={cx('f4 text-semibold')}>{title}</h3>
3722
{viewAllHref && (
3823
<Link href={viewAllHref} className="ml-4">
3924
View all <ArrowRightIcon size={14} className="v-align-middle" />
@@ -45,7 +30,7 @@ export const ArticleList = ({
4530
<ul className="list-style-none" data-testid="article-list">
4631
{articles.map((link) => {
4732
return (
48-
<li key={link.href} className={cx(variant === 'compact' && 'border-top')}>
33+
<li key={link.href} className={cx('border-top')}>
4934
<BumpLink
5035
as={Link}
5136
href={link.href}
@@ -61,11 +46,7 @@ export const ArticleList = ({
6146
}
6247
>
6348
{!link.hideIntro && link.intro && (
64-
<TruncateLines
65-
as="p"
66-
maxLines={variant === 'spaced' ? 6 : 2}
67-
className="color-text-secondary mb-0 mt-1"
68-
>
49+
<TruncateLines as="p" maxLines={2} className="color-text-secondary mb-0 mt-1">
6950
<span
7051
data-testid="link-with-intro-intro"
7152
dangerouslySetInnerHTML={{ __html: link.intro }}

‎components/landing/CodeExampleCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { RepoIcon } from '@primer/octicons-react'
22
import { CodeExample } from 'components/context/ProductLandingContext'
3-
import { TruncateLines } from 'components/TruncateLines'
3+
import { TruncateLines } from 'components/ui/TruncateLines'
44

55
type Props = {
66
example: CodeExample

‎components/landing/FeaturedArticles.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import cx from 'classnames'
22

33
import { useProductLandingContext } from 'components/context/ProductLandingContext'
44
import { useTranslation } from 'components/hooks/useTranslation'
5-
import { ArticleList } from './ArticleList'
5+
import { ArticleList } from 'components/landing/ArticleList'
66

77
export const FeaturedArticles = () => {
88
const { featuredArticles = [], whatsNewChangelog, changelogUrl } = useProductLandingContext()
@@ -19,7 +19,6 @@ export const FeaturedArticles = () => {
1919
>
2020
<ArticleList
2121
title={section.label}
22-
titleVariant="large"
2322
viewAllHref={section.viewAllHref}
2423
articles={section.articles}
2524
/>
@@ -31,7 +30,6 @@ export const FeaturedArticles = () => {
3130
<div className={cx('col-12 mb-4 mb-lg-0 col-lg-4')}>
3231
<ArticleList
3332
title={t('whats_new')}
34-
titleVariant="large"
3533
viewAllHref={changelogUrl}
3634
articles={(whatsNewChangelog || []).map((link) => {
3735
return {

‎components/landing/TocLanding.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,12 @@ export const TocLanding = () => {
3838
<div className="col-12 col-lg-6 mb-md-4 mb-lg-0 float-left">
3939
<ArticleList
4040
title={t('getting_started')}
41-
variant="spaced"
4241
articles={featuredLinks.gettingStarted}
4342
/>
4443
</div>
4544

4645
<div className="col-12 col-lg-6 float-left">
47-
<ArticleList
48-
title={t('popular')}
49-
variant="spaced"
50-
articles={featuredLinks.popular}
51-
/>
46+
<ArticleList title={t('popular')} articles={featuredLinks.popular} />
5247
</div>
5348
</div>
5449
</div>

‎components/page-header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const Header = () => {
6565

6666
<Link
6767
href={`/${router.locale}`}
68-
className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2"
68+
className="f4 text-semibold color-text-primary no-underline no-wrap pl-2"
6969
>
7070
{t('github_docs')}
7171
</Link>

‎components/sidebar/SidebarNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const SidebarNav = () => {
3333
</Link>
3434
<Link
3535
href={`/${router.locale}`}
36-
className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2 flex-auto"
36+
className="f4 text-semibold color-text-primary no-underline no-wrap pl-2 flex-auto"
3737
>
3838
{t('github_docs')}
3939
</Link>

‎components/sublanding/LearningTrack.module.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.fadeBottom {
2+
background: linear-gradient(to top, var(--color-bg-primary), transparent);
3+
}

‎components/sublanding/LearningTrack.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import cx from 'classnames'
12
import { useTranslation } from 'components/hooks/useTranslation'
23
import { ArrowRightIcon } from '@primer/octicons-react'
34
import { useState } from 'react'
45
import { FeaturedTrack } from 'components/context/ProductSubLandingContext'
5-
import { TruncateLines } from 'components/TruncateLines'
6+
import { TruncateLines } from 'components/ui/TruncateLines'
7+
import styles from './LearningTrack.module.scss'
68

79
type Props = {
810
track: FeaturedTrack
@@ -22,7 +24,7 @@ export const LearningTrack = ({ track }: Props) => {
2224
<div className="Box-header color-bg-secondary p-4 d-flex flex-1 flex-items-start flex-wrap">
2325
<div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
2426
<div className="my-xl-0 mr-xl-3">
25-
<h5 className="mb-3 color-text f3 font-weight-semibold">{track?.title}</h5>
27+
<h5 className="mb-3 color-text f3 text-semibold">{track?.title}</h5>
2628
<TruncateLines as="p" maxLines={3} className="color-text">
2729
{track?.description}
2830
</TruncateLines>
@@ -68,7 +70,7 @@ export const LearningTrack = ({ track }: Props) => {
6870
onClick={showAll}
6971
>
7072
<div
71-
className="position-absolute left-0 right-0 py-5 fade-tertiary-bottom"
73+
className={cx('position-absolute left-0 right-0 py-5', styles.fadeBottom)}
7274
style={{ bottom: '50px' }}
7375
></div>
7476
<span>

0 commit comments

Comments
 (0)