Create link button and create stories for link and disabled

an90dr · Jan 7, 2022 · 757b311 · 757b311
1 parent a553c16
commit 757b311
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 24 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,8 +1,8 @@
 module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
- '@storybook/addon-essentials',
  '@storybook/addon-links',
  '@storybook/addon-docs',
+ '@storybook/addon-essentials',
  ],
 };
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -2,5 +2,5 @@ import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 
 addons.setConfig({
- theme: themes.dark,
+ theme: themes.light,
 });
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -7,7 +7,7 @@ export const parameters = {
  },
  },
  backgrounds: {
- default: 'dark',
+ default: 'light',
  values: [
  {
  name: 'dark',

diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@
 # ✨ Features
 
 ✅📦 Modal Component\
+✅📦 Button Component\
 💬 Working to add more components 👨🏻‍💻 👨🏻‍💻 ◽◽◽
 
 # 🤘 How to Use

diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
  "name": "react-components-free",
- "version": "1.0.10",
+ "homepage": "http:https://react-components-free.whoopcy.com/docs/",
+ "version": "1.0.12",
  "description": "react components for free",
  "main": "./dist/index.js",
  "module": "./dist/index.es.js",

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -1,23 +1,55 @@
 /*Default button class*/
-.button {
+.rcf-button {
  border-radius:6px;
  display:inline-block;
  cursor:pointer;
  padding:6px 24px;
  text-decoration:none;
 }
 
-.button:active {
+.rcf-button:active {
  position:relative;
  top:1px;
 }
+
+.rcf-button[disabled],
+.rcf-button[disabled]:hover,
+.rcf-button[disabled]:focus
+.rcf-button[disabled]:active{
+ color: #00000040;
+ border-color: #d9d9d9;
+ background: #f5f5f5;
+ text-shadow: none;
+ box-shadow: none;
+}
+
+.rcf-button[disabled]{
+ cursor: not-allowed;
+}
+
+.rcf-button[disabled]{
+ border-color: #d9d9d9;
+ background: #f5f5f5;
+ text-shadow: none;
+ box-shadow: none;
+}
 /*End of Default Class*/
 
+/*Disabled Link*/
+.rcf-button.link[disabled],
+.rcf-button.link[disabled]:hover,
+.rcf-button.link[disabled]:focus
+.rcf-button.link[disabled]:active{
+ background-color: transparent;
+ background: transparent;
+}
+/*End ofDisabled Link*/
+
 /*Primary*/
 .primary {
  box-shadow:inset 0px 1px 0px 0px #a4e271;
  background-color:#89c403;
- border:1px solid #74b807;
+ border:1px solid #89c403;
  color:#ffffff;
  text-shadow:0px 1px 0px #528009;
 }
@@ -39,4 +71,12 @@
 .secondary:hover {
  background-color:#2e6eb8;
 }
-/*End of Secondary Class*/
+/*End of Secondary Class*/
+
+/*Link Class*/
+.link {
+ background-color: transparent;
+ border: 0px;
+ color:#1570cd;
+}
+/*End of Link Class*/
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,31 +3,48 @@ import { valueEmpty } from '../../utils/Utils';
 import './Button.css';
 import { types } from '../../interface/ButtonTypes';
 
-type buttonType = 'primary' | 'secondary' | 'link';
+export type buttonType = 'primary' | 'secondary' | 'link';
 
-type IProps = {
+export type NativeButtonProps = Omit<
+ React.ButtonHTMLAttributes<any>,
+ 'type' | 'onClick'
+>;
+export type BaseButtonProps = {
+ /**
+ * The type of the Button
+ */
  buttonType: buttonType;
+ /**
+ * The label of the button
+ */
  label: string;
+ /**
+ * callback when button clicked
+ * @param event
+ */
  onClick?(event: MouseEvent): void;
 };
 
-type IState = {};
+export type ButtonProps = NativeButtonProps & BaseButtonProps;
 
-class Button extends React.Component<IProps, IState> {
- defaultButtonClass = 'button';
+type ButtonState = {};
+
+class Button extends React.Component<ButtonProps, ButtonState> {
+ defaultButtonClass = 'rcf-button';
 
  static defaultProps = {
  type: types.primary,
  label: '',
  };
 
- constructor(props: IProps) {
+ constructor(props: ButtonProps) {
  super(props);
  }
 
  render() {
  return (
  <button
+ {...this.props}
  className={this.defaultButtonClass + ' ' + this._resolveClassName()}
  onClick={(event: any) => {
  this.props.onClick && this.props.onClick(event);

diff --git a/src/stories/Button.stories.mdx b/src/stories/Button.stories.mdx
@@ -3,7 +3,7 @@ import pkg from '../../package.json';
 import Button from '../components/Button';
 
 <Meta
- title={'Button - v.' + pkg.version}
+ title={'React Components Free v.' + pkg.version + '/Button'}
  component={Button}
  argTypes={{
  label: { control: 'text' },
@@ -27,7 +27,7 @@ Primary.args = {
  label: 'Primary Button',
 };
 
-<Story name='primary'>{Primary}</Story>
+<Story name='Primary'>{Primary}</Story>
 
 ```jsx
 <Button label='Primary Button' buttonType='primary'></Button>
@@ -41,12 +41,50 @@ Secondary.args = {
  label: 'Secondary Button',
 };
 
-<Story name='secondary'>{Secondary}</Story>
+<Story name='Secondary'>{Secondary}</Story>
 
 ```jsx
 <Button label='Secondary Button' buttonType='secondary'></Button>
 ```
 
+### Button link
+
+export const Link = Template.bind({});
+Link.args = {
+ buttonType: 'link',
+ label: 'Link Button',
+};
+
+<Story name='Link'>{Link}</Story>
+
+```jsx
+<Button label='Link Button' buttonType='link'></Button>
+```
+
+### Button Disabled
+
+export const ButtonDisabled = Template.bind({});
+ButtonDisabled.args = {
+ label: 'Button Disabled',
+ disabled: true,
+};
+
+export const LinkDisabled = Template.bind({});
+LinkDisabled.args = {
+ label: 'Link Disabled',
+ buttonType: 'link',
+ disabled: true,
+};
+
+<Story name='Disabled'>{ButtonDisabled}</Story>
+
+<Story name='Link Disabled'>{LinkDisabled}</Story>
+
+```jsx
+<Button label='Button Disabled' disabled={true}></Button>
+<Button label={'Link Disabled'} buttonType={'link'} disabled={true}></Button>
+```
+
 ### Button on Click
 
 export const ButtonOnClick = Template.bind({});

diff --git a/src/stories/Modal.stories.mdx b/src/stories/Modal.stories.mdx
@@ -6,7 +6,7 @@ import Button from '../components/Button';
 import pkg from '../../package.json';
 
 <Meta
- title={'Modal - v.' + pkg.version}
+ title={'React Components Free v.' + pkg.version + '/Modal'}
  argTypes={{ onClick: { action: 'clicked' } }}
  component={Modal}
 />
@@ -15,21 +15,21 @@ import pkg from '../../package.json';
 
 ### Modal Default
 
-<Story name='modalDefault'>
+<Story name='Default'>
  <VisibilityToggler modalProperties={{ visibility: false }} />
 </Story>
 
 ### Modal With title
 
-<Story name='modalWithTitle'>
+<Story name='With Title'>
  <VisibilityToggler
  modalProperties={{ visibility: false, title: 'Modal with title' }}
  />
 </Story>
 
 ### Modal With Footer
 
-<Story name='modalWithFooter'>
+<Story name='With Footer'>
  <VisibilityToggler
  modalProperties={{
  visibility: false,
@@ -48,7 +48,7 @@ import pkg from '../../package.json';
 
 ### Not Closable Modal
 
-<Story name='notClosableModal'>
+<Story name='Not Closable'>
  <VisibilityToggler
  modalProperties={{
  visibility: false,
@@ -62,7 +62,7 @@ import pkg from '../../package.json';
 
 ### Custom container class name
 
-<Story name='customContainerClassName'>
+<Story name='Custom Container Class Name'>
  <VisibilityToggler
  modalProperties={{
  visibility: false,
@@ -76,7 +76,7 @@ import pkg from '../../package.json';
 
 ### Custom close icon
 
-<Story name='customCloseIcon'>
+<Story name='Custom Close Icon'>
  <VisibilityToggler
  modalProperties={{
  visibility: false,