Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add footnotes component #707

Merged
merged 7 commits into from
Aug 29, 2024
Merged

Add footnotes component #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
493922d
add mvp component, 100% coverage and storybook examples
rezrah Aug 21, 2024
2c3153e
add documentation
rezrah Aug 21, 2024
9adc97c
rename visuallyHiddenTitle to Heading
rezrah Aug 21, 2024
69a96ca
Merge branch 'main' of github.com:primer/brand into rezrah/add-footno…
rezrah Aug 22, 2024
29e8489
update tests
rezrah Aug 22, 2024
35117f0
rename variant to _variant
rezrah Aug 23, 2024
fe9283d
remove higlight on target
rezrah Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .changeset/swift-doors-knock.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
'@primer/react-brand': minor
---

New `Footnotes` component generally available

```js
import {Footnotes} from '@primer/react-brand'
```

```jsx
<Footnotes>
<Footnotes.Item>There are now 100 million developers around the world using GitHub.</Footnotes.Item>
</Footnotes>
```

:link: [Read the documentation for usage guidelines and examples](https://primer.style/brand/components/Footnotes)
177 changes: 177 additions & 0 deletions apps/docs/content/components/Footnotes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
---
title: Footnotes
status: Experimental
source: https://github.com/primer/brand/tree/main/packages/react/src/Footnotes/Footnotes.tsx
storybook: '/brand/storybook/?path=/story/components-footnotes--default'
description: Use footnotes to display contextual information and cite sources in the page content.
---

import {Label} from '@primer/react'
import {PropTableValues} from '../../src/components'
import {Link} from '@primer/react-brand'

```js
import {Footnotes} from '@primer/react-brand'
```

## Examples

### Default

```jsx live
<Footnotes>
<Footnotes.Item>
"Automating your workflow with GitHub Actions," GitHub Docs{' '}
<InlineLink href="https://docs.github.com/en/actions">
https://docs.github.com/en/actions
</InlineLink>
.
</Footnotes.Item>
<Footnotes.Item>
"About Issues," GitHub Docs{' '}
<InlineLink href="https://docs.github.com/en/issues">
https://docs.github.com/en/issues
</InlineLink>
.
</Footnotes.Item>
<Footnotes.Item>
"GitHub Copilot: Your AI pair programmer," GitHub{' '}
<InlineLink href="https://github.com/features/copilot/">
https://github.com/features/copilot/
</InlineLink>
.
</Footnotes.Item>
<Footnotes.Item>
"Explore the GitHub Marketplace," GitHub Docs{' '}
<InlineLink href="https://github.com/marketplace">
https://github.com/marketplace
</InlineLink>
.
</Footnotes.Item>
<Footnotes.Item>
"GitHub Pages basics," GitHub Docs{' '}
<InlineLink href="https://docs.github.com/en/pages">
https://docs.github.com/en/pages
</InlineLink>
.
</Footnotes.Item>
</Footnotes>
```

### Paragraphs

```jsx live
<Footnotes as="div">
<Footnotes.Item>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non
facilisis tortor. Pellentesque rhoncus blandit posuere. Sed eget mi finibus,
fermentum turpis vitae, eleifend dolor. Maecenas viverra neque at cursus
faucibus. Nam tempus enim quis augue pulvinar finibus. Integer accumsan
turpis eget mauris pretium, non dapibus orci cursus. Ut in sollicitudin dui,
eu tincidunt nunc. Donec ut placerat ex. In ullamcorper nibh eu sapien
convallis bibendum. Sed diam leo, rhoncus non viverra nec, ullamcorper quis
arcu.
</Footnotes.Item>
<Footnotes.Item>
Etiam scelerisque turpis at massa pellentesque, ut pretium lorem iaculis.
Pellentesque feugiat nisi quis viverra posuere. Integer eu pulvinar ligula,
lacinia sollicitudin libero. Etiam in cursus lacus, vitae vestibulum elit.
Fusce quis purus a urna placerat dignissim non id lectus. Suspendisse
malesuada nisi eget nibh tempus, et sollicitudin tortor posuere. Fusce id
consectetur purus, sit amet faucibus orci. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus sollicitudin nisl vel felis tempor,
quis porttitor diam elementum. Integer vel enim eget urna ullamcorper
euismod eget quis nisl. Pellentesque nec erat tincidunt, dignissim ligula
ut, consectetur lectus. Sed scelerisque urna maximus varius mollis. Ut
dictum sed nibh id fermentum. Ut hendrerit accumsan tortor, eu tincidunt
mauris blandit in. Suspendisse ut velit in felis molestie euismod. Nam vitae
dui a justo lacinia semper.
</Footnotes.Item>
</Footnotes>
```

### Citations with return links

```jsx live
<>
<River>
<River.Visual>
<img
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
alt="placeholder, blank area with an off-white background color"
/>
</River.Visual>
<River.Content
trailingComponent={() => (
<Box marginBlockStart={24} paddingBlockStart={24}>
<Heading as="h4" size="3">
17,000+
</Heading>
<Text as="p" size="300" weight="light" variant="muted">
Third-party tools support your favorite languages and frameworks{' '}
<Text size="100" weight="light">
<sup>
<InlineLink href="#economic-impact" id="economic-impact-ref">
1
</InlineLink>
</sup>
</Text>
</Text>
</Box>
)}
>
<Heading size="5" as="h3" weight="medium">
Leverage the industry&apos;s most flexible secure development platform.
</Heading>
</River.Content>
</River>
<River>
<River.Visual>
<img
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
alt="placeholder, blank area with an off-white background color"
/>
</River.Visual>
<River.Content>
<Heading size="5" as="h3" weight="medium">
Unlocking innovation at scale with AI-driven software development.
</Heading>
<Text as="p" size="200" weight="light" variant="muted">
The world&apos;s most widely adopted AI developer tool.{' '}
<Text size="100" weight="light">
<sup>
<InlineLink href="#ai" id="ai-ref">
2
</InlineLink>
</sup>
</Text>
</Text>
</River.Content>
</River>

<Footnotes>
<Footnotes.Item id="economic-impact" href="#economic-impact-ref">
There are now 100 million developers around the world using GitHub.{' '}
</Footnotes.Item>
<Footnotes.Item id="ai" href="#ai-ref">
This factor is based on data from the industry&apos;s{' '}
<InlineLink href="#">longest running analysis</InlineLink> by Acme Corp.
</Footnotes.Item>
</Footnotes>
</>
```

## Component props

### Footnotes <Label>Required</Label>

| name | type | default | required | description |
| ----------------------- | -------------------------------------------------------- | ------------- | -------- | ------------------------------------------------------------ |
| `as` | <PropTableValues values={['ol', 'div']} addLineBreaks /> | `'ol'` | `false` | Determines the underlying HTML element |
| `visuallyHiddenHeading` | `string` | `'Footnotes'` | `false` | Visually hidden title, which introduces the footnote content |

### Footnotes.Item <Label>Required</Label>

| name | type | default | required | description |
| ------ | -------- | ------- | -------- | ----------------------------------------------------------------------------- |
| `href` | `string` | | `false` | Applies a return URL icon to the original content attributed to this citation |
4 changes: 2 additions & 2 deletions apps/docs/scripts/components-with-animation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ export const supportedComponents = [
'Button',
'ComparisonTable',
'FAQ',
'Image',
'Heading',
'Image',
'Label',
'Pillar',
'SectionIntro',
'Stack',
'Statistic',
'Stack',
'Testimonial',
'Text',
'Timeline',
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/src/@primer/gatsby-theme-doctocat/nav.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@
url: /components/EyebrowBanner
- title: FAQ
url: /components/FAQ
- title: Footnotes
url: /components/Footnotes
- title: Hero
url: /components/Hero
- title: IDE
Expand Down
138 changes: 138 additions & 0 deletions packages/react/src/Footnotes/Footnotes.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React from 'react'
import {Meta} from '@storybook/react'
import {Footnotes} from '.'
import {Box, Grid, Heading, InlineLink, River, RiverBreakout, Section, Text, ThemeProvider, Timeline} from '../'

const meta: Meta<typeof Footnotes> = {
title: 'Components/Footnotes/Examples',
component: Footnotes,
parameters: {
layout: 'fullscreen',
},
}

export const RiversWithCitations = () => (
<ThemeProvider colorMode="dark">
<Box backgroundColor="default">
<Section>
<Grid>
<Grid.Column>
<River>
<River.Visual>
<img
src="https://github.com/images/modules/site/enterprise/2023/platform.png"
alt="placeholder, blank area with an off-white background color"
/>
</River.Visual>
<River.Content
trailingComponent={() => (
<Box marginBlockStart={24} paddingBlockStart={24}>
<Heading as="h4" size="3">
17,000+
</Heading>
<Text as="p" size="300" weight="light" variant="muted">
Third-party tools support your favorite languages and frameworks{' '}
<Text size="100" weight="light">
<sup>
<InlineLink href="#economic-impact" id="economic-impact-ref">
1
</InlineLink>
</sup>
</Text>
</Text>
</Box>
)}
>
<Heading size="5" as="h3" weight="medium">
Leverage the industry&apos;s most flexible secure development platform.
</Heading>
</River.Content>
</River>
<RiverBreakout>
<RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
<RiverBreakout.Visual>
<img
src="https://images.ctfassets.net/8aevphvgewt8/6Ia7O6lk8a6gu4xyNCoIY7/306a31600b13f49a59abb3d106703e51/advisories.webp"
alt="placeholder, blank area with an off-white background color"
/>
</RiverBreakout.Visual>
<RiverBreakout.Content
trailingComponent={() => (
<Timeline>
<Timeline.Item>
<Text variant="muted" size="100">
Fix vulnerabilities up to 7x faster than those using third-party tools.{' '}
<sup>
<InlineLink href="#third-party" id="third-party-ref">
2
</InlineLink>
</sup>
</Text>
</Timeline.Item>
<Timeline.Item>
<Text variant="muted" size="100">
Find leaked secrets with 2.4 fewer false positives than the industry standard.
</Text>
</Timeline.Item>
</Timeline>
)}
>
<Text>
<em>Keep developers in the flow.</em> GitHub Advanced Security enables developers to stay in their
productivity-and-comfort zone, without demanding a high level of security expertise.
</Text>
</RiverBreakout.Content>
</RiverBreakout>
<River>
<River.Visual>
<img
src="https://github.com/images/modules/site/enterprise/2023/ai.png"
alt="placeholder, blank area with an off-white background color"
/>
</River.Visual>
<River.Content>
<Heading size="5" as="h3" weight="medium">
Unlocking innovation at scale with AI-driven software development.
</Heading>
<Text as="p" size="200" weight="light" variant="muted">
The world&apos;s most widely adopted AI developer tool.{' '}
<Text size="100" weight="light">
<sup>
<InlineLink href="#ai" id="ai-ref">
3
</InlineLink>
</sup>
</Text>
</Text>
</River.Content>
</River>
</Grid.Column>
</Grid>
</Section>
<footer>
<Section as="div" backgroundColor="subtle" paddingBlockStart="none" paddingBlockEnd="none">
<Grid>
<Grid.Column>
<Footnotes>
<Footnotes.Item id="economic-impact" href="#economic-impact-ref">
There are now 100 million developers around the world using GitHub.{' '}
</Footnotes.Item>
<Footnotes.Item id="third-party" href="#third-party-ref">
Based on data from the industry&apos;s longest running analysis of fix rates, Veracode State of
Software Security 2023. Developers with GitHub Advanced Security fix 48% of vulnerabilities in real
time, more than 7x faster than the industry average, where it takes 198 days to reach a 50% fix rate.
</Footnotes.Item>
<Footnotes.Item id="ai" href="#ai-ref">
This factor is based on data from the industry&apos;s{' '}
<InlineLink href="#">longest running analysis</InlineLink> by Acme Corp.
</Footnotes.Item>
</Footnotes>
</Grid.Column>
</Grid>
</Section>
</footer>
</Box>
</ThemeProvider>
)

export default meta
Loading
Loading