Skip to content

Commit

Permalink
refactor checkbox and button (#278)
Browse files Browse the repository at this point in the history
  • Loading branch information
@prabhuignoto
prabhuignoto authored Jul 27, 2023
1 parent b83d0d2 commit 283343c
Show file tree
Hide file tree
Showing 12 changed files with 543 additions and 277 deletions.
14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@relative-ci/agent": "^4.1.5",
"@sentry/react": "^7.60.0",
"@sentry/tracing": "^7.60.0",
"@sentry/react": "^7.60.1",
"@sentry/tracing": "^7.60.1",
"@types/bluebird": "^3.5.38",
"@types/node": "^20.4.4",
"@types/react": "^18.2.16",
"@types/node": "^20.4.5",
"@types/react": "^18.2.17",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.2.0",
"@typescript-eslint/parser": "^6.2.0",
"autoprefixer": "^10.4.14",
"cssnano": "^6.0.1",
"esbuild": "^0.18.16",
"esbuild": "^0.18.17",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "2.27.5",
Expand All @@ -51,15 +51,15 @@
"react-dom": "^18.2.0",
"remove-files-webpack-plugin": "^1.5.0",
"sass": "^1.64.1",
"snyk": "^1.1194.0",
"snyk": "^1.1196.0",
"stylelint": "15.10.2",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-sass-guidelines": "^10.0.0",
"stylelint-order": "^6.0.3",
"stylelint-scss": "^5.0.1",
"thread-loader": "^4.0.2",
"ts-toolbelt": "^9.6.0",
"turbo": "^1.10.11",
"turbo": "^1.10.12",
"typescript": "^5.1.6",
"webpack": "^5.88.2",
"webpack-stats-plugin": "^1.1.3"
Expand Down
18 changes: 13 additions & 5 deletions packages/documentation/common/app-themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@ import { Colors } from '../../lib/components/common/theme-provider-model';

export type AppTheme = 'Default' | 'Glacier' | 'Coffee' | 'Blueberry';

// export const Default: Colors = {
// primary: '#0074B7',
// secondary: '#BFD7ED',
// tertiary: '#003B73',
// text: '#000',
// textSelection: '#fff',
// };

export const Default: Colors = {
primary: '#0074B7',
secondary: '#BFD7ED',
tertiary: '#003B73',
text: '#000',
textSelection: '#fff',
primary: '#007AFF', // The first color of the gradient in the original button design
secondary: '#00C6FF', // The second color of the gradient in the original button design
tertiary: '#ADD8E6', // A lighter shade of blue, could be used for backgrounds or inactive elements
text: '#000', // The text color from the original button design
textSelection: '#fff', // The text selection color from the original button design
};

export const Blueberry: Colors = {
Expand Down
8 changes: 4 additions & 4 deletions packages/lib/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ exports[`Accordion > should render snapshot 1`] = `
class="_accordion_f93c7f _no-border_f93c7f"
>
<div
aria-controls="accordion-body-FXJAkc8UzzObBYg3smxBR"
aria-controls="accordion-body-FE0OSUKNWtV-tMmJYMVd0"
aria-expanded="false"
class="_header_c2ceb5 _focusable_c2ceb5 _size_c2ceb5"
id="accordion-z_CzG1qgrj87JTu4UhU0h"
id="accordion-B2zg1DrRrGFAT7-1XjX7g"
role="heading"
style="--rc-accordion-header-height: 40px; outline: none; position: relative;"
tabindex="0"
Expand Down Expand Up @@ -40,9 +40,9 @@ exports[`Accordion > should render snapshot 1`] = `
/>
</div>
<div
aria-labelledby="accordion-z_CzG1qgrj87JTu4UhU0h"
aria-labelledby="accordion-B2zg1DrRrGFAT7-1XjX7g"
class="_body_f93c7f _animate_f93c7f _close_f93c7f"
id="accordion-body-FXJAkc8UzzObBYg3smxBR"
id="accordion-body-FE0OSUKNWtV-tMmJYMVd0"
role="region"
style="--title-color: #000; --transition: cubic-bezier(0.19, 1, 0.22, 1); --max-height: 0px;"
>
Expand Down
97 changes: 72 additions & 25 deletions packages/lib/components/button/button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,109 +7,156 @@
$types: (primary, default, danger);
$sizes: (sm, md, lg);

.btn {
// Base button styles
@mixin baseButtonStyles {
// Styles for button without border
&.no_border {
border: 0;
box-shadow: none;
}

// Minimum width for buttons without icon
&:not(.icon) {
min-width: 50px;
}

// Border styles for non-flat and non-dark buttons
&:not(.flat):not(.dark) {
@extend %border;
}

// Border radius for dark buttons that are not flat
&.dark:not(.flat) {
@extend %border-radius;
}

// Transition for non-active buttons
&:not(:active) {
transition: transform 100ms ease-in;
}

// Scale down when button is active and not disabled
&:active:not(.disabled) {
transform: scale(0.97);
}
}

@each $value in $types {
.#{$value} {
@extend %button-#{$value};
.btn {
@include baseButtonStyles;
}

&.disabled {
@extend %disabled;
border: 1px solid transparent;
// Styles for different types of buttons
@mixin buttonTypes {
@each $value in $types {
.#{$value} {
@extend %button-#{$value};

// Styles for disabled buttons
&.disabled {
@extend %disabled;
border: 1px solid transparent;
}
}
}
}

@each $size in $sizes {
.#{$size} {
@extend %text-#{$size};
@extend %button-#{$size};
@include buttonTypes;

.icon_container {
@extend %icon-#{$size};
}
// Styles for different sizes of buttons
@mixin buttonSizes {
@each $size in $sizes {
.#{$size} {
@extend %text-#{$size};
@extend %button-#{$size};

.label {
@extend %font-#{$size};
// Styles for icon container
.icon_container {
@extend %icon-#{$size};
}

// Styles for label
.label {
@extend %font-#{$size};
}
}
}
}

.label {
@include buttonSizes;

// Base label styles
@mixin baseLabelStyles {
@extend %text-no-wrap;
text-transform: capitalize;
}

@each $size in $sizes {
.#{$size} {
.label {
@extend %font-#{$size};
}
.label {
@include baseLabelStyles;
}

.icon {
@extend %icon-#{$size};
// Styles for different sizes of labels and icons
@mixin labelAndIconSizes {
@each $size in $sizes {
.#{$size} {
.label {
@extend %font-#{$size};
}

.icon {
@extend %icon-#{$size};
}
}
}
}

.icon {
@include labelAndIconSizes;

// Base icon styles
@mixin baseIconStyles {
border-radius: 50%;

// Styles for disabled icon
&.disabled {
@extend %disabled;
}

// Background color for non-disabled and non-dark icons
&:not(.disabled):not(.dark) {
background: theme.$light-bg;
}

// Hover styles for non-disabled and non-dark icons
&:hover:not(.disabled):not(.dark) {
background: theme.$primary;
color: theme.$white;
}

// Background color for dark icons that are not disabled
&.dark:not(.disabled) {
background: theme.$dark-control-bg;
}

// Hover styles for dark icons that are not disabled
&:hover.dark:not(.disabled) {
background: theme.$primary;
}

// Color for SVG inside dark icons on hover
&:hover.dark:not(.disabled) svg {
color: theme.$white;
}
}

.icon {
@include baseIconStyles;
}

// Styles for label when it follows an icon container
.icon_container + .label {
margin-left: 0.25rem;
}

// Styles for progress wrapper
.progress_wrapper {
margin-right: 0.5rem;
}
61 changes: 61 additions & 0 deletions packages/lib/components/checkbox-group/__tests__/checkbox-group.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,65 @@ describe('CheckboxGroup', () => {
expect(handler).toHaveBeenCalled();
});
});

// 1. Test if the checkbox group can handle an empty array of options
it('should handle empty options', () => {
const { queryByRole } = render(<CheckBoxGroup options={[]} />);

expect(queryByRole('group')).toBeInTheDocument();
expect(queryByRole('checkbox')).toBeNull();
});

// 2. Test if the `onChange` handler is not called when a disabled checkbox is clicked
it('should not call the handler if the checkbox is disabled', async () => {
const handler = vi.fn();
const { getAllByRole } = render(
<CheckBoxGroup options={options} onChange={handler} />
);

fireEvent.click(getAllByRole('checkbox')[2]);

await waitFor(() => {
expect(handler).not.toBeCalled();
});
});

// 3. Test if the `onChange` handler is called with the correct arguments
it('should call the handler with the correct arguments', async () => {
const handler = vi.fn();
const { getAllByRole } = render(
<CheckBoxGroup
options={[
{
id: '1',
isChecked: false,
label: 'Option 1',
},
{
id: '2',
isChecked: true,
label: 'Option 2',
},
]}
onChange={handler}
/>
);

fireEvent.click(getAllByRole('checkbox')[0]);

await waitFor(() => {
expect(handler).toBeCalledWith([
{
id: '1',
isChecked: true,
name: 'Option 1',
},
{
id: '2',
isChecked: true,
name: 'Option 2',
},
]);
});
});
});
Loading

1 comment on commit 283343c

@vercel
Copy link

@vercel vercel bot commented on 283343c Jul 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-creme – ./

react-creme.vercel.app
react-creme-prabhuignoto.vercel.app
react-creme-git-master-prabhuignoto.vercel.app
react-creme.prabhumurthy.com

Please sign in to comment.