From 31edc34038bca09d7387c1b3e64eebbb5a85f613 Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 11:39:12 +0530 Subject: [PATCH 1/6] add:accordion styles --- src/components/ui/Accordion/Accordion.tsx | 5 +- .../Accordion/fragments/AccordionHeader.tsx | 12 ++- .../ui/Accordion/fragments/AccordionRoot.tsx | 10 ++- .../Accordion/fragments/AccordionTrigger.tsx | 1 - .../Accordion/stories/Accordion.stories.tsx | 87 ++++++++++--------- styles/themes/components/accordion.scss | 82 +++++++++-------- 6 files changed, 113 insertions(+), 84 deletions(-) diff --git a/src/components/ui/Accordion/Accordion.tsx b/src/components/ui/Accordion/Accordion.tsx index 6107f2e4..001d61ed 100644 --- a/src/components/ui/Accordion/Accordion.tsx +++ b/src/components/ui/Accordion/Accordion.tsx @@ -12,11 +12,12 @@ export interface AccordionItemType { export interface AccordionProps { items: AccordionItemType[]; + variant?: string; } -const Accordion = ({ items }: AccordionProps) => { +const Accordion = ({ items, variant = '' }: AccordionProps) => { return ( - + {items.map((item, index) => ( diff --git a/src/components/ui/Accordion/fragments/AccordionHeader.tsx b/src/components/ui/Accordion/fragments/AccordionHeader.tsx index be02be81..2eeef41d 100644 --- a/src/components/ui/Accordion/fragments/AccordionHeader.tsx +++ b/src/components/ui/Accordion/fragments/AccordionHeader.tsx @@ -1,14 +1,20 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { clsx } from 'clsx'; - +import { AccordionContext } from '../contexts/AccordionContext'; +import { AccordionItemContext } from '../contexts/AccordionItemContext'; export type AccordionHeaderProps = { children: React.ReactNode; className?: string; } const AccordionHeader: React.FC = ({ children, className = '' }) => { + const { setActiveItem, rootClass, focusNextItem, focusPrevItem, activeItem } = useContext(AccordionContext); + const { itemValue, handleBlurEvent, handleClickEvent, handleFocusEvent } = useContext(AccordionItemContext); + + const expanded = activeItem === itemValue; + return ( -
+
{children}
); diff --git a/src/components/ui/Accordion/fragments/AccordionRoot.tsx b/src/components/ui/Accordion/fragments/AccordionRoot.tsx index 8633f7eb..ebfc6228 100644 --- a/src/components/ui/Accordion/fragments/AccordionRoot.tsx +++ b/src/components/ui/Accordion/fragments/AccordionRoot.tsx @@ -9,15 +9,21 @@ const COMPONENT_NAME = 'Accordion'; export type AccordionRootProps = { children: React.ReactNode; customRootClass?: string; + variant?: string | '' } -const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => { +const AccordionRoot = ({ children, customRootClass, variant = '' }: AccordionRootProps) => { const accordionRef = useRef(null); const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); const [activeItem, setActiveItem] = useState(null); const [focusItem, setFocusItem] = useState(null); // stores the id of the item that should be focused + const dataAttributes: Record = {}; + if (variant) { + dataAttributes['data-variant'] = variant; + } + useEffect(() => {}, []); const focusNextItem = () => { @@ -57,7 +63,7 @@ const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => { accordionRef }}> -
+
{children}
diff --git a/src/components/ui/Accordion/fragments/AccordionTrigger.tsx b/src/components/ui/Accordion/fragments/AccordionTrigger.tsx index 4d8f82f9..0db7fab2 100644 --- a/src/components/ui/Accordion/fragments/AccordionTrigger.tsx +++ b/src/components/ui/Accordion/fragments/AccordionTrigger.tsx @@ -29,7 +29,6 @@ const AccordionTrigger: React.FC = ({ children, index, cl }; return ( -
+ }, + { + title: 'The Dark Knight (2008)', + content:
+
    +
  • Summary: Batman faces his greatest challenge yet as the Joker wreaks havoc on Gotham City.
    • +
  • Key Characters: Batman, Joker, Harvey Dent, Alfred
    • +
  • Memorable Quote: "Why so serious?"
    • +
+
+ }, + { + title: 'Inception (2010)', + content:
+
    +
  • Summary: A thief who enters people's dreams to steal their secrets must plant an idea in someone's mind.
    • +
  • Key Characters: Cobb, Ariadne, Mal, Saito
    • +
  • Memorable Quote: "You mustn't be afraid to dream a little bigger, darling."
    • +
+
+ }, + { + title: 'The Shawshank Redemption (1994)', + content:
+
    +
  • Summary: A banker is wrongly convicted
    • +
  • Key Characters: Andy Dufresne, Red, Warden Norton, Tommy
    • +
  • Memorable Quote: "Get busy living or get busy dying."
    • +
+
+ } +]; + // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta: Meta = { title: 'Components/Accordion', @@ -24,47 +67,7 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const All: Story = { args: { - items: [ - { - title: 'The Matrix (1999)', - content:
-
    -
  • Summary: A hacker discovers the true nature of reality and his role in the war against its controllers.
    • -
  • Key Characters: Neo, Morpheus, Trinity, Agent Smith
    • -
  • Memorable Quote: "There is no spoon."
    • -
-
- }, - { - title: 'The Dark Knight (2008)', - content:
-
    -
  • Summary: Batman faces his greatest challenge yet as the Joker wreaks havoc on Gotham City.
    • -
  • Key Characters: Batman, Joker, Harvey Dent, Alfred
    • -
  • Memorable Quote: "Why so serious?"
    • -
-
- }, - { - title: 'Inception (2010)', - content:
-
    -
  • Summary: A thief who enters people's dreams to steal their secrets must plant an idea in someone's mind.
    • -
  • Key Characters: Cobb, Ariadne, Mal, Saito
    • -
  • Memorable Quote: "You mustn't be afraid to dream a little bigger, darling."
    • -
-
- }, - { - title: 'The Shawshank Redemption (1994)', - content:
-
    -
  • Summary: A banker is wrongly convicted
    • -
  • Key Characters: Andy Dufresne, Red, Warden Norton, Tommy
    • -
  • Memorable Quote: "Get busy living or get busy dying."
    • -
-
- } - ] + items, + variant: 'solid' } }; diff --git a/styles/themes/components/accordion.scss b/styles/themes/components/accordion.scss index e19c51cb..1b6b5572 100644 --- a/styles/themes/components/accordion.scss +++ b/styles/themes/components/accordion.scss @@ -1,48 +1,62 @@ .rad-ui-accordion-root{ width: 100%; - border: 1px solid var(--rad-ui-color-gray-1000); - border-radius: 4px; + border-radius: 2px; overflow: hidden; - .rad-ui-accordion-item { - background-color: var(--rad-ui-color-gray-50); - // not last child - &:not(:last-child){ - border-bottom: 1px solid var(--rad-ui-color-gray-1000); - } + &[data-variant='solid']{ + width: 100%; - - &:focus{ - outline: none; + .rad-ui-accordion-item{ + background-color: var(--rad-ui-color-accent-50); border: none; - color:black; - } - &:focus-within{ - color: var(--rad-ui-color-gray-1000); - } - - .rad-ui-accordion-trigger{ width: 100%; - text-align: left; - padding:16px; - font-size: 1em; - font-weight: 600; - color: var(--rad-ui-color-gray-1000); - background-color: var(--rad-ui-color-accent-100); + display: flex; + flex-direction: column; + flex: 1; + margin-bottom: 12px; + + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--rad-ui-color-accent-600); + border-top: 4px solid var(--rad-ui-color-accent-700); &:focus{ outline: none; + border: none; + } + + &:focus-within{ + border: 1px solid var(--rad-ui-color-accent-900); + border-top: 4px solid var(--rad-ui-color-accent-1000); color: var(--rad-ui-color-accent-900); - } - } - - .rad-ui-accordion-content { - padding: 16px; - font-size: 1em; - background-color: var(--rad-ui-color-gray-100); - color: var(--rad-ui-color-gray-1000); - border-top: 1px solid var(--rad-ui-color-gray-1000); - } + + .rad-ui-accordion-header{ + // and if data expanded is true, add bottom border + &[data-expanded="true"]{ + border-bottom: 1px solid var(--rad-ui-color-accent-700); + color: var(--rad-ui-color-accent-900); + } + + .rad-ui-accordion-trigger{ + background-color: var(--rad-ui-color-accent-50); + padding: 12px 16px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + &:focus{ + outline: none; + } + } + } + + .rad-ui-accordion-content{ + background-color: var(--rad-ui-color-accent-50); + padding: 12px 16px; + color: var(--rad-ui-color-gray-950); + } + } } } \ No newline at end of file From 4a357328065b4a07a0bfce3c925d98769642569e Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 11:39:56 +0530 Subject: [PATCH 2/6] fix: lint --- src/components/ui/Em/tests/Em.test.js | 46 ++++++++++---------- src/components/ui/Table/tests/Table.test.tsx | 4 +- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/ui/Em/tests/Em.test.js b/src/components/ui/Em/tests/Em.test.js index bac38bd3..68c72b59 100644 --- a/src/components/ui/Em/tests/Em.test.js +++ b/src/components/ui/Em/tests/Em.test.js @@ -4,32 +4,32 @@ import Em from '../Em'; describe('Em', () => { test('renders Em component', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI')).toBeInTheDocument(); - }); + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI')).toBeInTheDocument(); + }); test('renders Em tag with valid text', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI').tagName.toLowerCase()).toBe('em'); - }); - + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI').tagName.toLowerCase()).toBe('em'); + }); + test('renders custom classes correctly', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI')).toHaveClass('custom-class'); - }); - + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI')).toHaveClass('custom-class'); + }); + test('renders custom styles correctly', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI')).toHaveStyle('color: red'); - }); - + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI')).toHaveStyle('color: red'); + }); + test('renders custom id correctly', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI')).toHaveAttribute('id', 'em-id'); - }); - + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI')).toHaveAttribute('id', 'em-id'); + }); + test('renders custom data attribute correctly', () => { - render(<>Welcome to RadUI); - expect(screen.getByText('RadUI')).toHaveAttribute('data-testid', 'em-data'); - }); -}); \ No newline at end of file + render(<>Welcome to RadUI); + expect(screen.getByText('RadUI')).toHaveAttribute('data-testid', 'em-data'); + }); +}); diff --git a/src/components/ui/Table/tests/Table.test.tsx b/src/components/ui/Table/tests/Table.test.tsx index 97352601..75b00f6e 100644 --- a/src/components/ui/Table/tests/Table.test.tsx +++ b/src/components/ui/Table/tests/Table.test.tsx @@ -8,14 +8,14 @@ describe('Table Component', () => { { id: 1, fullName: 'John Smith', age: 23, isIntern: 'No' }, { id: 2, fullName: 'Anna Donie', age: 35, isIntern: 'Yes' }, { id: 3, fullName: 'Hannah Brown', age: 20, isIntern: 'Yes' }, - { id: 4, fullName: 'Johnathan White Jr', age: 36, isIntern: 'No' }, + { id: 4, fullName: 'Johnathan White Jr', age: 36, isIntern: 'No' } ]; const employeeKey = [ { key: 'id', name: 'Employee Id' }, { key: 'fullName', name: 'Full Name' }, { key: 'age', name: 'Age' }, - { key: 'isIntern', name: 'In Internship' }, + { key: 'isIntern', name: 'In Internship' } ]; let result: RenderResult; From 703ba645f71b07a3d5157fdbc37e4b8e58ae0637 Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 12:00:13 +0530 Subject: [PATCH 3/6] add: color support for button --- src/components/ui/Button/Button.tsx | 7 ++++++- .../ui/Button/stories/Button.stories.js | 21 ++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index a75344e4..a2f9da3e 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -10,10 +10,11 @@ const COMPONENT_NAME = 'Button'; export type ButtonProps = { customRootClass?: string; variant?: string; + color?: string; size?:string; } & DetailedHTMLProps, HTMLButtonElement> & PropsWithChildren -const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', ...props }: ButtonProps) => { +const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', color = '', ...props }: ButtonProps) => { const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); // apply data attribute for accent color // apply attribute only if color is present @@ -27,6 +28,10 @@ const Button = ({ children, type = 'button', customRootClass = '', className = ' data_attributes['data-button-size'] = size; } + if (color) { + data_attributes['data-accent-color'] = color; + } + return ( {
; }; + +export const Color = (args) => { + return +
+
+

Colored Button

+ +
+
+

Theme Button

+ +
+
+ ; +}; From 25525d05189daf43934847323cd768d32a7512fa Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 12:00:30 +0530 Subject: [PATCH 4/6] fix: lint --- src/components/ui/Code/tests/Code.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Code/tests/Code.test.tsx b/src/components/ui/Code/tests/Code.test.tsx index 2524b881..3a03926e 100644 --- a/src/components/ui/Code/tests/Code.test.tsx +++ b/src/components/ui/Code/tests/Code.test.tsx @@ -8,6 +8,6 @@ describe('Code Component', () => { const codeElement = container.querySelector('code'); expect(codeElement).toBeInTheDocument(); - expect(codeElement).toHaveTextContent("console.log('Hello world!');"); + expect(codeElement).toHaveTextContent('console.log(\'Hello world!\');'); }); -}) +}); From 193bc246477876c23f10b6b09749513d0f1de013 Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 12:00:47 +0530 Subject: [PATCH 5/6] Add outline variant styling for Accordion component --- .../Accordion/stories/Accordion.stories.tsx | 7 +++ styles/themes/components/accordion.scss | 55 +++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/src/components/ui/Accordion/stories/Accordion.stories.tsx b/src/components/ui/Accordion/stories/Accordion.stories.tsx index 53982392..cefe73dc 100644 --- a/src/components/ui/Accordion/stories/Accordion.stories.tsx +++ b/src/components/ui/Accordion/stories/Accordion.stories.tsx @@ -71,3 +71,10 @@ export const All: Story = { variant: 'solid' } }; + +export const Outline: Story = { + args: { + items, + variant: 'outline' + } +}; diff --git a/styles/themes/components/accordion.scss b/styles/themes/components/accordion.scss index 1b6b5572..6309bda7 100644 --- a/styles/themes/components/accordion.scss +++ b/styles/themes/components/accordion.scss @@ -59,4 +59,59 @@ } } } + + &[data-variant='outline']{ + width: 100%; + + .rad-ui-accordion-item{ + border: none; + width: 100%; + display: flex; + flex-direction: column; + flex: 1; + margin-bottom: 12px; + + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--rad-ui-color-accent-600); + + + &:focus{ + outline: none; + border: none; + } + + &:focus-within{ + border: 1px solid var(--rad-ui-color-accent-900); + color: var(--rad-ui-color-accent-900); + } + + .rad-ui-accordion-header{ + // and if data expanded is true, add bottom border + &[data-expanded="true"]{ + border-bottom: 1px solid var(--rad-ui-color-accent-700); + color: var(--rad-ui-color-accent-900); + } + + .rad-ui-accordion-trigger{ + padding: 12px 16px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + &:focus{ + outline: none; + } + } + } + + .rad-ui-accordion-content{ + padding: 12px 16px; + color: var(--rad-ui-color-gray-950); + font-weight: 400; + font-size: 0.875rem; + } + } + } } \ No newline at end of file From 6f79edf834a81d582bfe72d286cf107494cc8543 Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 5 Jan 2025 12:31:33 +0530 Subject: [PATCH 6/6] add: color support for accordion --- src/components/ui/Accordion/Accordion.tsx | 7 +- .../ui/Accordion/fragments/AccordionRoot.tsx | 12 +- .../Accordion/stories/Accordion.stories.tsx | 9 +- styles/themes/components/accordion.scss | 111 +++++++++--------- 4 files changed, 77 insertions(+), 62 deletions(-) diff --git a/src/components/ui/Accordion/Accordion.tsx b/src/components/ui/Accordion/Accordion.tsx index 001d61ed..c9baf35b 100644 --- a/src/components/ui/Accordion/Accordion.tsx +++ b/src/components/ui/Accordion/Accordion.tsx @@ -13,15 +13,16 @@ export interface AccordionItemType { export interface AccordionProps { items: AccordionItemType[]; variant?: string; + color?: string; } -const Accordion = ({ items, variant = '' }: AccordionProps) => { +const Accordion = ({ items, variant = '', color = '' }: AccordionProps) => { return ( - + {items.map((item, index) => ( - + {item.title} diff --git a/src/components/ui/Accordion/fragments/AccordionRoot.tsx b/src/components/ui/Accordion/fragments/AccordionRoot.tsx index ebfc6228..48a0badd 100644 --- a/src/components/ui/Accordion/fragments/AccordionRoot.tsx +++ b/src/components/ui/Accordion/fragments/AccordionRoot.tsx @@ -10,9 +10,11 @@ export type AccordionRootProps = { children: React.ReactNode; customRootClass?: string; variant?: string | '' + color?: string | '' + loop?: boolean } -const AccordionRoot = ({ children, customRootClass, variant = '' }: AccordionRootProps) => { +const AccordionRoot = ({ children, customRootClass, variant = '', color = '', loop = true }: AccordionRootProps) => { const accordionRef = useRef(null); const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); @@ -24,12 +26,16 @@ const AccordionRoot = ({ children, customRootClass, variant = '' }: AccordionRoo dataAttributes['data-variant'] = variant; } + if (color) { + dataAttributes['data-accent-color'] = color; + } + useEffect(() => {}, []); const focusNextItem = () => { if (!accordionRef.current) return; const batches = getAllBatchElements(accordionRef?.current); - const nextItem = getNextBatchItem(batches); + const nextItem = getNextBatchItem(batches, loop); setFocusItem(nextItem); if (nextItem) { const button = nextItem.querySelector('button'); @@ -41,7 +47,7 @@ const AccordionRoot = ({ children, customRootClass, variant = '' }: AccordionRoo const focusPrevItem = () => { if (!accordionRef.current) return; const batches = getAllBatchElements(accordionRef?.current); - const prevItem = getPrevBatchItem(batches); + const prevItem = getPrevBatchItem(batches, loop); setFocusItem(prevItem); if (prevItem) { const button = prevItem.querySelector('button'); diff --git a/src/components/ui/Accordion/stories/Accordion.stories.tsx b/src/components/ui/Accordion/stories/Accordion.stories.tsx index cefe73dc..8ca7c5b0 100644 --- a/src/components/ui/Accordion/stories/Accordion.stories.tsx +++ b/src/components/ui/Accordion/stories/Accordion.stories.tsx @@ -1,4 +1,4 @@ -import Accordion from '../Accordion'; +import Accordion, { AccordionProps } from '../Accordion'; import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; @@ -78,3 +78,10 @@ export const Outline: Story = { variant: 'outline' } }; + +export const Color: Story = { + args: { + items, + color: 'blue' + } +}; diff --git a/styles/themes/components/accordion.scss b/styles/themes/components/accordion.scss index 6309bda7..6c82c6e2 100644 --- a/styles/themes/components/accordion.scss +++ b/styles/themes/components/accordion.scss @@ -1,69 +1,69 @@ -.rad-ui-accordion-root{ - width: 100%; +.rad-ui-accordion-root { border-radius: 2px; overflow: hidden; + width: 100%; - &[data-variant='solid']{ + .rad-ui-accordion-item { + background-color: var(--rad-ui-color-accent-50); + border: none; width: 100%; + display: flex; + flex-direction: column; + flex: 1; + margin-bottom: 12px; - .rad-ui-accordion-item{ - background-color: var(--rad-ui-color-accent-50); + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--rad-ui-color-accent-600); + border-top: 4px solid var(--rad-ui-color-accent-700); + + + + &:focus { + outline: none; border: none; - width: 100%; - display: flex; - flex-direction: column; - flex: 1; - margin-bottom: 12px; + } - border-radius: 10px; - overflow: hidden; - border: 1px solid var(--rad-ui-color-accent-600); - border-top: 4px solid var(--rad-ui-color-accent-700); + &:focus-within { + border: 1px solid var(--rad-ui-color-accent-900); + border-top: 4px solid var(--rad-ui-color-accent-1000); + color: var(--rad-ui-color-accent-900); + } - &:focus{ - outline: none; - border: none; - } + .rad-ui-accordion-header { - &:focus-within{ - border: 1px solid var(--rad-ui-color-accent-900); - border-top: 4px solid var(--rad-ui-color-accent-1000); + // and if data expanded is true, add bottom border + &[data-expanded="true"] { + border-bottom: 1px solid var(--rad-ui-color-accent-700); color: var(--rad-ui-color-accent-900); } - .rad-ui-accordion-header{ - // and if data expanded is true, add bottom border - &[data-expanded="true"]{ - border-bottom: 1px solid var(--rad-ui-color-accent-700); - color: var(--rad-ui-color-accent-900); - } - - .rad-ui-accordion-trigger{ - background-color: var(--rad-ui-color-accent-50); - padding: 12px 16px; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; + .rad-ui-accordion-trigger { + background-color: var(--rad-ui-color-accent-50); + padding: 12px 16px; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; - &:focus{ - outline: none; - } + &:focus { + outline: none; } } + } - .rad-ui-accordion-content{ - background-color: var(--rad-ui-color-accent-50); - padding: 12px 16px; - color: var(--rad-ui-color-gray-950); - } - } + .rad-ui-accordion-content { + background-color: var(--rad-ui-color-accent-50); + padding: 12px 16px; + color: var(--rad-ui-color-gray-950); + } } - &[data-variant='outline']{ + + &[data-variant='outline'] { width: 100%; - .rad-ui-accordion-item{ + .rad-ui-accordion-item { border: none; width: 100%; display: flex; @@ -76,42 +76,43 @@ border: 1px solid var(--rad-ui-color-accent-600); - &:focus{ + &:focus { outline: none; border: none; } - &:focus-within{ + &:focus-within { border: 1px solid var(--rad-ui-color-accent-900); color: var(--rad-ui-color-accent-900); } - .rad-ui-accordion-header{ + .rad-ui-accordion-header { + // and if data expanded is true, add bottom border - &[data-expanded="true"]{ + &[data-expanded="true"] { border-bottom: 1px solid var(--rad-ui-color-accent-700); color: var(--rad-ui-color-accent-900); } - - .rad-ui-accordion-trigger{ + + .rad-ui-accordion-trigger { padding: 12px 16px; width: 100%; display: flex; justify-content: space-between; align-items: center; - &:focus{ + &:focus { outline: none; } } } - .rad-ui-accordion-content{ + .rad-ui-accordion-content { padding: 12px 16px; color: var(--rad-ui-color-gray-950); font-weight: 400; font-size: 0.875rem; } - } + } } } \ No newline at end of file