Skip to content

Commit

Permalink
fix: styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raubzeug
Raubzeug committed Aug 7, 2024
1 parent 0340fa5 commit 82c4a7e
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 22 deletions.
19 changes: 12 additions & 7 deletions src/components/DefinitionList/DefinitionList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ $block: '.#{variables.$ns}definition-list';
&__group-title {
margin-block-end: var(--g-spacing-3);

&:not(:first-of-type) {
//decreace specifity to allow groupLabelClassName work properly
:where(&:not(:first-of-type)) {
margin-block-start: var(--g-spacing-5);
}
}
Expand All @@ -21,19 +22,19 @@ $block: '.#{variables.$ns}definition-list';
align-items: baseline;
gap: var(--g-spacing-1);

& + & {
:where(& + &) {
margin-block-start: var(--g-spacing-4);
}
}

&__item_grouped {
& + & {
:where(& + &) {
margin-block-start: var(--g-spacing-3);
}
}

&_margin {
&:not(:first-of-type) {
:where(&:not(:first-of-type)) {
margin-block-start: var(--g-spacing-5);
}
}
Expand Down Expand Up @@ -136,13 +137,17 @@ $block: '.#{variables.$ns}definition-list';
flex-direction: column;
gap: var(--g-spacing-half);
}
#{$block}__item + #{$block}__item {
:where(#{$block}__item + #{$block}__item) {
margin-block-start: var(--g-spacing-3);
}
#{$block}__group-title:not(:first-of-type) {
:where(#{$block}__group-title:not(:first-of-type)) {
margin-block-start: var(--g-spacing-8);
}
#{$block}_margin:not(:first-of-type) {
:where(#{$block}_margin:not(:first-of-type)) {
margin-block-start: var(--g-spacing-8);
}
}

.unique {
margin: unset;
}
7 changes: 4 additions & 3 deletions src/components/DefinitionList/DefinitionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,24 +96,25 @@ function DefinitionListGrouped({
items,
className,
itemClassName,
groupLabelClassName,
...rest
}: DefinitionListGroupedProps) {
const normalizedItems = React.useMemo(() => {
return items.map((value, index) => ({...value, key: index}));
}, [items]);

return (
<div className={b({vertical: rest.direction === 'vertical'}, className)}>
<div className={b({vertical: rest.direction === 'vertical'})}>
{normalizedItems.map((item) => {
const {key, label} = item;

return (
<React.Fragment key={key}>
{label && <GroupLabel label={label} />}
{label && <GroupLabel label={label} className={groupLabelClassName} />}
{item.items && (
<DefinitionListGranular
{...rest}
className={b({margin: !label})}
className={b({margin: !label}, className)}
items={item.items}
itemClassName={b('item', {grouped: Boolean(label)}, itemClassName)}
/>
Expand Down
21 changes: 11 additions & 10 deletions src/components/DefinitionList/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,16 +63,17 @@ LANDING_BLOCK-->

## Properties

| Property | Type | Required | Default | Description |
| :-------------- | :----------------------------- | :-------: | :----------- | :-------------------------------------------------------------------------------------------------- |
| [items](#items) | `DefinitionListItem[]` | yes | | Items of the list |
| responsive | `boolean` | | | If set to `true` list will take 100% width of its parent |
| direction | `'horizontal'` \| `'vertical'` | | 'horizontal' | If set to `vertical` content will be located under name and list will take 100% width of its parent |
| nameMaxWidth | `number` | | | Maximum width of term |
| contentMaxWidth | `number \| 'auto'` | | 'auto' | Maximum width of definition |
| className | `string` | | | Class name for the list container |
| itemClassName | `string` | | | Class name for the list item |
| copyPosition | `'inside' \| 'outside'` | 'outside' | | If set to `inside`, copy icon will be placed over definition |
| Property | Type | Required | Default | Description |
| :------------------ | :----------------------------- | :-------: | :----------- | :-------------------------------------------------------------------------------------------------- |
| [items](#items) | `DefinitionListItem[]` | yes | | Items of the list |
| responsive | `boolean` | | | If set to `true` list will take 100% width of its parent |
| direction | `'horizontal'` \| `'vertical'` | | 'horizontal' | If set to `vertical` content will be located under name and list will take 100% width of its parent |
| nameMaxWidth | `number` | | | Maximum width of term |
| contentMaxWidth | `number \| 'auto'` | | 'auto' | Maximum width of definition |
| className | `string` | | | Class name for the definition list (for every granular definition list in group view) |
| itemClassName | `string` | | | Class name for the list item |
| groupLabelClassName | `string` | | | Class name for the group label in group view |
| copyPosition | `'inside' \| 'outside'` | 'outside' | | If set to `inside`, copy icon will be placed over definition |

### Items

Expand Down
12 changes: 12 additions & 0 deletions src/components/DefinitionList/__tests__/DefinitionList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,18 @@ describe('components: DefinitionList', () => {
const component = screen.getByText('Test group');
expect(component).toBeVisible();
});
it('should render group label class name', () => {
const items = [
{
label: 'Test group',
items: [{name: 'test1', content: 'value1'}],
},
];
getComponent({items, groupLabelClassName: 'test'});

const component = screen.getByText('Test group').parentElement;
expect(component).toHaveClass('test');
});
it('should render grouped items', () => {
const items = [
{
Expand Down
5 changes: 3 additions & 2 deletions src/components/DefinitionList/components/GroupLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import {b} from '../utils';

interface GroupLabelProps {
label: React.ReactNode;
className?: string;
}

export function GroupLabel({label}: GroupLabelProps) {
export function GroupLabel({label, className}: GroupLabelProps) {
return (
<div className={b('group-title')}>
<div className={b('group-title', className)}>
<Text variant="subheader-1" color="complementary">
{label}
</Text>
Expand Down
1 change: 1 addition & 0 deletions src/components/DefinitionList/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface DefinitionListProps extends QAProps {
contentMaxWidth?: number | 'auto';
className?: string;
itemClassName?: string;
groupLabelClassName?: string;
}

export interface DefinitionListGranularProps extends Omit<DefinitionListProps, 'items'> {
Expand Down

0 comments on commit 82c4a7e

Please sign in to comment.