Skip to content

Commit 94e9c5a

Browse files
dependabot[bot]heiskrrsese
authored
Bump @primer/react from 37.31.0 to 38.0.0 (#58243)
Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com> Co-authored-by: Robert Sese <734194+rsese@users.noreply.github.com>
1 parent 74c18ca commit 94e9c5a

24 files changed

+326
-278
lines changed

‎package-lock.json‎

Lines changed: 60 additions & 69 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
"@primer/live-region-element": "^0.7.2",
162162
"@primer/octicons": "^19.19.0",
163163
"@primer/octicons-react": "^19.14.0",
164-
"@primer/react": "^37.31.0",
164+
"@primer/react": "^38.0.0",
165165
"accept-language-parser": "^1.5.0",
166166
"ajv": "^8.17.1",
167167
"ajv-errors": "^3.0.0",

‎src/frame/components/article/ArticleGridLayout.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import cx from 'classnames'
3-
import { Box } from '@primer/react'
43
import { SupportPortalVaIframe, SupportPortalVaIframeProps } from './SupportPortalVaIframe'
54

65
import styles from './ArticleGridLayout.module.scss'
@@ -26,32 +25,31 @@ export const ArticleGridLayout = ({
2625
const containerBoxStyles = fullWidth ? '' : styles.containerBox
2726
return (
2827
<div className={cx(containerBoxStyles, className)}>
29-
{topper && <Box gridArea="topper">{topper}</Box>}
28+
{topper && <div style={{ gridArea: 'topper' }}>{topper}</div>}
3029
{intro && (
31-
<Box id="article-intro" gridArea="intro" className="f4 pb-4">
30+
<div id="article-intro" style={{ gridArea: 'intro' }} className="f4 pb-4">
3231
{intro}
33-
</Box>
32+
</div>
3433
)}
3534

3635
{toc && (
37-
<Box
36+
<div
3837
data-container="toc"
39-
gridArea="sidebar"
40-
alignSelf="flex-start"
38+
style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
4139
className={cx(styles.sidebarBox, 'border-bottom border-lg-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}
4240
>
4341
{toc}
44-
</Box>
42+
</div>
4543
)}
4644

47-
<Box data-container="article" gridArea="content" data-search="article-body">
45+
<div data-container="article" style={{ gridArea: 'content' }} data-search="article-body">
4846
{supportPortalVaIframeProps &&
4947
supportPortalVaIframeProps.supportPortalUrl &&
5048
supportPortalVaIframeProps.vaFlowUrlParameter && (
5149
<SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
5250
)}
5351
{children}
54-
</Box>
52+
</div>
5553
</div>
5654
)
5755
}

‎src/frame/components/article/ArticleInlineLayout.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import cx from 'classnames'
3-
import { Box } from '@primer/react'
43
import { SupportPortalVaIframe, SupportPortalVaIframeProps } from './SupportPortalVaIframe'
54

65
import styles from './ArticleInlineLayout.module.scss'
@@ -28,39 +27,41 @@ export const ArticleInlineLayout = ({
2827
return (
2928
<div className={cx(styles.containerBox, className)}>
3029
{breadcrumbs && (
31-
<Box gridArea="breadcrumbs" className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}>
30+
<div
31+
style={{ gridArea: 'breadcrumbs' }}
32+
className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}
33+
>
3234
{breadcrumbs}
33-
</Box>
35+
</div>
3436
)}
3537
<div className={cx(styles.contentBox)}>
36-
{topper && <Box gridArea="topper">{topper}</Box>}
38+
{topper && <div style={{ gridArea: 'topper' }}>{topper}</div>}
3739

3840
{intro && (
39-
<Box id="article-intro" gridArea="intro" className="f4">
41+
<div id="article-intro" style={{ gridArea: 'intro' }} className="f4">
4042
{intro}
41-
</Box>
43+
</div>
4244
)}
4345

4446
{introCallOuts && (
45-
<Box gridArea="intro" className="f4 mb-4">
47+
<div style={{ gridArea: 'intro' }} className="f4 mb-4">
4648
{introCallOuts}
47-
</Box>
49+
</div>
4850
)}
4951

5052
{toc && (
51-
<Box
53+
<div
5254
data-container="toc"
53-
gridArea="sidebar"
54-
alignSelf="flex-start"
55+
style={{ gridArea: 'sidebar', alignSelf: 'flex-start' }}
5556
className={cx(styles.sidebarBox, 'border-bottom border-lg-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}
5657
>
5758
{toc}
58-
</Box>
59+
</div>
5960
)}
6061

61-
<Box
62+
<div
6263
data-container="article"
63-
gridArea="content"
64+
style={{ gridArea: 'content' }}
6465
data-search="article-body"
6566
className={cx(styles.articleContainer, className)}
6667
>
@@ -70,7 +71,7 @@ export const ArticleInlineLayout = ({
7071
<SupportPortalVaIframe supportPortalVaIframeProps={supportPortalVaIframeProps} />
7172
)}
7273
{children}
73-
</Box>
74+
</div>
7475
</div>
7576
</div>
7677
)

‎src/landings/components/ArticleCard.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.topicsList {
2+
list-style-type: none;
3+
}
4+
5+
.label {
6+
margin-right: 0.25rem;
7+
}

‎src/landings/components/ArticleCard.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Label } from '@primer/react'
33
import { ArticleGuide } from '@/landings/components/ProductGuidesContext'
44
import { Link } from '@/frame/components/Link'
55

6+
import styles from './ArticleCard.module.scss'
7+
68
type Props = {
79
card: ArticleGuide
810
typeLabel: string
@@ -23,15 +25,15 @@ export const ArticleCard = ({ tabIndex, card, typeLabel }: Props) => {
2325
</div>
2426
<p className="color-fg-muted my-3">{card.intro}</p>
2527
{card.topics.length > 0 && (
26-
<ul style={{ listStyleType: 'none' }}>
28+
<ul className={styles.topicsList}>
2729
{card.topics.map((topic) => {
2830
return (
2931
<li className="d-inline-block" key={topic}>
3032
<Label
3133
data-testid="article-card-topic"
3234
size="small"
3335
variant="accent"
34-
sx={{ mr: 1 }}
36+
className={styles.label}
3537
>
3638
{topic}
3739
</Label>

‎src/landings/components/CookBookArticleCard.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.spotlightImage {
2+
background-color: gray;
3+
margin-bottom: 20px;
4+
border-radius: 5px;
5+
width: 100%;
6+
height: auto;
7+
}
8+
9+
.cardContainer {
10+
min-height: 200px;
11+
}
12+
13+
.label {
14+
margin-right: 0.25rem;
15+
}

‎src/landings/components/CookBookArticleCard.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Label, LabelGroup, Link } from '@primer/react'
22
import { ValidOcticon, getOcticonComponent } from '../lib/octicons'
33

4+
import styles from './CookBookArticleCard.module.scss'
5+
46
type IconType = ValidOcticon
57

68
type Props = {
@@ -15,19 +17,7 @@ type Props = {
1517
}
1618

1719
function setImage(image: string, alt: string) {
18-
return image ? (
19-
<img
20-
src={image}
21-
alt={alt}
22-
style={{
23-
backgroundColor: 'gray',
24-
marginBottom: 20,
25-
borderRadius: 5,
26-
width: '100%',
27-
height: 'auto',
28-
}}
29-
/>
30-
) : null
20+
return image ? <img src={image} alt={alt} className={styles.spotlightImage} /> : null
3121
}
3222
const spotlightClasses = 'd-flex flex-column align-items-center'
3323
export const CookBookArticleCard = ({
@@ -43,8 +33,7 @@ export const CookBookArticleCard = ({
4333
return (
4434
<div className="m-2">
4535
<div
46-
style={{ minHeight: 200 }}
47-
className={spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}
36+
className={`${styles.cardContainer} ${spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}`}
4837
>
4938
{spotlight ? setImage(image, title) : null}
5039
{spotlight
@@ -62,7 +51,7 @@ export const CookBookArticleCard = ({
6251
<div className="fgColor-muted mb-3 mt-2">{description}</div>
6352
<LabelGroup>
6453
{tags.map((tag, index) => (
65-
<Label key={index} variant="accent" sx={{ mr: 1 }} size="small">
54+
<Label key={index} variant="accent" className={styles.label} size="small">
6655
{tag}
6756
</Label>
6857
))}

‎src/landings/components/CookBookFilter.module.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.textInput {
2+
min-width: 100%;
3+
}
4+
5+
.categoryLabel {
6+
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
7+
display: inline-block;
8+
}
9+
10+
.complexityLabel {
11+
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
12+
display: inline-block;
13+
}

‎src/landings/components/CookBookFilter.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { TextInput, ActionMenu, ActionList, Button, Box } from '@primer/react'
1+
import { TextInput, ActionMenu, ActionList, Button } from '@primer/react'
22
import { SearchIcon } from '@primer/octicons-react'
33
import { useRef, useEffect, useState } from 'react'
44
import { ArticleCardItems } from '@/landings/types'
55
import { useTranslation } from '@/languages/components/useTranslation'
66

7+
import styles from './CookBookFilter.module.scss'
8+
79
type Props = {
810
tokens: ArticleCardItems
911
onSearch: (query: string) => void
@@ -61,8 +63,7 @@ export const CookBookFilter = ({
6163
<form onSubmit={(e) => e.preventDefault()}>
6264
<TextInput
6365
leadingVisual={SearchIcon}
64-
className="m-1"
65-
sx={{ minWidth: ['stretch', 'stretch', 'stretch', 'stretch'] }}
66+
className={`m-1 ${styles.textInput}`}
6667
placeholder={t('search_articles')}
6768
ref={inputRef}
6869
autoComplete="false"
@@ -76,14 +77,7 @@ export const CookBookFilter = ({
7677
<div className="d-flex flex-wrap flex-md-nowrap ">
7778
<ActionMenu>
7879
<ActionMenu.Button className="col-md-1 col-sm-2 m-1">
79-
<Box
80-
sx={{
81-
color: 'fg.muted',
82-
display: 'inline-block',
83-
}}
84-
>
85-
{t('category')}:
86-
</Box>{' '}
80+
<span className={styles.categoryLabel}>{t('category')}:</span>{' '}
8781
{categories[selectedCategory]}
8882
</ActionMenu.Button>
8983
<ActionMenu.Overlay width="auto">
@@ -103,14 +97,7 @@ export const CookBookFilter = ({
10397

10498
<ActionMenu>
10599
<ActionMenu.Button className="col-md-1 col-sm-2 m-1">
106-
<Box
107-
sx={{
108-
color: 'fg.muted',
109-
display: 'inline-block',
110-
}}
111-
>
112-
{t('complexity')}:
113-
</Box>{' '}
100+
<span className={styles.complexityLabel}>{t('complexity')}:</span>{' '}
114101
{complexities[selectedComplexity]}
115102
</ActionMenu.Button>
116103
<ActionMenu.Overlay width="auto">

0 commit comments

Comments
 (0)