matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: remove tailwind from components one by one

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-01 19:03:56 +02:00
parent a4fbe51542
commit 91d5b12fbd
4 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/pl-fe/src/components/ui/accordion.tsx
View File

@ -4,9 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
import DropdownMenu from 'pl-fe/components/dropdown-menu';
import HStack from './hstack';
import Icon from './icon';
import Text from './text';
import type { Menu } from 'pl-fe/components/dropdown-menu';
@ -46,17 +44,20 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
};
return (
<div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
<div className={clsx('⁂-accordion', {
'⁂-accordion--expanded': expanded,
})}
>
<button
type='button'
onClick={handleToggle}
title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
aria-expanded={expanded}
className='flex w-full items-center justify-between px-4 py-3 font-semibold'
className='⁂-accordion__header'
>
<span>{headline}</span>
<HStack alignItems='center' space={2}>
<div className='⁂-accordion__header__actions'>
{menu && (
<DropdownMenu
items={menu}
@ -64,31 +65,21 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
/>
)}
{action && actionIcon && (
<button onClick={handleAction} title={actionLabel}>
<Icon
src={actionIcon}
className='size-5 text-gray-700 dark:text-gray-600'
/>
<button className='⁂-accordion__header__action' onClick={handleAction} title={actionLabel}>
<Icon src={actionIcon} />
</button>
)}
<Icon
src={require('@tabler/icons/outline/chevron-down.svg')}
className={clsx('size-5 text-gray-700 transition-transform dark:text-gray-600', {
'rotate-180': expanded,
})}
className='⁂-accordion__header__chevron'
/>
</HStack>
</div>
</button>
<div
className={
clsx({
'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black': true,
'h-0 hidden': !expanded,
})
}
className='⁂-accordion__body'
>
<Text>{children}</Text>
<p>{children}</p>
</div>
</div>
);

3
packages/pl-fe/src/styles/new/index.scss
View File

@ -1 +1,2 @@
@use 'ui';
@use 'ui';

3
packages/pl-fe/src/styles/new/mixins.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin text() {
@apply text-base leading-5 text-gray-900 dark:text-gray-100 font-normal tracking-normal font-sans normal-case;
}

49
packages/pl-fe/src/styles/new/ui.scss
View File

@ -1,5 +1,44 @@
.⁂-select {
@apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
@use 'mixins';
.⁂-accordion {
@apply rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none;
&__header {
@apply flex w-full items-center justify-between px-4 py-3 font-semibold;
&__actions {
@apply flex items-center gap-2;
}
&__action .⁂-icon {
@apply size-5 text-gray-700 dark:text-gray-600;
}
&__chevron {
@apply size-5 text-gray-700 transition-transform dark:text-gray-600;
}
}
&__body {
@apply p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black;
}
&:not(&--expanded) {
.⁂-accordion {
&__header__chevron {
transform: rotate(180deg);
}
&__body {
height: 0;
display: none;
p {
@include mixins.text();
}
}
}
}
}
.⁂-list {
@ -65,4 +104,8 @@ a.⁂-list-item,
cursor: pointer;
@apply hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5;
}
}
.⁂-select {
@apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
}