Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
dougfabris committed Oct 7, 2022
2 parents d3d38c0 + 228d42f commit 7f0c801
Show file tree
Hide file tree
Showing 103 changed files with 5,375 additions and 717 deletions.
6 changes: 4 additions & 2 deletions .github/workflows/cd.yml
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,9 @@ jobs:
path: |
packages/fuselage/storybook-static
packages/fuselage-ui-kit/storybook-static
packages/onboarding-ui/storybook-static
packages/uikit-playground/build
packages/onboarding-ui/storybook-static
packages/layout/storybook-static
- if: github.ref == 'refs/heads/master'
uses: actions/upload-artifact@v2
with:
Expand Down Expand Up @@ -124,11 +125,12 @@ jobs:
name: docs
path: .
- run: |
rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "uikit-playground/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "layout/${{ needs.build-and-test.outputs.branch-name }}" "uikit-playground/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/fuselage/storybook-static" "fuselage/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/uikit-playground/build" "uikit-playground/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/fuselage-ui-kit/storybook-static" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/onboarding-ui/storybook-static" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/layout/storybook-static" "layout/${{ needs.build-and-test.outputs.branch-name }}"
rm -rf packages
- uses: crazy-max/ghaction-github-pages@v2
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/ci-pr-closed.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jobs:
- uses: actions/checkout@v2
with:
ref: gh-pages
- run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "uikit-playground/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
- run: rm -rf "fuselage/${{ github.event.number }}" "layout/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "uikit-playground/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
- uses: crazy-max/ghaction-github-pages@v2
with:
target_branch: gh-pages
Expand Down
4 changes: 3 additions & 1 deletion .github/workflows/ci-pr-opened.yml
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ jobs:
uikit-playground/build
fuselage-ui-kit/storybook-static
onboarding-ui/storybook-static
layout/storybook-static
publish-to-gh-pages:
name: Publish to GitHub Pages
needs:
Expand All @@ -62,11 +63,12 @@ jobs:
name: storybooks
path: packages
- run: |
rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "layout/${{ needs.download-artifact.outputs.pr-number }}" "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/uikit-playground/build "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/fuselage-ui-kit/storybook-static "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/layout/storybook-static "layout/${{ needs.download-artifact.outputs.pr-number }}"
rm -rf packages
- uses: crazy-max/ghaction-github-pages@v2
with:
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/ci-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,4 @@ jobs:
packages/uikit-playground/build
packages/fuselage-ui-kit/storybook-static
packages/onboarding-ui/storybook-static
packages/layout/storybook-static
52 changes: 26 additions & 26 deletions README.md

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions packages/fuselage-toastbar/.storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import type { ElementType, ReactElement } from 'react';
import { Suspense } from 'react';
import { useDarkMode } from 'storybook-dark-mode';
import ToastBarProvider from '../src/ToastBarProvider';
import { DarkModeProvider } from '@rocket.chat/onboarding-ui';
import { DarkModeProvider } from '@rocket.chat/layout';
import React from 'react';

