@newtonschool/grauity 0.1.11 → 1.0.0

package/ui/elements/Button/types.ts

@@ -1,282 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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: flex;
-    align-items: center;
-    justify-content: center;
-    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,139 +0,0 @@
-import classnames from 'classnames';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-
-import {
-    GRAUITY_ICON_FLIPPED_CHOICES,
-    GRAUITY_ICON_ROTATED_CHOICES,
-    GRAUITY_ICON_SIZES,
-    ICON_TAGS,
-} from '../../core';
-import { useKeyOnly, useValueAndKey } from '../../helpers';
-import { StyledIcon } from './Icon.styles';
-import { IconProps } from './types';
-
-/**
- * An icon is a glyph used to represent something else.
- */
-function Icon({
-    ariaHidden,
-    ariaLabel,
-    as,
-    bordered,
-    circular,
-    color,
-    className,
-    disabled,
-    fitted,
-    flipped,
-    inverted,
-    link,
-    loading,
-    name,
-    rotated,
-    size,
-    style,
-    ...props
-}: IconProps) {
-    const getIconAriaOptions = () => {
-        const ariaOptions: {
-            'aria-hidden'?: string;
-            'aria-label'?: string;
-        } = {};
-
-        if (_.isNil(ariaLabel)) {
-            ariaOptions['aria-hidden'] = 'true';
-        } else {
-            ariaOptions['aria-label'] = ariaLabel;
-        }
-
-        if (!_.isNil(ariaHidden)) {
-            ariaOptions['aria-hidden'] = ariaHidden;
-        }
-
-        return ariaOptions;
-    };
-
-    const handleClick = (e?: any) => {
-        if (disabled) {
-            e.preventDefault();
-            return;
-        }
-
-        _.invoke(props, 'onClick', e, props);
-    };
-
-    const ariaOptions = getIconAriaOptions();
-
-    const classes = classnames(
-        'grauity-icon',
-        `grauity-icon-${name}`,
-        useKeyOnly(color, color),
-        useKeyOnly(bordered, 'bordered'),
-        useKeyOnly(circular, 'circular'),
-        useKeyOnly(disabled, 'disabled'),
-        useKeyOnly(fitted, 'fitted'),
-        useKeyOnly(inverted, 'inverted'),
-        useKeyOnly(link, 'link'),
-        useKeyOnly(loading, 'loading'),
-        useValueAndKey(flipped, 'flipped'),
-        useValueAndKey(rotated, 'rotated'),
-        className
-    );
-
-    return (
-        <StyledIcon
-            as={as}
-            name={name}
-            size={size}
-            onClick={handleClick}
-            color={color}
-            {...ariaOptions}
-            className={classes}
-            style={style}
-            data-testid="testid-icon"
-        />
-    );
-}
-
-Icon.propTypes = {
-    ariaHidden: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    as: PropTypes.elementType,
-    bordered: PropTypes.bool,
-    circular: PropTypes.bool,
-    color: PropTypes.string,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    fitted: PropTypes.bool,
-    flipped: PropTypes.oneOf(GRAUITY_ICON_FLIPPED_CHOICES),
-    inverted: PropTypes.bool,
-    link: PropTypes.bool,
-    loading: PropTypes.bool,
-    name: PropTypes.oneOf(Object.keys(ICON_TAGS)).isRequired,
-    rotated: PropTypes.oneOf(GRAUITY_ICON_ROTATED_CHOICES),
-    size: PropTypes.oneOf(GRAUITY_ICON_SIZES),
-    style: PropTypes.object,
-};
-
-Icon.defaultProps = {
-    ariaHidden: 'true',
-    ariaLabel: undefined,
-    as: 'i',
-    bordered: false,
-    circular: false,
-    color: 'grey',
-    className: undefined,
-    disabled: false,
-    fitted: false,
-    flipped: undefined,
-    inverted: false,
-    link: false,
-    loading: false,
-    rotated: undefined,
-    size: '24',
-    style: undefined,
-};
-
-export default Icon;

package/ui/elements/Icon/index.ts

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

package/ui/elements/Icon/types.ts

@@ -1,96 +0,0 @@
-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 };