Skip to content

Commit

Permalink
fix faq content with Prose
Browse files Browse the repository at this point in the history
  • Loading branch information
rezrah committed Oct 16, 2023
1 parent e9d130c commit 818ecff
Show file tree
Hide file tree
Showing 21 changed files with 212 additions and 66 deletions.
5 changes: 5 additions & 0 deletions .changeset/fix-faq-content.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react-brand': patch
---

Improvements to default styling in FAQ content.
12 changes: 6 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
'components-logosuite-features--mixed-width', // animation only
'components-logosuite-features--following-hero', // animation only
'components-logosuite-features--stacked', // animation only
'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey
]

const categorisedStories = Object.keys(stories as Stories).reduce((acc, key) => {
Expand Down
35 changes: 34 additions & 1 deletion packages/react/src/Accordion/Accordion.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,47 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
padding-inline-start: var(--base-size-48);
}

.Accordion__content {
.Accordion__content,
.Accordion__content p,
.Accordion__content span:not(.Accordion__summary--expanded):not(.Accordion__summary--collapsed),
.Accordion__content ul,
.Accordion__content ol {
color: var(--brand-color-text-muted);
font-family: var(--brand-fontStack-sansSerif);
font-weight: var(--brand-text-weight-200);
font-size: var(--brand-text-size-200);
line-height: var(--brand-text-lineHeight-200);
}

.Accordion__content p:not(:first-child) {
margin-block-start: var(--base-size-16);
}

.Accordion__content a {
color: var(--brand-InlineLink-color-rest);
position: relative;
text-decoration: underline;
text-decoration-color: var(--brand-InlineLink-color-rest);
text-decoration-thickness: var(--brand-borderWidth-thin);
text-underline-position: under;
transition: var(--brand-InlineLink-transition-timing) text-decoration;
}

.Accordion__content a:hover {
text-decoration-thickness: var(--brand-borderWidth-thick);
}

.Accordion__content a,
.Accordion__content a > span {
font-weight: inherit;
color: var(--brand-InlineLink-color-rest);
}

.Accordion__content a:active,
.Accordion__content a:active > span {
color: var(--brand-InlineLink-color-pressed);
}

details[open] > .Accordion__content {
padding-bottom: var(--base-size-24);
animation: fade-in 0.5s;
Expand Down
14 changes: 7 additions & 7 deletions packages/react/src/Accordion/Accordion.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Meta} from '@storybook/react'
import React from 'react'
import {Accordion} from '.'
import {InlineLink, UnorderedList} from '../'
import {UnorderedList} from '../'

export default {
title: 'Components/Accordion',
Expand All @@ -26,9 +26,9 @@ export const Composition = () => (
<p>
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</InlineLink>
</a>
.
</p>
</Accordion.Content>
Expand All @@ -51,9 +51,9 @@ export const Composition = () => (
<p>
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to sign up for a trial{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
here
</InlineLink>
</a>
.
</p>
</Accordion.Content>
Expand All @@ -67,9 +67,9 @@ export const Composition = () => (
</p>
<p>
{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Apply here
</InlineLink>
</a>
.
</p>
</Accordion.Content>
Expand Down
30 changes: 1 addition & 29 deletions packages/react/src/Accordion/Accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,41 +95,13 @@ export const AccordionHeading = forwardRef<HTMLHeadingElement, AccordionHeadingP
)

type AccordionContentProps = BaseProps<HTMLElement> & {
className?: string
children: React.ReactElement | React.ReactElement[]
}

export function AccordionContent({children, className, ...rest}: AccordionContentProps) {
const resolvedChildren =
React.isValidElement(children) && children.type === React.Fragment
? (children as React.ReactElement).props.children
: children

const transformedChildren = React.Children.map<React.ReactNode, React.ReactNode>(resolvedChildren, child => {
const targetChildTypes = ['p', 'span']
if (React.isValidElement(child) && typeof child.type === 'string') {
if (targetChildTypes.includes(child.type)) {
return React.cloneElement(child as React.ReactElement, {
children: (
<Text variant="muted" size="200" as="span">
{child.props.children}
</Text>
),
})
}
}
return child
})

return (
<section className={clsx(styles.Accordion__content, className)} {...rest}>
{React.Children.toArray(transformedChildren).map(
textNode =>
React.isValidElement(textNode) &&
React.cloneElement(textNode as React.ReactElement, {
className: clsx(styles['Accordion__content-item'], textNode.props.className),
}),
)}
{children}
</section>
)
}
Expand Down
137 changes: 130 additions & 7 deletions packages/react/src/FAQ/FAQ.features.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import {StoryFn, Meta} from '@storybook/react'
import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
import {FAQ, FAQGroup} from '.'
import {InlineLink} from '..'
import {Prose} from '..'
import {Container} from '../component-helpers'

export default {
Expand Down Expand Up @@ -38,9 +38,9 @@ const fixtureData: FixtureData = [
answer: (
<p>
Vestibulum at dolor justo.{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Curabitur
</InlineLink>{' '}
</a>{' '}
dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et
non eros.
</p>
Expand All @@ -52,9 +52,9 @@ const fixtureData: FixtureData = [
<React.Fragment>
<p>
Vestibulum at dolor justo.{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Curabitur
</InlineLink>{' '}
</a>{' '}
dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et
non eros.
</p>
Expand All @@ -73,9 +73,9 @@ const fixtureData: FixtureData = [
<React.Fragment>
<p>
Vestibulum at dolor justo.{' '}
<InlineLink href="https://copilot.github.com/" target="_blank" rel="noreferrer">
<a href="https://copilot.github.com/" target="_blank" rel="noreferrer">
Curabitur
</InlineLink>{' '}
</a>{' '}
dictum feugiat elit, vitae vestibulum orci vestibulum sed. Donec interdum ligula at nisi rhoncus malesuada et
non eros.
</p>
Expand Down Expand Up @@ -481,3 +481,126 @@ export const DynamicDataExample: StoryFn<typeof FAQ> = () => {
</Container>
)
}

export const WithProse: StoryFn<typeof FAQ> = () => {
return (
<Container>
<FAQ>
<FAQ.Heading>Frequently asked&nbsp;questions</FAQ.Heading>
<FAQ.Item open={true}>
<FAQ.Question>What is GitHub Enterprise?</FAQ.Question>
<FAQ.Answer>
<Prose
html={`
<p>
<a href="https://docs.github.com/en/[email protected]/admin/overview/about-github-enterprise-server">GitHub Enterprise Server</a>
is the self-hosted version of GitHub Enterprise. It is installed on-premises or on a private
cloud and provides organizations with a secure and customizable source code management and
collaboration platform.
</p>
<p>
One of the key advantages of GitHub Enterprise Server is that it provides organizations with
complete control over their source code and data. Organizations can choose where to store their
repositories and can control who has access to them. Administrators can also customize the
platform to meet specific needs, such as integrating other tools or implementing custom
workflows.
</p>
<p>
GitHub Enterprise Server also offers enhanced security and compliance features. Organizations
can configure their instance to meet their specific security requirements, such as using LDAP or
SAML for authentication, setting up two-factor authentication, or implementing network security
measures. Compliance features are also included, such as audit logs, access controls, and
vulnerability scanning.
</p>
`}
/>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item open={true}>
<FAQ.Question>How secure is GitHub Enterprise?</FAQ.Question>
<FAQ.Answer className="enterprise-faq-answer">
<Prose
html={`
<p>
GitHub Enterprise is designed with security in mind and includes a range of features to help organizations
protect their code and data. Here are some of the key security features that GitHub Enterprise offers:
</p>
<ol>
<li>
Authentication and access controls: GitHub Enterprise includes two-factor authentication, LDAP and
Active Directory integration, and OAuth authentication. This helps organizations ensure that only
authorized users can access their repositories and data.
</li>
<li>
Encryption: All data in transit between the user&apos;s computer and GitHub Enterprise server is
encrypted using HTTPS. All data at rest uses AES-256 encryption.
</li>
<li>
Vulnerability scanning: GitHub Enterprise includes built-in security scanning features that can detect
known vulnerabilities and alert users.
</li>
<li>
Audit logs: The platform provides detailed audit logs that record all user actions, including repository
access, changes, and deletions. This helps organizations track and monitor user activity and identify
potential security issues.
</li>
<li>
Customizable policies: GitHub Enterprise allows organizations to create custom policies for repository
access. This can help enforce compliance requirements and prevent unauthorized access to sensitive data.
</li>
<li>
Regular security updates: There is also a dedicated security team that provides regular updates,
monitors for potential security threats, and responds quickly to any issues that arise.
</li>
</ol>
`}
/>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item open={true}>
<FAQ.Question>What is GitHub Enterprise Cloud?</FAQ.Question>
<FAQ.Answer>
<Prose
html={`
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
turpis felis nam pulvinar risus elementum.
</p>
<ul>
<li>
Authentication and access controls: GitHub Enterprise includes two-factor authentication, LDAP and
Active Directory integration, and OAuth authentication. This helps organizations ensure that only
authorized users can access their repositories and data.
</li>
<li>
Encryption: All data in transit between the user&apos;s computer and GitHub Enterprise server is
encrypted using HTTPS. All data at rest uses AES-256 encryption.
</li>
<li>
Vulnerability scanning: GitHub Enterprise includes built-in security scanning features that can detect
known vulnerabilities and alert users.
</li>
<li>
Audit logs: The platform provides detailed audit logs that record all user actions, including repository
access, changes, and deletions. This helps organizations track and monitor user activity and identify
potential security issues.
</li>
<li>
Customizable policies: GitHub Enterprise allows organizations to create custom policies for repository
access. This can help enforce compliance requirements and prevent unauthorized access to sensitive data.
</li>
<li>
Regular security updates: There is also a dedicated security team that provides regular updates,
monitors for potential security threats, and responds quickly to any issues that arise.
</li>
</ul>
`}
/>
</FAQ.Answer>
</FAQ.Item>
</FAQ>
</Container>
)
}
14 changes: 14 additions & 0 deletions packages/react/src/FAQ/FAQ.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,17 @@
.FAQ details + .FAQ__subheading {
margin-top: var(--base-size-48);
}

.FAQ.details__summary {
font-weight: var(--brand-text-weight-800);
font-size: var(--brand-text-size-800);
line-height: var(--brand-text-lineHeight-800);
letter-spacing: var(--brand-text-letterSpacing-800);
color: var(--brand-FAQ-color-heading);
cursor: pointer;
outline: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
Loading

0 comments on commit 818ecff

Please sign in to comment.