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

package/src/index.ts

@@ -1,9 +1,19 @@
-/** Components */
+/* Components */
 export { BaseStyling } from './_BaseStyling_/BaseStyling';
-export { Typography } from './Typography/Typography';
-export { Button } from './Button/Button';
-export { Link } from './Link/Link';
-export { IconButton } from './Button/IconButton';
+export { Button, Props as ButtonProps } from './Button/Button';
+export { Breadcrumbs, Props as BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs';
+export { ContextMenu, Props as ContextMenuProps } from './ContextMenu/ContextMenu';
+export { ContextMenuItem, Props as ContextMenuItemProps } from './ContextMenu/ContextMenuItem';
+export { Link, Props as LinkProps, AnchorType } from './Link/Link';
+export { Icon, Icons, Props as IconProps } from './Icon/Icon';
+export { IconButton, Props as IconButtonProps } from './Button/IconButton';
+export { Tab, Props as TabProps } from './Tabs/Tab';
+export { Tabs, Props as TabsProps } from './Tabs/Tabs';
+export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
+export { Tile, Props as TileProps } from './Tiles/Tile';
+export { Tiles, Props as TilesProps } from './Tiles/Tiles';
+export { Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
+export { Typography, Variant, Props as TypographyProps } from './Typography/Typography';
 export {
   Pagination,
   Props as PaginationProps,
@@ -11,58 +21,79 @@ export {
   PaginationTranslations,
   PageSize,
 } from './Pagination/Pagination';
-export { Icon, Icons } from './Icon/Icon';
-
-export { Tabs, Props as TabsProps } from './Tabs/Tabs';
-export { Tab, Props as TabProps } from './Tabs/Tab';
-
-export { Dialog } from './Notifications/Dialog/Dialog';
-export { Modal } from './Notifications/Modal/Modal';
-export { ModalActions } from './Notifications/Modal/ModalActions/ModalActions';
-export { ModalContent } from './Notifications/Modal/ModalContent/ModalContent';
-export { ModalHeader } from './Notifications/Modal/ModalHeader/ModalHeader';
-export { DiscardChangesModal } from './Notifications/DiscardChangesModal/DiscardChangesModal';
-export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
-export { Tooltip } from './Tooltip/Tooltip';
-export { Tiles } from './Tiles/Tiles';
-export { Tile } from './Tiles/Tile';
-export { ContextMenu } from './ContextMenu/ContextMenu';
-export { ContextMenuItem } from './ContextMenu/ContextMenuItem';
-export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
-
-export { SnackbarProvider } from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
-export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
 
+/* Utils */
 export { useRepeater } from './hooks/useRepeater';
-
 export { generateID } from './util/helper';
 
+/* Notifications */
+export { Modal, Props as ModalProps } from './Notifications/Modal/Modal';
+export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
+export {
+  Dialog,
+  Props as DialogProps,
+  Action as DialogAction,
+} from './Notifications/Dialog/Dialog';
+export {
+  DiscardChangesModal,
+  Props as DiscardChangesModalProps,
+} from './Notifications/DiscardChangesModal/DiscardChangesModal';
+export {
+  ModalActions,
+  Props as ModalActionsProps,
+} from './Notifications/Modal/ModalActions/ModalActions';
+export {
+  ModalContent,
+  Props as ModalContentProps,
+} from './Notifications/Modal/ModalContent/ModalContent';
+export {
+  ModalHeader,
+  Props as ModalHeaderProps,
+} from './Notifications/Modal/ModalHeader/ModalHeader';
+export {
+  SlideInModal,
+  Props as SlideInModalProps,
+} from './Notifications/SlideInModal/SlideInModal';
+export {
+  SnackbarProvider,
+  Props as SnackbarProviderProps,
+} from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
+
 /** Form components */
-export { Form } from './Form/Form';
-export { Fieldset } from './Form/Fieldset/Fieldset';
-export { FormControl } from './Form/FormControl/FormControl';
-export { FormGroup } from './Form/FormGroup/FormGroup';
-export { FormHelperText } from './Form/FormHelperText/FormHelperText';
-export { Label } from './Form/Label/Label';
-export { Select } from './Form/Select/Select';
-export { Option } from './Form/Select/Option';
-export { Textarea } from './Form/Textarea/Textarea';
-export { CheckboxWrapper } from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
-export { InputWrapper } from './Form/Wrapper/InputWrapper/InputWrapper';
-export { RadioWrapper } from './Form/Wrapper/RadioWrapper/RadioWrapper';
-export { SelectWrapper } from './Form/Wrapper/SelectWrapper/SelectWrapper';
-export { TextareaWrapper } from './Form/Wrapper/TextareaWrapper/TextareaWrapper';
-export { Input } from './Form/Input/Input';
-export { Radio } from './Form/Radio/Radio';
-export { Checkbox } from './Form/Checkbox/Checkbox';
-export { Toggle } from './Form/Toggle/Toggle';
+export { Checkbox, Props as CheckboxProps } from './Form/Checkbox/Checkbox';
+export { Fieldset, Props as FieldsetProps } from './Form/Fieldset/Fieldset';
+export { Form, Props as FormProps } from './Form/Form';
+export { FormControl, Props as FormControlProps } from './Form/FormControl/FormControl';
+export { FormGroup, Props as FormGroupProps } from './Form/FormGroup/FormGroup';
+export { FormHelperText, Props as FormHelperTextProps } from './Form/FormHelperText/FormHelperText';
+export { Input, Props as InputProps, Type as InputType } from './Form/Input/Input';
+export { InputWrapper, Props as InputWrapperProps } from './Form/Wrapper/InputWrapper/InputWrapper';
+export { Label, Props as LabelProps } from './Form/Label/Label';
+export { Option, Props as OptionProps } from './Form/Select/Option';
+export { Radio, Props as RadioProps } from './Form/Radio/Radio';
+export { RadioWrapper, Props as RadioWrapperProps } from './Form/Wrapper/RadioWrapper/RadioWrapper';
+export { Select, Props as SelectProps } from './Form/Select/Select';
+export { Textarea, Props as TextareaProps } from './Form/Textarea/Textarea';
+export { Toggle, Props as ToggleProps } from './Form/Toggle/Toggle';
+export {
+  CheckboxWrapper,
+  Props as CheckboxWrapperProps,
+} from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
+export {
+  TextareaWrapper,
+  Props as TextareaWrapperProps,
+} from './Form/Wrapper/TextareaWrapper/TextareaWrapper';
+export {
+  SelectWrapper,
+  Props as SelectWrapperProps,
+} from './Form/Wrapper/SelectWrapper/SelectWrapper';
 
 /** Wizard */
+export { Wizard, Props as WizardProps } from './Wizard/Wizard';
+export { WizardActions, Props as WizardActionsProps } from './Wizard/WizardActions/WizardActions';
+export { WizardSteps, Props as WizardStepsProps } from './Wizard/WizardSteps/WizardSteps';
 export {
   BaseWizardSteps,
   Props as BaseWizardStepsProps,
   Step as WizardStep,
 } from './Wizard/BaseWizardSteps/BaseWizardSteps';
-export { WizardActions } from './Wizard/WizardActions/WizardActions';
-export { WizardSteps } from './Wizard/WizardSteps/WizardSteps';
-export { Wizard, Props as WizardProps } from './Wizard/Wizard';

package/src/mixins.module.scss

@@ -0,0 +1,171 @@
+@import './readyclasses.module.scss';
+
+@mixin button($variant: 'text', $type: 'default') {
+  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+
+  @if $variant == 'text' {
+    border-color: transparent;
+    background-color: transparent;
+  } @else if $variant == 'fill' {
+    @if $type == 'default' {
+      color: var(--button-fill-text-color);
+    } @else if $type == 'icon' or $type == 'link' {
+      &:not(#{$disabledSelector}) {
+        color: var(--button-fill-text-color);
+      }
+    }
+    font-weight: bold;
+  } @else if $variant == 'outline' {
+    background-color: var(--button-fill-background-color);
+    font-weight: bold;
+  }
+
+  &.primary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-primary), $variant, $type);
+  }
+  &.secondary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-secondary), $variant, $type);
+  }
+  &.tertiary:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--color-tertiary), $variant, $type);
+  }
+  &.default:not(#{$disabledSelector}) {
+    @include buttonStyles(var(--default), $variant, $type);
+  }
+
+  @if $variant == 'fill' {
+    &:hover:not(#{$disabledSelector}),
+    &:focus:not(#{$disabledSelector}),
+    &:active:not(#{$disabledSelector}) {
+      background-color: var(--button-fill-background-color);
+    }
+
+    &#{$disabledSelector} {
+      background-color: var(--disabled);
+      border-color: var(--disabled);
+    }
+  } @else if $variant == 'outline' {
+    &:hover:not(#{$disabledSelector}),
+    &:focus:not(#{$disabledSelector}) {
+      color: var(--button-outline-hover-text-color);
+    }
+
+    &#{$disabledSelector} {
+      border-color: var(--greyed-out);
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin buttonStyles($color, $variant: 'text', $type: 'default') {
+  @if $variant == 'text' {
+    color: $color;
+  } @else if $variant == 'fill' {
+    border-color: $color;
+    background-color: $color;
+  } @else if $variant == 'outline' {
+    border-color: $color;
+    color: $color;
+  }
+
+  @include focusOutline($color);
+
+  &:hover:not(.disabled),
+  &:focus:not(.disabled) {
+    @if $variant == 'text' {
+      border-color: $color;
+    } @else if $variant == 'fill' {
+      color: $color;
+    } @else if $variant == 'outline' {
+      background-color: $color;
+    }
+  }
+
+  @if $variant == 'text' or $variant == 'fill' {
+    &:active:not(.disabled) {
+      @if $variant == 'text' {
+        background-color: transparent;
+        position: relative;
+        color: $color;
+        border-color: var(--button-fill-background-color);
+      } @else if $variant == 'fill' {
+        position: relative;
+        color: $color;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        @if $variant == 'fill' {
+          top: calc(-1 * var(--button-border-width));
+        } @else {
+          top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
+        }
+        @if $type == 'default' or $type == 'link' {
+          left: 0;
+          width: 100%;
+        } @else if $type == 'icon' {
+          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: $color;
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+  }
+}
+
+@mixin buttonBase($type: 'default') {
+  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+
+  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);
+
+  &#{$disabledSelector} {
+    color: var(--greyed-out);
+    cursor: not-allowed;
+  }
+}
+
+@mixin skeletonLoading() {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--disabled);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}

package/src/readyclasses.module.scss

@@ -9,36 +9,6 @@
   border: 0;
 }
 
-@mixin skeletonLoading() {
-  position: relative;
-  overflow: hidden;
-  background-color: var(--disabled);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(
-      90deg,
-      rgba(#fff, 0) 0,
-      rgba(#fff, 0.2) 20%,
-      rgba(#fff, 0.5) 60%,
-      rgba(#fff, 0)
-    );
-    animation: shimmer 2s infinite;
-    content: '';
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
 .hidden {
   display: none;
 }