Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Hasan/Pr 00 add prefix to atomic css #6334

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
af80b81
chore: added prefix to tryphography class
hasan-deriv Dec 25, 2023
eeed4a0
chore: added prefix to radius classes
hasan-deriv Dec 25, 2023
9ecc297
chore: added prefix to spacing classes
hasan-deriv Dec 25, 2023
0926fd0
chore: added prefix to color classes
hasan-deriv Dec 25, 2023
5cd7623
chore: added prefix to flex classes
hasan-deriv Dec 25, 2023
402fc65
chore: added prefix to container classes
hasan-deriv Dec 25, 2023
2cb99b6
chore: added prefix to table classes
hasan-deriv Dec 25, 2023
1ba1d28
chore: added prefix to alert classes
hasan-deriv Dec 25, 2023
cc62313
chore: added prefix to tabs classes
hasan-deriv Dec 25, 2023
0d1aae5
chore: added prefix to accordion classes
hasan-deriv Dec 25, 2023
ffb0ae6
chore: added prefix to icon classes
hasan-deriv Dec 25, 2023
bd5f419
chore: added prefix to input classes
hasan-deriv Dec 25, 2023
b605b06
chore: added prefix to checkbox classes
hasan-deriv Dec 25, 2023
2ec1dfc
chore: added prefix to visibility classes
hasan-deriv Dec 25, 2023
9d4cea8
chore: added prefix to utility classes
hasan-deriv Dec 25, 2023
eb965d8
chore: updated utils functions
hasan-deriv Dec 25, 2023
79922e6
chore: updated quill icons package
hasan-deriv Dec 25, 2023
8ddd4b7
chore: updated classname types
hasan-deriv Dec 25, 2023
5b8c915
chore: updated class names in accordion component
hasan-deriv Dec 25, 2023
b796234
chore: updated class names in alert component
hasan-deriv Dec 25, 2023
0b56af6
chore: updated class names in card component
hasan-deriv Dec 25, 2023
0addd1a
chore: updated class names in container component
hasan-deriv Dec 25, 2023
e5d4e18
chore: updated class names in flex component
hasan-deriv Dec 25, 2023
72bb207
chore: updated class names in icon component
hasan-deriv Dec 25, 2023
35cf056
chore: updated class names in input and checkbox component
hasan-deriv Dec 25, 2023
5067d24
chore: updated class names in link component
hasan-deriv Dec 25, 2023
56cb6ff
chore: updated class names in tab component
hasan-deriv Dec 25, 2023
6bed03d
chore: updated class names in table component
hasan-deriv Dec 25, 2023
a4034d2
chore: updated class names in typography component
hasan-deriv Dec 25, 2023
df8b89d
chore: updated class names in molecules components
hasan-deriv Dec 25, 2023
1525984
chore: updated class names in organisms components
hasan-deriv Dec 25, 2023
c74a287
chore: updated class names in templates components
hasan-deriv Dec 25, 2023
b7b40e8
chore: updated class names in pages components
hasan-deriv Dec 25, 2023
633e37a
Merge branch 'translation-new-homepage' into pr-00-add-prefix-to-atom…
hasan-deriv Dec 27, 2023
31187ad
Merge branch 'translation-new-homepage' into pr-00-add-prefix-to-atom…
hasan-deriv Dec 27, 2023
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
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,21 @@ const icons: AccordionIcons = {

const AccordionItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
({ children, className, item_title, icon_type = 'chevron', ...props }, ref) => (
<Accordion.Item className={'accordion_item'} ref={ref} {...props}>
<Accordion.Item className={'at-accordion_item'} ref={ref} {...props}>
<Accordion.Header>
<Accordion.Trigger className={dclsx('accordion_trigger', 'bg-color-primary')}>
<Accordion.Trigger className={dclsx('at-accordion_trigger', 'at-bg-color-primary')}>
<Typography.Heading size={'xs'}>
<Localize translate_text={item_title} />
</Typography.Heading>
<Icon
src={icons[icon_type]}
className={'accordion_icon'}
className={'at-accordion_icon'}
alt={'chevron'}
size={'large'}
/>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={dclsx('accordion_content', className)}>
<Accordion.Content className={dclsx('at-accordion_content', className)}>
<div className="AccordionContentText">{children}</div>
</Accordion.Content>
</Accordion.Item>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef<
>(({ className, ...rest }, ref) => {
return (
<Accordion.Root
className={dclsx(className, 'accordion_root', 'bg-color-primary')}
className={dclsx(className, 'at-accordion_root', 'at-bg-color-primary')}
{...rest}
ref={ref}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,18 @@ interface TAccordionItem extends AccordionItemProps {

const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
({ children, className, renderHeader, item_title, icon_type = 'chevron', ...props }, ref) => (
<Accordion.Item className={'accordion_item accordion_shadow_item'} ref={ref} {...props}>
<Accordion.Item
className={'at-accordion_item at-accordion_shadow_item'}
ref={ref}
{...props}
>
<Accordion.Header>
<Accordion.Trigger
className={dclsx(
'accordion_trigger accordion_shadow_item_trigger',
'bg-color-primary',
'padding-block-8x',
'border-radius-4x',
'at-accordion_trigger at-accordion_shadow_item_trigger',
'at-bg-color-primary',
'at-padding-block-8x',
'at-border-radius-4x',
)}
>
{renderHeader ? (
Expand All @@ -36,17 +40,20 @@ const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
{icon_type === 'chevron' ? (
<Icon
src={Chevron}
className={'accordion_icon'}
className={'at-accordion_icon'}
alt={'chevron'}
size={'large'}
/>
) : (
<span className="accordion_icon plus_icon" />
<span className="at-accordion_icon at-plus_icon" />
)}
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content
className={dclsx('accordion_content accordion_shadow_item_content', className)}
className={dclsx(
'at-accordion_content at-accordion_shadow_item_content',
className,
)}
>
<div className="AccordionContentText">{children}</div>
</Accordion.Content>
Expand Down
4 changes: 2 additions & 2 deletions src/features/components/atoms/alert/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const Alert = ({
return (
<AlertDialog.Root defaultOpen>
<AlertDialog.Portal>
<AlertDialog.Overlay className="alert-overlay" />
<AlertDialog.Content className="alert-content">
<AlertDialog.Overlay className="at-alert-overlay" />
<AlertDialog.Content className="at-alert-content">
<AlertDialog.Title asChild className="AlertDialogTitle">
<div>
<Typography.Heading as="h3" size="xxs" pb="12x">
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/card/card-primary/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const CardPrimary = ({
)}
<Typography.Heading
as="h3"
className={dclsx(is_mobile_or_tablet ? 'text-large' : 'text-medium')}
className={dclsx(is_mobile_or_tablet ? 'at-text-large' : 'at-text-medium')}
pb="4x"
weight="bold"
>
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/container/fixed/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
import dclsx from 'features/utils/dclsx'

const FixedContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
const classnames = dclsx(className, 'container-fixed')
const classnames = dclsx(className, 'at-container-fixed')

return <Box className={classnames} {...rest} />
}
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/container/fluid/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
import dclsx from 'features/utils/dclsx'

const FluidContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
const classnames = dclsx(className, 'container-fluid')
const classnames = dclsx(className, 'at-container-fluid')

return <Box className={classnames} {...rest} />
}
Expand Down
14 changes: 7 additions & 7 deletions src/features/components/atoms/flex-box/box/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ const generateFlexClasses = (options: FlexBoxClasses, prefix?: string) => {
const classPrefix = prefix ? `${prefix}-` : ''

return dclsx({
[`${classPrefix}gap-${gap}`]: gap,
[`${classPrefix}align-items-${align}`]: align,
[`${classPrefix}justify-${justify}`]: justify,
[`${classPrefix}flex-wrap-${wrap}`]: wrap,
[`${classPrefix}flex-dir-${direction}`]: direction,
[`${classPrefix}at-gap-${gap}`]: gap,
[`${classPrefix}at-align-items-${align}`]: align,
[`${classPrefix}at-justify-${justify}`]: justify,
[`${classPrefix}at-flex-wrap-${wrap}`]: wrap,
[`${classPrefix}at-flex-dir-${direction}`]: direction,
})
}

Expand All @@ -59,10 +59,10 @@ const FlexBoxContainer = <T extends ContentSectionTagOptions>({
...rest
}: FlexBoxProps<T>) => {
const classnames = dclsx(
'flex',
'at-flex',
className,
{
[`container-${container}`]: container,
[`at-container-${container}`]: container,
},
generateFlexItemClasses({ align_self, grow, shrink, basis }),
generateFlexItemClasses(md ?? {}, 'md'),
Expand Down
8 changes: 4 additions & 4 deletions src/features/components/atoms/flex-box/item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ export const generateFlexItemClasses = (options: FlexItemClasses, prefix = '') =
const classPrefix = prefix ? `${prefix}-` : ''
const { align_self, grow, shrink, basis } = options
return dclsx({
[`${classPrefix}align-self-${align_self}`]: align_self,
[`${classPrefix}flex-grow-${grow}`]: grow,
[`${classPrefix}flex-shrink-${shrink}`]: shrink,
[`${classPrefix}flex-basis-${basis}`]: basis,
[`${classPrefix}at-align-self-${align_self}`]: align_self,
[`${classPrefix}at-flex-grow-${grow}`]: grow,
[`${classPrefix}at-flex-shrink-${shrink}`]: shrink,
[`${classPrefix}at-flex-basis-${basis}`]: basis,
})
}

Expand Down
4 changes: 2 additions & 2 deletions src/features/components/atoms/icon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ interface IconProps extends ImgHTMLAttributes<'img'>, ClassProps {
}

const Icon = ({ size = 'small', has_rtl, className, ...rest }: IconProps) => {
const classnames = dclsx(className, `icon-${size}`, 'icon', {
'icon-rtl': has_rtl,
const classnames = dclsx(className, `at-icon-${size}`, 'at-icon', {
'at-icon-rtl': has_rtl,
})

return <Box as={'img'} className={classnames} {...rest} />
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/input/checkbox/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInput
return (
<Typography.Paragraph
as="label"
className={dclsx(className, 'checkbox_input_container')}
className={dclsx(className, 'at-checkbox_input_container')}
>
<input type={'checkbox'} {...rest} ref={ref} />
{children}
Expand Down
8 changes: 4 additions & 4 deletions src/features/components/atoms/input/text/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
({ formId, error, className, label, clearErrors, setValue, ...rest }, ref) => {
const notValid = error && error.length ? 'error' : 'valid'
return (
<div className={dclsx(className, 'text_input_container', notValid)}>
<div className={dclsx(className, 'at-text_input_container', notValid)}>
<input placeholder={localize(label)} {...rest} ref={ref} />
{error && (
<Image
src={CrossIcon}
alt="error icon"
className="cross_icon"
className="at-cross_icon"
onClick={() => {
setValue(formId, '')
clearErrors()
Expand All @@ -36,7 +36,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
<Typography.Paragraph
as="label"
size="small"
className="text_input_label"
className="at-text_input_label"
padding_inline="2x"
bgcolor="primary"
>
Expand All @@ -47,7 +47,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
<Typography.Paragraph
as="span"
size="small"
className="text_input_error"
className="at-text_input_error"
padding_inline="2x"
textcolor="brand"
>
Expand Down
8 changes: 4 additions & 4 deletions src/features/components/atoms/link/internal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ const Internal = ({
rel={link_rel}
className={dclsx(
className,
'typography-link',
'typography',
'at-typography-link',
'at-typography',
generateSpacingClasses({
margin,
padding,
Expand Down Expand Up @@ -125,8 +125,8 @@ const Internal = ({
textcolor,
}),
{
'typography-hover': !no_hover,
'typography-color-brand': is_active,
'at-typography-hover': !no_hover,
'at-typography-color-brand': is_active,
},
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/tab/base/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const TabBase = ({
return (
<Box
className={dclsx(
'tab',
'at-tab',
className,
generateTextSize(textsize),
generateTextColor(textcolor),
Expand Down
6 changes: 3 additions & 3 deletions src/features/components/atoms/tab/tab-menu-item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ const TabMenuItem = ({
<BaseTab
className={dclsx(
className,
'menu-item',
{ selected },
is_no_border_bottom && 'navigation-tabs',
'at-menu-item',
is_no_border_bottom && 'at-navigation-tabs',
{ 'at-selected': selected },
)}
{...rest}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/features/components/atoms/table/base/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ function BaseTable<T, K extends keyof T>({
}: TableProps<T, K>) {
return (
<Box
className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
className={dclsx('at-table-responsive', { ['at-table-striped']: striped }, className)}
{...rest}
>
<table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
<table className={dclsx('at-table', { [`at-table-layout-${layout}`]: layout })}>
<TableHeader columns={columns} />
<TableRow data={data} columns={columns} />
</table>
Expand Down
16 changes: 8 additions & 8 deletions src/features/components/atoms/table/base/table-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ const TableHeader = <T, K extends keyof T>({ columns }: TableHeaderProps<T, K>)
<th
key={col.accessor}
className={dclsx(
'typography-color-black',
'typography-align-center',
'typography-font-UBUNTU',
'typography-weight-bold',
'text-small',
'padding-block-5x',
'padding-inline-10x',
'md-padding-block-6x',
'at-typography-color-black',
'at-typography-align-center',
'at-typography-font-UBUNTU',
'at-typography-weight-bold',
'at-text-small',
'at-padding-block-5x',
'at-padding-inline-10x',
'md-at-padding-block-6x',
)}
>
{col.header}
Expand Down
14 changes: 7 additions & 7 deletions src/features/components/atoms/table/base/table-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ const TableRow = <T, K extends keyof T>({ data, columns }: TableRowProps<T, K>)
<td
key={col.accessor}
className={dclsx(
'typography-color-black',
'typography-align-center',
'typography-font-UBUNTU',
'text-small',
'padding-block-4x',
'padding-inline-10x',
'md-padding-block-6x',
'at-typography-color-black',
'at-typography-align-center',
'at-typography-font-UBUNTU',
'at-text-small',
'at-padding-block-4x',
'at-padding-inline-10x',
'md-at-padding-block-6x',
hasan-deriv marked this conversation as resolved.
Show resolved Hide resolved
)}
>
{row[col.accessor]}
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/table/shadow-table/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import BaseTable, { TableProps } from '../base'
import dclsx from 'features/utils/dclsx'

function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
return <BaseTable className={dclsx('at-table-shadow', 'at-padding-12x', className)} {...rest} />
}

export default ShadowTable
2 changes: 1 addition & 1 deletion src/features/components/atoms/typography/base/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const BaseTypography = <T extends TypographyTagOptions>({
}: BaseTypographyProps<T>) => {
const classnames = dclsx(
className,
'typography',
'at-typography',
generateTypographyAlignClasses(align),
generateTypographyAlignClasses(md?.align, 'md'),
generateTypographyAlignClasses(lg?.align, 'lg'),
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/typography/heading/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface HeadingProps extends BaseTypographyProps<HeadingTagOptions> {
}

const Heading = ({ size = 'medium', weight, className, as = 'h1', ...rest }: HeadingProps) => {
const classnames = dclsx(className, 'heading', generateHeadingSize(size))
const classnames = dclsx(className, 'at-heading', generateHeadingSize(size))

return <BaseTypography as={as} className={classnames} weight={weight ?? 'bold'} {...rest} />
}
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/atoms/typography/hero/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import dclsx from 'features/utils/dclsx'
type HeroTextProps = BaseTypographyProps<HeadingTagOptions>

const HeroText = ({ className, ...rest }: HeroTextProps) => {
const classnames = dclsx(className, 'heading-xxxl')
const classnames = dclsx(className, 'at-heading-xxxl')

return <BaseTypography className={classnames} {...rest} />
}
Expand Down
4 changes: 2 additions & 2 deletions src/features/components/atoms/typography/link/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ const TypographyLink = ({ className, size, no_hover, ...rest }: TypographyLinkPr
return (
<BaseTypography
as="a"
className={dclsx(classnames, 'typography-link', {
'typography-hover': !no_hover,
className={dclsx(classnames, 'at-typography-link', {
'at-typography-hover': !no_hover,
})}
{...rest}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/molecules/timeline-item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const TimelineItem = ({ data, isLastItem, ...rest }: TimelineItemProps) => {
<Image
src={checkIcon}
alt="check icon"
className={dclsx('lg-margin-top-3x w-[24px] h-[24px]')}
className={dclsx('lg-at-margin-top-3x w-[24px] h-[24px]')}
/>
<div>
<Typography.Heading as="h4" size="xs" mb="4x">
Expand Down
2 changes: 1 addition & 1 deletion src/features/components/molecules/trade-item/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const TradeItem = ({ data, ...rest }: TradeItemProps) => {
textcolor="inverted"
mt="8x"
mb="4x"
className={dclsx('text-medium')}
className={dclsx('at-text-medium')}
>
<Localize translate_text={data.heading} />
</Typography.Heading>
Expand Down
Loading
Loading