Skip to content

Commit

Permalink
feat(Accordion): implement new config
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 5, 2023
1 parent bda2ac9 commit 062aef0
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 80 deletions.
2 changes: 1 addition & 1 deletion src/plugins/components/accordion/accordion.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const Accordion = ({
</summary>
<div class="nui-accordion-content">
${Paragraph({
size: 'md',
size: 'sm',
lead: 'tight',
children: item.content,
})}
Expand Down
133 changes: 70 additions & 63 deletions src/plugins/components/accordion/accordion.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
export const key = 'accordion' as const

export const config = {
export const defaultConfig = {
wrapper: {
width: 'full',
rounded: {
none: 'rounded-none',
sm: 'rounded-md',
md: 'rounded-lg',
lg: 'rounded-xl',
none: 'none',
sm: 'md',
md: 'lg',
lg: 'xl',
},
background: {
light: 'white',
Expand Down Expand Up @@ -35,6 +35,7 @@ export const config = {
content: {
font: {
family: 'sans',
size: 'sm',
color: {
light: 'muted-500',
dark: 'muted-400',
Expand All @@ -54,20 +55,26 @@ export const config = {
dark: 'muted-700/60',
},
border: {
light: 'muted-200',
dark: 'muted-700',
light: 'transparent',
dark: 'transparent',
},
transition: {
property: 'transform',
property: 'all',
duration: '300',
},
},
dot: {
size: '3',
rounded: 'full',
background: {
light: 'muted-200',
dark: 'muted-700',
active: 'primary-500',
},
transition: {
property: 'colors',
duration: '300',
},
},
chevron: {
size: '4',
Expand All @@ -86,61 +93,61 @@ export const config = {
},
}

export const defaultConfig = {
size: 'full',
border: 'muted-200',
borderDark: 'muted-700',
bg: 'white',
bgDark: 'muted-800',
detail: {
border: 'muted-200',
borderDark: 'muted-700',
},
detailAndDot: {
bg: 'muted-200',
bgDark: 'muted-700',
},
detailOpenAndDot: {
bg: 'primary-500',
},
headerInner: {
text: 'muted-800',
textDark: 'white',
},
dot: {
size: '3',
rounded: 'full',
duration: '300',
},
outer: {
border: 'muted-200',
borderDark: 'muted-700',
bg: 'white',
bgDark: 'muted-700/60',
size: '8',
rounded: 'full',
duration: '300',
},
chevronIcon: {
size: '4',
duration: '300',
},
plusIcon: {
size: '4',
duration: '300',
},
content: {
space: '5',
font: 'sans',
text: 'muted-500',
textDark: 'muted-400',
},
rounded: {
default: 'md',
smooth: 'lg',
curved: 'xl',
},
}
// export const defaultConfig = {
// size: 'full',
// border: 'muted-200',
// borderDark: 'muted-700',
// bg: 'white',
// bgDark: 'muted-800',
// detail: {
// border: 'muted-200',
// borderDark: 'muted-700',
// },
// detailAndDot: {
// bg: 'muted-200',
// bgDark: 'muted-700',
// },
// detailOpenAndDot: {
// bg: 'primary-500',
// },
// headerInner: {
// text: 'muted-800',
// textDark: 'white',
// },
// dot: {
// size: '3',
// rounded: 'full',
// duration: '300',
// },
// outer: {
// border: 'muted-200',
// borderDark: 'muted-700',
// bg: 'white',
// bgDark: 'muted-700/60',
// size: '8',
// rounded: 'full',
// duration: '300',
// },
// chevronIcon: {
// size: '4',
// duration: '300',
// },
// plusIcon: {
// size: '4',
// duration: '300',
// },
// content: {
// space: '5',
// font: 'sans',
// text: 'muted-500',
// textDark: 'muted-400',
// },
// rounded: {
// default: 'md',
// smooth: 'lg',
// curved: 'xl',
// },
// }

export type AccordionConfig = typeof defaultConfig
export interface AccordionPluginConfig {
Expand Down
82 changes: 66 additions & 16 deletions src/plugins/components/accordion/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,90 @@ export default plugin.withOptions(
return function ({ addComponents, theme }) {
const config = theme(`shurikenUi.${key}`) satisfies AccordionConfig
addComponents({
//Accordion:wrapper
[`.${prefix}accordion`]: {
[`@apply w-${config.size} border-${config.border} dark:border-${config.borderDark} dark:bg-${config.bgDark} block overflow-hidden border bg-${config.bg}`]:
//Base
[`@apply w-${config.wrapper.width} block overflow-hidden`]: {},
//Background
[`@apply bg-${config.wrapper.background.light} dark:bg-${config.wrapper.background.dark}`]:
{},

//Border
[`@apply border border-${config.wrapper.border.light} dark:border-${config.wrapper.border.dark}`]:
{},
//Accordion:inner
[`.${prefix}accordion-detail[open]:not(:first-child)`]: {
[`@apply border-${config.detail.border} dark:border-${config.detail.borderDark} border-t`]:
[`@apply border-t border-${config.inner.border.light} dark:border-${config.inner.border.dark}`]:
{},
},
//Inner:dot
[`.${prefix}accordion-detail .${prefix}accordion-dot`]: {
[`@apply bg-${config.detailAndDot.bg} dark:bg-${config.detailAndDot.bgDark}`]:
[`@apply bg-${config.icon.dot.background.light} dark:bg-${config.icon.dot.background.dark}`]:
{},
},
//Inner:dot active
[`.${prefix}accordion-detail[open] .${prefix}accordion-dot`]: {
[`@apply bg-${config.detailOpenAndDot.bg}`]: {},
[`@apply bg-${config.icon.dot.background.active}`]: {},
},
//Inner:summary
[`.${prefix}accordion-summary`]: {
[`@apply cursor-pointer list-none outline-none`]: {},
},
//Inner:header
[`.${prefix}accordion-header`]: {
[`@apply flex items-center justify-between`]: {},

[`.${prefix}accordion-header-inner`]: {
[`@apply text-muted-800 dark:text-white`]: {},
},
},
//Inner:dot
[`.${prefix}accordion-dot`]: {
[`@apply ms-2 h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded} transition-colors duration-${config.dot.duration}`]:
[`@apply ms-2 h-${config.icon.dot.size} w-${config.icon.dot.size} rounded-${config.icon.dot.rounded}`]:
{},
//Dot transition
[`@apply transition-${config.icon.dot.transition.property} duration-${config.icon.dot.transition.duration}`]:
{},
},
//Icon:outer
[`.${prefix}icon-outer`]: {
[`@apply border-${config.outer.border} dark:border-${config.outer.borderDark} dark:bg-${config.outer.bgDark} ms-2 flex h-${config.outer.size} w-${config.outer.size} items-center justify-center rounded-${config.outer.rounded} border bg-${config.outer.bg} transition-all duration-${config.outer.duration}`]:
//Base
[`@apply ms-2 flex items-center justify-center`]: {},
//Width & Radius
[`@apply h-${config.icon.wrapper.size} w-${config.icon.wrapper.size} rounded-${config.icon.wrapper.rounded}`]:
{},
//Border
[`@apply border border-${config.icon.wrapper.border.light} dark:border-${config.icon.wrapper.border.dark}`]:
{},
//Background
[`@apply bg-${config.icon.wrapper.background.light} dark:bg-${config.icon.wrapper.background.dark}`]:
{},
//Transition
[`@apply transition-${config.icon.wrapper.transition.property} duration-${config.icon.wrapper.transition.duration}`]:
{},
},
[`.${prefix}chevron-icon`]: {
[`@apply text-muted-400 h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]:
//Base
[`@apply text-muted-400 h-${config.icon.chevron.size} w-${config.icon.chevron.size}`]:
{},
//Transition
[`@apply transition-${config.icon.chevron.transition.property} duration-${config.icon.chevron.transition.duration}`]:
{},
},
[`.${prefix}plus-icon`]: {
[`@apply text-muted-400 h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]:
//Base
[`@apply text-muted-400 h-${config.icon.plus.size} w-${config.icon.plus.size}`]:
{},
//Transition
[`@apply transition-${config.icon.plus.transition.property} duration-${config.icon.plus.transition.duration}`]:
{},
},
//Accordion:content
[`.${prefix}accordion-content`]: {
[`@apply px-${config.content.space} pb-${config.content.space} font-${config.content.font} text-${config.content.text} dark:text-${config.content.textDark}`]:
//Base
[`@apply px-${config.content.padding.x} pb-${config.content.padding.y}`]:
{},
//Font
[`@apply font-${config.content.font.family} text-${config.content.font.size} text-${config.content.font.color.light} dark:text-${config.content.font.color.dark}`]:
{},
},
[`&.${prefix}accordion-dot`]: {
Expand All @@ -79,28 +120,37 @@ export default plugin.withOptions(
[`@apply rotate-45`]: {},
},
},
//Accordion:rounded
[`&.${prefix}accordion-straight`]: {
[`&.${prefix}accordion:first-child`]: {
[`@apply rounded-t-${config.wrapper.rounded.none}`]: {},
},
[`&.${prefix}accordion:last-child`]: {
[`@apply rounded-b-${config.wrapper.rounded.none}`]: {},
},
},
[`&.${prefix}accordion-rounded`]: {
[`&.${prefix}accordion:first-child`]: {
[`@apply rounded-t-${config.rounded.default}`]: {},
[`@apply rounded-t-${config.wrapper.rounded.sm}`]: {},
},
[`&.${prefix}accordion:last-child`]: {
[`@apply rounded-b-${config.rounded.default}`]: {},
[`@apply rounded-b-${config.wrapper.rounded.sm}`]: {},
},
},
[`&.${prefix}accordion-smooth`]: {
[`&.${prefix}accordion:first-child`]: {
[`@apply rounded-t-${config.rounded.smooth}`]: {},
[`@apply rounded-t-${config.wrapper.rounded.md}`]: {},
},
[`&.${prefix}accordion:last-child`]: {
[`@apply rounded-b-${config.rounded.smooth}`]: {},
[`@apply rounded-b-${config.wrapper.rounded.md}`]: {},
},
},
[`&.${prefix}accordion-curved`]: {
[`&.${prefix}accordion:first-child`]: {
[`@apply rounded-t-${config.rounded.curved}`]: {},
[`@apply rounded-t-${config.wrapper.rounded.lg}`]: {},
},
[`&.${prefix}accordion:last-child`]: {
[`@apply rounded-b-${config.rounded.curved}`]: {},
[`@apply rounded-b-${config.wrapper.rounded.lg}`]: {},
},
},
},
Expand Down

0 comments on commit 062aef0

Please sign in to comment.