@onewelcome/react-lib-components 0.1.4-alpha → 0.1.7-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.4-alpha",
+  "version": "0.1.7-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Button/BaseButton.module.scss

@@ -1,20 +1,5 @@
-.button {
-  border-width: var(--button-border-width);
-  border-style: var(--button-border-style);
-  border-radius: var(--button-border-radius);
-  font-size: var(--button-font-size);
-  line-height: var(--button-font-size);
-  margin: 0;
-  padding: 0.5rem 1.25rem;
-  min-height: 2.5rem;
-  cursor: pointer;
-  transition-property: color, background-color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  font-family: var(--font-family);
+@import '../mixins.module.scss';
 
-  &:disabled {
-    color: var(--greyed-out);
-    cursor: not-allowed;
-  }
+.button {
+  @include buttonBase();
 }

package/src/Button/Button.module.scss

@@ -1,323 +1,16 @@
 @import '../readyclasses.module.scss';
+@import '../mixins.module.scss';
 
 .fill {
-  color: var(--button-fill-text-color);
-  font-weight: bold;
-
-  &.primary:not(:disabled) {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-
-    @include focusOutline(var(--color-primary));
-
-    &:hover,
-    &:focus {
-      color: var(--color-primary);
-    }
-
-    &:active {
-      position: relative;
-      color: var(--color-primary);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-primary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.secondary:not(:disabled) {
-    background-color: var(--color-secondary);
-    border-color: var(--color-secondary);
-
-    @include focusOutline(var(--color-secondary));
-
-    &:hover,
-    &:focus {
-      color: var(--color-secondary);
-    }
-
-    &:active {
-      position: relative;
-      color: var(--color-secondary);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-secondary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.tertiary:not(:disabled) {
-    background-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
-
-    @include focusOutline(var(--color-tertiary));
-
-    &:hover,
-    &:focus {
-      color: var(--color-tertiary);
-    }
-
-    &:active {
-      position: relative;
-      color: var(--color-tertiary);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-tertiary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.default:not(:disabled) {
-    background-color: var(--default);
-    border-color: var(--default);
-
-    @include focusOutline(var(--default));
-
-    &:hover,
-    &:focus {
-      color: var(--default);
-    }
-
-    &:active {
-      position: relative;
-      color: var(--default);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--default);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &:hover:not(:disabled),
-  &:focus:not(:disabled),
-  &:active:not(:disabled) {
-    background-color: var(--button-fill-background-color);
-  }
-
-  &:disabled {
-    background-color: var(--disabled);
-    border-color: var(--disabled);
-  }
+  @include button('fill');
 }
 
 .outline {
-  background-color: var(--button-fill-background-color);
-  font-weight: bold;
-
-  &.primary:not(:disabled) {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-
-    @include focusOutline(var(--color-primary));
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-primary);
-    }
-  }
-
-  &.secondary:not(:disabled) {
-    border-color: var(--color-secondary);
-    color: var(--color-secondary);
-
-    @include focusOutline(var(--color-secondary));
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-secondary);
-    }
-  }
-
-  &.tertiary:not(:disabled) {
-    border-color: var(--color-tertiary);
-    color: var(--color-tertiary);
-
-    @include focusOutline(var(--color-tertiary));
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-tertiary);
-    }
-  }
-
-  &.default:not(:disabled) {
-    border-color: var(--default);
-    color: var(--default);
-
-    @include focusOutline(var(--default));
-
-    &:hover,
-    &:focus {
-      background-color: var(--default);
-    }
-  }
-
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    color: var(--button-outline-hover-text-color);
-  }
-
-  &:disabled {
-    border-color: var(--greyed-out);
-    background-color: transparent;
-  }
+  @include button('outline');
 }
 
 .text {
-  border-color: transparent;
-  background-color: transparent;
-
-  &.primary:not(:disabled) {
-    color: var(--color-primary);
-
-    @include focusOutline(var(--color-primary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-primary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-primary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-primary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.secondary:not(:disabled) {
-    color: var(--color-secondary);
-
-    @include focusOutline(var(--color-secondary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-secondary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-secondary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-secondary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.tertiary:not(:disabled) {
-    color: var(--color-tertiary);
-
-    @include focusOutline(var(--color-tertiary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-tertiary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-tertiary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-tertiary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.default:not(:disabled) {
-    color: var(--default);
-
-    @include focusOutline(var(--default));
-
-    &:hover,
-    &:focus {
-      border-color: var(--default);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--default);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: 0;
-        width: 100%;
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--default);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
+  @include button('text');
 }
 
 .has-icon {

package/src/Button/IconButton.module.scss

@@ -1,4 +1,5 @@
 @import '../readyclasses.module.scss';
+@import '../mixins.module.scss';
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -8,154 +9,46 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: auto;
 
-  svg {
+  span {
     vertical-align: top;
   }
 
   /** Sizes **/
   &.button-s {
-    svg {
-      font-size: 14px;
+    span {
+      font-size: 0.75rem;
     }
-    width: 30px;
-    height: 30px;
+    width: 1.875rem;
+    height: 1.875rem;
   }
 
   &.button-m {
-    svg {
-      font-size: 24px;
+    span {
+      font-size: 1rem;
     }
-    width: 40px;
-    height: 40px;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
   &.button-l {
-    svg {
-      font-size: 34px;
+    span {
+      font-size: 1.375rem;
     }
-    width: 50px;
-    height: 50px;
+    width: 3.125rem;
+    height: 3.125rem;
   }
 
-  /** Colors **/
-  &.primary:not(:disabled) {
-    color: var(--color-primary);
-
-    @include focusOutline(var(--color-primary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-primary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-primary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        width: calc(100% + var(--button-border-width));
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-primary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
-  }
-
-  &.secondary:not(:disabled) {
-    color: var(--color-secondary);
-
-    @include focusOutline(var(--color-secondary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-secondary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-secondary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        width: calc(100% + var(--button-border-width));
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-secondary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
+  &.fill {
+    @include button('fill', 'icon');
   }
 
-  &.tertiary:not(:disabled) {
-    color: var(--color-tertiary);
-
-    @include focusOutline(var(--color-tertiary));
-
-    &:hover,
-    &:focus {
-      border-color: var(--color-tertiary);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--color-tertiary);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        width: calc(100% + var(--button-border-width));
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--color-tertiary);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
+  &.text {
+    @include button('text', 'icon');
   }
 
-  &.default {
-    color: var(--default);
-
-    @include focusOutline(var(--default));
-
-    &:hover,
-    &:focus {
-      border-color: var(--default);
-    }
-
-    &:active {
-      background-color: transparent;
-      position: relative;
-      color: var(--default);
-      border-color: var(--button-fill-background-color);
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
-        width: calc(100% + var(--button-border-width));
-        height: calc(100% + var(--button-border-width));
-        background-color: var(--default);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
-    }
+  &.outline {
+    @include button('outline', 'icon');
   }
 }

package/src/Button/IconButton.test.tsx

@@ -79,4 +79,28 @@ describe('Different variants of the button', () => {
     }));
     expect(iconButton.classList.contains('tertiary')).toBe(true);
   });
+
+  it('should have a class of "fill"', () => {
+    const { iconButton } = createIconButton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'fill',
+    }));
+    expect(iconButton.classList.contains('fill')).toBe(true);
+  });
+
+  it('should have a class of "outline"', () => {
+    const { iconButton } = createIconButton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'outline',
+    }));
+    expect(iconButton.classList.contains('outline')).toBe(true);
+  });
+
+  it('should have a class of "text"', () => {
+    const { iconButton } = createIconButton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'text',
+    }));
+    expect(iconButton.classList.contains('text')).toBe(true);
+  });
 });

package/src/Button/IconButton.tsx

@@ -6,18 +6,23 @@ import readyclasses from '../readyclasses.module.scss';
 export interface Props extends BaseButtonProps {
   children?: React.ReactNode;
   iconSize?: 's' | 'm' | 'l';
+  variant?: 'text' | 'fill' | 'outline';
   className?: string;
   title?: string;
 }
 
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, color = 'primary', iconSize = 'm', title, className, ...rest }, ref) => {
+  (
+    { children, color = 'primary', variant = 'text', iconSize = 'm', title, className, ...rest },
+    ref
+  ) => {
     if (!title) {
       console.error("Please make sure to specify a 'title' prop to your IconButton component! ");
     }
 
     const iconButtonClasses = [
       classes['icon-button'],
+      classes[variant],
       classes[color],
       classes['button-' + iconSize],
     ];