beem-component 1.5.6 → 1.5.7

package/src/lib/components/tabs.js

@@ -1,123 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmGrey400,
-  BmPrimaryBlack,
-  BmPrimaryBlue,
-  BmPrimaryWhite,
-} from "./colors";
-import { BmButtonIcon } from "./iconStyles";
-
-export const BmTabItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-  padding: 0rem !important;
-  flex-wrap: wrap;
-`;
-
-export const BmTabWrapper = styled.button`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0.714rem 1.714rem;
-  background: ${BmPrimaryWhite};
-  box-shadow: inset 0rem -0.214rem 0rem ${({ state }) => {
-      if (state === "active") return `${BmPrimaryBlue}`;
-      if (state === "active") return `${BmPrimaryBlue}`;
-      if (state === "disabled") return "transparent";
-      return "transparent";
-    }};
-  &:hover {
-    box-shadow: inset 0rem -0.214rem 0rem ${({ state }) => {
-        if (state === "disabled") return "transparent";
-        return `${BmGrey400}`;
-      }};
-  }
-  border: none;
-`;
-
-export const BmTabText = styled.h3`
-  letter-spacing: -0.02em;
-  color: ${({ state, color }) => {
-    if (state === "disabled") return `${BmGrey400}`;
-    if (color && state !== "disabled") return color;
-    return `${BmPrimaryBlack}`;
-  }};
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-`;
-
-export const BmLeftTabIcon = styled.div`
-  padding-right: 0.714rem !important;
-`;
-
-export const BmRightTabIcon = styled.div`
-  padding-left: 0.714rem !important;
-`;
-
-export const BmTab = (props) => {
-  const {
-    variant,
-    size,
-    disabled,
-    children,
-    leadingIcon,
-    trailingIcon,
-    color,
-    state,
-    ...rest
-  } = props;
-  const IconColor =
-    state === "disabled"
-      ? `${BmGrey400}`
-      : color && state !== "disabled"
-      ? color
-      : `${BmPrimaryBlack}`;
-  return (
-    <BmTabWrapper
-      size={size}
-      variant={variant}
-      disabled={state === "disabled" ? true : false}
-      state={state}
-      {...rest}
-    >
-      {leadingIcon && (
-        <BmLeftTabIcon>
-          <BmButtonIcon
-            icon={leadingIcon}
-            disabled={state === "disabled" ? true : false}
-            variant={variant}
-            size={size}
-            state={state}
-            color={IconColor}
-          />
-        </BmLeftTabIcon>
-      )}
-      <BmTabText
-        disabled={state === "disabled" ? true : false}
-        variant={variant}
-        size={size}
-        state={state}
-        color={color}
-      >
-        {children}
-      </BmTabText>
-      {trailingIcon && (
-        <BmRightTabIcon>
-          <BmButtonIcon
-            icon={trailingIcon}
-            disabled={state === "disabled" ? true : false}
-            state={state}
-            variant={variant}
-            size={size}
-            color={IconColor}
-          />
-        </BmRightTabIcon>
-      )}
-    </BmTabWrapper>
-  );
-};

package/src/lib/components/tags.js

@@ -1,101 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import {
-  BmPrimaryWhite,
-  BmSecondaryDarkGreen,
-  BmSecondaryRed,
-  BmPrimaryBlack,
-  BmGrey100,
-  BmGrey400,
-  BmPrimaryGold,
-} from "../components/colors";
-import { BmTagIcon } from "../components/iconStyles";
-
-const BeemTag = styled.button`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.25rem;
-  height: ${({ size }) => {
-    if (size === "small") return "1.286rem";
-    if (size === "default") return "1.714rem";
-    return "1.714rem";
-  }};
-  padding: ${({ size }) => {
-    if (size === "small") return "0.071rem 0.571rem";
-    if (size === "default") return "0.214rem 0.571rem";
-    return "0.214rem 0.571rem";
-  }};
-  background: ${({ variant }) => {
-    if (variant === "neutral") return `${BmGrey100}`;
-    if (variant === "success") return `${BmSecondaryDarkGreen}`;
-    if (variant === "warning") return `${BmPrimaryGold}`;
-    if (variant === "error") return `${BmSecondaryRed}`;
-    if (variant === "light") return `${BmPrimaryWhite}`;
-    if (variant === undefined) return `${BmGrey100}`;
-    return variant;
-  }};
-  border: 0.071rem solid
-    ${({ variant }) => {
-      if (variant === "neutral") return `${BmGrey100}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "warning") return `${BmPrimaryGold}`;
-      if (variant === "error") return `${BmSecondaryRed}`;
-      if (variant === "light") return `${BmGrey400}`;
-      return `${BmGrey100}`;
-    }};
-  border-radius: 0.25rem;
-`;
-
-const TagText = styled.p`
-  color: ${({ variant }) => {
-    if (variant === "light" || variant === "neutral")
-      return `${BmPrimaryBlack}`;
-    return `${BmPrimaryWhite}`;
-  }};
-  text-transform: uppercase;
-`;
-
-export const BmLeftIcon = styled(BmTagIcon)`
-  margin-right: 0.643rem;
-`;
-
-export const BmRightIcon = styled(BmTagIcon)`
-  margin-left: 0.643rem;
-`;
-
-export const BmTag = (props) => {
-  const {
-    variant,
-    size,
-    disabled,
-    children,
-    leadingIcon,
-    trailingIcon,
-    ...rest
-  } = props;
-  return (
-    <BeemTag size={size} variant={variant} disabled={disabled} {...rest}>
-      {leadingIcon && (
-        <BmLeftIcon
-          disabled={disabled}
-          icon={leadingIcon}
-          variant={variant}
-          size={size}
-        />
-      )}
-      <TagText disabled={disabled} variant={variant} size={size}>
-        {children}
-      </TagText>
-      {trailingIcon && (
-        <BmRightIcon
-          icon={trailingIcon}
-          disabled={disabled}
-          variant={variant}
-          size={size}
-        />
-      )}
-    </BeemTag>
-  );
-};

package/src/list.scss

@@ -1,4 +0,0 @@
-.listbox {
-    position: relative;
-    top: 1rem;
-}