addParameters({
backgrounds: {
Expand All @@ -32,11 +33,11 @@ export const decorators: DecoratorFunction<ReactElement>[] = [

return (
<Suspense fallback={null}>
<DarkModeProvider forcedDarkMode={dark}>
<DarkModeProvider.default forcedDarkMode={dark}>
<ToastBarProvider>
<Story />
</ToastBarProvider>
</DarkModeProvider>
</DarkModeProvider.default>
</Suspense>
);
},
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage-toastbar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@rocket.chat/eslint-config-alt": "workspace:~",
"@rocket.chat/fuselage": "workspace:~",
"@rocket.chat/fuselage-hooks": "workspace:~",
"@rocket.chat/onboarding-ui": "workspace:~",
"@rocket.chat/layout": "workspace:~",
"@rocket.chat/prettier-config": "workspace:~",
"@rocket.chat/styled": "workspace:~",
"@storybook/addon-essentials": "~6.4.18",
Expand Down
17 changes: 10 additions & 7 deletions packages/fuselage-toastbar/src/ToastBar.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { ToastBar } from '@rocket.chat/fuselage';
import React from 'react';
import ReactDOM from 'react-dom';
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ToastBar />, div);
ReactDOM.unmountComponentAtNode(div);
import * as stories from './stories';

const { ToastBarWithData } = composeStories(stories);

describe('[ToastBarWithData Component]', () => {
it('renders without crashing', () => {
render(<ToastBarWithData />);
});
});
2 changes: 1 addition & 1 deletion packages/fuselage/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
features: {
postcss: false,
},
addons: ['@storybook/addon-essentials'],
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
stories: ['../src/**/*.stories.{mdx,js,tsx}'],
webpackFinal: (config) => {
config.module.rules.push({
Expand Down
7 changes: 6 additions & 1 deletion packages/fuselage/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@
"@rocket.chat/memo": "workspace:~",
"@rocket.chat/styled": "workspace:~",
"invariant": "^2.2.4",
"react-keyed-flatten-children": "^1.3.0"
"react-aria": "~3.19.0",
"react-keyed-flatten-children": "^1.3.0",
"react-stately": "~3.17.0"
},
"devDependencies": {
"@babel/core": "~7.17.2",
Expand All @@ -73,13 +75,16 @@
"@rocket.chat/icons": "workspace:~",
"@rocket.chat/prettier-config": "workspace:~",
"@storybook/addon-essentials": "~6.4.18",
"@storybook/addon-interactions": "~6.5.10",
"@storybook/addon-links": "~6.4.18",
"@storybook/addons": "~6.4.18",
"@storybook/builder-webpack5": "~6.4.18",
"@storybook/client-api": "~6.4.19",
"@storybook/jest": "~0.0.10",
"@storybook/manager-webpack5": "~6.4.18",
"@storybook/react": "~6.4.18",
"@storybook/source-loader": "~6.4.18",
"@storybook/testing-library": "~0.0.13",
"@storybook/testing-react": "~1.3.0",
"@storybook/theming": "~6.4.18",
"@testing-library/jest-dom": "~5.16.2",
Expand Down
11 changes: 10 additions & 1 deletion packages/fuselage/src/components/Banner/Banner.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';

Expand All @@ -10,4 +10,13 @@ describe('[Banner Component]', () => {
it('renders without crashing', () => {
render(<Banner />);
});

it('renders with link', () => {
render(<Banner link='https://rocket.chat' linkText='More info' />);
expect(
screen.getByRole('link', {
name: /more info/i,
})
).toBeInTheDocument();
});
});
1 change: 1 addition & 0 deletions packages/fuselage/src/components/Banner/Banner.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const _Banner = () => (
icon={<Icon name='info' size={24} />}
title='Sed ut perspiciatis unde'
onClose={action('close')}
link='https://rocket.chat/'
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor
Expand Down
8 changes: 8 additions & 0 deletions packages/fuselage/src/components/Banner/Banner.styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,12 @@ $banner-colors-danger-background-color: functions.theme(
padding-block: 0;
}
}

&__link {
padding-left: 10px;

text-decoration: underline;

color: inherit;
}
}
27 changes: 20 additions & 7 deletions packages/fuselage/src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,31 @@ const variants: VariantType[] = [
];

type BannerProps = {
inline?: boolean;
actionable?: boolean;
closeable?: boolean;
icon?: ReactNode;
title?: string;
variant?: VariantType;
inline?: boolean;
link?: string;
linkText?: string;
onAction?: () => void;
onClose?: () => void;
title?: string;
variant?: VariantType;
} & AllHTMLAttributes<HTMLElement>;

const Banner = ({
inline = false,
actionable,
children,
className,
actionable,
closeable,
icon,
title,
variant = 'neutral',
inline = false,
link,
linkText = 'More info',
onAction,
onClose,
title,
variant = 'neutral',
...props
}: BannerProps) => {
useStyleSheet();
Expand Down Expand Up @@ -98,6 +102,15 @@ const Banner = ({
<h6 className={cx('rcx-banner__title')({ inline })}>{title}</h6>
)}
{children}
{link && (
<a
href={link}
target='_blank'
className={cx('rcx-banner__link')({ [variant]: true })}
>
{linkText}
</a>
)}
</div>
{closeable && (
<div className={cx('rcx-banner__close-button')({ inline })}>
Expand Down
21 changes: 21 additions & 0 deletions packages/fuselage/src/components/Box/props.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,9 @@ The `is` prop allows `Box` to render any component capable of handling common DO
<Box color='danger-500' />
<Box color='danger-500-50' />
<Box color='surface' />
<Box color='surface-light' />
<Box color='surface-tint' />
<Box color='surface-neutral' />
<Box color='default' />
<Box color='info' />
<Box color='hint' />
Expand Down Expand Up @@ -197,6 +200,9 @@ The `is` prop allows `Box` to render any component capable of handling common DO
<Box bg='danger-500' />
<Box bg='danger-500-50' />
<Box bg='surface' />
<Box bg='surface-light' />
<Box bg='surface-tint' />
<Box bg='surface-neutral' />
<Box bg='default' />
<Box bg='info' />
<Box bg='hint' />
Expand Down Expand Up @@ -430,6 +436,21 @@ The `is` prop allows `Box` to render any component capable of handling common DO
</Story>
</Canvas>

#### Word Break

<Canvas>
<Story name='Word break'>
<>
<Box wordBreak='break-word'>
Breakwoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord
</Box>
<Box wordBreak='break-all'>
Breakaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaall
</Box>
</>
</Story>
</Canvas>

### Layout

#### Widths
Expand Down
2 changes: 2 additions & 0 deletions packages/fuselage/src/components/Box/stylingProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ export type StylingProps = {
textAlign: CSSProperties['textAlign'];
textTransform: CSSProperties['textTransform'];
textDecorationLine: CSSProperties['textDecorationLine'];
wordBreak: CSSProperties['wordBreak'];

elevation: '0' | '1' | '2';
invisible: boolean;
Expand Down Expand Up @@ -349,6 +350,7 @@ export const propDefs: Record<keyof StylingProps, PropDefinition> = {
textAlign: stringProp,
textTransform: stringProp,
textDecorationLine: stringProp,
wordBreak: stringProp,

elevation: {
toStyle: (value) => {
Expand Down
39 changes: 35 additions & 4 deletions packages/fuselage/src/components/Callout/Callout.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,44 @@
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import React from 'react';

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

const { Default } = composeStories(stories);
const { Default, WithDescriptionOnly, Info, Success, Warning, Danger } =
composeStories(stories);

describe('[Callout Component]', () => {
it('renders without crashing', () => {
render(<Default />);
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 />);
});

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();
});
});

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');
});
});
Loading

0 comments on commit 7f0c801

Please sign in to comment.