@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Button/types.ts

@@ -0,0 +1,282 @@
+import React from 'react';
+
+import { grauityIconName, grauityIconSizeName } from '../../core';
+
+export type ButtonTypeAttribute = 'button' | 'submit' | 'reset';
+
+export type ButtonVariants =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'primary-outlined'
+    | 'secondary-outlined'
+    | 'tertiary-outlined'
+    | 'success-outlined'
+    | 'danger-outlined'
+    | 'warning-outlined';
+
+export type ButtonSizes = 'small' | 'medium' | 'large' | 'extra-large';
+
+export type ButtonIconPositions = 'left' | 'right';
+
+export interface ButtonProps {
+    /**
+     * Variant of the button
+     *
+     * Available choices: `primary`, `secondary`, `tertiary`, `success`, `danger`, `warning`, `primary-outlined`, `secondary-outlined`, `tertiary-outlined`, `success-outlined`, `danger-outlined`, `warning-outlined`
+     *
+     * Default: `primary`
+     * */
+    variant?: ButtonVariants;
+
+    /**
+     * Size of the button
+     * Available choices: `small`, `medium`, `large`
+     *
+     * Default: `medium`
+     * */
+    size?: ButtonSizes;
+
+    /**
+     * Icon to be displayed in the button.
+     * */
+    icon?: grauityIconName;
+
+    /**
+     * Size of the icon
+     * */
+    iconSize?: grauityIconSizeName;
+
+    /**
+     * Position of the icon
+     *
+     * Available choices: `left`, `right`
+     *
+     * Default: `left`
+     * */
+    iconPosition?: ButtonIconPositions;
+
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+
+    /**
+     * Show that the button is inactive
+     *
+     * Default: `false`
+     * */
+    disabled?: boolean;
+
+    /**
+     * Show that the button is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+
+    /**
+     * Function to be called on click
+     *
+     * If the button is disabled, the function will not be called
+     * */
+    onClick?: (e?: any) => void;
+
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+
+    /**
+     * Make the button full width
+     *
+     * Default: `false`
+     * */
+    fullWidth?: boolean;
+
+    /**
+     * Children of the component
+     * */
+    children?: React.ReactNode;
+
+    /**
+     * Type of the button
+     *
+     * Default: `button`
+     * */
+    type?: 'button' | 'submit' | 'reset';
+
+    /**
+     * Aria label for the button
+     * */
+    ariaLabel?: string;
+
+    /**
+     * Tooltip to be displayed on hover, uses the `title` attribute
+     * */
+    tooltip?: string;
+
+    /**
+     * Tab index of the button
+     * */
+    tabIndex?: number;
+
+    /**
+     * Function to be called on mouse enter
+     * */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Function to be called on mouse leave
+     * */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Additional props to be passed to the button element
+     * */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export interface IconButtonProps {
+    /**
+     * Variant of the button
+     *
+     * Available choices: `primary`, `secondary`, `tertiary`, `success`, `danger`, `warning`, `primary-outlined`, `secondary-outlined`, `tertiary-outlined`, `success-outlined`, `danger-outlined`, `warning-outlined`
+     *
+     * Default: `primary`
+     * */
+    variant?: ButtonVariants;
+
+    /**
+     * Size of the button
+     * Available choices: `small`, `medium`, `large`
+     *
+     * Default: `medium`
+     * */
+    size?: ButtonSizes;
+
+    /**
+     * Icon to be displayed in the button.
+     * */
+    icon?: grauityIconName;
+
+    /**
+     * Size of the icon
+     * */
+    iconSize?: grauityIconSizeName;
+
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+
+    /**
+     * Show that the button is inactive
+     *
+     * Default: `false`
+     * */
+    disabled?: boolean;
+
+    /**
+     * Show that the button is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+
+    /**
+     * Function to be called on click
+     *
+     * If the button is disabled, the function will not be called
+     * */
+    onClick?: (e?: any) => void;
+
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+
+    /**
+     * Make the button full width
+     *
+     * Default: `false`
+     * */
+    fullWidth?: boolean;
+
+    /**
+     * Type of the button
+     *
+     * Default: `button`
+     * */
+    type?: 'button' | 'submit' | 'reset';
+
+    /**
+     * Aria label for the button
+     * */
+    ariaLabel?: string;
+
+    /**
+     * Tooltip to be displayed on hover, uses the `title` attribute
+     * */
+    tooltip?: string;
+
+    /**
+     * Tab index of the button
+     * */
+    tabIndex?: number;
+
+    /**
+     * Function to be called on mouse enter
+     * */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Function to be called on mouse leave
+     * */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Additional props to be passed to the button element
+     * */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export interface ButtonComponentProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariants;
+    size?: ButtonSizes;
+    icon?: string | number;
+    iconSize?: string;
+    iconPosition?: 'left' | 'right';
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    style?: React.CSSProperties;
+    onClick?: (e?: any) => void;
+    fullWidth?: boolean;
+    isIconButton?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+    type?: ButtonTypeAttribute;
+    ariaLabel?: string;
+    title?: string;
+    tabIndex?: number;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export interface ButtonContentProps {
+    id?: string;
+    children: React.ReactNode;
+}
+
+export interface ButtonGroupProps {
+    children: React.ReactNode;
+}

package/ui/elements/Icon/Icon.styles.ts

@@ -0,0 +1,98 @@
+import styled, { css, keyframes } from 'styled-components';
+
+import { IconProps } from './types';
+
+const iconLoading = keyframes`
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+`;
+
+export const StyledIcon = styled.i.attrs((props: IconProps) => ({
+    as: props.as || 'i',
+}))<IconProps>`
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    line-height: 1em;
+    backface-visibility: hidden;
+    speak: none;
+    text-decoration: inherit;
+    opacity: 1;
+    text-align: center;
+
+    ${({ size }) => css`
+        font-size: ${size}px;
+    `}
+
+    ${({ color }) => css`
+        color: ${color};
+
+        &.bordered,
+        &.circular {
+            box-shadow: 0 0 0 0.1em ${color} inset;
+            height: 1em;
+            width: 1em;
+
+            &.inverted {
+                color: var(--icon-color-white);
+                background-color: ${color};
+            }
+        }
+
+        &.disabled {
+            color: ${color};
+
+            &.bordered,
+            &.circular {
+                box-shadow: 0 0 0 0.1em ${color} inset;
+                height: 1em;
+                width: 1em;
+
+                &.inverted {
+                    color: var(--disabled-icon-color-white);
+                    background-color: ${color};
+                }
+            }
+        }
+    `}
+
+
+    &.loading {
+        animation: ${iconLoading} 2s linear infinite;
+    }
+
+    &.fitted {
+        width: auto;
+        margin: 0 !important;
+    }
+
+    &.horizontally-flipped {
+        transform: scaleX(-1);
+    }
+
+    &.vertically-flipped {
+        transform: scaleY(-1);
+    }
+
+    &.clockwise-rotated {
+        transform: rotate(90deg);
+    }
+
+    &.counterclockwise-rotated {
+        transform: rotate(-90deg);
+    }
+
+    &.link {
+        cursor: pointer;
+        opacity: 0.8;
+        transition: opacity 0.1s ease-in-out;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &.circular {
+        border-radius: 50%;
+    }
+`;

package/ui/elements/Icon/Icon.tsx

@@ -1,113 +1,21 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import classnames from 'classnames';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import * as React from 'react';
 
 import {
-    getElementTypeFromProps,
-    useKeyOnly,
-    useValueAndKey,
-} from '../../helpers';
-import {
-    GRAUITY_ICON_COLORS,
     GRAUITY_ICON_FLIPPED_CHOICES,
     GRAUITY_ICON_ROTATED_CHOICES,
     GRAUITY_ICON_SIZES,
-    grauityFlippedChoiceName,
-    grauityIconColorName,
-    grauityIconName,
-    grauityIconSizeName,
-    grauityRotatedChoiceName,
     ICON_TAGS,
 } from '../../core';
+import { useKeyOnly, useValueAndKey } from '../../helpers';
+import { StyledIcon } from './Icon.styles';
+import { IconProps } from './types';
 
-export interface IconProps {
-    /**
-     * Icon can have the aria hidden attribute
-     * */
-    ariaHidden?: string;
-
-    /**
-     * Icon can have the aria label attribute
-     * */
-    ariaLabel?: string;
-
-    /**
-     * An element type to render as (string or function).
-     * */
-    as?: React.ElementType;
-
-    /**
-     * Format the icon to appear bordered
-     * */
-    bordered?: boolean;
-
-    /**
-     * Format the icon to appear circular
-     * */
-    circular?: boolean;
-
-    /**
-     * Color of the icon
-     * */
-    color?: grauityIconColorName;
-
-    /**
-     * Additional classes to be added to the component
-     * */
-    className?: string;
-
-    /**
-     * Show that the icon is inactive
-     * */
-    disabled?: boolean;
-
-    /**
-     * Fitted, without space to left or right of Icon
-     * */
-    fitted?: boolean;
-
-    /**
-     * Icon can be flipped
-     * */
-    flipped?: grauityFlippedChoiceName;
-
-    /**
-     * The colors of the icon can be inverted in case of used with border
-     * * */
-    inverted?: boolean;
-
-    /**
-     * Icon can be formatted as a link
-     * */
-    link?: boolean;
-
-    /**
-     * Icon can be used as a simple loader
-     * */
-    loading?: boolean;
-
-    /**
-     * Name of the icon
-     * */
-    name: grauityIconName;
-
-    /**
-     * Icon can be rotated
-     * */
-    rotated?: grauityRotatedChoiceName;
-
-    /**
-     * Size of the icon
-     * */
-    size?: grauityIconSizeName;
-
-    /**
-     * Additional styles to be used over the element
-     * */
-    style?: React.CSSProperties;
-}
-
+/**
+ * An icon is a glyph used to represent something else.
+ */
 function Icon({
     ariaHidden,
     ariaLabel,
@@ -128,8 +36,6 @@ function Icon({
     style,
     ...props
 }: IconProps) {
-    const Element = getElementTypeFromProps({ as });
-
     const getIconAriaOptions = () => {
         const ariaOptions: {
             'aria-hidden'?: string;
@@ -163,7 +69,6 @@ function Icon({
     const classes = classnames(
         'grauity-icon',
         `grauity-icon-${name}`,
-        `size-${size}`,
         useKeyOnly(color, color),
         useKeyOnly(bordered, 'bordered'),
         useKeyOnly(circular, 'circular'),
@@ -178,11 +83,16 @@ function Icon({
     );
 
     return (
-        <Element
+        <StyledIcon
+            as={as}
+            name={name}
+            size={size}
             onClick={handleClick}
+            color={color}
             {...ariaOptions}
             className={classes}
             style={style}
+            data-testid="testid-icon"
         />
     );
 }
@@ -193,7 +103,7 @@ Icon.propTypes = {
     as: PropTypes.elementType,
     bordered: PropTypes.bool,
     circular: PropTypes.bool,
-    color: PropTypes.oneOf(GRAUITY_ICON_COLORS),
+    color: PropTypes.string,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     fitted: PropTypes.bool,
@@ -222,7 +132,7 @@ Icon.defaultProps = {
     link: false,
     loading: false,
     rotated: undefined,
-    size: '16',
+    size: '24',
     style: undefined,
 };
 

package/ui/elements/Icon/index.ts

@@ -1,3 +1,2 @@
-export type { IconProps } from './Icon';
-
 export { default as Icon } from './Icon';
+export { IconProps } from './types';

package/ui/elements/Icon/types.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+    grauityFlippedChoiceName,
+    grauityIconName,
+    grauityIconSizeName,
+    grauityRotatedChoiceName,
+} from 'ui/core';
+
+interface IconProps {
+    /**
+     * Icon can have the aria hidden attribute
+     * */
+    ariaHidden?: string;
+
+    /**
+     * Icon can have the aria label attribute
+     * */
+    ariaLabel?: string;
+
+    /**
+     * An element type to render as (string or function).
+     * */
+    as?: React.ElementType;
+
+    /**
+     * Format the icon to appear bordered
+     * */
+    bordered?: boolean;
+
+    /**
+     * Format the icon to appear circular
+     * */
+    circular?: boolean;
+
+    /**
+     * Color of the icon
+     * */
+    color?: string;
+
+    /**
+     * Additional classes to be added to the component
+     * */
+    className?: string;
+
+    /**
+     * Show that the icon is inactive
+     * */
+    disabled?: boolean;
+
+    /**
+     * Fitted, without space to left or right of Icon
+     * */
+    fitted?: boolean;
+
+    /**
+     * Icon can be flipped
+     * */
+    flipped?: grauityFlippedChoiceName;
+
+    /**
+     * The colors of the icon can be inverted in case of used with border
+     * * */
+    inverted?: boolean;
+
+    /**
+     * Icon can be formatted as a link
+     * */
+    link?: boolean;
+
+    /**
+     * Icon can be used as a simple loader
+     * */
+    loading?: boolean;
+
+    /**
+     * Name of the icon
+     * */
+    name: grauityIconName;
+
+    /**
+     * Icon can be rotated
+     * */
+    rotated?: grauityRotatedChoiceName;
+
+    /**
+     * Size of the icon
+     * */
+    size?: grauityIconSizeName;
+
+    /**
+     * Additional styles to be used over the element
+     * */
+    style?: React.CSSProperties;
+}
+
+export { IconProps };