Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tabs component #1570

Merged
merged 2 commits into from
Nov 4, 2023
Merged

feat: Tabs component #1570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04814ec
feat: Tabs component
brettdorrans Nov 4, 2023
408e759
:Merge branch 'master' into feat/navtabs
brettdorrans Nov 4, 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
10 changes: 10 additions & 0 deletions src/components/Box/Box.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
--elevation-small: var(--elevation-lower);
--elevation-medium: var(--elevation-higher);
--elevation-large: var(--elevation-highest);
--roundness-none: var(--border-radius-none);
--roundness-small: var(--border-radius-squarer);
--roundness-medium: var(--border-radius-rounder);
--roundness-large: var(--border-radius-roundest);

overflow: hidden;
}

@each $size in $sizes {
Expand All @@ -29,4 +35,8 @@
.elevation-#{$size} {
box-shadow: var(--elevation-#{$size});
}

.roundness-#{$size} {
border-radius: var(--roundness-#{$size});
}
}
26 changes: 16 additions & 10 deletions src/components/Box/Box.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,40 +9,46 @@ const setup = (Component: React.ReactElement) => render(Component);

afterEach(cleanup);

const gutters: SizeType[] = ['none', 'small', 'medium', 'large'];
const elevations: SizeType[] = ['none', 'small', 'medium', 'large'];
const sizes: SizeType[] = ['none', 'small', 'medium', 'large'];

