Skip to content

Commit

Permalink
fix(layout): Design adjustments (#867)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggazzo
ggazzo authored Oct 11, 2022
1 parent 1bb9a3c commit 99eabc9
Show file tree
Hide file tree
Showing 13 changed files with 412 additions and 52 deletions.
7 changes: 7 additions & 0 deletions packages/fuselage/src/styleTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,13 @@ export const color = memoize((value) => {
return tokenColors.n100;
}

if (value === 'secondary-info') {
if (cssSupportsVariable) {
return `var(--rcx-color-secondary-info, ${tokenColors.n700})`;
}
return tokenColors.n700;
}

if (value === 'surface-neutral') {
if (cssSupportsVariable) {
return `var(--rcx-color-surface-neutral, ${tokenColors.n400})`;
Expand Down
2 changes: 1 addition & 1 deletion packages/layout/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
addons: ['@storybook/addon-essentials', 'storybook-dark-mode/register'],
addons: ['@storybook/addon-essentials', 'storybook-dark-mode'],
stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'],
features: {
postcss: false,
Expand Down
13 changes: 7 additions & 6 deletions packages/layout/src/ActionLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ import type {
ComponentProps,
ReactElement,
ReactNode,
AnchorHTMLAttributes,
} from 'react';
import { useCallback } from 'react';

type ActionLinkProps = {
children?: ReactNode;
href?: string;
fontScale?: ComponentProps<typeof Box>['fontScale'];
fontWeight?: number;
onClick?: () => void;
};
} & AnchorHTMLAttributes<HTMLAnchorElement>;

const ActionLink = ({
children,
Expand All @@ -23,8 +22,10 @@ const ActionLink = ({
}: ActionLinkProps): ReactElement => {
const handleClick = useCallback(
(event: MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
onClick?.();
if (onClick) {
event.preventDefault();
onClick(event);
}
},
[onClick]
);
Expand All @@ -35,7 +36,7 @@ const ActionLink = ({
is='a'
fontScale={'p2'}
href={href}
color='primary-500'
color='primary-600'
mi='x4'
textDecorationLine='none'
onClick={handleClick}
Expand Down
22 changes: 4 additions & 18 deletions packages/layout/src/BackgroundLayer/BackgroundLayer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Tile } from '@rocket.chat/fuselage';
import type { Story, Meta } from '@storybook/react';

import DarkModeProvider from '../DarkModeProvider';
import BackgroundLayer from './BackgroundLayer';

export default {
Expand All @@ -10,19 +9,6 @@ export default {
parameters: {
layout: 'fullscreen',
},
argTypes: {
forcedDarkMode: {
options: [undefined, true, false],
control: { type: 'inline-radio' },
},
},
decorators: [
(Story, context) => (
<DarkModeProvider forcedDarkMode={context.args.forcedDarkMode}>
<Story />
</DarkModeProvider>
),
],
} as Meta;

export const SystemDarkMode: Story = () => (
Expand All @@ -31,15 +17,15 @@ export const SystemDarkMode: Story = () => (
</BackgroundLayer>
);

export const DarkMode: Story = () => (
<BackgroundLayer>
export const DarkMode: Story = (props) => (
<BackgroundLayer {...props}>
<Tile>An example tile</Tile>
</BackgroundLayer>
);
DarkMode.args = { forcedDarkMode: true };

export const LightMode: Story = () => (
<BackgroundLayer>
export const LightMode: Story = (props) => (
<BackgroundLayer {...props}>
<Tile>An example tile</Tile>
</BackgroundLayer>
);
Expand Down
1 change: 1 addition & 0 deletions packages/layout/src/BackgroundLayer/BackgroundLayer.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@ export const Wrapper = styled('div', filterWrapperProps)`
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: auto;
color: ${(p) => p.color};
`;
30 changes: 19 additions & 11 deletions packages/layout/src/FormPageLayout/FormPageLayout.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,26 +63,31 @@ export const Logo = styled('div')`
}
`;

export const Title = styled('div')`
padding-block-end: 24px;
font-size: ${String(40 / 16)}rem;
export const Title = styled('h1')`
padding-block-end: 32px;
font-size: ${String(48 / 16)}rem;
font-family: ${sans};
font-weight: 800;
line-height: ${String(42 / 16)}rem;
line-height: ${String(64 / 16)}rem;
text-align: center;
@media (min-width: 1440px) {
text-align: start;
font-size: ${String(52 / 16)}rem;
line-height: ${String(62 / 16)}rem;
}
`;

export const TitleHighlight = styled(
'span',
({ fontColor: _fontColor, ...props }: { fontColor?: string }) => props
({
fontColor: _fontColor,
isDark: _isDark,
...props
}: {
fontColor?: string;
isDark?: boolean;
}) => props
)`
color: ${(p) => (p.fontColor ? p.fontColor : '#1D74F5')};
color: ${(p) => (p.isDark ? '#76B7FC' : '#095AD2')};
display: inline-block;
`;

Expand All @@ -95,7 +100,7 @@ const SubTitleFormPageProps = ({
fontWeight?: string;
}) => props;

export const Subtitle = styled('div', SubTitleFormPageProps)`
export const Subtitle = styled('h2', SubTitleFormPageProps)`
font-size: ${String(16 / 16)}rem;
line-height: ${String(22 / 16)}rem;
font-family: ${sans};
Expand All @@ -109,10 +114,13 @@ export const Subtitle = styled('div', SubTitleFormPageProps)`
}
`;

export const Description = styled('div')`
display: none;
export const Description = styled('p')`
font-family: ${sans};
// p2
font-size: ${String(14 / 16)}rem;
line-height: ${String(20 / 16)}rem;
@media (min-width: 1440px) {
display: unset;
}
Expand Down
156 changes: 152 additions & 4 deletions packages/layout/src/HorizontalWizardLayout/HorizontalWizardLayout.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,75 @@
import { Field, InputBox } from '@rocket.chat/fuselage';
import type { Meta, Story } from '@storybook/react';

import { Form } from '..';
import { ActionLink, Form } from '..';
import {
HorizontalWizardLayout,
HorizontalWizardLayoutAside,
HorizontalWizardLayoutContent,
HorizontalWizardLayoutDescription,
HorizontalWizardLayoutSubtitle,
HorizontalWizardLayoutTitle,
HorizontalWizardTextHighlight,
} from './HorizontalWizardLayout';

export default {
title: 'HorizontalWizardLayout',
component: HorizontalWizardLayout,
} as Meta;

export const Default: Story = () => (
<HorizontalWizardLayout>
export const Default: Story = (props) => (
<>
<HorizontalWizardLayout {...props}>
<HorizontalWizardLayoutAside>
<HorizontalWizardLayoutTitle>
Title{' '}
<HorizontalWizardTextHighlight>
highlight
</HorizontalWizardTextHighlight>
</HorizontalWizardLayoutTitle>
<HorizontalWizardLayoutSubtitle>
Subtitle{' '}
<HorizontalWizardTextHighlight>
highlight
</HorizontalWizardTextHighlight>
</HorizontalWizardLayoutSubtitle>
<HorizontalWizardLayoutDescription>
Description <ActionLink>highlight</ActionLink>
</HorizontalWizardLayoutDescription>
</HorizontalWizardLayoutAside>
<HorizontalWizardLayoutContent>
<Form onSubmit={console.log}>
<Form.Header>
<Form.Title>Title</Form.Title>
<Form.Subtitle>Subtitle</Form.Subtitle>
</Form.Header>
<Form.Container>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
</Form.Container>
<Form.Footer>footer</Form.Footer>
</Form>
</HorizontalWizardLayoutContent>
</HorizontalWizardLayout>
</>
);
Default.args = { forceDarkMode: false };

export const WithScroll: Story = (props) => (
<HorizontalWizardLayout {...props}>
<HorizontalWizardLayoutAside>
<HorizontalWizardLayoutTitle>Title</HorizontalWizardLayoutTitle>
<HorizontalWizardLayoutSubtitle>Subtitle</HorizontalWizardLayoutSubtitle>
<HorizontalWizardLayoutDescription>
Description
Description{' '}
<HorizontalWizardTextHighlight>highlight</HorizontalWizardTextHighlight>
</HorizontalWizardLayoutDescription>
</HorizontalWizardLayoutAside>
<HorizontalWizardLayoutContent>
Expand All @@ -41,9 +88,110 @@ export const Default: Story = () => (
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
<Field>
<Field.Label>Label</Field.Label>
<Field.Description>Description</Field.Description>
<Field.Row>
<InputBox.Skeleton />
</Field.Row>
<Field.Error>Error</Field.Error>
<Field.Hint>Hint</Field.Hint>
</Field>
</Form.Container>
<Form.Footer>footer</Form.Footer>
</Form>
</HorizontalWizardLayoutContent>
</HorizontalWizardLayout>
);

WithScroll.args = { forceDarkMode: undefined };
Loading

0 comments on commit 99eabc9

Please sign in to comment.