hanzo/mds
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated cursor on hover / disabled

Browse Source
This commit is contained in:
Benjamin Perez
2022-06-21 18:07:50 -05:00
committed by Alex
parent 27812e8e5f
commit 2b32070b77
4 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -7,7 +7,7 @@ The MinIO Design System is a design specification for all UI elements used in Mi
You can test this package using the embedded storybook. Please follow these steps:
1. Do `yarn install` in the root folder of mds
2. Start Story book by running `yarn storybook`
2. Start Story book by running `yarn storybook`
3. Open any browser and go to `http://localhost:6006`
## Build distribution files
@@ -17,4 +17,5 @@ To create distribution files you can run `yarn build` or `make build` in source
This process is required everytime a new component is created and ready to be distributed
## License
MinIO Design System source is licensed under the GNU AGPLv3 license that can be found in the [LICENSE](https://github.com/minio/mds/blob/master/LICENSE) file.
jest.config.js
+3 -3
View File
@@ -1,5 +1,5 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
};
preset: "ts-jest",
testEnvironment: "jsdom",
};
src/components/Button/Button.tsx
+2
View File
@@ -21,6 +21,7 @@ import { ButtonProps } from "./Button.types";
const CustomButton = styled.button<ButtonProps>`
border-radius: 3px;
cursor: pointer;
width: ${(props) => (props.fullWidth ? "100%" : "initial")};
height: 39px;
font-family: "Lato", sans-serif;
@@ -96,6 +97,7 @@ const CustomButton = styled.button<ButtonProps>`
}
}
&:disabled {
cursor: not-allowed;
background-color: ${({ theme, ...restProps }) =>
get(
theme,
src/components/Button/__tests__/Button.test.tsx
+32 -19
View File
@@ -1,25 +1,38 @@
import React from "react";
import '@testing-library/jest-dom'
import {render, screen } from '@testing-library/react'
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Button from "../Button";
import TestIcon from "../../../utils/TestIcon";
describe("Running Test for Button", () => {
test("Check Button Disabled", () => {
render(<Button id="one-button" label="Button" disabled/>)
expect(screen.getByRole('button')).toHaveProperty("disabled", true);
});
test("Button contains requested label", () => {
render(<Button id="second-button" label="One Test Label"/>)
expect(screen.getByRole('button').textContent).toContain("One Test Label");
})
test("Button contains icon at the end", () => {
render(<Button id="second-button" label="One Test Label" icon={<TestIcon />}/>)
expect(screen.getByRole('button').innerHTML).toContain('One Test Label<span class=\"buttonIcon\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"min-icon\" fill=\"currentcolor\" viewBox=\"0 0 256 256\"><g><circle cx=\"128\" cy=\"128\" r=\"128\"></circle></g></svg></span>');
})
test("Button contains icon at the start", () => {
render(<Button id="second-button" label="One Test Label" icon={<TestIcon />} iconLocation={"start"} />)
expect(screen.getByRole('button').innerHTML).toContain('<span class=\"buttonIcon\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"min-icon\" fill=\"currentcolor\" viewBox=\"0 0 256 256\"><g><circle cx=\"128\" cy=\"128\" r=\"128\"></circle></g></svg></span>One Test Label');
})
});
test("Check Button Disabled", () => {
render(<Button id="one-button" label="Button" disabled />);
expect(screen.getByRole("button")).toHaveProperty("disabled", true);
});
test("Button contains requested label", () => {
render(<Button id="second-button" label="One Test Label" />);
expect(screen.getByRole("button").textContent).toContain("One Test Label");
});
test("Button contains icon at the end", () => {
render(
<Button id="second-button" label="One Test Label" icon={<TestIcon />} />
);
expect(screen.getByRole("button").innerHTML).toContain(
'One Test Label<span class="buttonIcon"><svg xmlns="http://www.w3.org/2000/svg" class="min-icon" fill="currentcolor" viewBox="0 0 256 256"><g><circle cx="128" cy="128" r="128"></circle></g></svg></span>'
);
});
test("Button contains icon at the start", () => {
render(
<Button
id="second-button"
label="One Test Label"
icon={<TestIcon />}
iconLocation={"start"}
/>
);
expect(screen.getByRole("button").innerHTML).toContain(
'<span class="buttonIcon"><svg xmlns="http://www.w3.org/2000/svg" class="min-icon" fill="currentcolor" viewBox="0 0 256 256"><g><circle cx="128" cy="128" r="128"></circle></g></svg></span>One Test Label'
);
});
});