Skip to content

Commit

Permalink
Merge branch 'main' into feat/sidebar-banner
Browse files Browse the repository at this point in the history
  • Loading branch information
juliajforesti authored Oct 13, 2023
2 parents 5929b84 + 34e4421 commit e0ac8ec
Show file tree
Hide file tree
Showing 16 changed files with 359 additions and 104 deletions.
5 changes: 5 additions & 0 deletions .changeset/cuddly-cars-jam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": minor
---

feat(fuselage): change `SidebarItem` focus color
5 changes: 5 additions & 0 deletions .changeset/cuddly-flowers-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

feat(fuselage): `ContextualbarAction` size
5 changes: 5 additions & 0 deletions .changeset/lemon-lamps-chew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": minor
---

feat(fuselage): `Callout` visual changes
5 changes: 5 additions & 0 deletions .changeset/selfish-plants-divide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": minor
---

feat(fuselage): option to use `Tag` as link
5 changes: 5 additions & 0 deletions .changeset/selfish-scissors-sit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

fix(fuselage): Remove underline prevention on anchor elements
60 changes: 22 additions & 38 deletions packages/fuselage/src/components/Callout/Callout.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,31 @@
import { composeStories } from '@storybook/testing-react';
import { render, screen } from '@testing-library/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';
import React from 'react';

import { Callout } from './Callout';
import * as stories from './Callout.stories';

const { Default, WithDescriptionOnly, Info, Success, Warning, Danger } =
composeStories(stories);
const testCases = Object.values(composeStories(stories)).map((Story) => [
Story.storyName || 'Story',
Story,
]);

describe('[Callout Component]', () => {
describe('Storybook', () => {
it.each([
['Default', Default],
['WithDescriptionOnly', WithDescriptionOnly],
['Info', Info],
['Success', Success],
['Warning', Warning],
['Danger', Danger],
])('renders %p story without crashing', (_storyName, Story) => {
render(<Story />);
});
describe('[CheckBox Rendering]', () => {
test.each(testCases)(
`renders %s without crashing`,
async (_storyname, Story) => {
const tree = render(<Story />);
expect(tree.baseElement).toMatchSnapshot();
}
);

it.each([
['.rcx-callout--type-info', 'info', Info],
['.rcx-callout--type-success', 'success', Success],
['.rcx-callout--type-warning', 'warning', Warning],
['.rcx-callout--type-danger', 'danger', Danger],
])(
'should have class %p when type is %p',
(className, _typeName, Story) => {
const { container } = render(<Story />);
expect(container.querySelector(className)).toBeInTheDocument();
}
);
});
test.each(testCases)(
'%s should have no a11y violations',
async (_storyname, Story) => {
const { container } = render(<Story />);

it('should show title when this property is passed', () => {
render(<Callout title='test-title' />);
screen.getByText('test-title');
});

it('should display children', () => {
render(<Callout>Children</Callout>);
screen.getByText('Children');
});
const results = await axe(container);
expect(results).toHaveNoViolations();
}
);
});
114 changes: 67 additions & 47 deletions packages/fuselage/src/components/Callout/Callout.styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,96 @@
@use '../../styles/lengths.scss';
@use '../../styles/typography.scss';

$callout-default-color: theme(
'callout-default-color',
colors.font(secondary-info)
);
$callout-info-color: theme('callout-info-color', colors.status-font(on-info));
$callout-success-color: theme(
'callout-success-color',
colors.status-font(on-success)
);
$callout-warning-color: theme(
'callout-warning-color',
colors.status-font(on-warning)
);
$callout-danger-color: theme(
'callout-danger-color',
colors.status-font(on-danger)
);
$callout-text-color: theme('callout-text-color', colors.font(pure-black));

.rcx-callout {
display: flex;

padding-block: lengths.padding(8);
padding-inline: lengths.padding(16);
padding: lengths.padding(12);

color: $callout-text-color;

color: theme('callout-color', colors.font(default));
border-width: lengths.border-width(default);
border-style: solid;
border-color: $callout-default-color;

border-radius: theme('callout-border-radius', lengths.border-radius(medium));

background-color: theme('callout-background-color', colors.surface(tint));
&--info {
border-color: $callout-info-color;

&--type-info {
color: theme('callout-color-info', colors.font(pure-black));
background-color: theme(
'callout-background-color-info',
colors.status-background(info)
);
.rcx-callout__icon {
color: $callout-info-color;
}
}

&--type-success {
color: theme('callout-color-success', colors.font(pure-black));
background-color: theme(
'callout-background-color-success',
colors.status-background(success)
);
&--success {
border-color: $callout-success-color;

.rcx-callout__icon {
color: $callout-success-color;
}
}

&--type-warning {
color: theme('callout-color-warning', colors.font(pure-black));
background-color: theme(
'callout-background-color-warning',
colors.status-background(warning)
);
&--warning {
border-color: $callout-warning-color;

.rcx-callout__icon {
color: $callout-warning-color;
}
}

&--type-danger {
color: theme('callout-color-danger', colors.font(pure-black));
background-color: theme(
'callout-background-color-danger',
colors.status-background(danger)
);
&--danger {
border-color: $callout-danger-color;

.rcx-callout__icon {
color: $callout-danger-color;
}
}
}

.rcx-callout__wrapper {
display: flex;
&__wrapper {
display: flex;

overflow: hidden;
flex-flow: column nowrap;
flex: 1 1 0;
overflow: hidden;
flex-flow: column nowrap;
flex: 1 1 0;

margin-inline-start: lengths.margin(12);
margin-inline-start: lengths.margin(12);

@include typography.use-font-scale(c1);
@include typography.use-font-scale(c1);

> :nth-child(2) {
margin-block-start: lengths.margin(4);
> :nth-child(2) {
margin-block-start: lengths.margin(4);
}
}
}

.rcx-callout__title {
white-space: nowrap;
&__title {
white-space: nowrap;

@include typography.use-font-scale(p2b);
@include typography.use-text-ellipsis;
}
@include typography.use-font-scale(p2b);
@include typography.use-text-ellipsis;
}

.rcx-callout__children {
display: block;
&__content {
display: block;

@include typography.use-font-scale(p2);
@include typography.use-font-scale(p2);
}
}
25 changes: 17 additions & 8 deletions packages/fuselage/src/components/Callout/Callout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const Callout = ({
title,
children,
icon,
className,
...props
}: CalloutProps) => {
const defaultIcon =
Expand All @@ -26,15 +27,23 @@ export const Callout = ({
'info-circled';

return (
<Box is='section' rcx-callout rcx-callout--type={type} {...props}>
<Icon name={icon || defaultIcon} size='x20' />
<Box
is='section'
className={[
`rcx-callout ${type && `rcx-callout--${type}`} ${className || ''}`,
]
.filter(Boolean)
.join(' ')}
{...props}
>
<Icon
className='rcx-callout__icon'
name={icon || defaultIcon}
size='x20'
/>
<Box rcx-callout__wrapper>
{title && (
<Box is='h1' rcx-callout__title>
{title}
</Box>
)}
{children && <Box rcx-callout__children>{children}</Box>}
{title && <Box rcx-callout__title>{title}</Box>}
{children && <Box rcx-callout__content>{children}</Box>}
</Box>
</Box>
);
Expand Down
Loading

0 comments on commit e0ac8ec

Please sign in to comment.