Skip to content

Commit dc7a6eb

Browse files
author
Josep Martins
committed
Add anchor links
1 parent ca54cf4 commit dc7a6eb

File tree

7 files changed

+42
-98
lines changed

7 files changed

+42
-98
lines changed

‎packages/design-tokens/src/tokens/functional/components/accordion/colors.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
module.exports = {
22
brand: {
33
Accordion: {
4+
anchorLink: {
5+
color: {
6+
default: {
7+
value: 'var(--base-color-scale-blue-5)',
8+
dark: 'var(--base-color-scale-blue-3)'
9+
}
10+
}
11+
},
412
toggle: {
513
color: {
614
start: {

‎packages/react/src/Accordion/Accordion.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
left: 0;
1818
}
1919

20+
.Accordion:hover .Accordion__summary-anchor-link {
21+
opacity: 1;
22+
}
23+
2024
.Accordion:hover::after {
2125
transform: scaleY(0.35);
2226
}
@@ -90,6 +94,15 @@ details[open] > .Accordion__summary::after {
9094
transform: rotateZ(180deg);
9195
}
9296

97+
.Accordion__summary-anchor-link {
98+
opacity: 0;
99+
transition: opacity 0.2s ease;
100+
margin-left: var(--base-size-4);
101+
display: inline-flex;
102+
padding: var(--base-size-4);
103+
color: var(--brand-Accordion-anchorLink-color-default);
104+
}
105+
93106
.Accordion__content {
94107
color: var(--brand-color-text-muted);
95108
font-family: var(--brand-fontStack-sansSerif);

‎packages/react/src/Accordion/Accordion.module.css.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
declare const styles: {
22
readonly "Accordion": string;
3+
readonly "Accordion__summary-anchor-link": string;
34
readonly "Accordion__summary": string;
45
readonly "Accordion__summary-heading": string;
56
readonly "Accordion__content": string;

‎packages/react/src/Accordion/Accordion.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
1111

1212
/** * Main Stylesheet (as a CSS Module) */
1313
import styles from './Accordion.module.css'
14+
import {LinkIcon} from '@primer/octicons-react'
1415

1516
export type AccordionRootProps = BaseProps<HTMLDetailsElement> & {
1617
open?: boolean // Manually declared due to known issue with the native open attribute: https://github.com/facebook/react/issues/15486
18+
url?: string
1719
children: React.ReactElement<AccordionHeadingProps | AccordionContentProps>[]
1820
} & React.HTMLAttributes<HTMLDetailsElement>
1921

@@ -23,7 +25,7 @@ type ValidRootChildren = {
2325
}
2426

2527
export const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(
26-
({children, className, open = false, ...rest}, ref) => {
28+
({children, className, url, open = false, ...rest}, ref) => {
2729
const {AccordionHeading: HeadingChild, AccordionContent: AccordionContentChild} = React.Children.toArray(
2830
children
2931
).reduce<ValidRootChildren>(
@@ -33,7 +35,9 @@ export const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(
3335
acc.AccordionContent = child
3436
}
3537
if (child.type === AccordionHeading) {
36-
acc.AccordionHeading = child
38+
acc.AccordionHeading = React.cloneElement(child, {
39+
url
40+
})
3741
}
3842
}
3943
return acc
@@ -53,14 +57,20 @@ export const AccordionRoot = forwardRef<HTMLDetailsElement, AccordionRootProps>(
5357
type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
5458
className?: string
5559
children: string
60+
url?: string
5661
}
5762

5863
export const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingProps>(
59-
({children, className, ...rest}, ref) => {
64+
({children, className, url, ...rest}, ref) => {
6065
return (
6166
<summary className={clsx(styles.Accordion__summary, className)} ref={ref} {...rest}>
6267
<Heading as="h4" className={styles['Accordion__summary-heading']}>
6368
{children}
69+
{url ? (
70+
<a href={url} className={styles['Accordion__summary-anchor-link']}>
71+
<LinkIcon size={16} />
72+
</a>
73+
) : null}
6474
</Heading>
6575
</summary>
6676
)

‎packages/react/src/FAQ/FAQ.stories.tsx‎

Lines changed: 1 addition & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Default = () => (
1212
<FAQ>
1313
<FAQ.Heading align="center">Frequently asked&nbsp;questions</FAQ.Heading>
1414
<FAQ.Subheading align="start">Subscriptions and payments</FAQ.Subheading>
15-
<FAQ.Item open>
15+
<FAQ.Item>
1616
<FAQ.Question>What&apos;s included in the GitHub for Startups offer?</FAQ.Question>
1717
<FAQ.Answer>
1818
<p>
@@ -95,98 +95,5 @@ export const Default = () => (
9595
</p>
9696
</FAQ.Answer>
9797
</FAQ.Item>
98-
<FAQ.Item>
99-
<FAQ.Question>Who is eligible to apply?</FAQ.Question>
100-
<FAQ.Answer>
101-
<p>Startups who meet the following criteria are eligible to apply for the program:</p>
102-
<ol>
103-
<li>
104-
<Text size="300" variant="muted">
105-
Must be associated with a current GitHub for Startups partner.
106-
</Text>
107-
</li>
108-
<li>
109-
<Text size="300" variant="muted">
110-
Self-funded or funded (Seed-Series A)
111-
</Text>
112-
</li>
113-
<li>
114-
<Text size="300" variant="muted">
115-
Not a current GitHub Enterprise customer
116-
</Text>
117-
</li>
118-
<li>
119-
<Text size="300" variant="muted">
120-
Must not have previously received credits for GitHub Enterprise
121-
</Text>
122-
</li>
123-
</ol>
124-
</FAQ.Answer>
125-
</FAQ.Item>
126-
<FAQ.Item>
127-
<FAQ.Question>What if my startup is not eligible? Are there other resources for me?</FAQ.Question>
128-
<FAQ.Answer>
129-
<p>
130-
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
131-
feel to sign up for a trial
132-
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
133-
here
134-
</InlineLink>
135-
.
136-
</p>
137-
</FAQ.Answer>
138-
</FAQ.Item>
139-
<FAQ.Item id="test-1">
140-
<FAQ.Question>This is a test of an anchored link to a FAQ item</FAQ.Question>
141-
<FAQ.Answer>
142-
<p>
143-
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
144-
program. If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise,
145-
please feel to sign up for a trial.
146-
</p>
147-
<p>
148-
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
149-
program. If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise,
150-
please feel to sign up for a trial.
151-
</p>
152-
<p>
153-
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
154-
program. If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise,
155-
please feel to sign up for a trial.
156-
</p>
157-
<p>
158-
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
159-
program. If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise,
160-
please feel to sign up for a trial.
161-
</p>
162-
<p>
163-
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
164-
program. If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise,
165-
please feel to sign up for a trial. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
166-
libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
167-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
168-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
169-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
170-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
171-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
172-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
173-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
174-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
175-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
176-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
177-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
178-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
179-
ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
180-
ultricies vehicula ut id elit. Nullam id
181-
</p>
182-
<p>
183-
{' '}
184-
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
185-
Apply here
186-
</InlineLink>
187-
.
188-
</p>
189-
</FAQ.Answer>
190-
</FAQ.Item>
19198
</FAQ>
19299
)

‎packages/react/src/FAQ/FAQ.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,12 @@ const FAQRoot = forwardRef<HTMLElement, FAQRootProps>(({children, className, ...
5353
})
5454
}
5555
if (child.type === AccordionRoot) {
56+
const url = child.props.id ? `#${child.props.id}` : undefined
57+
const open = hash && hash.substring(1) === child.props.id ? true : child.props.open
58+
5659
return React.cloneElement(child, {
57-
open: hash && hash.substring(1) === child.props.id ? true : child.props.open
60+
open,
61+
url
5862
})
5963
}
6064
}

‎packages/react/src/Heading/Heading.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {PropsWithChildren, forwardRef, type Ref, useMemo} from 'react'
22
import clsx from 'clsx'
33
import styles from './Heading.module.css'
44
import type {BaseProps} from '../component-helpers'
5+
import {LinkIcon} from '@primer/octicons-react'
56

67
export const HeadingSizes = ['1', '2', '3', '4', '5', '6'] as const
78
export const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const

0 commit comments

Comments
 (0)