@drivy/cobalt 0.22.0 → 0.24.0

package/styles/components/Button/legacy.scss

@@ -1,348 +0,0 @@
-@use "sass:math";
-
-$group-item-spacing: spacing(tight);
-
-@mixin button-sizing(
-  $height: null,
-  $line-height: null,
-  $font-size: null,
-  $horizontal-padding: null
-) {
-  $border-width: 2px;
-  $vertical-padding: math.div($height - $line-height, 2) - $border-width;
-
-  @if $font-size > $line-height {
-    @error "Invalid line-height";
-  }
-
-  min-height: $height;
-  min-width: $height;
-  padding: $vertical-padding $horizontal-padding;
-
-  border-width: $border-width;
-
-  font-size: $font-size;
-  line-height: $line-height;
-}
-
-@mixin button-base {
-  @include button-sizing(
-    $height: 40px,
-    $line-height: 20px,
-    $font-size: 16px,
-    $horizontal-padding: spacing()
-  );
-
-  position: relative;
-
-  display: inline-flex;
-  margin: 0;
-
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-color: color(grey);
-
-  color: color(indigo);
-  text-decoration: none;
-  font-family: font-family(brand);
-  font-weight: 600;
-  text-align: center;
-  white-space: normal;
-
-  border-radius: border-radius(large);
-  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
-  background-color: color(white);
-
-  fill: color(indigo);
-  cursor: pointer;
-  user-select: none;
-  transition-property: background-color, border, box-shadow, color, transform,
-    fill;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
-  appearance: none;
-
-  &:hover {
-    border-color: color(indigo);
-
-    text-decoration: none;
-
-    box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
-
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    border-color: color(indigo, dark);
-
-    color: color(indigo, dark);
-
-    fill: color(indigo, dark);
-    box-shadow: none;
-
-    transform: translateY(0);
-  }
-
-  &.rounded {
-    border-radius: 9999px;
-  }
-}
-
-@mixin button-filled($button-color, $hover-color, $active-color) {
-  border-color: $button-color;
-
-  color: color(white);
-
-  background-color: $button-color;
-  fill: color(white);
-
-  &:hover {
-    border-color: $hover-color;
-
-    color: color(white);
-
-    background-color: $hover-color;
-    fill: color(white);
-  }
-
-  &:active {
-    border-color: $active-color;
-
-    color: color(white);
-
-    background-color: $active-color;
-    fill: color(white);
-  }
-}
-
-.cobalt- {
-  &Button {
-    @include button-base;
-
-    // Hacking specificity for primary and destructive buttons
-    &[disabled][disabled],
-    &[data-disabled]:not([data-disabled="false"]),
-    &.cobalt-Button--disabled {
-      border-color: color(grey);
-
-      color: color(graphite, light);
-
-      opacity: 0.7;
-      cursor: default;
-      background-color: color(grey, lighter);
-      fill: color(grey);
-      box-shadow: none;
-      pointer-events: none;
-    }
-
-    &--fullWidth {
-      display: flex;
-      width: 100%;
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    &--large {
-      @include button-sizing(
-        $height: 56px,
-        $line-height: 24px,
-        $font-size: 18px,
-        $horizontal-padding: spacing(medium)
-      );
-
-      &.cobalt-Button--ghost.cobalt-Button--standalone {
-        margin-left: #{spacing(medium) * -1};
-        margin-right: #{spacing(medium) * -1};
-      }
-    }
-
-    &--inversed:not(.cobalt-Button--destructive):not(.cobalt-Button--primary):not(.cobalt-Button--ghost) {
-      $color: color(white);
-      border-color: rgba($color, 0.7);
-
-      color: $color;
-
-      background-color: transparent;
-      fill: $color;
-      box-shadow: none;
-
-      &:hover {
-        border-color: $color;
-
-        color: $color;
-
-        fill: $color;
-      }
-
-      &:active {
-        border-color: $color;
-
-        color: $color;
-
-        fill: $color;
-      }
-    }
-
-    &--destructive {
-      $color: color(red);
-      color: $color;
-
-      fill: $color;
-
-      &:hover {
-        border-color: $color;
-
-        color: $color;
-
-        fill: $color;
-      }
-
-      &:active {
-        $color: darken($color, 6);
-        border-color: $color;
-
-        color: $color;
-
-        fill: $color;
-      }
-    }
-
-    &--primary {
-      @include button-filled(color(purple), color(indigo), color(indigo, dark));
-    }
-
-    &--primary.cobalt-Button--destructive {
-      @include button-filled(
-        color(red),
-        darken(color(red), 3),
-        darken(color(red), 6)
-      );
-    }
-
-    &--ghost {
-      &,
-      &:hover,
-      &:active,
-      &[disabled][disabled],
-      &.cobalt-Button--disabled {
-        border-color: transparent;
-
-        background-color: transparent;
-        box-shadow: none;
-
-        // stylelint-disable-next-line max-nesting-depth
-        &:not(.cobalt-Button--destructive) {
-          color: color(blue);
-
-          fill: color(blue);
-        }
-      }
-
-      &:hover {
-        background-color: rgba(color(blue), 0.06);
-
-        transform: none;
-      }
-
-      &.cobalt-Button--standalone {
-        margin-left: #{spacing() * -1};
-        margin-right: #{spacing() * -1};
-      }
-    }
-
-    &--ghost.cobalt-Button--destructive {
-      &:hover {
-        background-color: rgba(color(red), 0.06);
-      }
-    }
-
-    &--gmail {
-      $brand-color: #dd4b39;
-
-      @include button-filled(
-        $brand-color,
-        darken($brand-color, 6),
-        darken($brand-color, 12)
-      );
-    }
-
-    &--facebook {
-      $brand-color: #3b5998;
-
-      @include button-filled(
-        $brand-color,
-        darken($brand-color, 6),
-        darken($brand-color, 12)
-      );
-    }
-
-    &--twitter {
-      $brand-color: #1da1f2;
-
-      @include button-filled(
-        $brand-color,
-        darken($brand-color, 6),
-        darken($brand-color, 12)
-      );
-    }
-
-    &--whatsapp {
-      $brand-color: #25d366;
-
-      @include button-filled(
-        $brand-color,
-        darken($brand-color, 6),
-        darken($brand-color, 12)
-      );
-    }
-  }
-
-  &Button__Icon {
-    // icons are displayed in 24x24px, the following lines prevents the icon
-    // from adding to the height of the button
-    margin-top: -2px;
-    margin-bottom: -2px;
-
-    &:first-child {
-      margin-right: spacing(extra-tight);
-    }
-
-    &:last-child {
-      margin-left: spacing(extra-tight);
-    }
-  }
-
-  &ButtonGroup {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: (-1 * $group-item-spacing);
-    margin-left: (-1 * $group-item-spacing);
-  }
-
-  &ButtonGroup__Item {
-    margin-top: $group-item-spacing;
-    margin-left: $group-item-spacing;
-  }
-
-  &ButtonGroup--fullWidth {
-    .cobalt-ButtonGroup__Item {
-      flex: 1 1 auto;
-
-      .cobalt-Button {
-        display: flex;
-        width: 100%;
-      }
-    }
-  }
-
-  &ButtonGroup--alignRight {
-    justify-content: flex-end;
-  }
-
-  &ButtonGroup--alignCenter {
-    justify-content: center;
-  }
-}

package/types/components/Button/Button.d.ts

@@ -1,28 +0,0 @@
-import { Ref } from "react";
-import { GhostButtonPropsType } from "../Buttons/GhostButton";
-import { InversedButtonPropsType } from "../Buttons/InversedButton";
-import { DefaultButtonPropsType } from "../Buttons/DefaultButton";
-declare type withButtonRef<Props> = Props & {
-    forwardedRef?: Ref<HTMLButtonElement>;
-};
-/**
- * We add API only props here since it's not related to the Buttons subcomponents
- */
-declare type InversedButtonAPIPropsType = InversedButtonPropsType & {
-    inversed?: true;
-};
-declare type GhostButtonAPIPropsType = GhostButtonPropsType & {
-    ghost?: true;
-};
-declare type DefaultButtonAPIPropsType = DefaultButtonPropsType;
-/**
- * Overloads
- */
-declare type ButtonOverload = {
-    (props: withButtonRef<InversedButtonAPIPropsType>): JSX.Element;
-    (props: withButtonRef<GhostButtonAPIPropsType>): JSX.Element;
-    (props: withButtonRef<DefaultButtonAPIPropsType>): JSX.Element;
-};
-export declare type ButtonPropsType = withButtonRef<InversedButtonAPIPropsType> | withButtonRef<GhostButtonAPIPropsType> | withButtonRef<DefaultButtonAPIPropsType>;
-declare const Button: ButtonOverload;
-export default Button;

package/types/components/Button/Link.d.ts

@@ -1,28 +0,0 @@
-import { Ref } from "react";
-import { GhostLinkPropsType } from "../Buttons/GhostButton";
-import { InversedLinkPropsType } from "../Buttons/InversedButton";
-import { DefaultLinkPropsType } from "../Buttons/DefaultButton";
-declare type withAnchorRef<Props> = Props & {
-    forwardedRef?: Ref<HTMLAnchorElement>;
-};
-/**
- * We add API only props here since it's not related to the Buttons subcomponents
- */
-declare type InversedLinkAPIPropsType = InversedLinkPropsType & {
-    inversed?: true;
-};
-declare type GhostLinkAPIPropsType = GhostLinkPropsType & {
-    ghost?: true;
-};
-declare type DefaultLinkAPIPropsType = DefaultLinkPropsType;
-/**
- * Overloads
- */
-declare type LinkOverload = {
-    (props: withAnchorRef<InversedLinkAPIPropsType>): JSX.Element;
-    (props: withAnchorRef<GhostLinkAPIPropsType>): JSX.Element;
-    (props: withAnchorRef<DefaultLinkAPIPropsType>): JSX.Element;
-};
-export declare type ButtonLinkPropsType = withAnchorRef<InversedLinkAPIPropsType> | withAnchorRef<GhostLinkAPIPropsType> | withAnchorRef<DefaultLinkAPIPropsType>;
-declare const Link: LinkOverload;
-export default Link;

package/types/components/Button/index.d.ts

@@ -1,75 +0,0 @@
-import _React from "react";
-import { ButtonPropsType as _ButtonPropsType } from "./Button";
-import { ButtonLinkPropsType as _ButtonLinkPropsType } from "./Link";
-import { ButtonsGroupProps as _ButtonGroupProps } from "../Buttons/ButtonsGroup";
-export declare type ButtonPropsType = _ButtonPropsType;
-export declare type ButtonLinkPropsType = _ButtonLinkPropsType;
-export declare type ButtonGroupProps = _ButtonGroupProps;
-export declare const ButtonGroup: ({ className, children, align }: _ButtonGroupProps) => JSX.Element;
-export declare const Button: {
-    (props: Record<string, unknown> & import("../Buttons/helpers").ButtonCommonPropsType & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        loading?: boolean | undefined;
-        href?: undefined;
-    } & {
-        inversed?: true | undefined;
-    } & {
-        forwardedRef?: _React.Ref<HTMLButtonElement> | undefined;
-    }): JSX.Element;
-    (props: {
-        standalone?: boolean | undefined;
-        destructive?: boolean | undefined;
-    } & import("../Buttons/helpers").ButtonCommonPropsType & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        loading?: boolean | undefined;
-        href?: undefined;
-    } & {
-        ghost?: true | undefined;
-    } & {
-        forwardedRef?: _React.Ref<HTMLButtonElement> | undefined;
-    }): JSX.Element;
-    (props: {
-        primary?: boolean | undefined;
-        destructive?: boolean | undefined;
-        selected?: boolean | undefined;
-    } & import("../Buttons/helpers").ButtonCommonPropsType & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        loading?: boolean | undefined;
-        href?: undefined;
-    } & {
-        forwardedRef?: _React.Ref<HTMLButtonElement> | undefined;
-    }): JSX.Element;
-} & {
-    Link: {
-        (props: Record<string, unknown> & import("../Buttons/helpers").ButtonCommonPropsType & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-            loading?: boolean | undefined;
-            disabled?: boolean | undefined;
-            href?: string | undefined;
-        } & {
-            inversed?: true | undefined;
-        } & {
-            forwardedRef?: _React.Ref<HTMLAnchorElement> | undefined;
-        }): JSX.Element;
-        (props: {
-            standalone?: boolean | undefined;
-            destructive?: boolean | undefined;
-        } & import("../Buttons/helpers").ButtonCommonPropsType & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-            loading?: boolean | undefined;
-            disabled?: boolean | undefined;
-            href?: string | undefined;
-        } & {
-            ghost?: true | undefined;
-        } & {
-            forwardedRef?: _React.Ref<HTMLAnchorElement> | undefined;
-        }): JSX.Element;
-        (props: {
-            primary?: boolean | undefined;
-            destructive?: boolean | undefined;
-            selected?: boolean | undefined;
-        } & import("../Buttons/helpers").ButtonCommonPropsType & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-            loading?: boolean | undefined;
-            disabled?: boolean | undefined;
-            href?: string | undefined;
-        } & {
-            forwardedRef?: _React.Ref<HTMLAnchorElement> | undefined;
-        }): JSX.Element;
-    };
-};
-export default Button;