describe('Box', () => {
test.each(gutters)('it works with gutters', (gutter) => {
test.each(sizes)('it works with gutters', (gutter) => {
const { container } = setup(<Box gutter={gutter}>Hello world</Box>);
expect(container.firstChild).toMatchSnapshot();
});

test.each(elevations)('it works with elevations', (elevation) => {
test.each(sizes)('it works with elevations', (elevation) => {
const { container } = setup(
<Box elevation={elevation}>Hello world</Box>
);
expect(container.firstChild).toMatchSnapshot();
});

test.each(gutters)('it works with gutterXs', (gutterX) => {
test.each(sizes)('it works with roundness', (roundness) => {
const { container } = setup(
<Box roundness={roundness}>Hello world</Box>
);
expect(container.firstChild).toMatchSnapshot();
});

test.each(sizes)('it works with gutterXs', (gutterX) => {
const { container } = setup(<Box gutterX={gutterX}>Hello world</Box>);
expect(container.firstChild).toMatchSnapshot();
});

test.each(gutters)('it works with gutterYs', (gutterY) => {
test.each(sizes)('it works with gutterYs', (gutterY) => {
const { container } = setup(<Box gutterY={gutterY}>Hello world</Box>);
expect(container.firstChild).toMatchSnapshot();
});

test('it works with default testId', () => {
setup(<Box gutter={gutters[0]}>Hello world</Box>);
setup(<Box gutter={sizes[0]}>Hello world</Box>);
expect(screen.getByTestId('Box')).toBeTruthy();
});

test('it works with specified testId', () => {
setup(
<Box gutter={gutters[0]} testId={'TestId'}>
<Box gutter={sizes[0]} testId={'TestId'}>
Hello world
</Box>
);
Expand All @@ -51,7 +57,7 @@ describe('Box', () => {

test('it works with as', () => {
setup(
<Box gutter={gutters[0]} as="span">
<Box gutter={sizes[0]} as="span">
Hello world
</Box>
);
Expand All @@ -60,7 +66,7 @@ describe('Box', () => {

test('it works with className', () => {
setup(
<Box gutter={gutters[0]} className="test">
<Box gutter={sizes[0]} className="test">
Hello world
</Box>
);
Expand Down
39 changes: 38 additions & 1 deletion src/components/Box/Box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const defaultArgs: BaseProps & BoxProps = {
gutter: undefined,
gutterX: undefined,
gutterY: undefined,
elevation: undefined
elevation: undefined,
roundness: undefined
};

const DefaultTemplate: StoryFn<BaseProps & BoxProps> = (args) => (
Expand Down Expand Up @@ -95,3 +96,39 @@ LargeElevation.args = {
elevation: 'large',
gutter: 'medium'
};

export const NoRoundness: StoryObj<BaseProps & BoxProps> = DefaultTemplate.bind(
{}
);
NoRoundness.args = {
...defaultArgs,
gutter: 'medium',
elevation: 'medium',
roundness: 'none'
};

export const SmallRoundness: StoryObj<BaseProps & BoxProps> =
DefaultTemplate.bind({});
SmallRoundness.args = {
...defaultArgs,
gutter: 'medium',
elevation: 'medium',
roundness: 'small'
};

export const MediumRoundness: StoryObj<BaseProps & BoxProps> =
DefaultTemplate.bind({});
MediumRoundness.args = {
...defaultArgs,
gutter: 'medium',
elevation: 'medium',
roundness: 'medium'
};
export const LargeRoundness: StoryObj<BaseProps & BoxProps> =
DefaultTemplate.bind({});
LargeRoundness.args = {
...defaultArgs,
gutter: 'medium',
elevation: 'medium',
roundness: 'large'
};
68 changes: 52 additions & 16 deletions src/components/Box/__snapshots__/Box.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Box > it works with elevations 1`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -11,7 +11,7 @@ exports[`Box > it works with elevations 1`] = `

exports[`Box > it works with elevations 2`] = `
<div
class="_this_d62db4 _elevation-small_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-small_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -20,7 +20,7 @@ exports[`Box > it works with elevations 2`] = `

exports[`Box > it works with elevations 3`] = `
<div
class="_this_d62db4 _elevation-medium_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-medium_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -29,7 +29,7 @@ exports[`Box > it works with elevations 3`] = `

exports[`Box > it works with elevations 4`] = `
<div
class="_this_d62db4 _elevation-large_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-large_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -38,7 +38,7 @@ exports[`Box > it works with elevations 4`] = `

exports[`Box > it works with gutterXs 1`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -47,7 +47,7 @@ exports[`Box > it works with gutterXs 1`] = `

exports[`Box > it works with gutterXs 2`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-small_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-small_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -56,7 +56,7 @@ exports[`Box > it works with gutterXs 2`] = `

exports[`Box > it works with gutterXs 3`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-medium_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-medium_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -65,7 +65,7 @@ exports[`Box > it works with gutterXs 3`] = `

exports[`Box > it works with gutterXs 4`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-large_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-large_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -74,7 +74,7 @@ exports[`Box > it works with gutterXs 4`] = `

exports[`Box > it works with gutterYs 1`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -83,7 +83,7 @@ exports[`Box > it works with gutterYs 1`] = `

exports[`Box > it works with gutterYs 2`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-small_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-small_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -92,7 +92,7 @@ exports[`Box > it works with gutterYs 2`] = `

exports[`Box > it works with gutterYs 3`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-medium_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-medium_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -101,7 +101,7 @@ exports[`Box > it works with gutterYs 3`] = `

exports[`Box > it works with gutterYs 4`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-large_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-large_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -110,7 +110,7 @@ exports[`Box > it works with gutterYs 4`] = `

exports[`Box > it works with gutters 1`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -119,7 +119,7 @@ exports[`Box > it works with gutters 1`] = `

exports[`Box > it works with gutters 2`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-small_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-small_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -128,7 +128,7 @@ exports[`Box > it works with gutters 2`] = `

exports[`Box > it works with gutters 3`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-medium_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-medium_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand All @@ -137,7 +137,43 @@ exports[`Box > it works with gutters 3`] = `

exports[`Box > it works with gutters 4`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _gutter-large_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-large_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
</div>
`;

exports[`Box > it works with roundness 1`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _roundness-none_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
</div>
`;

exports[`Box > it works with roundness 2`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _roundness-small_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
</div>
`;

exports[`Box > it works with roundness 3`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _roundness-medium_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
</div>
`;

exports[`Box > it works with roundness 4`] = `
<div
class="_this_d62db4 _elevation-none_d62db4 _roundness-large_d62db4 _gutter-none_d62db4 _gutterX-none_d62db4 _gutterY-none_d62db4"
data-testid="Box"
>
Hello world
Expand Down
3 changes: 3 additions & 0 deletions src/components/Box/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface BoxProps {
readonly gutter?: SizeType;
readonly gutterX?: SizeType;
readonly gutterY?: SizeType;
readonly roundness?: SizeType;
}

const Box = ({
Expand All @@ -18,12 +19,14 @@ const Box = ({
gutter = 'none',
gutterX = 'none',
gutterY = 'none',
roundness = 'none',
...restProps
}: BaseProps & BoxProps) => (
<Component
className={cx(
styles.this,
styles[`elevation-${elevation}`],
styles[`roundness-${roundness}`],
styles[`gutter-${gutter}`],
{
[styles[`gutterX-${gutterX}`]]: gutterX,
Expand Down
Loading