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

Add toggleColor prop to accordion and faq components #879

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add toggleColor prop to accordion and faq components #879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06c568f
add toggleColor prop to accordion and faq components
rezrah Jan 7, 2025
2afc62a
removing redundant code
rezrah Jan 7, 2025
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
23 changes: 23 additions & 0 deletions .changeset/eight-shirts-guess.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
'@primer/react-brand': patch
---

Added `toggleColor` prop to `FAQ.Question` and `Accordion.Heading`

```jsx
<FAQ>
<FAQ.Item>
<FAQ.Question toggleColor="green-blue">...</FAQ.Question>
<FAQ.Answer>...</FAQ.Answer>
</FAQ.Item>
</FAQ>
```

```jsx
<Accordion>
<Accordion.Heading toggleColor="green-blue">...</Accordion.Heading>
<Accordion.Content>...</Accordion.Content>
</Accordion>
```

🔗 [See the documentation for examples and color options](https://primer.style/brand/components/FAQ/react#toggle-color-customization)
32 changes: 32 additions & 0 deletions .changeset/twelve-eagles-repair.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
'@primer/brand-primitives': patch
---

Added new accordion toggle color variables

```
--brand-Accordion-toggle-color-default;
--brand-Accordion-toggle-color-blue;
--brand-Accordion-toggle-color-blue-purple-start;
--brand-Accordion-toggle-color-blue-purple-end;
--brand-Accordion-toggle-color-coral;
--brand-Accordion-toggle-color-green;
--brand-Accordion-toggle-color-green-blue-start;
--brand-Accordion-toggle-color-green-blue-end;
--brand-Accordion-toggle-color-gray;
--brand-Accordion-toggle-color-indigo;
--brand-Accordion-toggle-color-lemon;
--brand-Accordion-toggle-color-lime;
--brand-Accordion-toggle-color-orange;
--brand-Accordion-toggle-color-pink;
--brand-Accordion-toggle-color-pink-blue-start;
--brand-Accordion-toggle-color-pink-blue-end;
--brand-Accordion-toggle-color-purple;
--brand-Accordion-toggle-color-purple-red-start;
--brand-Accordion-toggle-color-purple-red-end;
--brand-Accordion-toggle-color-red;
--brand-Accordion-toggle-color-red-orange-start;
--brand-Accordion-toggle-color-red-orange-end;
--brand-Accordion-toggle-color-teal;
--brand-Accordion-toggle-color-yellow;
```
143 changes: 75 additions & 68 deletions apps/docs/content/components/FAQ/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Use the FAQ component to display content in a Q&A format.

import ComponentLayout from '../../../src/layouts/component-layout'

import {HeadingTags} from '@primer/react-brand'
import {HeadingTags, AccordionToggleColors} from '@primer/react-brand'
import {Label} from '@primer/react'
import {PropTableValues} from '../../../src/components'
export default ComponentLayout
Expand Down Expand Up @@ -292,30 +292,30 @@ const App = () => {
render(<App />)
```

### Color customization
### Toggle color customization

`FAQ` surfaces component-specific css variables that can be used to adjust the color where needed.
`FAQ.Question` toggle colors can be adjusted using one of the following approaches:

```javascript live noinline
const App = () => {
const designTokenOverrides = `
.custom-colors[data-color-mode='dark'] {

/*
* Modify the value of these tokens.
* Remember to apply light mode equivalents if you're enabling theme switching.
*/
--brand-Accordion-toggle-color-start: var(--base-color-scale-green-1);
--brand-Accordion-toggle-color-end: var(--base-color-scale-blue-3);
--brand-FAQ-color-heading: linear-gradient(271.72deg, var(--base-color-scale-green-1) 7.09%, var(--base-color-scale-blue-3) 96.61%);

padding: 3rem;
background-color: var(--brand-color-canvas-default);
}
1. Override the global `--brand-color-accent-primary` CSS variable (recommended).
2. Use the `toggleColor` prop on `FAQ.Question`.

Available options for `toggleColor` are:

<p>
<PropTableValues
values={AccordionToggleColors}
commaSeparated
removeApostrophes
/>
</p>

[See Storybook for all color options](https://primer.style/brand/storybook/?path=/story/components-accordion--toggle-colors).

```javascript live noinline
const App = () => {
const customStyles = `
.custom-heading {
background: var(--brand-FAQ-color-heading);
background: linear-gradient(271.72deg, var(--brand-Accordion-toggle-color-green-blue-start) 7.09%, var(--brand-Accordion-toggle-color-green-blue-end) 96.61%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
Expand All @@ -324,45 +324,51 @@ const App = () => {

return (
<ThemeProvider colorMode="dark" className="custom-colors">
<style>{designTokenOverrides}</style>
<FAQ>
<FAQ.Heading className="custom-heading">
Frequently asked questions
</FAQ.Heading>
<FAQ.Subheading>Subscriptions & Payments</FAQ.Subheading>
<FAQ.Item>
<FAQ.Question>
What are the differences between GitHub Free, GitHub Pro, GitHub
Team and GitHub Enterprise plans?
</FAQ.Question>
<FAQ.Answer>
<p>
GitHub Free is our basic plan created for individuals and small
teams to collaborate on private and public repositories.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>How do I view and manage my subscription?</FAQ.Question>
<FAQ.Answer>
<p>
You can view your account's subscription, your other paid features
and products, and your next billing date in your account's billing
settings.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question>How can I change my GitHub subscription?</FAQ.Question>
<FAQ.Answer>
<p>
You can upgrade or downgrade your subscription, add and remove
seats, or change the billing cadence on
https://github.com/settings/billing.
</p>
</FAQ.Answer>
</FAQ.Item>
</FAQ>
<Box padding="spacious" backgroundColor="default">
<style>{customStyles}</style>
<FAQ>
<FAQ.Heading className="custom-heading">
Frequently asked questions
</FAQ.Heading>
<FAQ.Subheading>Subscriptions & Payments</FAQ.Subheading>
<FAQ.Item>
<FAQ.Question toggleColor="green-blue">
What are the differences between GitHub Free, GitHub Pro, GitHub
Team and GitHub Enterprise plans?
</FAQ.Question>
<FAQ.Answer>
<p>
GitHub Free is our basic plan created for individuals and small
teams to collaborate on private and public repositories.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question toggleColor="green-blue">
How do I view and manage my subscription?
</FAQ.Question>
<FAQ.Answer>
<p>
You can view your account's subscription, your other paid
features and products, and your next billing date in your
account's billing settings.
</p>
</FAQ.Answer>
</FAQ.Item>
<FAQ.Item>
<FAQ.Question toggleColor="green-blue">
How can I change my GitHub subscription?
</FAQ.Question>
<FAQ.Answer>
<p>
You can upgrade or downgrade your subscription, add and remove
seats, or change the billing cadence on
https://github.com/settings/billing.
</p>
</FAQ.Answer>
</FAQ.Item>
</FAQ>
</Box>
</ThemeProvider>
)
}
Expand All @@ -385,15 +391,16 @@ render(<App />)
FAQ.Heading <Label>Required</Label>
</h3>

| Name | Type | Default | Description |
| :---------- | :-------------------------------------------------------------- | :--------: | :--------------------------------------- |
| `align` | <PropTableValues values={['start', 'center' ]} addLineBreaks /> | `'center'` | Heading text alignment |
| `children` | `string` | | Heading text |
| `className` | `string` | | Heading custom class |
| `id` | `string` | | Sets a custom id |
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
| `size` | <PropTableValues values={['medium', 'large' ]} addLineBreaks /> | `'medium'` | Heading text size |
| `as` | <PropTableValues values={HeadingTags} addLineBreaks /> | | Applies the underlying HTML element |
| Name | Type | Default | Description |
| :------------ | :--------------------------------------------------------------- | :--------: | :--------------------------------------- |
| `align` | <PropTableValues values={['start', 'center' ]} addLineBreaks /> | `'center'` | Heading text alignment |
| `children` | `string` | | Heading text |
| `className` | `string` | | Heading custom class |
| `id` | `string` | | Sets a custom id |
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
| `size` | <PropTableValues values={['medium', 'large' ]} addLineBreaks /> | `'medium'` | Heading text size |
| `as` | <PropTableValues values={HeadingTags} addLineBreaks /> | | Applies the underlying HTML element |
| `toggleColor` | <PropTableValues values={AccordionToggleColors} addLineBreaks /> | | Sets the accordion toggle color |

<h3 id="faq-subheading">FAQ.Subheading</h3>

Expand Down
106 changes: 106 additions & 0 deletions packages/design-tokens/src/tokens/functional/components/accordion/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,112 @@ module.exports = {
value: 'var(--brand-color-accent-primary)',
dark: 'var(--brand-color-accent-primary)',
},
default: {
value: 'var(--brand-color-text-default)',
dark: 'var(--brand-color-text-default)',
},
blue: {
value: 'var(--base-color-scale-blue-5)',
dark: 'var(--base-color-scale-blue-2)',
},
'blue-purple': {
start: {
value: 'var(--base-color-scale-blue-5)',
dark: 'var(--base-color-scale-blue-2)',
},
end: {
value: 'var(--base-color-scale-purple-5)',
dark: 'var(--base-color-scale-purple-2)',
},
},
coral: {
value: 'var(--base-color-scale-coral-5)',
dark: 'var(--base-color-scale-coral-2)',
},
green: {
value: 'var(--base-color-scale-green-5)',
dark: 'var(--base-color-scale-green-2)',
},
'green-blue': {
start: {
value: 'var(--base-color-scale-green-5)',
dark: 'var(--base-color-scale-green-2)',
},
end: {
value: 'var(--base-color-scale-blue-5)',
dark: 'var(--base-color-scale-blue-2)',
},
},
gray: {
value: 'var(--base-color-scale-gray-5)',
dark: 'var(--base-color-scale-gray-2)',
},
indigo: {
value: 'var(--base-color-scale-indigo-5)',
dark: 'var(--base-color-scale-indigo-2)',
},
lemon: {
value: 'var(--base-color-scale-lemon-5)',
dark: 'var(--base-color-scale-lemon-2)',
},
lime: {
value: 'var(--base-color-scale-lime-5)',
dark: 'var(--base-color-scale-lime-2)',
},
orange: {
value: 'var(--base-color-scale-orange-5)',
dark: 'var(--base-color-scale-orange-2)',
},
pink: {
value: 'var(--base-color-scale-pink-5)',
dark: 'var(--base-color-scale-pink-2)',
},
'pink-blue': {
start: {
value: 'var(--base-color-scale-pink-5)',
dark: 'var(--base-color-scale-pink-2)',
},
end: {
value: 'var(--base-color-scale-blue-5)',
dark: 'var(--base-color-scale-blue-2)',
},
},
purple: {
value: 'var(--base-color-scale-purple-5)',
dark: 'var(--base-color-scale-purple-2)',
},
'purple-red': {
start: {
value: 'var(--base-color-scale-purple-5)',
dark: 'var(--base-color-scale-purple-2)',
},
end: {
value: 'var(--base-color-scale-red-5)',
dark: 'var(--base-color-scale-red-2)',
},
},
red: {
value: 'var(--base-color-scale-red-5)',
dark: 'var(--base-color-scale-red-2)',
},
'red-orange': {
start: {
value: 'var(--base-color-scale-red-5)',
dark: 'var(--base-color-scale-red-2)',
},
end: {
value: 'var(--base-color-scale-orange-5)',
dark: 'var(--base-color-scale-orange-2)',
},
},
teal: {
value: 'var(--base-color-scale-teal-5)',
dark: 'var(--base-color-scale-teal-2)',
},
yellow: {
value: 'var(--base-color-scale-yellow-5)',
dark: 'var(--base-color-scale-yellow-2)',
},
},
},
border: {
Expand Down
Loading
Loading